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

your profile and change password

master
alex 2024-01-27 13:22:51 +01:00
parent 2fe3558560
commit dc82975575
8 changed files with 538 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -245,9 +245,35 @@
}
},
"userProfile": {
"title": "Ihr Profil",
"tabs": {
"yourProfile": "Ihr Profil",
"changePassword": "Passwort ändern",
"yourSessions": "Ihre Sitzungen",
"deleteAccount": "Konto löschen"
},
"yourProfile": {
"cardTitle": "Ihr Profil",
"language": "Sprache",
"analytics": "Analytik",
"analyticsDescription": "Dazu gehören Informationen über die Nutzung unseres Dashboards, wie die besuchten Seiten, die Verweildauer auf den Seiten und die allgemeine Interaktion mit den Seiten. Dies hilft uns, unser Dashboard zu verbessern und es benutzerfreundlicher zu gestalten."
},
"changePassword": {
"cardTitle": "Passwort ändern",
"currentPassword": "Aktuelles Passwort",
"currentPasswordPlaceholder": "Geben Sie Ihr aktuelles Passwort ein",
"newPassword": "Neues Passwort",
"newPasswordPlaceholder": "Geben Sie Ihr neues Passwort ein",
"confirmNewPassword": "Bestätigen Sie Ihr neues Passwort",
"confirmNewPasswordPlaceholder": "Bestätigen Sie Ihr neues Passwort",
"confirmNewPasswordMismatch": "Das neue Passwort stimmt nicht überein",
"button": "Passwort ändern",
"buttonInfo": "Nachdem Sie Ihr Passwort geändert haben, werden Sie abgemeldet und müssen sich erneut anmelden."
},
"yourSessions": {
"cardTitle": "Ihre Sitzungen"
},
"deleteAccount": {
"cardTitle": "Konto löschen"
}
}
}

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

@ -248,9 +248,41 @@
}
},
"userProfile": {
"title": "Your profile",
"tabs": {
"yourProfile": "Your profile",
"changePassword": "Change password",
"yourSessions": "Your sessions",
"deleteAccount": "Delete account"
},
"yourProfile": {
"cardTitle": "Your profile",
"language": "Language",
"analytics": "Analytics",
"analyticsDescription": "This includes information about the use of our dashboard, such as the visited pages, the length of stay on the pages and the general interaction with the pages. This helps us to improve our dashboard and make it more user-friendly."
},
"changePassword": {
"cardTitle": "Change password",
"currentPassword": "Current password",
"currentPasswordPlaceholder": "Enter your current password",
"newPassword": "New password",
"newPasswordPlaceholder": "Enter your new password",
"confirmNewPassword": "Confirm new password",
"confirmNewPasswordPlaceholder": "Confirm your new password",
"confirmNewPasswordMismatch": "The new password do not match",
"button": "Change password",
"buttonInfo": "After changing your password, you will be logged out and have to log in again.",
"request": {
"400": {
"title": "Password incorrect",
"description": "Please check your password and try again."
}
}
},
"yourSessions": {
"cardTitle": "Your sessions"
},
"deleteAccount": {
"cardTitle": "Delete account"
}
}
}

32
src/Components/MyFormInputs/index.js
View File

