From 13de5806d7fd9c9d48f6b9ecf17cb828f467565c Mon Sep 17 00:00:00 2001
From: Zachary Rogers <zrogers>
Date: Thu, 7 Dec 2023 15:40:33 -0800
Subject: [PATCH] 10007: WIP Add submitLoginSequence.

---
 web-client/src/presenter/presenter-public.ts  |   2 +
 web-client/src/presenter/presenter.ts         |   2 +
 .../sequences/Login/submitLoginSequence.ts    |   8 +
 .../sequences/changePasswordLocalSequence.ts  |   2 +-
 web-client/src/views/AppComponent.tsx         |   4 +-
 web-client/src/views/Public/Login/Login.tsx   | 137 +++++++++++-------
 6 files changed, 97 insertions(+), 58 deletions(-)
 create mode 100644 web-client/src/presenter/sequences/Login/submitLoginSequence.ts

diff --git a/web-client/src/presenter/presenter-public.ts b/web-client/src/presenter/presenter-public.ts
index 90b7b26cb8e..ba7867ec6ac 100644
--- a/web-client/src/presenter/presenter-public.ts
+++ b/web-client/src/presenter/presenter-public.ts
@@ -38,6 +38,7 @@ import { showMaintenancePageDecorator } from './utilities/showMaintenancePageDec
 import { showMoreResultsSequence } from './sequences/showMoreResultsSequence';
 import { sortTodaysOrdersSequence } from './sequences/Public/sortTodaysOrdersSequence';
 import { submitCreatePetitionerAccountFormSequence } from '@web-client/presenter/sequences/submitCreatePetitionerAccountFormSequence';
+import { submitLoginSequence } from '@web-client/presenter/sequences/Login/submitLoginSequence';
 import { submitPublicCaseAdvancedSearchSequence } from './sequences/Public/submitPublicCaseAdvancedSearchSequence';
 import { submitPublicCaseDocketNumberSearchSequence } from './sequences/Public/submitPublicCaseDocketNumberSearchSequence';
 import { submitPublicOpinionAdvancedSearchSequence } from './sequences/Public/submitPublicOpinionAdvancedSearchSequence';
