login works

vocodes/src/App.tsx

@@ -21,6 +21,7 @@ import { VideoQueueStats } from './modes/video/VideoQueueStats';
 import { SignupComponent } from './modes/signup/SignupComponent';
 import { ApiConfig } from './api/ApiConfig';
 import { SessionStateResponse } from './api/SessionState';
+import { LoginComponent } from './modes/login/LoginComponent';
 
 interface Props {
   // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet,
@@ -423,6 +424,13 @@ class App extends React.Component<Props, State> {
           switchModeCallback={this.switchMode}
           />
         break;
+      case Mode.LOGIN_MODE:
+        component = <LoginComponent
+          loggedIn={this.state.loggedIn}
+          querySessionCallback={this.querySession}
+          switchModeCallback={this.switchMode}
+          />
+        break;
     }
     return (
       <div id="main" className="mainwrap">

vocodes/src/modes/login/LoginComponent.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { ApiConfig } from '../../api/ApiConfig';
+import { Mode } from '../../AppMode';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  loggedIn: boolean,
+  querySessionCallback : () => void,
+  switchModeCallback: (mode: Mode) => void,
+}
+
+interface State {
+  usernameOrEmail: string,
+  usernameOrEmailValid: FieldTriState,
+  usernameOrEmailInvalidReason: string,
+
+  password: string,
+  passwordValid: FieldTriState,
+  passwordInvalidReason: string,
+}
+
+class LoginComponent extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      usernameOrEmail: "",
+      usernameOrEmailValid: FieldTriState.EMPTY_FALSE,
+      usernameOrEmailInvalidReason: "",
+
+      password: "",
+      passwordValid: FieldTriState.EMPTY_FALSE,
+      passwordInvalidReason: "",
+    };
+  }
+
+  handleUsernameOrEmailChange = (ev: React.FormEvent<HTMLInputElement>) => {
+    ev.preventDefault();
+
+    const usernameOrEmail  = (ev.target as HTMLInputElement).value;
+
+    this.setState({
+      usernameOrEmail: usernameOrEmail,
+    })
+
+    return false;
+  }
+
+  handlePasswordChange = (ev: React.FormEvent<HTMLInputElement>) => {
+    ev.preventDefault();
+
+    const password = (ev.target as HTMLInputElement).value;
+
+    this.setState({
+      password: password,
+    })
+
+    return false;
+  }
+
+  handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
+    ev.preventDefault();
+
+    const api = new ApiConfig();
+    const endpointUrl = api.login();
+    
+    const request = {
+      username_or_email: this.state.usernameOrEmail,
+      password: this.state.password,
+    }
+
+    fetch(endpointUrl, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify(request),
+    })
+    .then(res => res.json())
+    .then(res => {
+      console.log('login response', res)
+      if (res.success) {
+        console.log('querying new session');
+        this.props.querySessionCallback();
+        this.props.switchModeCallback(Mode.SPEAK_MODE);
+        return;
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  public render() {
+    if (this.props.loggedIn) {
+      return <div>Invalid view for logged in users.</div>;
+    }
+
+    return (
+      <div>
+        <h2> Sign Up </h2>
+
+        <form onSubmit={this.handleFormSubmit}>
+          <div className="field">
+            <label className="label">Username or Email</label>
+            <div className="control has-icons-left has-icons-right">
+              <input className="input" type="text" placeholder="Username or Email" value={this.state.usernameOrEmail} onChange={this.handleUsernameOrEmailChange} />
+              <span className="icon is-small is-left">
+                <i className="fas fa-user"></i>
+              </span>
+              <span className="icon is-small is-right">
+                <i className="fas fa-check"></i>
+              </span>
+            </div>
+            {/*<p className="help"></p>*/}
+          </div>
+
+          <div className="field">
+            <label className="label">Password</label>
+            <div className="control has-icons-left has-icons-right">
+              <input className="input" type="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} />
+              <span className="icon is-small is-left">
+                <i className="fas fa-envelope"></i>
+              </span>
+              <span className="icon is-small is-right">
+                <i className="fas fa-exclamation-triangle"></i>
+              </span>
+            </div>
+            {/*<p className="help"></p>*/}
+          </div>
+
+          <br />
+
+          <div className="field is-grouped">
+            <div className="control">
+              <button className="button is-link is-large">Login</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    )
+  }
+}
+
+export { LoginComponent };

vocodes/src/navigation/TopNav.tsx

@@ -64,7 +64,7 @@ function TopNav(props: Props) {
           <a href="#community_tts" onClick={() => props.switchModeCallback(Mode.COMMUNITY_TTS_MODE)}>Community TTS</a>
           <a href="#community_video" onClick={() => props.switchModeCallback(Mode.COMMUNITY_VIDEO_MODE)}>Community Video</a>
           <a href="#upload_voices" onClick={() => props.switchModeCallback(Mode.UPLOAD_VOICES_MODE)}>Upload Voices</a>
-          <a href="#upload_video" onClick={() => props.switchModeCallback(Mode.UPLOAD_VIDEO_MODE)}>Upload Voices</a>
+          <a href="#upload_video" onClick={() => props.switchModeCallback(Mode.UPLOAD_VIDEO_MODE)}>Upload Video</a>
           <a href="#my_data" onClick={() => props.switchModeCallback(Mode.MY_DATA_MODE)}>My Data</a>
           <br />
           <p>(Yes, this needs a redesign!)</p>