@ -3,13 +3,18 @@ import { Constants, myFetch } from "../../utils";
import { useRef } from "react";
import { useTranslation } from "react-i18next";
export function MyUsernameFormInput({ propsFormItem, propsInput }) {
export function MyUsernameFormInput({
propsFormItem,
propsInput,
showSkeleton,
}) {
const { t } = useTranslation();
return (
<MyFormInput
propsFormItem={propsFormItem}
propsInput={propsInput}
showSkeleton={showSkeleton}
formItemName="username"
minLength={Constants.GLOBALS.MIN_USERNAME_LENGTH}
maxLength={Constants.GLOBALS.MAX_USERNAME_LENGTH}
@ -31,6 +36,7 @@ export function MyAccountNameFormInput({
propsInput,
disableAccountNameCheck,
hasFeedback,
showSkeleton,
}) {
const { t } = useTranslation();
@ -39,6 +45,7 @@ export function MyAccountNameFormInput({
propsFormItem={propsFormItem}
propsInput={propsInput}
hasFeedback={hasFeedback}
showSkeleton={showSkeleton}
formItemName="accountName"
minLength={Constants.GLOBALS.MIN_ACCOUNT_NAME_LENGTH}
maxLength={Constants.GLOBALS.MAX_ACCOUNT_NAME_LENGTH}
@ -61,17 +68,24 @@ export function MyAccountNameFormInput({
);
}
export function MyPasswordFormInput({ propsFormItem, propsInput }) {
export function MyPasswordFormInput({
propsFormItem,
propsInput,
formItemName,
label,
inputPlaceholder,
formItemRules,
}) {
const { t } = useTranslation();
return (
<MyFormInput
propsFormItem={propsFormItem}
propsInput={propsInput}
formItemName="password"
formItemName={formItemName || "password"}
minLength={Constants.GLOBALS.MIN_PASSWORD_LENGTH}
maxLength={Constants.GLOBALS.MAX_PASSWORD_LENGTH}
label={t("common.password")}
label={label || t("common.password")}
ruleMessageValueRequired={t("common.inputRules.passwordRequired")}
ruleMessageValueMinLengthRequired={t(
"common.inputRules.passwordMinLength",
@ -79,8 +93,9 @@ export function MyPasswordFormInput({ propsFormItem, propsInput }) {
minLength: Constants.GLOBALS.MIN_PASSWORD_LENGTH,
}
)}
inputPlaceholder={t("common.passwordPlaceholder")}
inputPlaceholder={inputPlaceholder || t("common.passwordPlaceholder")}
inputType="password"
formItemRules={formItemRules}
/>
);
}
@ -144,6 +159,7 @@ export function MyAvailableCheckFormInput({
fetchParameter,
fetchDelay,
hasFeedback,
showSkeleton,
}) {
const delayTimeout = useRef();
@ -166,6 +182,7 @@ export function MyAvailableCheckFormInput({
ruleMessageValueMinLengthRequired={ruleMessageValueMinLengthRequired}
inputPlaceholder={inputPlaceholder}
inputType={inputType}
showSkeleton={showSkeleton}
formItemRules={[
() => ({
validator(_, value) {
@ -238,7 +255,12 @@ export function MyFormInput({
}
if (formItemRules) {
// check if formItemRules is an array
if (Array.isArray(formItemRules)) {
myFormItemRules.push(...formItemRules);
} else {
myFormItemRules.push(formItemRules);
}
}
if (inputType === "number") {

10
src/Pages/Store/Employees/index.js
View File

@ -108,11 +108,7 @@ export default function StoreEmployees() {
t: t,
})
.then(() => fetchEmployees())
.catch((errStatus) => {
console.log(errStatus);
setIsRequesting(false);
});
.catch(() => setIsRequesting(false));
}}
>
<Link to="#">{t("common.button.delete")}</Link>
@ -152,9 +148,7 @@ export default function StoreEmployees() {
setIsRequesting(false);
setRequestData(data);
})
.catch((errStatus) => {
console.log(errStatus);
});
.catch(() => {});
};
useEffect(() => fetchEmployees(), []);

9
src/Pages/Store/Settings/index.js
View File

@ -44,9 +44,7 @@ export default function StoreSettings() {
setIsRequesting(false);
})
.catch((errStatus) => {
console.log(errStatus);
});
.catch(() => {});
}, []);
useEffect(() => {
@ -83,10 +81,7 @@ export default function StoreSettings() {
t: t,
})
.then(() => setRequestState(RequestState.SUCCESS))
.catch((errStatus) => {
console.log(errStatus);
setRequestState(RequestState.FAILED);
});
.catch(() => setRequestState(RequestState.FAILED));
}, 500);
}, [companyName, phoneNumber, email, address]);

13
src/Pages/Store/Website/index.js
View File

@ -11,12 +11,6 @@ const General = lazy(() => import("./General"));
const Banner = lazy(() => import("./Banner"));
const ColorPalette = lazy(() => import("./ColorPalette"));
function SuspenseFallback({ children }) {
return (
<MySupsenseFallback spinnerCentered={false}>{children}</MySupsenseFallback>
);
}
export default function Website() {
const { storeId } = useParams();
const { t } = useTranslation();
@ -45,7 +39,11 @@ export default function Website() {
return {
key: index,
...item,
children: <SuspenseFallback>{item.children}</SuspenseFallback>,
children: (
<MySupsenseFallback spinnerCentered={false}>
{item.children}
</MySupsenseFallback>
),
};
});
@ -86,7 +84,6 @@ export default function Website() {
<Card>
<Tabs
type="card"
defaultActiveKey={0}
items={tabItems}
activeKey={activeTab}

470
src/Pages/UserProfile/index.js
View File

@ -6,9 +6,15 @@ import {
Skeleton,
Space,
Switch,
Tabs,
notification,
} from "antd";
import { myFetch } from "../../utils";
import {
EncodeStringToBase64,
handleLogout,
myFetch,
showInputsInvalidNotification,
} from "../../utils";
import { useTranslation } from "react-i18next";
import { useEffect, useRef, useState } from "react";
import {
@ -16,82 +22,100 @@ import {
RequestStateItem,
} from "../../Components/MyRequestStateItem";
import { LogoutOutlined } from "@ant-design/icons";
import {
MyAccountNameFormInput,
MyPasswordFormInput,
MyUsernameFormInput,
} from "../../Components/MyFormInputs";
import { MySupsenseFallback } from "../../Components/MySupsenseFallback";
import { useSideBarContext } from "../../Contexts/SideBarContext";
const globalRequestStatePreview = {
global: RequestState.INIT,
yourProfile: RequestState.INIT,
changePassword: RequestState.INIT,
yourSessions: RequestState.INIT,
deleteAccount: RequestState.INIT,
};
export default function UserProfile({ setUserSession }) {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const [notificationApi, notificationContextHolder] =
notification.useNotification();
const [form] = Form.useForm();
const [requestState, setRequestState] = useState(RequestState.INIT);
const [globalRequestState, setGlobalRequestState] = useState(
globalRequestStatePreview
);
const [isRequestingLogout, setIsRequestingLogout] = useState(false);
const delayTimeout = useRef();
const [activeTab, setActiveTab] = useState(0);
const language = Form.useWatch("language", form);
const analytics = Form.useWatch("analytics", form);
useEffect(() => {
myFetch({
url: "/user/profile/settings",
method: "GET",
notificationApi: notificationApi,
t: t,
})
.then((data) => {
form.setFieldsValue({
language: data.language,
analytics: data.analytics_enabled,
});
})
.catch((errStatus) => {
console.log(errStatus);
});
}, []);
useEffect(() => {
if (language === undefined || analytics === undefined) return;
if (RequestState.INIT === requestState) {
setRequestState(RequestState.NOTHING);
return;
}
setRequestState(RequestState.REQUESTING);
if (delayTimeout.current) {
clearTimeout(delayTimeout.current);
}
delayTimeout.current = setTimeout(() => {
myFetch({
url: "/user/profile/settings",
method: "POST",
body: {
language: language,
analyticsEnabled: analytics,
const tabItems = [
{
label: t("userProfile.tabs.yourProfile"),
cardTitle: t("userProfile.yourProfile.cardTitle"),
children: (
<YourProfile
notificationApi={notificationApi}
globalRequestState={globalRequestState}
setGlobalRequestState={setGlobalRequestState}
/>
),
},
notificationApi: notificationApi,
t: t,
})
.then(() => setRequestState(RequestState.SUCCESS))
.catch((errStatus) => {
console.log(errStatus);
setRequestState(RequestState.FAILED);
{
label: t("userProfile.tabs.changePassword"),
cardTitle: t("userProfile.changePassword.cardTitle"),
children: (
<ChangePassword
notificationApi={notificationApi}
globalRequestState={globalRequestState}
setGlobalRequestState={setGlobalRequestState}
setUserSession={setUserSession}
/>
),
},
{
label: t("userProfile.tabs.yourSessions"),
cardTitle: t("userProfile.yourSessions.cardTitle"),
children: <YourSessions />,
},
{
label: t("userProfile.tabs.deleteAccount"),
cardTitle: t("userProfile.deleteAccount.cardTitle"),
children: <DeleteAccount />,
},
].map((item, index) => {
return {
key: index,
...item,
children: (
<Card title={item.cardTitle}>
<MySupsenseFallback spinnerCentered={false}>
{item.children}
</MySupsenseFallback>
</Card>
),
};
});
}, 500);
}, [language, analytics]);
return (
<>
{notificationContextHolder}
<Card
title={t("userProfile.title")}
extra={
<Tabs
defaultActiveKey={0}
items={tabItems}
activeKey={activeTab}
onChange={(key) => setActiveTab(key)}
tabBarExtraContent={
<Space>
<RequestStateItem
state={requestState}
setRequestState={setRequestState}
state={globalRequestState.global}
setRequestState={(state) =>
setGlobalRequestState({
...globalRequestState,
global: state,
})
}
/>
<Button
@ -107,10 +131,11 @@ export default function UserProfile({ setUserSession }) {
notificationApi: notificationApi,
t: t,
})
.then(() => {
setUserSession();
window.location.href = "/";
.then(() =>
handleLogout({
setUserSession: setUserSession,
})
)
.catch(() => setIsRequestingLogout(false));
}}
>
@ -118,9 +143,158 @@ export default function UserProfile({ setUserSession }) {
</Button>
</Space>
}
>
<Form layout="horizontal" form={form}>
<Form.Item name="language" label={t("userProfile.language")}>
/>
</>
);
}
function YourProfile({
notificationApi,
globalRequestState,
setGlobalRequestState,
}) {
const { t, i18n } = useTranslation();
const [form] = Form.useForm();
const sideBarContext = useSideBarContext();
const delayTimeout = useRef();
const [requestData, setRequestData] = useState({});
const language = Form.useWatch("language", form);
const analyticsEnabled = Form.useWatch("analyticsEnabled", form);
const username = Form.useWatch("username", form);
const accountName = Form.useWatch("accountName", form);
const requestState = globalRequestState.yourProfile;
useEffect(() => {
myFetch({
url: "/user/profile/settings",
method: "GET",
notificationApi: notificationApi,
t: t,
})
.then((data) => {
setRequestData(data);
form.setFieldsValue({
language: data.language,
analyticsEnabled: data.analytics_enabled,
username: data.username,
accountName: data.account_name,
});
})
.catch(() => {
setGlobalRequestState({
...globalRequestState,
global: RequestState.FAILED,
});
});
}, []);
useEffect(() => {
if (
language === undefined ||
analyticsEnabled === undefined ||
username === undefined ||
accountName === undefined
)
return;
if (RequestState.INIT === requestState) {
setGlobalRequestState({
...globalRequestState,
global: RequestState.NOTHING,
yourProfile: RequestState.NOTHING,
});
return;
}
setGlobalRequestState({
...globalRequestState,
global: RequestState.REQUESTING,
});
if (delayTimeout.current) {
clearTimeout(delayTimeout.current);
}
delayTimeout.current = setTimeout(() => {
form
.validateFields()
.then(() => {
let body = {};
if (language !== requestData.language) {
body.language = language;
}
if (analyticsEnabled !== requestData.analytics_enabled) {
body.analyticsEnabled = analyticsEnabled;
}
if (username !== requestData.username) {
body.username = username;
}
if (accountName !== requestData.account_name) {
body.accountName = accountName;
}
if (Object.keys(body).length === 0) {
setGlobalRequestState({
...globalRequestState,
global: RequestState.NOTHING,
});
return;
}
myFetch({
url: "/user/profile/settings",
method: "POST",
body: body,
notificationApi: notificationApi,
t: t,
})
.then(() => {
setGlobalRequestState({
...globalRequestState,
global: RequestState.SUCCESS,
});
// Update requestData to the new values
setRequestData({
...requestData,
language: language,
analytics_enabled: analyticsEnabled,
username: username,
account_name: accountName,
});
sideBarContext.setUsername(username);
})
.catch(() => {
setGlobalRequestState({
...globalRequestState,
global: RequestState.FAILED,
});
});
})
.catch(() => {
showInputsInvalidNotification(notificationApi, t);
setGlobalRequestState({
...globalRequestState,
global: RequestState.NOTHING,
});
});
}, 500);
}, [language, analyticsEnabled, username, accountName]);
return (
<Form form={form} layout="vertical" requiredMark={false}>
<Form.Item name="language" label={t("userProfile.yourProfile.language")}>
{requestState === RequestState.INIT ? (
<Skeleton.Input active block></Skeleton.Input>
) : (
@ -142,19 +316,169 @@ export default function UserProfile({ setUserSession }) {
</Form.Item>
<Form.Item
name="analytics"
name="analyticsEnabled"
valuePropName="checked"
label={t("userProfile.analytics")}
extra={t("userProfile.analyticsDescription")}
label={t("userProfile.yourProfile.analytics")}
extra={t("userProfile.yourProfile.analyticsDescription")}
>
{requestState === RequestState.INIT ? (
<Skeleton.Button shape="round" active />
) : (
<Switch>{t("userProfile.analytics")}</Switch>
<Switch>{t("userProfile.yourProfile.analytics")}</Switch>
)}
</Form.Item>
<MyUsernameFormInput showSkeleton={requestState === RequestState.INIT} />
<MyAccountNameFormInput
showSkeleton={requestState === RequestState.INIT}
hasFeedback
disableAccountNameCheck={requestData.account_name === accountName}
/>
</Form>
</Card>
</>
);
}
function ChangePassword({
notificationApi,
globalRequestState,
setGlobalRequestState,
setUserSession,
}) {
const { t } = useTranslation();
const [form] = Form.useForm();
const handlePasswordChange = () => {
form
.validateFields()
.then((values) => {
console.log(values);
setGlobalRequestState({
...globalRequestState,
global: RequestState.REQUESTING,
changePassword: RequestState.REQUESTING,
});
myFetch({
url: "/user/profile/password",
method: "POST",
body: {
currentPassword: EncodeStringToBase64(values.currentPassword),
newPassword: EncodeStringToBase64(values.newPassword),
},
notificationApi: notificationApi,
t: t,
})
.then(() => {
form.resetFields();
setGlobalRequestState({
...globalRequestState,
global: RequestState.SUCCESS,
changePassword: RequestState.NOTHING,
});
handleLogout({
setUserSession: setUserSession,
});
})
.catch((err) => {
setGlobalRequestState({
...globalRequestState,
global: RequestState.FAILED,
changePassword: RequestState.NOTHING,
});
if (err === 400) {
notificationApi["error"]({
message: t("userProfile.changePassword.request.400.title"),
description: t(
"userProfile.changePassword.request.400.description"
),
});
}
});
})
.catch(() => showInputsInvalidNotification(notificationApi, t));
};
return (
<Form form={form} layout="vertical" autoComplete="off" requiredMark={false}>
<MyPasswordFormInput
propsInput={{
id: "currentPassword",
}}
formItemName="currentPassword"
label={t("userProfile.changePassword.currentPassword")}
inputPlaceholder={t(
"userProfile.changePassword.currentPasswordPlaceholder"
)}
/>
<MyPasswordFormInput
propsInput={{
id: "newPassword",
}}
formItemName="newPassword"
label={t("userProfile.changePassword.newPassword")}
inputPlaceholder={t(
"userProfile.changePassword.newPasswordPlaceholder"
)}
/>
<MyPasswordFormInput
propsInput={{
id: "confirmNewPassword",
}}
formItemName="confirmNewPassword"
label={t("userProfile.changePassword.confirmNewPassword")}
inputPlaceholder={t(
"userProfile.changePassword.confirmNewPasswordPlaceholder"
)}
propsFormItem={{
dependencies: ["newPassword"],
}}
formItemRules={({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("newPassword") === value) {
return Promise.resolve();
}
return Promise.reject(
new Error(
t("userProfile.changePassword.confirmNewPasswordMismatch")
)
);
},
})}
/>
<Form.Item extra={t("userProfile.changePassword.buttonInfo")}>
<Space>
<Button
type="primary"
onClick={handlePasswordChange}
loading={
globalRequestState.changePassword === RequestState.REQUESTING
}
>
{t("userProfile.changePassword.button")}
</Button>
</Space>
</Form.Item>
</Form>
);
}
function YourSessions() {
useEffect(() => {
console.log("your sessions");
}, []);
return <h1>Test</h1>;
}
function DeleteAccount() {
return <div>Delete account, Password and feedback</div>;
}

5
src/utils.js
View File

@ -246,3 +246,8 @@ export function showInputsInvalidNotification(notificationApi, t) {
description: t("common.request.inputsInvalid.description"),
});
}
export function handleLogout({ setUserSession }) {
setUserSession();
window.location.href = "/";
}