selectable scopo with hard code scope

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

@@ -3,7 +3,6 @@ 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;
@@ -15,11 +14,9 @@ type AccessTokenFormProps = {
 type FormInputs = {
   expiredAt: string;
   description: string;
-  // TODO: Implement scope selection
-  // scopes: string[];
+  scopes: string[];
 }
 
-// TODO: Implement scope selection
 export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Element => {
   const { submitHandler } = props;
   const { t } = useTranslation();
@@ -37,17 +34,17 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
     defaultValues: {
       expiredAt: defaultExpiredAtStr,
       description: '',
+      scopes: [],
     },
   });
 
   const onSubmit = (data: FormInputs) => {
     const expiredAtDate = new Date(data.expiredAt);
-    const scope = []; // TODO: Implement scope selection
 
     submitHandler({
       expiredAt: expiredAtDate,
       description: data.description,
-      scope,
+      scope: data.scopes, // scope の値を正しく送信
     });
   };
 
@@ -109,9 +106,35 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
           </div>
 
           <div className="mb-3">
-            <label htmlFor="scope" className="form-label">{t('page_me_access_token.scope')}</label>
+            <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 className="form-text mb-2">(TBD)</div>
           </div>
 
           <button