@@ -106,6 +107,7 @@ export const presenterSequences = {
   showMoreResultsSequence,
   sortTodaysOrdersSequence,
   submitCreatePetitionerAccountFormSequence,
+  submitLoginSequence,
   submitPublicCaseAdvancedSearchSequence,
   submitPublicCaseDocketNumberSearchSequence,
   submitPublicOpinionAdvancedSearchSequence,
diff --git a/web-client/src/presenter/presenter.ts b/web-client/src/presenter/presenter.ts
index 8c80fe75502..15c96a73176 100644
--- a/web-client/src/presenter/presenter.ts
+++ b/web-client/src/presenter/presenter.ts
@@ -416,6 +416,7 @@ import { submitExternalDocumentSequence } from './sequences/submitExternalDocume
 import { submitFilePetitionSequence } from './sequences/submitFilePetitionSequence';
 import { submitJudgeActivityReportSequence } from './sequences/JudgeActivityReport/submitJudgeActivityReportSequence';
 import { submitLocalLoginSequence } from './sequences/submitLocalLoginSequence';
+import { submitLoginSequence } from '@web-client/presenter/sequences/Login/submitLoginSequence';
 import { submitOpinionAdvancedSearchSequence } from './sequences/submitOpinionAdvancedSearchSequence';
 import { submitOrderAdvancedSearchSequence } from './sequences/submitOrderAdvancedSearchSequence';
 import { submitPaperFilingSequence } from './sequences/submitPaperFilingSequence';
@@ -1252,6 +1253,7 @@ export const presenterSequences = {
   submitJudgeActivityReportSequence:
     submitJudgeActivityReportSequence as unknown as Function,
   submitLocalLoginSequence: submitLocalLoginSequence as unknown as Function,
+  submitLoginSequence,
   submitOpinionAdvancedSearchSequence:
     submitOpinionAdvancedSearchSequence as unknown as Function,
   submitOrderAdvancedSearchSequence:
diff --git a/web-client/src/presenter/sequences/Login/submitLoginSequence.ts b/web-client/src/presenter/sequences/Login/submitLoginSequence.ts
new file mode 100644
index 00000000000..2e8828af3c0
--- /dev/null
+++ b/web-client/src/presenter/sequences/Login/submitLoginSequence.ts
@@ -0,0 +1,8 @@
+import { state } from '@web-client/presenter/app-public.cerebral';
+
+export const submitLoginSequence = [
+  ({ get }) => {
+    console.log('in submitLoginSequence');
+    console.log(get(state.form));
+  },
+] as unknown as (props) => void;
diff --git a/web-client/src/presenter/sequences/changePasswordLocalSequence.ts b/web-client/src/presenter/sequences/changePasswordLocalSequence.ts
index 19c1d1194ff..7f05f3d8860 100644
--- a/web-client/src/presenter/sequences/changePasswordLocalSequence.ts
+++ b/web-client/src/presenter/sequences/changePasswordLocalSequence.ts
@@ -1,5 +1,5 @@
 import { changePasswordLocalAction } from '../actions/changePasswordLocalAction';
-import { gotoLoginSequence } from './gotoLoginSequence';
+import { gotoLoginSequence } from '@web-client/presenter/sequences/Login/goToLoginSequence';
 import { setAlertSuccessAction } from '../actions/setAlertSuccessAction';
 import { setSaveAlertsForNavigationAction } from '../actions/setSaveAlertsForNavigationAction';
 import { showProgressSequenceDecorator } from '../utilities/showProgressSequenceDecorator';
diff --git a/web-client/src/views/AppComponent.tsx b/web-client/src/views/AppComponent.tsx
index 78bb772d868..fb9d70bff5f 100644
--- a/web-client/src/views/AppComponent.tsx
+++ b/web-client/src/views/AppComponent.tsx
@@ -56,7 +56,7 @@ import { IdleLogout } from './IdleLogout';
 import { Interstitial } from './Interstitial';
 import { JudgeActivityReport } from './JudgeActivityReport/JudgeActivityReport';
 import { Loading } from './Loading';
-import { LogIn } from './LogIn';
+import { Login } from '@web-client/views/Public/Login/Login';
 import { MessageDetail } from './Messages/MessageDetail';
 import { Messages } from './Messages/Messages';
 import { MyAccount } from './MyAccount';
@@ -150,7 +150,7 @@ const pages = {
   Interstitial,
   JudgeActivityReport,
   Loading,
-  LogIn,
+  Login,
   MessageDetail,
   Messages,
   MyAccount,
diff --git a/web-client/src/views/Public/Login/Login.tsx b/web-client/src/views/Public/Login/Login.tsx
index 9cd0351f0e7..f75a6041888 100644
--- a/web-client/src/views/Public/Login/Login.tsx
+++ b/web-client/src/views/Public/Login/Login.tsx
@@ -1,63 +1,90 @@
 import { Button } from '@web-client/ustc-ui/Button/Button';
-import { connect } from '@cerebral/react';
+import { connect } from '@web-client/presenter/shared.cerebral';
+import { sequences, state } from '@web-client/presenter/app-public.cerebral';
 import React from 'react';
 
-export const Login = connect({}, () => {
-  return (
-    <>
-      <div className="grid-container">
-        <div className="grid-row bg-white padding-x-5 padding-y-3">
-          <div className="grid-col">
-            <h1 className="margin-bottom-1">Log in to DAWSON</h1>
-            <span>Email address and password are case sensitive.</span>
-            <form className="margin-top-4">
-              <label className="usa-label" htmlFor="email">
-                Email address
-              </label>
-              <input
-                required
-                autoCapitalize="off"
-                autoCorrect="off"
-                className="usa-input"
-                id="email"
-                name="email"
-                type="text"
-              />
-              <label className="usa-label" htmlFor="password">
-                Password
-              </label>
-              <input
-                required
-                className="usa-input"
-                id="password"
-                name="password"
-              />
-              <button
-                className="usa-show-password"
-                data-hide-text="Hide password"
-                data-show-text="Show password"
-                type="button"
-              >
-                Show password
-              </button>
-              <Button className="usa-button margin-top-3">Log in</Button>
-            </form>
-            <div>
-              <Button className="margin-top-1" link={true} type="button">
-                Forgot password?
-              </Button>
-            </div>
-            <div>
-              <span>Don&apos;t have an account?</span>{' '}
-              <Button className="padding-top-0" link={true} type="button">
-                Create your account now.
-              </Button>
+export const Login = connect(
+  {
+    form: state.form,
+    submitLoginSequence: sequences.submitLoginSequence,
+    updateFormValueSequence: sequences.updateFormValueSequence,
+  },
+  ({ form, submitLoginSequence, updateFormValueSequence }) => {
+    return (
+      <>
+        <div className="grid-container">
+          <div className="grid-row bg-white padding-x-5 padding-y-3">
+            <div className="grid-col">
+              <h1 className="margin-bottom-1">Log in to DAWSON</h1>
+              <span>Email address and password are case sensitive.</span>
+              <form className="margin-top-4">
+                <label className="usa-label" htmlFor="email">
+                  Email address
+                </label>
+                <input
+                  required
+                  autoCapitalize="off"
+                  autoCorrect="off"
+                  className="usa-input"
+                  id="email"
+                  name="email"
+                  type="text"
+                  value={form.email}
+                  onChange={e => {
+                    updateFormValueSequence({
+                      key: e.target.name,
+                      value: e.target.value,
+                    });
+                  }}
+                />
+                <label className="usa-label" htmlFor="password">
+                  Password
+                </label>
+                <input
+                  required
+                  className="usa-input"
+                  id="password"
+                  name="password"
+                  value={form.password}
+                  onChange={e => {
+                    updateFormValueSequence({
+                      key: e.target.name,
+                      value: e.target.value,
+                    });
+                  }}
+                />
+                <button
+                  className="usa-show-password"
+                  data-hide-text="Hide password"
+                  data-show-text="Show password"
+                  type="button"
+                >
+                  Show password
+                </button>
+                <Button
+                  className="usa-button margin-top-3"
+                  onClick={() => submitLoginSequence()}
+                >
+                  Log in
+                </Button>
+              </form>
+              <div>
+                <Button className="margin-top-1" link={true} type="button">
+                  Forgot password?
+                </Button>
+              </div>
+              <div>
+                <span>Don&apos;t have an account?</span>{' '}
+                <Button className="padding-top-0" link={true} type="button">
+                  Create your account now.
+                </Button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </>
-  );
-});
+      </>
+    );
+  },
+);
 
 Login.displayName = 'Login';