fix: email verification and UX

fix: remove annotations

fix: styles

fix: move directives from schema

chore: rework auth routes

feat: start graphql schema modularization

feat: start directives rework

fix: directive cycle

fix: directive resolve

fix: schema auth directive

feat: migrate auth routes to gql

fix: apollo client

fix: migrate forms to formik

refactor: user resolver

chore: final touches on auth components

fix: routes

new-lamassu-admin/src/pages/Authentication/LoginState.js

@@ -1,128 +1,134 @@
+import { useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
-import axios from 'axios'
+import { Field, Form, Formik } from 'formik'
+import gql from 'graphql-tag'
 import React, { useState } from 'react'
+import * as Yup from 'yup'
 
 import { Button } from 'src/components/buttons'
-import { Checkbox, TextInput } from 'src/components/inputs/base'
+import { Checkbox, SecretInput, TextInput } from 'src/components/inputs/formik'
 import { Label2, P } from 'src/components/typography'
 
 import styles from './Login.styles'
 
-const url =
-  process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
-
 const useStyles = makeStyles(styles)
 
+const LOGIN = gql`
+  mutation login($username: String!, $password: String!) {
+    login(username: $username, password: $password)
+  }
+`
+
+const validationSchema = Yup.object().shape({
+  client: Yup.string()
+    .required('Client field is required!')
+    .email('Username field should be in an email format!'),
+  password: Yup.string().required('Password field is required'),
+  rememberMe: Yup.boolean()
+})
+
+const initialValues = {
+  client: '',
+  password: '',
+  rememberMe: false
+}
+
 const LoginState = ({
-  clientField,
   onClientChange,
-  passwordField,
   onPasswordChange,
-  rememberMeField,
   onRememberMeChange,
   STATES,
   handleLoginState
 }) => {
   const classes = useStyles()
 
+  const [login, { error: mutationError }] = useMutation(LOGIN, {
+    onCompleted: ({ login }) => {
+      if (login === 'INPUT2FA') handleLoginState(STATES.INPUT_2FA)
+      if (login === 'SETUP2FA') handleLoginState(STATES.SETUP_2FA)
+      if (login === 'FAILED') setInvalidLogin(true)
+    }
+  })
+
   const [invalidLogin, setInvalidLogin] = useState(false)
 
-  const handleClientChange = event => {
-    onClientChange(event.target.value)
-    setInvalidLogin(false)
-  }
-
-  const handlePasswordChange = event => {
-    onPasswordChange(event.target.value)
-    setInvalidLogin(false)
-  }
-
-  const handleRememberMeChange = () => {
-    onRememberMeChange(!rememberMeField)
-  }
-
-  const handleLogin = () => {
-    axios({
-      method: 'POST',
-      url: `${url}/api/login`,
-      data: {
-        username: clientField,
-        password: passwordField,
-        rememberMe: rememberMeField
-      },
-      options: {
-        withCredentials: true
-      },
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    })
-      .then((res, err) => {
-        if (err) return
-        if (res) {
-          const status = res.status
-          const message = res.data.message
-          if (status === 200 && message === 'INPUT2FA')
-            handleLoginState(STATES.INPUT_2FA)
-          if (status === 200 && message === 'SETUP2FA')
-            handleLoginState(STATES.SETUP_2FA)
-        }
-      })
-      .catch(err => {
-        if (err.response && err.response.data) {
-          if (err.response.status === 403) setInvalidLogin(true)
-        }
-      })
+  const getErrorMsg = (formikErrors, formikTouched) => {
+    if (!formikErrors || !formikTouched) return null
+    if (mutationError) return 'Internal server error'
+    if (formikErrors.client && formikTouched.client) return formikErrors.client
+    if (formikErrors.password && formikTouched.password)
+      return formikErrors.password
+    if (invalidLogin) return 'Invalid login/password combination'
+    return null
   }
 
   return (
     <>
-      <Label2 className={classes.inputLabel}>Client</Label2>
-      <TextInput
-        className={classes.input}
-        error={invalidLogin}
-        name="client-name"
-        autoFocus
-        id="client-name"
-        type="text"
-        size="lg"
-        onChange={handleClientChange}
-        value={clientField}
-      />
-      <Label2 className={classes.inputLabel}>Password</Label2>
-      <TextInput
-        className={classes.input}
-        error={invalidLogin}
-        name="password"
-        id="password"
-        type="password"
-        size="lg"
-        onChange={handlePasswordChange}
-        value={passwordField}
-      />
-      <div className={classes.rememberMeWrapper}>
-        <Checkbox
-          className={classes.checkbox}
-          id="remember-me"
-          onChange={handleRememberMeChange}
-          value={rememberMeField}
-        />
-        <Label2 className={classes.inputLabel}>Keep me logged in</Label2>
-      </div>
-      <div className={classes.footer}>
-        {invalidLogin && (
-          <P className={classes.errorMessage}>
-            Invalid login/password combination.
-          </P>
+      <Formik
+        validationSchema={validationSchema}
+        initialValues={initialValues}
+        onSubmit={values => {
+          setInvalidLogin(false)
+          onClientChange(values.client)
+          onPasswordChange(values.password)
+          onRememberMeChange(values.rememberMe)
+          login({
+            variables: {
+              username: values.client,
+              password: values.password
+            }
+          })
+        }}>
+        {({ errors, touched }) => (
+          <Form id="login-form">
+            <Field
+              name="client"
+              label="Client"
+              size="lg"
+              component={TextInput}
+              fullWidth
+              autoFocus
+              className={classes.input}
+              error={getErrorMsg(errors, touched)}
+              onKeyUp={() => {
+                if (invalidLogin) setInvalidLogin(false)
+              }}
+            />
+            <Field
+              name="password"
+              size="lg"
+              component={SecretInput}
+              label="Password"
+              fullWidth
+              error={getErrorMsg(errors, touched)}
+              onKeyUp={() => {
+                if (invalidLogin) setInvalidLogin(false)
+              }}
+            />
+            <div className={classes.rememberMeWrapper}>
+              <Field
+                name="rememberMe"
+                className={classes.checkbox}
+                component={Checkbox}
+              />
+              <Label2 className={classes.inputLabel}>Keep me logged in</Label2>
+            </div>
+            <div className={classes.footer}>
+              {getErrorMsg(errors, touched) && (
+                <P className={classes.errorMessage}>
+                  {getErrorMsg(errors, touched)}
+                </P>
+              )}
+              <Button
+                type="submit"
+                form="login-form"
+                buttonClassName={classes.loginButton}>
+                Login
+              </Button>
+            </div>
+          </Form>
         )}
-        <Button
-          onClick={() => {
-            handleLogin()
-          }}
-          buttonClassName={classes.loginButton}>
-          Login
-        </Button>
-      </div>
+      </Formik>
     </>
   )
 }