KK
/
customer-dashboard
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed login

master
alex 2024-03-27 23:18:47 +01:00
parent 9921e9fbf9
commit 60d5346f33
5 changed files with 93 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/locales/de/translation.json
View File

@ -152,6 +152,7 @@
"privacyPolicyLink": "Datenschutzerklärung", "privacyPolicyLink": "Datenschutzerklärung",
"loginLink": "Jetzt anmelden", "loginLink": "Jetzt anmelden",
"signUpLink": "Jetzt registrieren", "signUpLink": "Jetzt registrieren",
"languageSwitchTo": "Switch to",
"login": { "login": {
"button": "Anmelden", "button": "Anmelden",
"forgotPassword": "Passwort vergessen?", "forgotPassword": "Passwort vergessen?",

1
public/locales/en/translation.json
View File

@ -152,6 +152,7 @@
"privacyPolicyLink": "Privacy Policy", "privacyPolicyLink": "Privacy Policy",
"loginLink": "Login now", "loginLink": "Login now",
"signUpLink": "Sign up now", "signUpLink": "Sign up now",
"languageSwitchTo": "Sprache wechseln zu",
"login": { "login": {
"button": "Login", "button": "Login",
"forgotPassword": "Forgot password?", "forgotPassword": "Forgot password?",

118
src/Pages/Authentication/Login.js
View File

@ -1,5 +1,5 @@
import { Button, Flex, Form, Result, Space, Typography } from "antd"; 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 { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { import {
@ -11,7 +11,7 @@ import {
showUnkownErrorNotification, showUnkownErrorNotification,
} from "../../utils"; } from "../../utils";
import { import {
BackToZeitAdlerPricingOverview, MyLanguageSwitch,
MyRecaptcha, MyRecaptcha,
PendingEmailVerification, PendingEmailVerification,
PrivacyPolicyCheckbox, PrivacyPolicyCheckbox,
@ -23,14 +23,13 @@ import {
} from "../../Components/MyFormInputs"; } from "../../Components/MyFormInputs";
const LoginStep = { 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 // First step: account name -> get state of account by backend
@ -39,14 +38,14 @@ export function Login({ notificationApi }) {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const [step, setStep] = useState(LoginStep.ACCOUNT_NAME); const [step, setStep] = useState(LoginStep.LOGIN);
const [isRequesting, setIsRequesting] = useState(false); const [isRequesting, setIsRequesting] = useState(false);
const recaptchaRef = useRef(null); const recaptchaRef = useRef(null);
const recaptchaValueRef = useRef(null); const recaptchaValueRef = useRef(null);
const [form] = Form.useForm(); const [form] = Form.useForm();
const email = Form.useWatch("email", form); // const email = Form.useWatch("email", form);
const showErrorNotification = (errStatus) => { const showErrorNotification = (errStatus) => {
if (errStatus === 400) { if (errStatus === 400) {
@ -56,21 +55,21 @@ export function Login({ notificationApi }) {
}); });
} }
}; };
/*
useEffect(() => { useEffect(() => {
if (!email) return; if (!email) return;
// triggered if step was set to pending deletion and the user wants to reactivate the account // triggered if step was set to pending deletion and the user wants to reactivate the account
if (step === LoginStep._BACK_TO_PASSWORD) { if (step === LoginStep._BACK_TO_PASSWORD) {
setStep(LoginStep.PASSWORD); setStep(LoginStep.LOGIN);
return; return;
} }
// reset step if account name changed for handling the state of the account // 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); setStep(LoginStep.ACCOUNT_NAME);
} }
}, [email]); }, [email]); */
if (step === LoginStep.PENDING_DELETION) { if (step === LoginStep.PENDING_DELETION) {
return ( return (
@ -81,7 +80,7 @@ export function Login({ notificationApi }) {
"authentication.login.stateAccountPendingDeletion.description" "authentication.login.stateAccountPendingDeletion.description"
)} )}
extra={[ extra={[
<Button key={0} onClick={() => setStep(LoginStep.ACCOUNT_NAME)}> <Button key={0} onClick={() => setStep(LoginStep.LOGIN)}>
{t("common.button.cancel")} {t("common.button.cancel")}
</Button>, </Button>,
<Button <Button
@ -116,7 +115,7 @@ export function Login({ notificationApi }) {
<Button <Button
key={0} key={0}
onClick={() => { onClick={() => {
setStep(LoginStep.ACCOUNT_NAME); setStep(LoginStep.LOGIN);
}} }}
> >
{t("authentication.login.stateAccountBanned.backButton")} {t("authentication.login.stateAccountBanned.backButton")}
@ -157,35 +156,26 @@ export function Login({ notificationApi }) {
<MyEmailFormInput hasFeedback={false} disableEmailCheck /> <MyEmailFormInput hasFeedback={false} disableEmailCheck />
<div <MyPasswordFormInput />
style={{
display:
step === LoginStep.PASSWORD || step === LoginStep.INIT_LOGIN
? "block"
: "none",
}}
>
<MyPasswordFormInput />
<Flex justify="space-between"> <Flex justify="space-between">
<RememberMeCheckbox /> <RememberMeCheckbox />
<Button <Button
type="link" type="link"
onClick={() => onClick={() =>
navigate(Constants.ROUTE_PATHS.AUTHENTICATION.FORGOT_PASSWORD) navigate(Constants.ROUTE_PATHS.AUTHENTICATION.FORGOT_PASSWORD)
} }
> >
{t("authentication.login.forgotPassword")} {t("authentication.login.forgotPassword")}
</Button> </Button>
</Flex> </Flex>
<MyRecaptcha <MyRecaptcha
recaptchaRef={recaptchaRef} recaptchaRef={recaptchaRef}
recaptchaValueRef={recaptchaValueRef} recaptchaValueRef={recaptchaValueRef}
/> />
<PrivacyPolicyCheckbox /> <PrivacyPolicyCheckbox />
</div>
<Button <Button
type="primary" type="primary"
@ -213,44 +203,32 @@ export function Login({ notificationApi }) {
.then((values) => { .then((values) => {
setIsRequesting(true); 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({ myFetch({
url: `/user/auth/login`, url: `/user/auth/login`,
method: "POST", method: "POST",
body: body, body: {
email: values.email.toLocaleLowerCase(),
password: EncodeStringToBase64(values.password),
recaptcha: recaptchaValueRef.current,
},
notificationApi: notificationApi, notificationApi: notificationApi,
t: t, t: t,
}) })
.then((data) => { .then((data) => {
setIsRequesting(false); setIsRequesting(false);
if ( if (data.state === undefined) {
step === LoginStep.PASSWORD || if (
step === LoginStep.INIT_LOGIN step === LoginStep.LOGIN ||
) { step === LoginStep.INIT_LOGIN
setUserSessionToLocalStorage(data.XAuthorization); ) {
window.location.href = "/"; setUserSessionToLocalStorage(data.XAuthorization);
window.location.href = "/";
}
return; return;
} }
if (data.state === undefined) return;
switch (data.state) { switch (data.state) {
case Constants.ACCOUNT_STATE.ACTIVE:
setStep(LoginStep.PASSWORD);
break;
case Constants.ACCOUNT_STATE.PENDING_DELETION: case Constants.ACCOUNT_STATE.PENDING_DELETION:
setStep(LoginStep.PENDING_DELETION); setStep(LoginStep.PENDING_DELETION);
break; break;
@ -297,6 +275,8 @@ export function Login({ notificationApi }) {
</Button> </Button>
</Typography.Text> </Typography.Text>
</Flex> </Flex>
<MyLanguageSwitch />
</Form> </Form>
); );
} }

6
src/Pages/Authentication/SignUp.js
View File

@ -30,7 +30,7 @@ import {
MyPasswordFormInput, MyPasswordFormInput,
MyUsernameFormInput, MyUsernameFormInput,
} from "../../Components/MyFormInputs"; } from "../../Components/MyFormInputs";
import { MyRecaptcha, PrivacyPolicyCheckbox } from "."; import { MyLanguageSwitch, MyRecaptcha, PrivacyPolicyCheckbox } from ".";
import MyAppLogo from "../../Components/MyAppLogo"; import MyAppLogo from "../../Components/MyAppLogo";
import { CheckOutlined } from "@ant-design/icons"; import { CheckOutlined } from "@ant-design/icons";
import { RequestState } from "../../Components/MyRequestStateItem"; import { RequestState } from "../../Components/MyRequestStateItem";
@ -108,7 +108,7 @@ export default function SignUp({ notificationApi }) {
notificationApi: notificationApi, notificationApi: notificationApi,
t: t, t: t,
}) })
.then((data) => { .then(() => {
setIsRequesting(RequestState.NOTHING); setIsRequesting(RequestState.NOTHING);
setStep(SignUpStep.PENDING_EMAIL_VERIFICATION); setStep(SignUpStep.PENDING_EMAIL_VERIFICATION);
}) })
@ -136,6 +136,8 @@ export default function SignUp({ notificationApi }) {
</Button> </Button>
</Typography.Text> </Typography.Text>
</Flex> </Flex>
<MyLanguageSwitch />
</Form> </Form>
); );
} }

39
src/Pages/Authentication/index.js
View File

@ -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 { Constants } from "../../utils";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import MyAppLogo from "../../Components/MyAppLogo"; import MyAppLogo from "../../Components/MyAppLogo";
import ReCAPTCHA from "react-google-recaptcha"; import ReCAPTCHA from "react-google-recaptcha";
import { ForgotPassword, Login } from "./Login"; import { ForgotPassword, Login } from "./Login";
import SignUp from "./SignUp"; import SignUp from "./SignUp";
import { useNavigate } from "react-router-dom";
export const AuthenticationMethod = { export const AuthenticationMethod = {
LOGIN: 1, 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() { export function BackToZeitAdlerPricingOverview() {
window.location.href = process.env.REACT_APP_ZEITADLER_HOMEPAGE_PRICING; window.location.href = process.env.REACT_APP_ZEITADLER_HOMEPAGE_PRICING;