use oauth for file uploads

client/app/components/Navbar/Navbar.scss

@@ -1,52 +1,63 @@
 @import '../../scss/variables';
 
 .Navbar {
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: $navbarWidth;
-    background-color: $gray2;
-    border-right: 1px solid darken($gray2, 2%);
-    overflow-y: auto;
-    padding-bottom: 10px;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: $navbarWidth;
+  background-color: $gray2;
+  border-right: 1px solid darken($gray2, 2%);
+  overflow-y: auto;
+  padding-bottom: 10px;
 }
 
 .Navbar__header {
-    font-size: 25px;
-    min-height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: $primaryBlue;
-    border-bottom: 1px solid $gray3;
+  font-size: 25px;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: $primaryBlue;
+  border-bottom: 1px solid $gray3;
 }
 
 .Navbar__item {
-    min-height: 50px;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    color: $white;
-    transition: background-color 0.1s linear, color 0.2s linear;
-    
-    &:hover {
-        background-color: $gray1; 
-    }
-    
-    & + .Navbar__item {
-        border-top: 1px solid $gray3;
-    }
-    
+  min-height: 50px;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: $white;
+  transition: background-color 0.1s linear, color 0.2s linear;
+
+  &:hover {
+    background-color: $gray1;
+  }
+
+  & + .Navbar__item {
+    border-top: 1px solid $gray3;
+  }
 }
 
 .Navbar__item--active {
-    padding-left: 4px;
-    border-right: 4px solid $primaryBlue;
-    color: $primaryBlue !important;
+  padding-left: 4px;
+  border-right: 4px solid $primaryBlue;
+  color: $primaryBlue !important;
+}
+
+.Navbar__email {
+  padding-top: 10px;
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  color: $primaryBlue;
+  bottom: 2;
+  left: 2;
+  font-size: 12px;
 }

client/app/components/Navbar/Navbar.tsx

@@ -1,33 +1,70 @@
 import React from 'react';
 import { Link } from 'react-router';
+import jwt_decode from 'jwt-decode';
 
 import './Navbar.scss';
+import { storage } from '../../storage';
 
-// TODO: change url for build
-const redirectUri = 'https://localhost/oauth';
-const oauthUrl = `https://discordapp.com/api/oauth2/authorize?client_id=410818759746650140&redirect_uri=${redirectUri}&response_type=code&scope=guilds%20identify`;
-
-interface Props {
+let oauthUrl: string;
 
+if (!process.env.NODE_ENV) {
+  // dev
+  oauthUrl = `https://discordapp.com/api/oauth2/authorize?client_id=410818759746650140&redirect_uri=https%3A%2F%2Flocalhost%2Foauth&response_type=code&scope=identify%20guilds`;
+} else {
+  // prod
+  oauthUrl = `https://discordapp.com/api/oauth2/authorize?client_id=271998875802402816&redirect_uri=https%3A%2F%2Fcashdiscord.com%2Foauth&response_type=code&scope=identify%20guilds%20email`;
 }
 
-interface State {
 
+interface Props {}
+
+interface State {
+  token: string | null;
+  email?: string;
 }
 
 export class Navbar extends React.Component<Props, State> {
 
-    render() {
-        return (
-            <div className="Navbar">
-                <div className="Navbar__header">Go Discord Bot</div>
-                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
-                <Link to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">Soundboard</Link>
-                <Link to="/downloader" className="Navbar__item" activeClassName="Navbar__item--active">Youtube Downloader</Link>
-                <Link to="/pubg" className="Navbar__item" activeClassName="Navbar__item--active">Pubg</Link>
-                <Link to="/clips" className="Navbar__item" activeClassName="Navbar__item--active">Clips</Link>
-                <a href={oauthUrl} className="Navbar__item">Login</a>
-            </div>
-        );
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      token: null,
+    };
+  }
+
+  componentDidMount() {
+    const token = storage.getJWT();
+
+    if (token) {
+      const claims: any = jwt_decode(token!);
+      const email = claims['email'];
+      this.setState({ token, email });
     }
+  }
+
+  private logout = () => {
+    localStorage.clear();
+    window.location.href = '/';
+  }
+
+  render() {
+    return (
+      <div className="Navbar">
+        <div className="Navbar__header">Go Discord Bot</div>
+        <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
+        <Link to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">Soundboard</Link>
+        <Link to="/downloader" className="Navbar__item" activeClassName="Navbar__item--active">Youtube Downloader</Link>
+        {/* PUBG - DEPRECATED */}
+        {/* <Link to="/pubg" className="Navbar__item" activeClassName="Navbar__item--active">Pubg</Link> */}
+        <Link to="/clips" className="Navbar__item" activeClassName="Navbar__item--active">Clips</Link>
+
+        { !this.state.token ?
+          <a href={oauthUrl} className="Navbar__item">Login</a> :
+          <a className="Navbar__item" onClick={this.logout}>Logout</a>
+        }
+
+        {this.state.email && <div className="Navbar__email">{this.state.email}</div>}
+      </div>
+    );
+  }
 }

client/app/pages/Pubg/Pubg.tsx

@@ -1,3 +1,4 @@
+// DEPRECATED
 import React from 'react';
 import axios from 'axios';
 import * as _ from 'lodash';

client/app/pages/Soundboard/Soundboard.tsx

@@ -5,141 +5,139 @@ import axios, { AxiosRequestConfig } from 'axios';
 import { SoundList, SoundType } from '../../components/SoundList';
 
 import './Soundboard.scss';
+import { storage } from '../../storage';
 
 let self: any;
 
-interface Props {
-
-}
+interface Props {}
 
 interface State {
-    percentCompleted: number;
-    password: string;
-    uploaded: boolean;
-    uploadError: string;
-    soundList: SoundType[];
+  percentCompleted: number;
+  uploaded: boolean;
+  uploadError: string;
+  soundList: SoundType[];
 }
 
 export class Soundboard extends React.Component<Props, State> {
-    
-    private config: AxiosRequestConfig;
-    private soundListCache: any;
+  private config: AxiosRequestConfig;
+  private soundListCache: any;
 
-    constructor() {
-        super();
-        this.state = {
-            percentCompleted: 0,
-            password: "",
-            uploaded: false,
-            uploadError: " ",
-            soundList: [],
-        },
+  constructor() {
+    super();
+    (this.state = {
+      percentCompleted: 0,
+      uploaded: false,
+      uploadError: ' ',
+      soundList: [],
+    }),
+      (self = this);
+  }
 
-        self = this;
-    }
-    
-    componentDidMount() {
-        this.config = {
-            headers: {
-                'Content-Type': 'multipart/form-data',
-            },
-            onUploadProgress: (progressEvent) => {
-                this.setState({
-                    percentCompleted: Math.round( (progressEvent.loaded * 100) / progressEvent.total ),
-                });
-            }
-        };
-
-        this.getSoundList();
-    }
-    
-    private getSoundList() {
-        if (!this.soundListCache) {
-            axios.get("/api/soundlist").then((response) => {
-                this.soundListCache = response.data;
-                this.setState({
-                    soundList: response.data,
-                });
-            }).catch((error: any) => {
-                console.error(error.response.data);
-            });
-        } else {
-            this.setState({
-                soundList: this.soundListCache,
-            });
-        }
-    }
-
-    onDrop(acceptedFiles: any) {
-        if (acceptedFiles.length > 0) {
-            self.uploadFile(acceptedFiles[0]);
-        }
-    }
-    
-    uploadFile(file: any) {
-        let formData = new FormData();
-        formData.append("name", file.name);
-        formData.append("file", file);
-        formData.append("password", this.state.password);
-        
-        axios.post("/api/upload", formData, this.config)
-            .then(() => {
-                this.setState({
-                    password: "",
-                    percentCompleted: 0,
-                    uploaded: true,
-                    uploadError: " ",
-                });
-                
-                this.soundListCache = undefined;
-                this.getSoundList();
-            }).catch((err) => {
-                this.setState({
-                    percentCompleted: 0,
-                    uploaded: false,
-                    uploadError: err.response.data,
-                });
-            });
-    }
-    
-    passwordOnChange(event: any) {
+  componentDidMount() {
+    this.config = {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        'Authorization': `Bearer ${storage.getJWT()}`
+      },
+      onUploadProgress: progressEvent => {
         this.setState({
-            password: event.target.value,
+          percentCompleted: Math.round(
+            progressEvent.loaded * 100 / progressEvent.total,
+          ),
         });
+      },
+    };
+
+    this.getSoundList();
+  }
+
+  private getSoundList() {
+    if (!this.soundListCache) {
+      axios
+        .get('/api/soundlist')
+        .then(response => {
+          this.soundListCache = response.data;
+          this.setState({
+            soundList: response.data,
+          });
+        })
+        .catch((error: any) => {
+          console.error(error.response.data);
+        });
+    } else {
+      this.setState({
+        soundList: this.soundListCache,
+      });
     }
-    
-    render() {
-        const { soundList } = this.state;
-        return (
-            <div className="Soundboard">
-                <div className="column">
-                    <SoundList soundList={soundList} type="Sounds"/>
-                </div>
-            
-                <div className="column">
-                    <div>
-                        <Dropzone className="Dropzone"
-                                activeClassName="Dropzone--active"
-                                onDrop={this.onDrop}
-                                multiple={false}
-                                disableClick={true}
-                                maxSize={10000000000}
-                                accept={"audio/*"}>
-                                
-                            <input className="input Soundboard__input"
-                                    type="password"
-                                    placeholder="Password"
-                                    value={this.state.password}
-                                    onChange={this.passwordOnChange.bind(this)}/>
-                                
-                            <div style={{fontSize: "20px"}}>Drop file here to upload.</div>
-                            {this.state.percentCompleted > 0 ? <div>Uploading: {this.state.percentCompleted}</div> : ""}
-                            {this.state.uploaded ? <div style={{color: 'green'}}>File uploded!</div> : ""}
-                            <div style={{color: '#f95f59'}}>{this.state.uploadError}</div>
-                        </Dropzone>
-                    </div>
-                </div>
-            </div>
-        );
+  }
+
+  onDrop(acceptedFiles: any) {
+    if (acceptedFiles.length > 0) {
+      self.uploadFile(acceptedFiles[0]);
     }
+  }
+
+  uploadFile(file: any) {
+    let formData = new FormData();
+    formData.append('name', file.name);
+    formData.append('file', file);
+
+    axios
+      .post('/api/upload', formData, this.config)
+      .then(() => {
+        this.setState({
+          percentCompleted: 0,
+          uploaded: true,
+          uploadError: ' ',
+        });
+
+        this.soundListCache = undefined;
+        this.getSoundList();
+      })
+      .catch(err => {
+        this.setState({
+          percentCompleted: 0,
+          uploaded: false,
+          uploadError: err.response.data,
+        });
+      });
+  }
+
+  render() {
+    const { soundList } = this.state;
+    return (
+      <div className="Soundboard">
+        <div className="column">
+          <SoundList soundList={soundList} type="Sounds" />
+        </div>
+
+        <div className="column">
+          <div>
+            <Dropzone
+              className="Dropzone"
+              activeClassName="Dropzone--active"
+              onDrop={this.onDrop}
+              multiple={false}
+              disableClick={true}
+              maxSize={10000000000}
+              accept={'audio/*'}
+            >
+              <div style={{ fontSize: '20px' }}>Drop file here to upload.</div>
+              {this.state.percentCompleted > 0 ? (
+                <div>Uploading: {this.state.percentCompleted}</div>
+              ) : (
+                ''
+              )}
+              {this.state.uploaded ? (
+                <div style={{ color: 'green' }}>File uploded!</div>
+              ) : (
+                ''
+              )}
+              <div style={{ color: '#f95f59' }}>{this.state.uploadError}</div>
+            </Dropzone>
+          </div>
+        </div>
+      </div>
+    );
+  }
 }

client/app/pages/oauth/oauth.tsx

@@ -1,36 +1,37 @@
 import React from 'react';
 import { get } from 'lodash';
 import axios from 'axios';
+import { storage } from '../../storage';
 
-interface Props {
-    
-}
+interface Props {}
 
-interface State {
-    
-}
+interface State {}
 
 export class Oauth extends React.Component<Props, State> {
-    
-    constructor(props: Props) {
-        super(props);
+  constructor(props: Props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    const code = get(this, 'props.location.query.code');
+
+    if (code) {
+      // do stuff here
+      this.fetchOauth(code as string);
     }
-    
-    componentDidMount() {
-        const code = get(this, 'props.location.query.code');
-        
-        if (code) {
-            // do stuff here
-            this.fetchOauth(code as string);
-        }
-    }
-    
-    private async fetchOauth(code: string) {
-        const res = await axios.post('/api/oauth', { code });
-        console.log(res);
-    }
-    
-    render() {
-        return <div></div>
+  }
+
+  private async fetchOauth(code: string) {
+    try {
+      const res = await axios.post('/api/oauth', { code });
+      storage.setJWT(res.data);
+      window.location.href = '/';
+    } catch (e) {
+      console.error(e);
     }
+  }
+
+  render() {
+    return <div />;
+  }
 }

client/app/storage.ts

@@ -0,0 +1,12 @@
+const setJWT = (token: string) => {
+  localStorage.setItem('jwt', token);
+};
+
+const getJWT = (): string | null => {
+  return localStorage.getItem('jwt');
+};
+
+export const storage = {
+  getJWT,
+  setJWT,
+};