Merged PR 687: アカウント登録画面修正

## 概要
[Task3437: アカウント登録画面修正](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3437)

- アカウント登録時にPrivacyNoticeに同意できるよう修正（サーバに処理自体は入っていたが、画面修正だけが漏れていた）
- アカウント登録画面と利用規約同意画面で文言が統一されていなかったのを修正。
- 利用規約同意画面で、規約に同意する文言のlabel→label htmlForに修正
（文言にマウスオーバーするとカーソルが矢印から指に代わるが、チェックボックスを押さないかぎりチェックが付かなかったのを、文言を押してもチェックが付くように修正）

## レビューポイント
とくになし

## UIの変更
https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task3437?csf=1&web=1&e=wGHFhu

## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば

dictation_client/src/pages/SignupPage/signupInput.tsx

@@ -39,7 +39,11 @@ const SignupInput: React.FC = (): JSX.Element => {
   const navigate = useNavigate();
   const [isPasswordHide, setIsPasswordHide] = useState<boolean>(true);
   const [isOpenPolicy, setIsOpenPolicy] = useState<boolean>(false);
-  const [isAgreePolicy, setIsAgreePolicy] = useState<boolean>(false);
+  const [isOpenPrivacyNotice, setIsOpenPrivacyNoyice] =
+    useState<boolean>(false);
+  const [isCheckedEula, setIsCheckedEula] = useState<boolean>(false);
+  const [isCheckedPrivacyNotice, setIsCheckedPrivacyNotice] =
+    useState<boolean>(false);
   const [isPushCreateButton, setIsPushCreateButton] = useState<boolean>(false);
   const {
     hasErrorEmptyAdminName,
@@ -90,6 +94,9 @@ const SignupInput: React.FC = (): JSX.Element => {
     dispatch(getLatestEulaVersionAsync());
   }, [dispatch]);
 
+  // ボタン押下可否判定ロジック
+  const canClickButton = () => isCheckedEula && isCheckedPrivacyNotice;
+
   useEffect(() => {
     // 外部のWebサイトからの遷移時にURLのパラメータを取得
     // 以下のようなURLで遷移してきた場合に、Dealerと言語を変更する
@@ -371,18 +378,48 @@ const SignupInput: React.FC = (): JSX.Element => {
                       setIsOpenPolicy(true);
                     }}
                   >
-                    {t(getTranslationID("signupPage.label.termsLink"))}
+                    {t(getTranslationID("signupPage.label.linkOfEula"))}
                   </a>
-                  {` ${t(getTranslationID("signupPage.label.termsLinkFor"))} `}
+                  {` ${t(getTranslationID("signupPage.label.forOdms"))} `}
                   <br />
-                  <label htmlFor="check-box">
+                  <label htmlFor="checkboxEula">
                     <input
-                      id="check-box"
+                      id="checkboxEula"
                       type="checkbox"
+                      checked={isCheckedEula}
                       className={styles.formCheck}
                       disabled={!isOpenPolicy}
                       onChange={(e) => {
-                        setIsAgreePolicy(e.target.checked);
+                        setIsCheckedEula(e.target.checked);
+                      }}
+                    />
+                    {t(getTranslationID("signupPage.label.termsCheckBox"))}
+                  </label>
+                </dd>
+                <dd className={`${styles.full} ${styles.alignCenter}`}>
+                  <a
+                    href="/"
+                    target="_blank"
+                    className={styles.linkTx}
+                    onClick={() => {
+                      setIsOpenPrivacyNoyice(true);
+                    }}
+                  >
+                    {t(
+                      getTranslationID("signupPage.label.linkOfPrivacyNotice")
+                    )}
+                  </a>
+                  {` ${t(getTranslationID("signupPage.label.forOdms"))} `}
+                  <br />
+                  <label htmlFor="checkboxPrivacyNotice">
+                    <input
+                      id="checkboxPrivacyNotice"
+                      type="checkbox"
+                      checked={isCheckedPrivacyNotice}
+                      className={styles.formCheck}
+                      disabled={!isOpenPrivacyNotice}
+                      onChange={(e) => {
+                        setIsCheckedPrivacyNotice(e.target.checked);
                       }}
                     />
                     {t(getTranslationID("signupPage.label.termsCheckBox"))}
@@ -396,8 +433,9 @@ const SignupInput: React.FC = (): JSX.Element => {
                       getTranslationID("signupPage.label.createAccountButton")
                     )}
                     className={`${styles.formSubmit} 
-                    ${isAgreePolicy && styles.isActive}
+                    ${styles.marginBtm0}
-                    ${styles.marginBtm0}`}
+                    ${canClickButton() ? styles.isActive : ""}
+                    `}
                     onClick={() => {
                       setIsPushCreateButton(true);
                       onSubmit();

dictation_client/src/pages/TermsPage/index.tsx

@@ -166,8 +166,9 @@ const TermsPage: React.FC = (): JSX.Element => {
                     {` ${t(getTranslationID("termsPage.label.forOdms"))}`}
                   </p>
                   <p>
-                    <label>
+                    <label htmlFor="checkboxEula">
                       <input
+                        id="checkboxEula"
                         type="checkbox"
                         checked={isCheckedEula}
                         className={styles.formCheck}
@@ -199,8 +200,9 @@ const TermsPage: React.FC = (): JSX.Element => {
                     {` ${t(getTranslationID("termsPage.label.forOdms"))}`}
                   </p>
                   <p>
-                    <label>
+                    <label htmlFor="checkboxPrivacyNotice">
                       <input
+                        id="checkboxPrivacyNotice"
                         type="checkbox"
                         checked={isCheckedPrivacyNotice}
                         className={styles.formCheck}
@@ -234,8 +236,9 @@ const TermsPage: React.FC = (): JSX.Element => {
                       {` ${t(getTranslationID("termsPage.label.forOdms"))}`}
                     </p>
                     <p>
-                      <label>
+                      <label htmlFor="checkboxDpa">
                         <input
+                          id="checkboxDpa"
                           type="checkbox"
                           checked={isCheckedDpa}
                           className={styles.formCheck}

dictation_client/src/translation/de.json

@@ -73,9 +73,9 @@
       "adminName": "Name des Administrators",
       "email": "E-Mail-Addresse",
       "password": "Passwort",
-      "termsLink": "Klicken Sie hier, um die Nutzungsbedingungen zu lesen.",
+      "linkOfEula": "Klicken Sie hier, um die Endbenutzer-Lizenzvereinbarung zu lesen.",
-      "termsLinkFor": "für ODMS Cloud.",
+      "linkOfPrivacyNotice": "Klicken Sie hier, um die Datenschutzerklärung zu lesen.",
-      "termsCheckBox": "Ja, ich stimme den Nutzungsbedingungen zu.",
+      "forOdms": "für ODMS Cloud.",
       "createAccountButton": "Einreichen"
     }
   },
@@ -555,4 +555,4 @@
       "close": "(de)Close"
     }
   }
-}
+}

dictation_client/src/translation/en.json

@@ -73,8 +73,9 @@
       "adminName": "Administrator‘s Name",
       "email": "Email Address",
       "password": "Password",
-      "termsLink": "Click here to read the terms of use",
+      "linkOfEula": "Click here to read the End User License Agreement.",
-      "termsLinkFor": "for OMDS Cloud.",
+      "linkOfPrivacyNotice": "Click here to read the Privacy Notice.",
+      "forOdms": "for ODMS Cloud.",
       "termsCheckBox": "Yes, I agree to the terms of use.",
       "createAccountButton": "Submit"
     }
@@ -555,4 +556,4 @@
       "close": "Close"
     }
   }
-}
+}

dictation_client/src/translation/es.json

@@ -73,8 +73,9 @@
       "adminName": "Nombre del administrador",
       "email": "Dirección de correo electrónico",
       "password": "Contraseña",
-      "termsLink": "Haga clic aquí para leer el término de uso.",
+      "linkOfEula": "Haga clic aquí para leer el Acuerdo de licencia de usuario final.",
-      "termsLinkFor": "para la nube ODMS.",
+      "linkOfPrivacyNotice": "Haga clic aquí para leer el Aviso de Privacidad.",
+      "forOdms": "para la nube ODMS.",
       "termsCheckBox": "Sí, estoy de acuerdo con los términos de uso.",
       "createAccountButton": "Entregar"
     }
@@ -555,4 +556,4 @@
       "close": "(es)Close"
     }
   }
-}
+}

dictation_client/src/translation/fr.json

@@ -73,8 +73,9 @@
       "adminName": "Nom de l'administrateur",
       "email": "Adresse e-mail",
       "password": "Mot de passe",
-      "termsLink": "Cliquez ici pour lire les conditions d'utilisation.",
+      "linkOfEula": "Cliquez ici pour lire le contrat de licence utilisateur final.",
-      "termsLinkFor": "pour ODMS Cloud.",
+      "linkOfPrivacyNotice": "Cliquez ici pour lire l'avis de confidentialité.",
+      "forOdms": "pour ODMS Cloud.",
       "termsCheckBox": "Oui, j'accepte les conditions d'utilisation.",
       "createAccountButton": "Soumettre"
     }
@@ -555,4 +556,4 @@
       "close": "(fr)Close"
     }
   }
-}
+}