bunch of copypasted components

vocodes/src/v2/NewTopNav.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { SessionStateResponse } from '../v1/api/SessionState';
+import { SessionWrapper } from '../session/SessionWrapper';
+import { Link } from 'react-router-dom';
+
+interface Props {
+  sessionState?: SessionStateResponse,
+  sessionWrapper: SessionWrapper,
+  ///historyBadgeCount: number,
+  //isHistoryCountBadgeVisible: boolean,
+  logoutHandler: () => void,
+}
+
+function NewTopNav(props: Props) {
+  let badge = <span />;
+
+  /*if (props.historyBadgeCount > 0) {
+    let className = "tag is-info is-light";
+
+    if (props.isHistoryCountBadgeVisible) {
+      className = "tag is-danger";
+    }
+
+    badge = <span className={className}>{props.historyBadgeCount}</span>;
+  }*/
+
+  let loggedIn = false;
+  let displayName = "My Account";
+
+  if (props.sessionState !== undefined) {
+    console.log('sessionstate', props.sessionState);
+    loggedIn = props.sessionState.logged_in;
+    if (props.sessionState.user !== undefined && 
+        props.sessionState.user !== null) {
+      displayName = props.sessionState.user.display_name;
+    }
+  }
+
+  // Vo.codes 2.0
+  let loginManagement = <span />;
+  let extendedFeatures = <span />;
+  let column1 = <div></div>;
+  let column2 = <div></div>;
+
+  if (true) {
+    if (loggedIn) {
+      loginManagement = (
+        <span>
+          <a href="#profile" onClick={() => {}}>{displayName}</a>
+          <a href="#logout" onClick={() => {}}>Log Out</a>
+        </span>
+      );
+      column1 = (
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => {}}
+            >Firehose</button>
+        </div>
+      );
+    } else {
+      loginManagement = (
+        <span>
+          <a href="#login" onClick={() => {}}>Login</a>
+          <a href="#signup" onClick={() => {}} className="signup">Sign Up</a>
+        </span>
+      );
+      column1 = (
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => {}}
+            >Sign Up</button>
+        </div>
+      );
+      column2 = (
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => {}}
+            >Login</button>
+        </div>
+      );
+    }
+
+    extendedFeatures = (
+      <div className="notification is-info is-light">
+          <strong>NEW Community Features let you use Your Own Voices and Video:</strong>
+          <br />
+          <br />
+          <a href="#community_tts" onClick={() => {}}>TTS</a>
+          <a href="#community_video" onClick={() => {}}>Video</a>
+          <a href="#upload" onClick={() => {}}>Upload</a>
+          <a href="#my_data" onClick={() => {}}>My Data</a>
+      </div>
+    );
+  }
+
+
+  return (
+    <nav>
+      <div className="columns">
+        <div className="column">
+          <Link to="/tts"
+            className="button is-link is-large is-inverted"
+            >Text to Speech 🗣️</Link>
+        </div>
+        <div className="column">
+          <Link to="/video"
+            className="button is-link is-large is-inverted"
+            >Video 🎥</Link>
+        </div>
+      </div>
+      <div className="columns">
+        <div className="column">
+          <Link to="/upload_tts"
+            className="button is-link is-inverted"
+            >Upload TTS ⬆</Link>
+        </div>
+        <div className="column">
+          <Link to="/upload_video"
+            className="button is-link is-inverted"
+            >Upload Video ⬆</Link>
+        </div>
+        <div className="column">
+          <Link to="/upload_video"
+            className="button is-link is-inverted"
+            >My Data</Link>
+        </div>
+      </div>
+      <hr />
+    </nav>
+  )
+}
+
+export { NewTopNav };

vocodes/src/v2/NewVocodesContainer.tsx

@@ -4,7 +4,11 @@ import { LoginComponent } from './login/LoginComponent';
 import { SignupComponent } from './signup/SignupComponent';
 import { Switch, Route } from 'react-router-dom';
 import { SessionWrapper } from '../session/SessionWrapper';
