diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index ac98eba6..0e60fca6 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -118,8 +118,8 @@ const AboutModal = () => { . - 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{' '} { Fireplace {' '} that helped with bug testing and feature requests. (P.S. - We're recruiting!) + We're recruiting!) And yoey, but he won't join our crew. diff --git a/components/Input/index.scss b/components/Input/index.scss index a55cef8b..ce554942 100644 --- a/components/Input/index.scss +++ b/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 { diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx index e0f67e21..c9fa38ed 100644 --- a/components/LoginModal/index.tsx +++ b/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() const [errors, setErrors] = useState({ 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 = 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 ( - - { - setAlertOpen(false) - }} - open={alertOpen} - > - - -
  • - {t('menu.login')} -
  • -
    - -
    -
    -

    {t('modals.login.title')}

    -
    - - - + + +
  • + {t('menu.login')} +
  • +
    + +
    +
    +

    {t('modals.login.title')}

    + + + +
    -
    - + + - + -
    - +
    ) } diff --git a/styles/variables.scss b/styles/variables.scss index e602b20d..b3f377e2 100644 --- a/styles/variables.scss +++ b/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;