cleanup/wip

vocodes/src/App.tsx

@@ -117,10 +117,9 @@ class App extends React.Component<Props, State> {
       <BrowserRouter>
         <div id="main" className="mainwrap">
           <div id="viewable">
+
             <MigrationTopNav
               enableAlpha={this.state.enableAlpha}
-              migrationMode={this.state.migrationMode}
-              setMigrationModeCallback={this.setMigrationMode}
               sessionWrapper={this.state.sessionWrapper}
               />
 

vocodes/src/migration/MigrationTopNav.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { MigrationMode } from '../App'
 import { MigrationTopNav_Session } from './MigrationTopNav_Session';
 import { MigrationTopNav_VersionSwitch } from './MigrationTopNav_VersionSwitch';
 import { SessionWrapper } from '../session/SessionWrapper';
@@ -7,8 +6,6 @@ import { SessionWrapper } from '../session/SessionWrapper';
 interface Props {
   sessionWrapper: SessionWrapper,
   enableAlpha: boolean,
-  migrationMode: MigrationMode,
-  setMigrationModeCallback: (mode: MigrationMode) => void,
 }
 
 function MigrationTopNav(props: Props) {
@@ -24,8 +21,6 @@ function MigrationTopNav(props: Props) {
       <MigrationTopNav_Session
         sessionWrapper={props.sessionWrapper}
         enableAlpha={props.enableAlpha}
-        migrationMode={props.migrationMode}
-        setMigrationModeCallback={props.setMigrationModeCallback}
         />
     </nav>
   )

vocodes/src/migration/MigrationTopNav_Session.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
-import { MigrationMode } from '../App'
 import { SessionWrapper } from '../session/SessionWrapper';
 import { Link } from 'react-router-dom';
 
 interface Props {
   sessionWrapper: SessionWrapper,
   enableAlpha: boolean,
-  migrationMode: MigrationMode,
-  setMigrationModeCallback: (mode: MigrationMode) => void,
 }
 
 function MigrationTopNav_Session(props: Props) {
@@ -25,16 +22,20 @@ function MigrationTopNav_Session(props: Props) {
   let sessionLink = <p />;
 
   if (loggedIn) {
-    sessionLink = <button
-          className="button is-alert is-inverted is-pulled-right"
-          onClick={() => props.setMigrationModeCallback(MigrationMode.OLD_VOCODES)}
-          >{displayName}</button>
+    let url = `/profile/${displayName}`;
+    sessionLink = (
+      <Link
+        to={url}
+        className="button is-alert is-inverted is-pulled-right"
+        >{displayName}</Link>
+    );
   } else {
-    sessionLink = <Link
-          to="/signup"
-          className="button is-danger is-pulled-right"
-          onClick={() => props.setMigrationModeCallback(MigrationMode.OLD_VOCODES)}
-          >Sign Up / Login</Link>
+    sessionLink = (
+      <Link
+        to="/signup"
+        className="button is-danger is-pulled-right"
+        >Sign Up / Login</Link>
+    );
   }
 
   return sessionLink;

vocodes/src/v2/NewTopNav.tsx

@@ -96,6 +96,7 @@ function NewTopNav(props: Props) {
     );
   }
 
+  let myDataLink = `/profile/${displayName}/data`;
 
   return (
     <nav>
@@ -116,7 +117,7 @@ function NewTopNav(props: Props) {
             >Upload</Link>
         </div>
         <div className="column">
-          <Link to="/upload"
+          <Link to={myDataLink}
             className="button is-link is-medium is-inverted"
             >My Data</Link>
         </div>

vocodes/src/v2/NewVocodesContainer.tsx

@@ -9,6 +9,7 @@ import { FirehoseComponent } from './firehose/FirehoseComponent';
 import { ProfileComponent } from './profile/ProfileComponent';
 import { TtsModelListComponent } from './tts_model/TtsModelListComponent';
 import { W2lTemplateListComponent } from './w2l_template_list/W2lTemplateListComponent';
+import { ProfileDataComponent } from './profile_data/ProfileDataComponent';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -54,6 +55,13 @@ class NewVocodesContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/profile/:username/data">
+              <ProfileDataComponent
+                querySessionCallback={()=>{}}
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
             <Route path="/profile">
               <ProfileComponent
                 querySessionCallback={()=>{}}

vocodes/src/v2/profile_data/ProfileDataComponent.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 ProfileDataComponent 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 { ProfileDataComponent };