-
+import { UploadComponent } from './upload/UploadComponent';
+import { FirehoseComponent } from './firehose/FirehoseComponent';
+import { ProfileComponent } from './profile/ProfileComponent';
+import { TtsModelListComponent } from './tts_model/TtsModelListComponent';
+import { W2lTemplateListComponent } from './w2l_template_list/W2lTemplateListComponent';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -36,6 +40,13 @@ class NewVocodesContainer extends React.Component<Props, State> {
             />
 
           <Switch>
+            <Route path="/firehose">
+              <FirehoseComponent
+                querySessionCallback={()=>{}}
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
             <Route path="/login">
               <LoginComponent 
                 querySessionCallback={()=>{}}
@@ -43,12 +54,41 @@ class NewVocodesContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/profile">
+              <ProfileComponent
+                querySessionCallback={()=>{}}
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
             <Route path="/signup">
               <SignupComponent
                 querySessionCallback={()=>{}}
                 sessionWrapper={this.props.sessionWrapper}
               />
             </Route>
+
+            <Route path="/tts">
+              <TtsModelListComponent
+                querySessionCallback={()=>{}}
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
+            <Route path="/w2l">
+              <W2lTemplateListComponent
+                querySessionCallback={()=>{}}
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
+            <Route path="/upload">
+              <UploadComponent
+                querySessionCallback={()=>{}}
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
           </Switch>
 
         </div>

vocodes/src/v2/firehose/FirehoseComponent.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Mode } from '../../AppMode';
+import { SessionWrapper } from '../../session/SessionWrapper';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  querySessionCallback : () => void,
+  switchModeCallback?: (mode: Mode) => void,
+}
+
+interface State {
+  usernameOrEmail: string,
+  usernameOrEmailValid: FieldTriState,
+  usernameOrEmailInvalidReason: string,
+
+  password: string,
+  passwordValid: FieldTriState,
+  passwordInvalidReason: string,
+}
+
+class FirehoseComponent 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();
+
+        if (this.props.switchModeCallback !== undefined) {
+          this.props.switchModeCallback(Mode.SPEAK_MODE);
+        }
+        return;
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  public render() {
+    if (this.props.sessionWrapper.isLoggedIn()) {
+      return <div>Invalid view for logged in users.</div>;
+    }
+
+    return (
+      <div>
+        <h1 className="title is-1"> Login </h1>
+
+        <p></p>
+
+        <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 { FirehoseComponent };

vocodes/src/v2/profile/ProfileComponent.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Mode } from '../../AppMode';
+import { SessionWrapper } from '../../session/SessionWrapper';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  querySessionCallback : () => void,
+  switchModeCallback?: (mode: Mode) => void,
+}
+
+interface State {
+  usernameOrEmail: string,
+  usernameOrEmailValid: FieldTriState,
+  usernameOrEmailInvalidReason: string,
+
+  password: string,
+  passwordValid: FieldTriState,
+  passwordInvalidReason: string,
+}
+
+class ProfileComponent 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();
+
+        if (this.props.switchModeCallback !== undefined) {
+          this.props.switchModeCallback(Mode.SPEAK_MODE);
+        }
+        return;
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  public render() {
+    if (this.props.sessionWrapper.isLoggedIn()) {
+      return <div>Invalid view for logged in users.</div>;
+    }
+
+    return (
+      <div>
+        <h1 className="title is-1"> Login </h1>
+
+        <p></p>
+
+        <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 { ProfileComponent };

vocodes/src/v2/tts_model/TtsModelListComponent.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Mode } from '../../AppMode';
+import { SessionWrapper } from '../../session/SessionWrapper';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  querySessionCallback : () => void,
+  switchModeCallback?: (mode: Mode) => void,
+}
+
+interface State {
+  usernameOrEmail: string,
+  usernameOrEmailValid: FieldTriState,
+  usernameOrEmailInvalidReason: string,
+
+  password: string,
+  passwordValid: FieldTriState,
+  passwordInvalidReason: string,
+}
+
+class TtsModelListComponent 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();
+
+        if (this.props.switchModeCallback !== undefined) {
+          this.props.switchModeCallback(Mode.SPEAK_MODE);
+        }
+        return;
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  public render() {
+    if (this.props.sessionWrapper.isLoggedIn()) {
+      return <div>Invalid view for logged in users.</div>;
+    }
+
+    return (
+      <div>
+        <h1 className="title is-1"> Login </h1>
+
+        <p></p>
+
+        <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 { TtsModelListComponent };

vocodes/src/v2/tts_model_view/TtsModelViewComponent.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Mode } from '../../AppMode';
+import { SessionWrapper } from '../../session/SessionWrapper';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  querySessionCallback : () => void,
+  switchModeCallback?: (mode: Mode) => void,
+}
+
+interface State {
+  usernameOrEmail: string,
+  usernameOrEmailValid: FieldTriState,
+  usernameOrEmailInvalidReason: string,
+
+  password: string,
+  passwordValid: FieldTriState,
+  passwordInvalidReason: string,
+}
+
+class TtsModelViewComponent 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();
+
+        if (this.props.switchModeCallback !== undefined) {
+          this.props.switchModeCallback(Mode.SPEAK_MODE);
+        }
+        return;
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  public render() {
+    if (this.props.sessionWrapper.isLoggedIn()) {
+      return <div>Invalid view for logged in users.</div>;
+    }
+
+    return (
+      <div>
+        <h1 className="title is-1"> Login </h1>
+
+        <p></p>
+
+        <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 { TtsModelViewComponent };

vocodes/src/v2/upload/UploadComponent.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Mode } from '../../AppMode';
+import { SessionWrapper } from '../../session/SessionWrapper';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  querySessionCallback : () => void,
+  switchModeCallback?: (mode: Mode) => void,
+}
+
+interface State {
+  usernameOrEmail: string,
+  usernameOrEmailValid: FieldTriState,
+  usernameOrEmailInvalidReason: string,
+
+  password: string,
+  passwordValid: FieldTriState,
+  passwordInvalidReason: string,
+}
+
+class UploadComponent 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();
+
+        if (this.props.switchModeCallback !== undefined) {
+          this.props.switchModeCallback(Mode.SPEAK_MODE);
+        }
+        return;
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  public render() {
+    if (this.props.sessionWrapper.isLoggedIn()) {
+      return <div>Invalid view for logged in users.</div>;
+    }
+
+    return (
+      <div>
+        <h1 className="title is-1"> Login </h1>
+
+        <p></p>
+
+        <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 { UploadComponent };

vocodes/src/v2/w2l_template_list/W2lTemplateListComponent.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Mode } from '../../AppMode';
+import { SessionWrapper } from '../../session/SessionWrapper';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  querySessionCallback : () => void,
+  switchModeCallback?: (mode: Mode) => void,
+}
+
+interface State {
+  usernameOrEmail: string,
+  usernameOrEmailValid: FieldTriState,
+  usernameOrEmailInvalidReason: string,
+
+  password: string,
+  passwordValid: FieldTriState,
+  passwordInvalidReason: string,
+}
+
+class W2lTemplateListComponent 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();
+
+        if (this.props.switchModeCallback !== undefined) {
+          this.props.switchModeCallback(Mode.SPEAK_MODE);
+        }
+        return;
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  public render() {
+    if (this.props.sessionWrapper.isLoggedIn()) {
+      return <div>Invalid view for logged in users.</div>;
+    }
+
+    return (
+      <div>
+        <h1 className="title is-1"> Login </h1>
+
+        <p></p>
+
+        <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 { W2lTemplateListComponent };

vocodes/src/v2/w2l_template_view/W2lTemplateViewComponent.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Mode } from '../../AppMode';
+import { SessionWrapper } from '../../session/SessionWrapper';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  querySessionCallback : () => void,
+  switchModeCallback?: (mode: Mode) => void,
+}
+
+interface State {
+  usernameOrEmail: string,
+  usernameOrEmailValid: FieldTriState,
+  usernameOrEmailInvalidReason: string,
+
+  password: string,
+  passwordValid: FieldTriState,
+  passwordInvalidReason: string,
+}
+
+class W2lTemplateViewComponent 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();
+
+        if (this.props.switchModeCallback !== undefined) {
+          this.props.switchModeCallback(Mode.SPEAK_MODE);
+        }
+        return;
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  public render() {
+    if (this.props.sessionWrapper.isLoggedIn()) {
+      return <div>Invalid view for logged in users.</div>;
+    }
+
+    return (
+      <div>
+        <h1 className="title is-1"> Login </h1>
+
+        <p></p>
+
+        <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 { W2lTemplateViewComponent };