[#21] Allow form to send user/password to API for token. Use Form onS…

…ubmit event instead button click

src/components/Input/Input.module.scss

@@ -1,6 +1,9 @@
 .input {
+  padding-left: 0.5rem;
+
   border-radius: 12px;
+
   background: rgba(255, 255, 255, 0.18);
+
   color: #fff;
-  padding-left: 0.5rem;
 }

src/screens/Home/login.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AuthAdapter from 'adapters/authAdapter';
@@ -6,49 +7,65 @@ 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 (
     <>
       <img className="inline-block" src={logo} alt="logo" />
       <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>
     </>
   );