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",
"loginLink": "Jetzt anmelden",
"signUpLink": "Jetzt registrieren",
"languageSwitchTo": "Switch to",
"login": {
"button": "Anmelden",
"forgotPassword": "Passwort vergessen?",

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

@ -152,6 +152,7 @@
"privacyPolicyLink": "Privacy Policy",
"loginLink": "Login now",
"signUpLink": "Sign up now",
"languageSwitchTo": "Sprache wechseln zu",
"login": {
"button": "Login",
"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 { 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={[
<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,35 +156,26 @@ export function Login({ notificationApi }) {
<MyEmailFormInput hasFeedback={false} disableEmailCheck />
<div
style={{
display:
step === LoginStep.PASSWORD || step === LoginStep.INIT_LOGIN
? "block"
: "none",
}}
>
<MyPasswordFormInput />
<MyPasswordFormInput />
<Flex justify="space-between">
<RememberMeCheckbox />
<Button
type="link"
onClick={() =>
navigate(Constants.ROUTE_PATHS.AUTHENTICATION.FORGOT_PASSWORD)
}
>
{t("authentication.login.forgotPassword")}
</Button>
</Flex>
<Flex justify="space-between">
<RememberMeCheckbox />
<Button
type="link"
onClick={() =>
navigate(Constants.ROUTE_PATHS.AUTHENTICATION.FORGOT_PASSWORD)
}
>
{t("authentication.login.forgotPassword")}
</Button>
</Flex>
<MyRecaptcha
recaptchaRef={recaptchaRef}
recaptchaValueRef={recaptchaValueRef}
/>
<MyRecaptcha
recaptchaRef={recaptchaRef}
recaptchaValueRef={recaptchaValueRef}
/>
<PrivacyPolicyCheckbox />
</div>
<PrivacyPolicyCheckbox />
<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 (
step === LoginStep.PASSWORD ||
step === LoginStep.INIT_LOGIN
) {
setUserSessionToLocalStorage(data.XAuthorization);
window.location.href = "/";
if (data.state === undefined) {
if (
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>
);
}

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

@ -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>
);
}

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 { 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;