Improve the create account onboarding flow

cypress/integration/onboard.spec.js

@@ -1,10 +1,8 @@
-import { purge, enterUsernameAndPassword } from './utils'
+import { purge, enterUsername, enterCurrentPassword, enterNewPassword } from './utils'
 
-const CHAIRPERSON = 'Test chairperson'
+const TEMPLATE = 'UN Security Council'
 const TOPIC = 'Test topic'
-const COMMITTEE = 'Test committee'
 const CONFERENCE = 'Test conference'
-const TEMPLATE = 'Security Council'
 
 describe('Run through creating a new committee', function () {
   before(function() {
@@ -18,38 +16,41 @@ describe('Run through creating a new committee', function () {
   })
 
   it('attempts to create an account that is already in use, and then logs in', function () {
-    cy.get('button').contains('Login').then(() => {
-      enterUsernameAndPassword()
-
+    cy.get('button').contains('Log in').then(() => {
       cy.contains('Create account').click()
+
+      enterUsername()
+      enterNewPassword()
+
+      cy.get('button').contains('Create account').click()
+
       cy.contains('in use by another account')
 
-      cy.get('button').contains('Login').click()
+      cy.get('a').contains('Back to login').click()
+
+      enterCurrentPassword()
+
+      cy.get('button').contains('Log in').click()
     })
   })
 
   it('creates a new Security Council committee', function () {
+    cy.get('div')
+      .contains('Template to skip manual member creation (optional)')
+      .type(TEMPLATE + '{enter}')
+      .contains(TEMPLATE)
+
     cy.get('input[placeholder="Committee name"')
-      .type(COMMITTEE)
-      .should('have.value', COMMITTEE)
+      .should('have.value', TEMPLATE)
 
     cy.get('input[placeholder="Committee topic"')
       .type(TOPIC)
       .should('have.value', TOPIC)
 
-    cy.get('input[placeholder="Name(s) of chairperson or chairpeople"')
-      .type(CHAIRPERSON)
-      .should('have.value', CHAIRPERSON)
-
     cy.get('input[placeholder="Conference name"')
       .type(CONFERENCE)
       .should('have.value', CONFERENCE)
 
-    cy.get('div')
-      .contains('Template to skip manual member creation (optional)')
-      .type(TEMPLATE + '{enter}')
-      .contains(TEMPLATE)
-
     const createButton = cy.get('button').contains('Create committee')
 
     createButton.should('not.be.disabled')
@@ -58,13 +59,10 @@ describe('Run through creating a new committee', function () {
     cy.url().should('include', '/committees')
 
     cy.get('input[placeholder="Committee name"')
-      .should('have.value', COMMITTEE)
+      .should('have.value', TEMPLATE)
 
     cy.get('input[placeholder="Committee topic"')
       .should('have.value', TOPIC)
-
-    cy.get('input[placeholder="Name(s) of chairperson or chairpeople"')
-      .should('have.value', CHAIRPERSON)
   })
 
   it('observes the templated prepopulated member list for the Security Council', function () {

cypress/integration/utils.js

@@ -6,30 +6,29 @@ export function purge() {
   cy.clearLocalStorage()
 }
 
-export function enterUsernameAndPassword() {
+export function enterUsername() {
   cy.get('input[autocomplete=email]')
     .type('[email protected]')
     .should('have.value', '[email protected]')
+}
 
+export function enterCurrentPassword() {
   cy.get('input[autocomplete=current-password]')
     .type('fakepassword')
     .should('have.value', 'fakepassword')
 }
 
-export function enterUsernameAndPasswordAndHitsEnter() {
-  cy.get('input[autocomplete=email]')
-    .type('[email protected]')
-    .should('have.value', '[email protected]')
-
-  cy.get('input[autocomplete=current-password]')
-    .type('fakepassword{enter}')
+export function enterNewPassword() {
+  cy.get('input[autocomplete=new-password]')
+    .type('fakepassword')
     .should('have.value', 'fakepassword')
 }
 
 export function invokeModalAndLogin() {
   cy.get('button').contains('Login').click()
-  enterUsernameAndPassword()
-  cy.get('.modal').find('button').contains('Login').click()
+  enterUsername()
+  enterCurrentPassword()
+  cy.get('.modal').find('button').contains('Log in').click()
   cy.get('body').type('{esc}')
   cy.wait(2000)
 }

src/App.tsx

@@ -9,12 +9,13 @@ import 'firebase/database';
 import 'firebase/firestore';
 import 'firebase/storage';
 
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import './App.css';
 
 import Onboard from './components/Onboard';
 import Homepage from './components/Homepage';
 import Committee from './components/Committee';
+import { NotFound } from './components/NotFound';
 
 const firebaseConfig = {
   apiKey: 'AIzaSyA9EuEf7m3YOTBhBNhoe7DcOIZJP2toL6w',
@@ -27,17 +28,18 @@ const firebaseConfig = {
 
 firebase.initializeApp(firebaseConfig);
 
-
-
 class App extends React.Component {
   render() {
     return (
-      <React.Fragment>
+      <Switch>
         <Route exact path="/" component={Homepage} />
         <Route exact path="/onboard" component={Onboard} />
         <Route exact path="/committees" component={Onboard} />
         <Route path="/committees/:committeeID" component={Committee} />
-      </React.Fragment>
+        <Route path="*">
+          <NotFound item="page" id="unknown" />
+        </Route>
+      </Switch>
     );
   }
 }