フロントエンド定例 2022/5/27

import { css } from '@emotion/core';
import { Input } from '@lancers/design_guideline'; // Inputフォーム
import { FormLayout } from 'component/layout'; // 送信ボタンを含むレイアウトコンポーネント
import { TitleDescriptionHorizontal } from 'component/ui'; // タイトル、詳細を表示するコンポーネント
import React from 'react';
import { useLogic } from './logic';

export const UserPassword: React.FC = () => {
  const {
    handleSubmit,
    onSubmit,
    nicknameRegister,
    passwordRegister,
    purposeRegister,
    errors,
  } = useLogic();

  return (
    <FormLayout
      title="ユーザー名とパスワードを設定してください"
      buttonType="single"
      handleSubmit={handleSubmit}
      onSubmit={onSubmit}
    >
      <TitleDescriptionHorizontal
        title="ユーザー名"
        description="半角英数字記号 4文字以上(使用可能記号 -_ )"
      />
      <Input
        placeholder="例：user_001"
        css={mtInputCss}
        name={nicknameRegister.name}
        inputRef={nicknameRegister.ref}
        onChange={nicknameRegister.onChange}
        onBlur={nicknameRegister.onBlur}
        errorMessage={errors.nickname?.message}
      />
    </FormLayout>
  );
};

const mtCss = css`
margin-top: 32px;
`;

const mtInputCss = css`
margin-top: 8px;
`;

export const LOCAL_CONSTANT = {
  NICKNAME_KEY: 'nickname',
  PASSWORD_KEY: 'password',
  PURPOSE_KEY: 'purpose',
  EMAIL_HASH_KEY: 'email_hash',
  NICKNAME_MIN_LENGTH: 4,
  NICKNAME_MAX_LENGTH: 25,
  PASSWORD_MIN_LENGTH: 8,
  PASSWORD_MAX_LENGTH: 32,
} as const;

// useFormのロジック
const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<SubmitDataArgumentType>({
  mode: 'onSubmit',
  criteriaMode: 'all',
  shouldFocusError: false,
});

// エラーバリデーションを直接記述
const nicknameRegister = register('nickname', {
  required: '必須入力のエラーメッセージ',
  min: {
    value: 4,
    message: '最小文字数入力のエラーメッセージ'
  },
  max: {
    value: 25,
    message: '最大文字数入力のエラーメッセージ'
  },
  pattern: {
    value: /[A-Za-z]{3}/,
    message: '正規表現のエラーメッセージ'
  }
});
const passwordRegister = register('password', {
  required: '必須エラー',
  min: {
    value: 4,
    message: '最小文字数入力のエラーメッセージ'
  },
  max: {
    value: 25,
    message: '最大文字数入力のエラーメッセージ'
  },
  pattern: {
    value: /[A-Za-z]{3}/,
    message: '正規表現のエラーメッセージ'
  }
});
const purposeRegister = register('purpose', {
  required: '必須エラー'
});

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<SubmitDataArgumentType>({
  mode: 'onSubmit',
  criteriaMode: 'all',
  shouldFocusError: false,
  resolver: yupResolver(errorScheme), // logic.ts側はresolverの記述のみでok
});

import * as yup from 'yup';
import { ERROR_MESSAGE, REGEXP } from 'constant';
import { LOCAL_CONSTANT } from './localConstant';

export const errorScheme = yup.object().shape({
  nickname:
    yup
    .string()
    .required('必須入力のエラーメッセージ')
    .matches(
      /^[a-zA-Z0-9_-]*$/,
      '正規表現のエラーメッセージ'
    )
    .min(
      4,
      '最小文字数のエラーメッセージ'
    )
    .max(
      25,
      '最大文字数のエラーメッセージ'
    ),
  password:
    yup
    .string()
    .required('必須入力のエラーメッセージ')
    .matches(
      /^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/,
      '正規表現のエラーメッセージ'
    )
    .min(
      8,
      '最小文字数のエラーメッセージ'
    )
    .max(
      32,
      '最大文字数のエラーメッセージ'
    ),
  purpose:
    yup
    .mixed()
    .nullable()
    .required('必須入力のエラーメッセージ'),
});