Form components. New login page.

This commit is contained in:
Mike Cao 2020-08-06 22:03:02 -07:00
parent 9d09d89aef
commit a09867f28c
14 changed files with 165 additions and 45 deletions

View file

@ -1,8 +1,9 @@
import React, { useState } from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { Formik, Form, Field } from 'formik';
import Router from 'next/router';
import { post } from 'lib/web';
import Button from './Button';
import FormLayout, { FormButtons, FormError, FormMessage, FormRow } from './FormLayout';
import styles from './Login.module.css';
const validate = ({ username, password }) => {
@ -32,30 +33,35 @@ export default function Login() {
};
return (
<Formik
initialValues={{
username: '',
password: '',
}}
validate={validate}
onSubmit={handleSubmit}
>
{() => (
<Form className={styles.form}>
<h3>{message}</h3>
<div>
<label htmlFor="username">Username</label>
<Field name="username" type="text" />
<ErrorMessage name="username" />
</div>
<div>
<label htmlFor="password">Password</label>
<Field name="password" type="password" />
<ErrorMessage name="password" />
</div>
<Button type="submit">Submit</Button>
</Form>
)}
</Formik>
<FormLayout>
<Formik
initialValues={{
username: '',
password: '',
}}
validate={validate}
onSubmit={handleSubmit}
>
{() => (
<Form>
<h1 className={styles.title}>umami</h1>
<FormRow>
<label htmlFor="username">Username</label>
<Field name="username" type="text" />
<FormError name="username" />
</FormRow>
<FormRow>
<label htmlFor="password">Password</label>
<Field name="password" type="password" />
<FormError name="password" />
</FormRow>
<FormButtons>
<Button type="submit">Login</Button>
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>
)}
</Formik>
</FormLayout>
);
}