From fe714c35ada851701eebb26a29cb40359bc7bef4 Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Fri, 17 Feb 2023 15:33:11 +0700
Subject: [PATCH] [#21] Allow form to send user/password to API for token. Use
 Form onSubmit event instead button click

---
 src/screens/Home/login.tsx | 55 +++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/screens/Home/login.tsx b/src/screens/Home/login.tsx
index d083a22..ab0d52b 100644
--- a/src/screens/Home/login.tsx
+++ b/src/screens/Home/login.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AuthAdapter from 'adapters/authAdapter';
@@ -6,26 +7,34 @@ import Button from 'components/Button';
 import Input from 'components/Input';
 import { setToken } from 'helpers/userToken';
 
-// TODO: Remove when login functionality implemented in #8
-const tempHandler = () => {
-  return undefined;
-};
+function LoginScreen() {
+  const { t } = useTranslation('translation');
 
-// TODO: Remove after testing
-const performLogin = async () => {
-  const response = await AuthAdapter.login({ email: 'placeholder', password: 'placeholder' });
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
 
-  const {
-    attributes: { access_token: accessToken, refresh_token: refreshToken },
-  } = await response.data;
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
 
-  setToken({ accessToken: accessToken, refreshToken: refreshToken });
-};
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+  };
 
-function LoginScreen() {
-  const { t } = useTranslation('translation');
+  const performLogin = async () => {
+    const response = await AuthAdapter.login({ email: email, password: password });
+
+    const {
+      attributes: { access_token: accessToken, refresh_token: refreshToken },
+    } = await response.data;
+
+    setToken({ accessToken: accessToken, refreshToken: refreshToken });
+  };
 
-  performLogin();
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    performLogin();
+  };
 
   return (
     <>
@@ -33,22 +42,30 @@ function LoginScreen() {
       <p data-test-id="login-header" className="text-white opacity-50 my-8">
         {t('login.sign_in')} to Nimble
       </p>
-      <form>
-        <Input name="email" label={t('login.email')} type="text" className="block h-14 w-80 my-3" onInputChange={tempHandler} />
+      <form onSubmit={handleSubmit}>
+        <Input
+          name="email"
+          label={t('login.email')}
+          type="text"
+          value={email}
+          className="block h-14 w-80 my-3"
+          onInputChange={(e) => handleEmailChange(e)}
+        />
         <div className="relative w-80">
           <Input
             name="password"
             label={t('login.password')}
             type="password"
+            value={password}
             className="block h-14 w-80 my-3"
-            onInputChange={tempHandler}
+            onInputChange={(e) => handlePasswordChange(e)}
           />
           {/* Change to React Router Link when implement #17 */}
           <a href="." className="absolute text-white opacity-50 my-8 left-60 top-5">
             {t('login.forgot_password')}
           </a>
         </div>
-        <Button type="button" text={t('login.sign_in')} className="h-14 w-80" onButtonClick={tempHandler} />
+        <Button text={t('login.sign_in')} className="h-14 w-80" />
       </form>
     </>
   );