Merge pull request #83 from jedmund/login-error

Add error string for invalid credentials

components/AboutModal/index.tsx

@@ -118,8 +118,8 @@ const AboutModal = () => {
                   .
                 </Dialog.Description>
                 <Dialog.Description className="DialogDescription">
-                  Many thanks also go to Jif, Slipper, Bless, yoey, 9highwind,
-                  and everyone else in{' '}
+                  Many thanks also go to Disinfect, Slipper, Jif, Bless,
+                  9highwind, and everyone else in{' '}
                   <a
                     href="https://game.granbluefantasy.jp/#guild/detail/1190185"
                     target="_blank"
@@ -128,7 +128,7 @@ const AboutModal = () => {
                     Fireplace
                   </a>{' '}
                   that helped with bug testing and feature requests. (P.S.
-                  We&apos;re recruiting!)
+                  We&apos;re recruiting!) And yoey, but he won't join our crew.
                 </Dialog.Description>
               </section>
 

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
-            console.log(axiosError.request)
-            console.log(axiosError.response)
-            console.log(axiosError.code)
-            setAlertOpen(true)
-
-            setAxiosError(axiosError)
+            const response = error?.response
+            if (response && response.data.error === 'invalid_grant') {
+              const errors = {
+                email: '',
+                password: t('modals.login.errors.invalid_credentials'),
+              }
+              setErrors(errors)
+              setFormValid(validateForm(errors))
+            }
           }
         })
     }
@@ -201,64 +203,53 @@ const LoginModal = () => {
   }
 
   return (
-    <React.Fragment>
-      <Alert
-        title="There was an error"
-        message={`${axiosError?.code}: Something went wrong.`}
-        cancelActionText="Okay"
-        cancelAction={() => {
-          setAlertOpen(false)
-        }}
-        open={alertOpen}
-      ></Alert>
-      <Dialog open={open} onOpenChange={openChange}>
-        <DialogTrigger asChild>
-          <li className="MenuItem">
-            <span>{t('menu.login')}</span>
-          </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>
+    <Dialog open={open} onOpenChange={openChange}>
+      <DialogTrigger asChild>
+        <li className="MenuItem">
+          <span>{t('menu.login')}</span>
+        </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>
 
-          <form className="form" onSubmit={login}>
-            <Input
-              className="Bound"
-              name="email"
-              placeholder={t('modals.login.placeholders.email')}
-              onChange={handleChange}
-              error={errors.email}
-              ref={emailInput}
-            />
+        <form className="form" onSubmit={login}>
+          <Input
+            className="Bound"
+            name="email"
+            placeholder={t('modals.login.placeholders.email')}
+            onChange={handleChange}
+            error={errors.email}
+            ref={emailInput}
+          />
 
-            <Input
-              className="Bound"
-              name="password"
-              placeholder={t('modals.login.placeholders.password')}
-              type="password"
-              onChange={handleChange}
-              error={errors.password}
-              ref={passwordInput}
-            />
+          <Input
+            className="Bound"
+            name="password"
+            placeholder={t('modals.login.placeholders.password')}
+            type="password"
+            onChange={handleChange}
+            error={errors.password}
+            ref={passwordInput}
+          />
 
-            <Button
-              disabled={!formValid}
-              text={t('modals.login.buttons.confirm')}
-            />
-          </form>
-        </DialogContent>
-      </Dialog>
-    </React.Fragment>
+          <Button
+            disabled={!formValid}
+            text={t('modals.login.buttons.confirm')}
+          />
+        </form>
+      </DialogContent>
+    </Dialog>
   )
 }
 

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;