weseek__growi/apps/app/src/client/components/Me/AccessTokenForm.tsx

import React from 'react';

import { useTranslation } from 'next-i18next';
import { useForm } from 'react-hook-form';

import type { IAccessTokenInfo } from '~/interfaces/access-token';

const MAX_DESCRIPTION_LENGTH = 200;

type AccessTokenFormProps = {
  submitHandler: (info: IAccessTokenInfo) => Promise<void>;
}

type FormInputs = {
  expiredAt: string;
  description: string;
  scopes: string[];
}

export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Element => {
  const { submitHandler } = props;
  const { t } = useTranslation();

  const defaultExpiredAt = new Date();
  defaultExpiredAt.setMonth(defaultExpiredAt.getMonth() + 1);
  const defaultExpiredAtStr = defaultExpiredAt.toISOString().split('T')[0];
  const todayStr = new Date().toISOString().split('T')[0];

  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm<FormInputs>({
    defaultValues: {
      expiredAt: defaultExpiredAtStr,
      description: '',
      scopes: [],
    },
  });

  const onSubmit = (data: FormInputs) => {
    const expiredAtDate = new Date(data.expiredAt);

    submitHandler({
      expiredAt: expiredAtDate,
      description: data.description,
      scope: data.scopes, // scope の値を正しく送信
    });
  };

  return (
    <div className="card mt-3 mb-4">
      <div className="card-header">{t('page_me_access_token.form.title')}</div>
      <div className="card-body">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="mb-3">
            <label htmlFor="expiredAt" className="form-label">{t('page_me_access_token.expiredAt')}</label>
            <div className="row">
              <div className="col-16 col-sm-4 col-md-4 col-lg-3">
                <div className="input-group">
                  <input
                    type="date"
                    className={`form-control ${errors.expiredAt ? 'is-invalid' : ''}`}
                    data-testid="grw-accesstoken-input-expiredAt"
                    min={todayStr}
                    {...register('expiredAt', {
                      required: t('input_validation.message.required', { param: t('page_me_access_token.expiredAt') }),
                      validate: (value) => {
                        const date = new Date(value);
                        const now = new Date();
                        return date > now || 'Expiration date must be in the future';
                      },
                    })}
                  />
                </div>
                {errors.expiredAt && (
                  <div className="invalid-feedback d-block">
                    {errors.expiredAt.message}
                  </div>
                )}
              </div>
            </div>
            <div className="form-text">{t('page_me_access_token.form.expiredAt_desc')}</div>
          </div>

          <div className="mb-3">
            <label htmlFor="description" className="form-label">{t('page_me_access_token.description')}</label>
            <textarea
              className={`form-control ${errors.description ? 'is-invalid' : ''}`}
              rows={3}
              data-testid="grw-accesstoken-textarea-description"
              {...register('description', {
                required: t('input_validation.message.required', { param: t('page_me_access_token.description') }),
                maxLength: {
                  value: MAX_DESCRIPTION_LENGTH,
                  message: t('page_me_access_token.form.description_max_length', { length: MAX_DESCRIPTION_LENGTH }),
                },
              })}
            />
            {errors.description && (
              <div className="invalid-feedback">
                {errors.description.message}
              </div>
            )}
            <div className="form-text">{t('page_me_access_token.form.description_desc')}</div>
          </div>

          <div className="mb-3">
            <label htmlFor="scopes" className="form-label">
              {t('page_me_access_token.scopes')}
            </label>
            <div className="border container rounded py-2 px-3">
              {[
                { id: 'admin', label: 'admin', desc: 'Access admin data' },
                { id: 'user', label: 'user', desc: 'Access user data' },
              ].map(({ id, label, desc }, index, array) => (
                <>
                  <div className="row align-items-center" key={id}>
                    <div className="col-md-3">
                      <input
                        className="form-check-input"
                        type="checkbox"
                        id={id}
                        value={id}
                        {...register('scopes')}
                      />
                      <label className="form-check-label fw-bold ms-2" htmlFor={id}>{label}</label>
                    </div>
                    <div className="col">
                      <span className="text-muted">{desc}</span>
                    </div>
                  </div>
                  {index < array.length - 1 && <hr className="my-1" />}
                </>
              ))}
            </div>
            <div className="form-text mb-2">{t('page_me_access_token.form.scope_desc')}</div>
          </div>

          <button
            type="submit"
            className="btn btn-primary"
            data-testid="grw-accesstoken-create-button"
            disabled={!isValid}
          >
            {t('page_me_access_token.create_token')}
          </button>
        </form>
      </div>
    </div>
  );
});
AccessTokenForm.displayName = 'AccessTokenForm';