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 ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば
This commit is contained in:
maruyama.t
parent
46fdef854e
commit
1ad3cb70c6
@ -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();
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -73,9 +73,9 @@
|
||||
"adminName": "Name des Administrators",
|
||||
"email": "E-Mail-Addresse",
|
||||
"password": "Passwort",
|
||||
"termsLink": "Klicken Sie hier, um die Nutzungsbedingungen zu lesen.",
|
||||
"termsLinkFor": "für ODMS Cloud.",
|
||||
"termsCheckBox": "Ja, ich stimme den Nutzungsbedingungen zu.",
|
||||
"linkOfEula": "Klicken Sie hier, um die Endbenutzer-Lizenzvereinbarung zu lesen.",
|
||||
"linkOfPrivacyNotice": "Klicken Sie hier, um die Datenschutzerklärung zu lesen.",
|
||||
"forOdms": "für ODMS Cloud.",
|
||||
"createAccountButton": "Einreichen"
|
||||
}
|
||||
},
|
||||
@ -555,4 +555,4 @@
|
||||
"close": "(de)Close"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,8 +73,9 @@
|
||||
"adminName": "Administrator‘s Name",
|
||||
"email": "Email Address",
|
||||
"password": "Password",
|
||||
"termsLink": "Click here to read the terms of use",
|
||||
"termsLinkFor": "for OMDS Cloud.",
|
||||
"linkOfEula": "Click here to read the End User License Agreement.",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.",
|
||||
"termsLinkFor": "para la nube ODMS.",
|
||||
"linkOfEula": "Haga clic aquí para leer el Acuerdo de licencia de usuario final.",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.",
|
||||
"termsLinkFor": "pour ODMS Cloud.",
|
||||
"linkOfEula": "Cliquez ici pour lire le contrat de licence utilisateur final.",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user