#21: Cleanup login code

client/src/components/Login.tsx

 import { AppBar, Button, Tab, Tabs, TextField } from '@material-ui/core'
 import { makeStyles, Theme, withStyles } from '@material-ui/core/styles'
-import { Alert, AlertTitle } from '@material-ui/lab'
 import axios from 'axios'
-import { Formik, FormikHelpers } from 'formik'
+import { FieldAttributes, Form, Formik, FormikHelpers, useField } from 'formik'
 import React from 'react'
 import * as Yup from 'yup'
 import { AccountLoginModel, CompetitionLoginModel } from '../interfaces/models'
@@ -25,23 +24,13 @@ interface ServerResponse {
   message: string
 }
 
-const accountSchema: Yup.SchemaOf<AccountLoginFormModel> = Yup.object({
-  model: Yup.object()
-    .shape({
-      email: Yup.string().email('Email inte giltig').required('Email krävs'),
-      password: Yup.string().required('Lösenord krävs').min(6, 'Lösenord måste vara minst 6 karaktärer'),
-    })
-    .required(),
-  error: Yup.string().optional(),
+const accountLoginSchema: Yup.SchemaOf<AccountLoginModel> = Yup.object({
+  email: Yup.string().required('Emailadress krävs').email('Ogiltig emailadress'),
+  password: Yup.string().required('Lösenord krävs').min(8, 'Lösenord måste vara minst 6 tecken'),
 })
 
-const competitionSchema: Yup.SchemaOf<CompetitionLoginFormModel> = Yup.object({
-  model: Yup.object()
-    .shape({
-      code: Yup.string().required('Mata in kod').min(6, 'Koden måste vara minst 6 karaktärer'),
-    })
-    .required(),
-  error: Yup.string().optional(),
+const competitionSchema: Yup.SchemaOf<CompetitionLoginModel> = Yup.object({
+  code: Yup.string().required('Mata in kod').length(4, 'Koden måste vara 4 tecken'),
 })
 
 const handleAccountSubmit = async (values: AccountLoginFormModel, actions: FormikHelpers<AccountLoginFormModel>) => {
@@ -79,86 +68,70 @@ interface TabPanelProps {
   activeTab: number
 }
 
+const CustomInputField = (props: FieldAttributes<any>) => {
+  const [field, meta] = useField<Record<string, unknown>>(props)
+  const errorText = meta.error && meta.touched ? meta.error : ''
+  return <TextField {...field} {...props} helperText={errorText} type="input" margin="normal"></TextField>
+}
+
 function LoginTab(props: TabPanelProps) {
-  const accountInitialValues: AccountLoginFormModel = {
-    model: { email: '', password: '' },
+  const accountInitialValues: AccountLoginModel = {
+    email: '',
+    password: '',
   }
-  const competitionInitialValues: CompetitionLoginFormModel = {
-    model: { code: '' },
+  const competitionInitalValues: CompetitionLoginModel = {
+    code: '',
   }
   const { activeTab } = props
   if (activeTab === 0) {
     return (
-      <Formik initialValues={accountInitialValues} validationSchema={accountSchema} onSubmit={handleAccountSubmit}>
-        {(formik) => (
-          <form onSubmit={formik.handleSubmit} className="login-form">
-            <TextField
-              label="Email Adress"
-              name="model.email"
-              helperText={formik.touched.model?.email ? formik.errors.model?.email : ''}
-              error={Boolean(formik.errors.model?.email)}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              margin="normal"
-            />
-            <TextField
-              label="Lösenord"
-              name="model.password"
-              type="password"
-              helperText={formik.touched.model?.password ? formik.errors.model?.password : ''}
-              error={Boolean(formik.errors.model?.password)}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              margin="normal"
-            />
-            <Button type="submit" fullWidth variant="contained" color="primary" disabled={!formik.isValid}>
-              Logga in
-            </Button>
-            {formik.errors.error ? (
-              <Alert severity="error">
-                <AlertTitle>Error</AlertTitle>
-                {formik.errors.error}
-              </Alert>
-            ) : (
-              <div />
-            )}
-          </form>
-        )}
-      </Formik>
+      <div>
+        <Formik
+          initialValues={accountInitialValues}
+          validationSchema={accountLoginSchema}
+          onSubmit={(values: AccountLoginModel) => {
+            console.log('Login')
+          }}
+        >
+          {(formik) => (
+            <Form className="login-form">
+              <CustomInputField name="email" label="Emailadress" error={'email' in formik.errors}></CustomInputField>
+              <CustomInputField name="password" label="Lösenord" error={'password' in formik.errors}></CustomInputField>
+              <Button type="submit" fullWidth variant="contained" color="primary" disabled={!formik.isValid}>
+                Logga in
+              </Button>
+              {/* <pre>{JSON.stringify(formik.values, null, 2)}</pre>
+              <pre>{JSON.stringify(formik.errors, null, 2)}</pre> */}
+            </Form>
+          )}
+        </Formik>
+      </div>
     )
-  }
-  return (
-    <Formik
-      initialValues={competitionInitialValues}
-      validationSchema={competitionSchema}
-      onSubmit={handleCompetitionSubmit}
-    >
-      {(formik) => (
-        <form onSubmit={formik.handleSubmit} className="login-form">
-          <TextField
-            label="Tävlingskod"
-            name="model.code"
-            helperText={formik.touched.model?.code ? formik.errors.model?.code : ''}
-            error={Boolean(formik.errors.model?.code)}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            margin="normal"
-          />
-          <Button type="submit" fullWidth variant="contained" color="primary" disabled={!formik.isValid}>
-            Login
-          </Button>
-          {formik.errors.error ? (
-            <Alert severity="error">
-              <AlertTitle>Error</AlertTitle>
-              {formik.errors.error}
-            </Alert>
-          ) : (
-            <div />
+  } else if (activeTab === 1) {
+    return (
+      <div>
+        <Formik
+          initialValues={competitionInitalValues}
+          validationSchema={competitionSchema}
+          onSubmit={(values: CompetitionLoginModel) => {
+            console.log('Connect')
+          }}
+        >
+          {(formik) => (
+            <Form className="login-form">
+              <CustomInputField name="code" label="Tävlingskod" error={'code' in formik.errors}></CustomInputField>
+              <Button type="submit" fullWidth variant="contained" color="primary" disabled={!formik.isValid}>
+                Anslut till tävling
+              </Button>
+              {/* <pre>values: {JSON.stringify(formik.values, null, 2)}</pre>
+              <pre>errors: {JSON.stringify(formik.errors, null, 2)}</pre> */}
+            </Form>
           )}
-        </form>
-      )}
-    </Formik>
-  )
+        </Formik>
+      </div>
+    )
+  }
+  return <div></div>
 }
 
 const useStyles = makeStyles((theme: Theme) => ({