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,16 +203,6 @@ 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">
@@ -258,7 +250,6 @@ const LoginModal = () => {
         </form>
       </DialogContent>
     </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;