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';
import type { Scope } from '~/interfaces/scope';

import { AccessTokenScopeSelect } from './AccessTokenScopeSelect';

const MAX_DESCRIPTION_LENGTH = 200;

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

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

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 },
    watch,
  } = useForm<FormInputs>({
    defaultValues: {
      expiredAt: defaultExpiredAtStr,
      description: '',
      scopes: [],
    },
  });

  const onSubmit = (data: FormInputs) => {
    const expiredAtDate = new Date(data.expiredAt);
    expiredAtDate.setHours(23, 59, 59, 999);
    const scopes: Scope[] = data.scopes ? data.scopes : [];

    submitHandler({
      expiredAt: expiredAtDate,
      description: data.description,
      scopes,
    });
  };

  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 only dates
                      validate: (value) => {
                        const date = new Date(value);
                        const now = new Date();
                        // Reset time portions to compare dates only
                        date.setHours(0, 0, 0, 0);
                        now.setHours(0, 0, 0, 0);
                        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.scope')}
            </label>
            <AccessTokenScopeSelect
              selectedScopes={watch('scopes')}
              register={register('scopes', {
                required: t('input_validation.message.required', { param: t('page_me_access_token.scope') }),
              })}
            />
            {errors.scopes && (
              <div className="invalid-feedback">
                {errors.scopes.message}
              </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';