changed login

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?",

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?",

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,
+  LOGIN: 1,
-  PASSWORD: 2,
+  PENDING_DELETION: 2,
-  PENDING_DELETION: 3,
+  INIT_LOGIN: 3,
-  INIT_LOGIN: 4,
+  BANNED: 4,
-  BANNED: 5,
+  _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
-  _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: 6,
-  PENDING_EMAIL_VERIFICATION: 7,
+  INIT_PAYMENT: 7,
-  INIT_PAYMENT: 8,
 };
 
 // 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={[
-          <Button key={0} onClick={() => setStep(LoginStep.ACCOUNT_NAME)}>
+          <Button key={0} onClick={() => setStep(LoginStep.LOGIN)}>
             {t("common.button.cancel")}
           </Button>,
           <Button
@@ -116,7 +115,7 @@ export function Login({ notificationApi }) {
           <Button
             key={0}
             onClick={() => {
-              setStep(LoginStep.ACCOUNT_NAME);
+              setStep(LoginStep.LOGIN);
             }}
           >
             {t("authentication.login.stateAccountBanned.backButton")}
@@ -157,14 +156,6 @@ export function Login({ notificationApi }) {
 
       <MyEmailFormInput hasFeedback={false} disableEmailCheck />
 
-      <div
-        style={{
-          display:
-            step === LoginStep.PASSWORD || step === LoginStep.INIT_LOGIN
-              ? "block"
-              : "none",
-        }}
-      >
       <MyPasswordFormInput />
 
       <Flex justify="space-between">
@@ -185,7 +176,6 @@ export function Login({ notificationApi }) {
       />
 
       <PrivacyPolicyCheckbox />
-      </div>
 
       <Button
         type="primary"
@@ -213,44 +203,32 @@ export function Login({ notificationApi }) {
             .then((values) => {
               setIsRequesting(true);
 
-              let body = {
-                email: values.email.toLocaleLowerCase(),
-              };
-
-              if (
-                step === LoginStep.PASSWORD ||
-                step === LoginStep.INIT_LOGIN
-              ) {
-                body.password = EncodeStringToBase64(values.password);
-                body.rememberMe = values.rememberMe;
-                body.recaptcha = recaptchaValueRef.current;
-              }
-
               myFetch({
                 url: `/user/auth/login`,
                 method: "POST",
-                body: body,
+                body: {
+                  email: values.email.toLocaleLowerCase(),
+                  password: EncodeStringToBase64(values.password),
+                  recaptcha: recaptchaValueRef.current,
+                },
                 notificationApi: notificationApi,
                 t: t,
               })
                 .then((data) => {
                   setIsRequesting(false);
 
+                  if (data.state === undefined) {
                     if (
-                    step === LoginStep.PASSWORD ||
+                      step === LoginStep.LOGIN ||
                       step === LoginStep.INIT_LOGIN
                     ) {
                       setUserSessionToLocalStorage(data.XAuthorization);
                       window.location.href = "/";
+                    }
                     return;
                   }
 
-                  if (data.state === undefined) return;
-
                   switch (data.state) {
-                    case Constants.ACCOUNT_STATE.ACTIVE:
-                      setStep(LoginStep.PASSWORD);
-                      break;
                     case Constants.ACCOUNT_STATE.PENDING_DELETION:
                       setStep(LoginStep.PENDING_DELETION);
                       break;
@@ -297,6 +275,8 @@ export function Login({ notificationApi }) {
           </Button>
         </Typography.Text>
       </Flex>
+
+      <MyLanguageSwitch />
     </Form>
   );
 }

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 }) {
           </Button>
         </Typography.Text>
       </Flex>
+
+      <MyLanguageSwitch />
     </Form>
   );
 }

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 (
+    <>
+      <Divider style={{ padding: 0, margin: 4 }} />
+
+      <Flex justify="center">
+        <Typography.Text style={{ color: "gray" }}>
+          {t("authentication.languageSwitchTo")}{" "}
+          <Button
+            type="link"
+            style={{ padding: 0 }}
+            onClick={() =>
+              i18n.changeLanguage(i18n.language === "en" ? "de" : "en")
+            }
+          >
+            {i18n.language === "en" ? "Deutsch" : "English"}
+          </Button>
+        </Typography.Text>
+      </Flex>
+    </>
+  );
+}
+
 /*
 export function BackToZeitAdlerPricingOverview() {
   window.location.href = process.env.REACT_APP_ZEITADLER_HOMEPAGE_PRICING;