LoginModal fixes

Add error message for invalid credentials

components/Input/index.scss

@@ -1,3 +1,9 @@
+.Label {
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+}
+
 .Input {
   -webkit-font-smoothing: antialiased;
   background-color: var(--input-bg);
@@ -26,6 +32,8 @@
   font-size: $font-tiny;
   margin: $unit 0;
   padding: calc($unit / 2) ($unit * 2);
+  min-width: 100%;
+  width: 0;
 }
 
 ::placeholder {

components/LoginModal/index.tsx

@@ -43,7 +43,6 @@ const LoginModal = () => {
 
   // Set up form states and error handling
   const [formValid, setFormValid] = useState(false)
-  const [axiosError, setAxiosError] = useState<AxiosError>()
   const [errors, setErrors] = useState<ErrorMap>({
     email: '',
     password: '',
@@ -51,7 +50,6 @@ const LoginModal = () => {
 
   // States
   const [open, setOpen] = useState(false)
-  const [alertOpen, setAlertOpen] = useState(false)
 
   // Set up form refs
   const emailInput: React.RefObject<HTMLInputElement> = React.createRef()
@@ -95,6 +93,8 @@ const LoginModal = () => {
       (error) => error.length > 0 && (valid = false)
     )
 
+    console.log(errors)
+
     return valid
   }
 
@@ -120,13 +120,15 @@ const LoginModal = () => {
           console.log(error)
 
           if (axios.isAxiosError(error)) {
-            const axiosError: AxiosError = error
+            const response = error?.response
-            console.log(axiosError.request)
+            if (response && response.data.error === 'invalid_grant') {
-            console.log(axiosError.response)
+              const errors = {
-            console.log(axiosError.code)
+                email: '',
-            setAlertOpen(true)
+                password: t('modals.login.errors.invalid_credentials'),
-
+              }
-            setAxiosError(axiosError)
+              setErrors(errors)
+              setFormValid(validateForm(errors))
+            }
           }
         })
     }
@@ -201,64 +203,53 @@ const LoginModal = () => {
   }
 
   return (
-    <React.Fragment>
+    <Dialog open={open} onOpenChange={openChange}>
-      <Alert
+      <DialogTrigger asChild>
-        title="There was an error"
+        <li className="MenuItem">
-        message={`${axiosError?.code}: Something went wrong.`}
+          <span>{t('menu.login')}</span>
-        cancelActionText="Okay"
+        </li>
-        cancelAction={() => {
+      </DialogTrigger>
-          setAlertOpen(false)
+      <DialogContent
-        }}
+        className="Login Dialog"
-        open={alertOpen}
+        onEscapeKeyDown={onEscapeKeyDown}
-      ></Alert>
+        onOpenAutoFocus={onOpenAutoFocus}
-      <Dialog open={open} onOpenChange={openChange}>
+      >
-        <DialogTrigger asChild>
+        <div className="DialogHeader">
-          <li className="MenuItem">
+          <div className="DialogTitle">
-            <span>{t('menu.login')}</span>
+            <h1>{t('modals.login.title')}</h1>
-          </li>
-        </DialogTrigger>
-        <DialogContent
-          className="Login Dialog"
-          onEscapeKeyDown={onEscapeKeyDown}
-          onOpenAutoFocus={onOpenAutoFocus}
-        >
-          <div className="DialogHeader">
-            <div className="DialogTitle">
-              <h1>{t('modals.login.title')}</h1>
-            </div>
-            <DialogClose className="DialogClose">
-              <CrossIcon />
-            </DialogClose>
           </div>
+          <DialogClose className="DialogClose">
+            <CrossIcon />
+          </DialogClose>
+        </div>
 
-          <form className="form" onSubmit={login}>
+        <form className="form" onSubmit={login}>
-            <Input
+          <Input
-              className="Bound"
+            className="Bound"
-              name="email"
+            name="email"
-              placeholder={t('modals.login.placeholders.email')}
+            placeholder={t('modals.login.placeholders.email')}
-              onChange={handleChange}
+            onChange={handleChange}
-              error={errors.email}
+            error={errors.email}
-              ref={emailInput}
+            ref={emailInput}
-            />
+          />
 
-            <Input
+          <Input
-              className="Bound"
+            className="Bound"
-              name="password"
+            name="password"
-              placeholder={t('modals.login.placeholders.password')}
+            placeholder={t('modals.login.placeholders.password')}
-              type="password"
+            type="password"
-              onChange={handleChange}
+            onChange={handleChange}
-              error={errors.password}
+            error={errors.password}
-              ref={passwordInput}
+            ref={passwordInput}
-            />
+          />
 
-            <Button
+          <Button
-              disabled={!formValid}
+            disabled={!formValid}
-              text={t('modals.login.buttons.confirm')}
+            text={t('modals.login.buttons.confirm')}
-            />
+          />
-          </form>
+        </form>
-        </DialogContent>
+      </DialogContent>
-      </Dialog>
+    </Dialog>
-    </React.Fragment>
   )
 }
 

styles/variables.scss

@@ -170,7 +170,7 @@ $input--bg--dark--hover: $grey-30;
 $input--bound--bg--light: $grey-85;
 $input--bound--bg--light--hover: $grey-80;
 $input--bound--bg--dark: $grey-15;
-$input--bound--bg--dark--hover: $grey-25;
+$input--bound--bg--dark--hover: $grey-10;
 
 // Color Definitions: Select
 $select--bg--light: $grey-100;