Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {useCallback, useEffect, useState} from 'react';
- import styled from '@emotion/styled/macro';
- import * as yup from 'yup';
- import { FontSize } from '../constants/base';
- import MessageBox from './MessageBox';
- import { authenticate } from '../service/user';
- const Form = styled.form`
- font-family: Noto Sans JP;
- width: 25%;
- `;
- const Field = styled.input`
- display: block;
- width: 100%;
- height: 40px;
- font-size: ${FontSize.Regular};
- padding: 0 10px;
- margin-bottom: 10px;
- border: 1px solid #ccc;
- border-radius: 5px;
- box-sizing: border-box;
- `;
- const SignInButton = styled.button`
- background: #333;
- color: #fff;
- font-size: ${FontSize.Regular};
- width: 100%;
- height: 40px;
- border-radius: 5px;
- font-weight: bold;
- `;
- const SignInForm: React.FC = () => {
- const [email, setEmail] = useState<string>('');
- const [password, setPassword] = useState<string>('');
- const [messages, setMessages] = useState<string[]|null>(null);
- const [canSubmit, setCanSubmit] = useState<boolean>(false);
- const [hasError, setHasError] = useState<boolean>(false);
- const onChangeField = useCallback(
- (event: React.ChangeEvent<HTMLInputElement>) => {
- switch (event.target.name) {
- case 'email':
- setEmail(event.target.value);
- break;
- case 'password':
- setPassword(event.target.value);
- break;
- }
- },
- [],
- );
- const validate = async (values: {[key: string]: string}): Promise<void> => {
- const signInScheme = yup.object().shape({
- email: yup
- .string()
- .email('Email must be a valid.')
- .required('Email must not be a empty.'),
- password: yup
- .string()
- .min(8, 'Password must be at least 8 characters.')
- .matches(/^[A-Za-z0-9●!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]+$/, 'Password must be a valid.')
- .required('Password must not be a empty.')
- });
- try {
- await signInScheme.validate(values, { abortEarly: false });
- } catch (error) {
- throw error;
- }
- };
- const onSubmit = useCallback(
- async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
- event.preventDefault();
- const formValues = {
- email,
- password,
- };
- try {
- await validate(formValues);
- setCanSubmit(true);
- setHasError(false);
- } catch (error) {
- setMessages(error.errors);
- setCanSubmit(false);
- setHasError(true);
- }
- if (canSubmit) {
- setMessages(null);
- try {
- await authenticate(email, password);
- setEmail('');
- setPassword('');
- setMessages(['Sign In Successfully.']);
- setCanSubmit(false);
- setHasError(false);
- } catch (error) {
- setMessages([error.message]);
- setCanSubmit(false);
- setHasError(true);
- }
- }
- },
- [email, password, canSubmit],
- );
- return (
- <Form
- onSubmit={onSubmit}
- >
- <Field
- name='email'
- placeholder='Email'
- type='email'
- value={email}
- onChange={onChangeField}
- />
- <Field
- name='password'
- placeholder='Password'
- type='password'
- value={password}
- onChange={onChangeField}
- />
- {messages &&
- <MessageBox
- messages={messages}
- status={hasError ? 'failure' : 'success'}
- />}
- <SignInButton>
- SIGN IN
- </SignInButton>
- </Form>
- )
- };
- export default SignInForm;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement