diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 3f81dfc..b147b9a 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -152,6 +152,7 @@ "privacyPolicyLink": "Datenschutzerklärung", "loginLink": "Jetzt anmelden", "signUpLink": "Jetzt registrieren", + "languageSwitchTo": "Switch to", "login": { "button": "Anmelden", "forgotPassword": "Passwort vergessen?", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 657c62c..12aaf72 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -152,6 +152,7 @@ "privacyPolicyLink": "Privacy Policy", "loginLink": "Login now", "signUpLink": "Sign up now", + "languageSwitchTo": "Sprache wechseln zu", "login": { "button": "Login", "forgotPassword": "Forgot password?", diff --git a/src/Pages/Authentication/Login.js b/src/Pages/Authentication/Login.js index f06a481..4beb40d 100644 --- a/src/Pages/Authentication/Login.js +++ b/src/Pages/Authentication/Login.js @@ -1,5 +1,5 @@ import { Button, Flex, Form, Result, Space, Typography } from "antd"; -import { useEffect, useRef, useState } from "react"; +import { useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { @@ -11,7 +11,7 @@ import { showUnkownErrorNotification, } from "../../utils"; import { - BackToZeitAdlerPricingOverview, + MyLanguageSwitch, MyRecaptcha, PendingEmailVerification, PrivacyPolicyCheckbox, @@ -23,14 +23,13 @@ import { } from "../../Components/MyFormInputs"; const LoginStep = { - ACCOUNT_NAME: 1, - PASSWORD: 2, - PENDING_DELETION: 3, - INIT_LOGIN: 4, - BANNED: 5, - _BACK_TO_PASSWORD: 6, // needed for going back from pending deletion to password step as the useEffect for the account name is triggered and would set the step to account name - PENDING_EMAIL_VERIFICATION: 7, - INIT_PAYMENT: 8, + LOGIN: 1, + PENDING_DELETION: 2, + INIT_LOGIN: 3, + BANNED: 4, + _BACK_TO_PASSWORD: 5, // needed for going back from pending deletion to password step as the useEffect for the account name is triggered and would set the step to account name + PENDING_EMAIL_VERIFICATION: 6, + INIT_PAYMENT: 7, }; // First step: account name -> get state of account by backend @@ -39,14 +38,14 @@ export function Login({ notificationApi }) { const { t } = useTranslation(); const navigate = useNavigate(); - const [step, setStep] = useState(LoginStep.ACCOUNT_NAME); + const [step, setStep] = useState(LoginStep.LOGIN); const [isRequesting, setIsRequesting] = useState(false); const recaptchaRef = useRef(null); const recaptchaValueRef = useRef(null); const [form] = Form.useForm(); - const email = Form.useWatch("email", form); + // const email = Form.useWatch("email", form); const showErrorNotification = (errStatus) => { if (errStatus === 400) { @@ -56,21 +55,21 @@ export function Login({ notificationApi }) { }); } }; - + /* useEffect(() => { if (!email) return; // triggered if step was set to pending deletion and the user wants to reactivate the account if (step === LoginStep._BACK_TO_PASSWORD) { - setStep(LoginStep.PASSWORD); + setStep(LoginStep.LOGIN); return; } // reset step if account name changed for handling the state of the account - if (step === LoginStep.PASSWORD || step === LoginStep.INIT_LOGIN) { + if (step === LoginStep.LOGIN || step === LoginStep.INIT_LOGIN) { setStep(LoginStep.ACCOUNT_NAME); } - }, [email]); + }, [email]); */ if (step === LoginStep.PENDING_DELETION) { return ( @@ -81,7 +80,7 @@ export function Login({ notificationApi }) { "authentication.login.stateAccountPendingDeletion.description" )} extra={[ - , - + + + + - + - - + + + ); } diff --git a/src/Pages/Authentication/SignUp.js b/src/Pages/Authentication/SignUp.js index 176b993..10eea8c 100644 --- a/src/Pages/Authentication/SignUp.js +++ b/src/Pages/Authentication/SignUp.js @@ -30,7 +30,7 @@ import { MyPasswordFormInput, MyUsernameFormInput, } from "../../Components/MyFormInputs"; -import { MyRecaptcha, PrivacyPolicyCheckbox } from "."; +import { MyLanguageSwitch, MyRecaptcha, PrivacyPolicyCheckbox } from "."; import MyAppLogo from "../../Components/MyAppLogo"; import { CheckOutlined } from "@ant-design/icons"; import { RequestState } from "../../Components/MyRequestStateItem"; @@ -108,7 +108,7 @@ export default function SignUp({ notificationApi }) { notificationApi: notificationApi, t: t, }) - .then((data) => { + .then(() => { setIsRequesting(RequestState.NOTHING); setStep(SignUpStep.PENDING_EMAIL_VERIFICATION); }) @@ -136,6 +136,8 @@ export default function SignUp({ notificationApi }) { + + ); } diff --git a/src/Pages/Authentication/index.js b/src/Pages/Authentication/index.js index 6301949..e4870b1 100644 --- a/src/Pages/Authentication/index.js +++ b/src/Pages/Authentication/index.js @@ -1,10 +1,21 @@ -import { Checkbox, Form, Modal, Result, notification } from "antd"; +import { + Checkbox, + Form, + Modal, + Result, + Typography, + notification, + Divider, + Flex, + Button, +} from "antd"; import { Constants } from "../../utils"; import { Trans, useTranslation } from "react-i18next"; import MyAppLogo from "../../Components/MyAppLogo"; import ReCAPTCHA from "react-google-recaptcha"; import { ForgotPassword, Login } from "./Login"; import SignUp from "./SignUp"; +import { useNavigate } from "react-router-dom"; export const AuthenticationMethod = { LOGIN: 1, @@ -121,6 +132,32 @@ export function PendingEmailVerification() { /> ); } + +export function MyLanguageSwitch() { + const { t, i18n } = useTranslation(); + + return ( + <> + + + + + {t("authentication.languageSwitchTo")}{" "} + + + + + ); +} + /* export function BackToZeitAdlerPricingOverview() { window.location.href = process.env.REACT_APP_ZEITADLER_HOMEPAGE_PRICING;