diff --git a/public/index.html b/public/index.html index 1457b1e..33bb0e0 100644 --- a/public/index.html +++ b/public/index.html @@ -23,7 +23,7 @@ - Dashboard - ZeitAdler + ZeitAdler diff --git a/public/manifest.json b/public/manifest.json index 1ebdffc..026626c 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "Dashboard - ZeitAdler", - "name": "Dashboard - ZeitAdler", + "short_name": "ZeitAdler", + "name": "ZeitAdler", "icons": [ { "src": "/android-chrome-192x192.png", diff --git a/src/App.js b/src/App.js index 8a96ebb..bc0e27d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import "antd/dist/reset.css"; import "./App.css"; import { Layout, Spin, Typography } from "antd"; -import { Constants, UseUserSession, myFetch } from "./utils"; +import { Constants, UseUserSession, handleLogout, myFetch } from "./utils"; import DashboardLayout from "./Components/DashboardLayout"; import SideBarProvider from "./Contexts/SideBarContext"; import { AppProvider } from "./Contexts/AppContext"; @@ -14,6 +14,7 @@ import { clarity } from "react-microsoft-clarity"; import { useTranslation } from "react-i18next"; import MyAppLogo from "./Components/MyAppLogo"; import Authentication from "./Pages/Authentication"; +import { AuthenticationRoutes } from "./Components/AppRoutes"; export function Loading() { const { t } = useTranslation(); @@ -83,14 +84,15 @@ export default function App() { i18n.changeLanguage(data.user.language); } }) - .catch(() => { - setUserSession(); - window.location.href = "/"; - }); + .catch(() => + handleLogout({ + setUserSession: setUserSession, + }) + ); }, []); if (!userSession) { - return ; + return ; } if (appUserData === null) { diff --git a/src/Components/AppRoutes/index.js b/src/Components/AppRoutes/index.js index abf30c8..d5b8366 100644 --- a/src/Components/AppRoutes/index.js +++ b/src/Components/AppRoutes/index.js @@ -1,7 +1,10 @@ -import { Route, Routes } from "react-router-dom"; +import { Navigate, Route, Routes } from "react-router-dom"; import { Constants, isDevelopmentEnv } from "../../utils"; import { lazy } from "react"; import { MySupsenseFallback } from "../MySupsenseFallback"; +import Authentication, { + AuthenticationMethod, +} from "../../Pages/Authentication"; // Lazy-loaded components const Dashboard = lazy(() => import("../../Pages/Dashboard")); @@ -17,7 +20,36 @@ const StoreWebsite = lazy(() => import("../../Pages/Store/Website")); //const Feedback = lazy(() => import("../../Pages/Feedback")); const UserProfile = lazy(() => import("../../Pages/UserProfile")); -export default function AppRoutes({ setUserSession }) { +export function AuthenticationRoutes() { + return ( + + + + + } + /> + + + + + } + /> + + } + /> + + ); +} + +export function AppRoutes({ setUserSession }) { return ( { - resolve(); - }) - .catch((errStatus) => { - console.log(errStatus); - reject(ruleMessageValueNotAvailable); - }); + .then(() => resolve()) + .catch(() => reject(ruleMessageValueNotAvailable)); }, fetchDelay); }); }, diff --git a/src/Components/PageContent/index.js b/src/Components/PageContent/index.js index e48a71a..09fd263 100644 --- a/src/Components/PageContent/index.js +++ b/src/Components/PageContent/index.js @@ -1,9 +1,9 @@ import { Content } from "antd/es/layout/layout"; -import AppRoutes from "../AppRoutes"; import { Layout } from "antd"; import HeaderMenu from "../Header"; import { BreakpointLgWidth } from "../../utils"; import { memo } from "react"; +import { AppRoutes } from "../AppRoutes"; const PageContent = memo( ({ diff --git a/src/Contexts/WebSocketContext.js b/src/Contexts/WebSocketContext.js deleted file mode 100644 index 3ef1db9..0000000 --- a/src/Contexts/WebSocketContext.js +++ /dev/null @@ -1,133 +0,0 @@ -import { createContext, useContext, useEffect, useRef } from "react"; -import { wsConnectionCustomEventName } from "../utils"; - -const WebSocketContext = createContext(null); - -export const useWebSocketContext = () => useContext(WebSocketContext); - -let wsConnectionEvent = null; -let firstConnection = true; - -export default function WebSocketProvider({ - children, - userSession, - setUserSession, - isWebSocketReady, - setIsWebSocketReady, - notificationApi, -}) { - const ws = useRef(null); - const wsMessageCache = useRef([]); - - if (wsConnectionEvent === null) { - wsConnectionEvent = new CustomEvent(wsConnectionCustomEventName, { - detail: "wsReconnect", - }); - } - - const connect = () => { - setIsWebSocketReady(true); - - /* - ws.current = new WebSocket( - `${Constants.WS_ADDRESS}?auth=${userSession}&bts=${BrowserTabSession}` - ); - - ws.current.onopen = () => { - sideBarContext.setConnectionBadgeStatus("success"); - setIsWebSocketReady(true); - - if (firstConnection) { - firstConnection = false; - } else { - document.dispatchEvent(wsConnectionEvent); - } - - myFetch("/user/", "GET").then((data) => { - appContext.userId.current = data.UserId; - appContext.setUserPermissions( - data.Permissions === null ? [] : data.Permissions - ); - appContext.setUsers(data.Users); - headerContext.setTotalNotifications(data.TotalNotifications); - sideBarContext.setUsername(data.Username); - sideBarContext.setAvatar(data.Avatar); - sideBarContext.setAvailableCategories( - data.AvailableCategories === null ? [] : data.AvailableCategories - ); - }); - - if (wsMessageCache.current.length > 0) { - // send cached messages - wsMessageCache.current.forEach((message) => { - ws.current.send(JSON.stringify(message)); - }); - - wsMessageCache.current = []; - } - }; - - ws.current.onmessage = (event) => { - handleWebSocketMessage( - event, - navigate, - notificationApi, - sideBarContext, - appContext, - headerContext, - groupTasksContext, - userProfileContext, - adminAreaRolesContext, - usersContext, - consolesContext, - scannerContext, - crmContext - ); - }; - - ws.current.onclose = (event) => { - setIsWebSocketReady(false); - sideBarContext.setConnectionBadgeStatus("error"); - console.warn("closed", event); - - // custom code defined by the backend server - if (event.code === 4001 || event.code === 4002) { - //Unauthorized || SessionClosed - - setUserSession(); - window.location.href = "/"; - return; - } - - if (event.reason.code === 1005) return; - - console.warn("reconnecting..."); - - setTimeout(() => connect(), 1000); - }; */ - }; - - const SendSocketMessage = (cmd, body) => { - if ( - isWebSocketReady && - ws.current !== null && - ws.current.readyState === 1 - ) { - ws.current.send(JSON.stringify({ Cmd: cmd, Body: body })); - } else { - wsMessageCache.current.push({ Cmd: cmd, Body: body }); - } - }; - - useEffect(() => { - connect(); - - return () => ws.current.close(); - }, []); - - return ( - - {children} - - ); -} diff --git a/src/Pages/Authentication/index.js b/src/Pages/Authentication/index.js index 7f8ec8a..c682408 100644 --- a/src/Pages/Authentication/index.js +++ b/src/Pages/Authentication/index.js @@ -25,20 +25,17 @@ import { } from "../../Components/MyFormInputs"; import { useTranslation } from "react-i18next"; import MyAppLogo from "../../Components/MyAppLogo"; +import { useNavigate } from "react-router-dom"; -const AuthenticationMethod = { +export const AuthenticationMethod = { LOGIN: 1, SIGNUP: 2, }; -export default function Authentication() { +export default function Authentication({ method }) { const [notificationApi, notificationContextHolder] = notification.useNotification(); - const [selectedMethod, setSelectedMethod] = useState( - AuthenticationMethod.LOGIN - ); - return ( <> {notificationContextHolder} @@ -60,16 +57,10 @@ export default function Authentication() { - {selectedMethod === AuthenticationMethod.LOGIN ? ( - setSelectedMethod(AuthenticationMethod.SIGNUP)} - notificationApi={notificationApi} - /> + {method === AuthenticationMethod.LOGIN ? ( + ) : ( - setSelectedMethod(AuthenticationMethod.LOGIN)} - notificationApi={notificationApi} - /> + )} @@ -97,8 +88,10 @@ const LoginStep = { // First step: account name -> get state of account by backend // Second step: if account is active -> password -> login otherwise show the state of the account (e. g. deleted, banned) -function Login({ switchMethod, notificationApi }) { +function Login({ notificationApi }) { const { t } = useTranslation(); + const navigate = useNavigate(); + const [isRequesting, setIsRequesting] = useState(false); const [step, setStep] = useState(LoginStep.ACCOUNT_NAME); @@ -225,6 +218,7 @@ function Login({ switchMethod, notificationApi }) { size="large" block loading={isRequesting} + htmlType="submit" onClick={() => { let validateFields = []; @@ -304,7 +298,13 @@ function Login({ switchMethod, notificationApi }) { {t("authentication.login.dontHaveAccount")}{" "} - @@ -313,8 +313,10 @@ function Login({ switchMethod, notificationApi }) { ); } -function SignUp({ switchMethod, notificationApi }) { +function SignUp({ notificationApi }) { const { t, i18n } = useTranslation(); + const navigate = useNavigate(); + const [isRequesting, setIsRequesting] = useState(false); const [form] = Form.useForm(); @@ -358,11 +360,21 @@ function SignUp({ switchMethod, notificationApi }) { setIsRequesting(false); }); }) - .catch(() => showInputsInvalidNotification(notificationApi, t)); + .catch((err) => { + console.log(err); + showInputsInvalidNotification(notificationApi, t); + }); }; return ( -
+ @@ -384,7 +396,11 @@ function SignUp({ switchMethod, notificationApi }) { {t("authentication.signUp.alreadyHaveAccount")}{" "} - @@ -392,81 +408,3 @@ function SignUp({ switchMethod, notificationApi }) { ); } - -/* - -*/ - -/* - setSelectedMethod(activeKey)} - /> - -
- {selectedMethod === "2" && } - - - - - -*/ diff --git a/src/utils.js b/src/utils.js index 9b93058..7cc9bf5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -35,6 +35,10 @@ export const Constants = { // WS_ADDRESS: wsAddress, EMBED_CALENDAR_ADDRESS: "https://calendar.ex.umbach.dev/embed/?id=", ROUTE_PATHS: { + AUTHENTICATION: { + LOGIN: "/login", + SIGN_UP: "/signup", + }, OVERVIEW: "/", STORE: { // schema: /store/:storeId/:subPage @@ -276,7 +280,7 @@ export function showUnkownErrorNotification(notificationApi, t) { export function handleLogout({ setUserSession }) { if (setUserSession !== undefined) setUserSession(); - window.location.href = "/"; + window.location.href = Constants.ROUTE_PATHS.AUTHENTICATION.LOGIN; } export function FormatDatetime(datetime) {