Commit 4a9a737a authored by ReemyHasan's avatar ReemyHasan

Add Protected Routes

parent 344d1dff
...@@ -30,13 +30,12 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -30,13 +30,12 @@ export default function App({ Component, pageProps }: AppProps) {
setNewVal setNewVal
]); ]);
const [cookies, setCookie, removeCookie] = useCookies([]); const [cookies,setCookies,removeCookie] = useCookies([]);
// React.useEffect(() => {
// if (router.pathname === "/") { // if (cookies["role"] !== "admin" && !router.pathname.startsWith("/user")) {
// router.push("/dashboard"); // router.push("/user/dashboard"); // Modify this URL to your desired access-denied page
// } // return null; // Prevent rendering the Component for unauthorized users
// }, [router]); // }
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
const loader = document.getElementById("globalLoader"); const loader = document.getElementById("globalLoader");
...@@ -57,6 +56,7 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -57,6 +56,7 @@ export default function App({ Component, pageProps }: AppProps) {
const removeCookieAfterOneHour = async () => { const removeCookieAfterOneHour = async () => {
removeCookie("role", { path: "/", sameSite: true }); removeCookie("role", { path: "/", sameSite: true });
removeCookie("token", { path: "/", sameSite: true }); removeCookie("token", { path: "/", sameSite: true });
removeCookie("username", { path: "/", sameSite: true });
window.location.href = "/sign-in"; window.location.href = "/sign-in";
}; };
......
import * as React from "react"; import * as React from "react";
import Head from "next/head"; import Head from "next/head";
import AppLayout from "@/src/components/layout";
import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
export default function Scheduling() { import AccessDenied from "../src/features/404-page/access-denied";
const { t } = useTranslation(TranslationFiles.COMMON); export default function AccessDeniedPAge() {
const { t } = useTranslation(TranslationFiles.COMMON);
return ( return (
<Fragment> <>
<Head> <Head>
<title>{t("scheduling")}</title> <title>{t("access-denied")}</title>
</Head> </Head>
<AppLayout> <main className={`mainContainer`}>
<main className={`app-main-container`}> <AccessDenied />
<div className={"page-header"}>{t("scheduling")}</div> </main>
</main> </>
</AppLayout>
</Fragment>
); );
} }
...@@ -5,19 +5,22 @@ import { Fragment } from "react"; ...@@ -5,19 +5,22 @@ import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import SignUpForm from "@/src/features/add-user"; import SignUpForm from "@/src/features/add-user";
import ProtectedRoute from "../../src/features/protectedRoute";
export default function AddUser() { export default function AddUser() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
return ( return (
<Fragment> <Fragment>
<Head> <ProtectedRoute role="admin">
<title>{t("add-user")}</title> <Head>
</Head> <title>{t("add-user")}</title>
<AppLayout> </Head>
<main className={`app-main-container`}> <AppLayout>
<div className={"page-header"}>{t("add-user")}</div> <main className={`app-main-container`}>
<SignUpForm /> <div className={"page-header"}>{t("add-user")}</div>
</main> <SignUpForm />
</AppLayout> </main>
</AppLayout>
</ProtectedRoute>
</Fragment> </Fragment>
); );
} }
...@@ -5,11 +5,13 @@ import DashboardComponent from "@/src/features/dashboard"; ...@@ -5,11 +5,13 @@ import DashboardComponent from "@/src/features/dashboard";
import { Fragment } from "react"; import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import ProtectedRoute from "../../src/features/protectedRoute";
export default function Dashboard() { export default function Dashboard() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
return ( return (
<Fragment> <Fragment>
<ProtectedRoute role="admin">
<Head> <Head>
<title>{t("dashboard")}</title> <title>{t("dashboard")}</title>
</Head> </Head>
...@@ -19,6 +21,8 @@ export default function Dashboard() { ...@@ -19,6 +21,8 @@ export default function Dashboard() {
<DashboardComponent /> <DashboardComponent />
</main> </main>
</AppLayout> </AppLayout>
</ProtectedRoute>
</Fragment> </Fragment>
); );
} }
import * as React from "react";
import Head from "next/head";
import AppLayout from "@/src/components/layout";
import { Fragment } from "react";
import { useRouter } from 'next/router';
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import EditForm from "@/src/features/edit-user";
export default function EditUser() {
const { t } = useTranslation(TranslationFiles.COMMON);
const router = useRouter();
const { id } = router.query;
return (
<Fragment>
<Head>
<title>{t("edit-user")}</title>
</Head>
<AppLayout>
<main className={`app-main-container`}>
<div className={"page-header"}>{t("edit-user")}</div>
<EditForm id={id} />
</main>
</AppLayout>
</Fragment>
);
}
import * as React from "react"; import * as React from "react";
import { useEffect } from "react"; // Import useEffect
import AppLayout from "@/src/components/layout"; import AppLayout from "@/src/components/layout";
import { Fragment } from "react"; import { Fragment } from "react";
import Head from "next/head"; import Head from "next/head";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import DashboardComponent from "@/src/features/dashboard"; import DashboardComponent from "@/src/features/dashboard";
import { useRouter } from "next/router";
import { useCookies } from "react-cookie";
import MainUtils from "@/src/utils/main";
export default function Home() { export default function Home() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
const router = useRouter();
const [cookies] = useCookies([]);
if (typeof window !== 'undefined') {
if (cookies["role"] === "admin" && cookies["token"] && !MainUtils.isEmptyValue(cookies["token"])) {
router.push("/dashboard");
} else if (cookies["role"] === "user" && cookies["token"] && !MainUtils.isEmptyValue(cookies["token"])) {
router.push("/user/landing");
} else {
router.push("/sign-in");
}
}
return ( return (
<Fragment> <Fragment>
<Head> <Head>
...@@ -16,7 +30,7 @@ export default function Home() { ...@@ -16,7 +30,7 @@ export default function Home() {
<AppLayout> <AppLayout>
<main className={`app-main-container`}> <main className={`app-main-container`}>
<div className={"page-header"}>{t("")}</div> <div className={"page-header"}>{t("")}</div>
<DashboardComponent /> {t("Waiting")}
</main> </main>
</AppLayout> </AppLayout>
</Fragment> </Fragment>
......
...@@ -5,20 +5,24 @@ import { Fragment } from "react"; ...@@ -5,20 +5,24 @@ import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import Setting from "@/src/features/setting"; import Setting from "@/src/features/setting";
import ProtectedRoute from "../../src/features/protectedRoute";
export default function Setup() { export default function Setup() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
return ( return (
<Fragment> <Fragment>
<Head> <ProtectedRoute role="admin">
<title>{t("setup")}</title> <Head>
</Head> <title>{t("setup")}</title>
<AppLayout> </Head>
<main className={`app-main-container`}> <AppLayout>
<div className=" w-full px-4 max-w-full flex-grow flex-1"> <main className={`app-main-container`}>
<div className=" w-full px-4 max-w-full flex-grow flex-1">
<Setting /> <Setting />
</div> </div>
</main> </main>
</AppLayout> </AppLayout>
</ProtectedRoute>
</Fragment> </Fragment>
); );
} }
...@@ -5,10 +5,12 @@ import { Fragment } from "react"; ...@@ -5,10 +5,12 @@ import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import SettingAboutContent from "../../../src/features/setting/setting-about-content"; import SettingAboutContent from "../../../src/features/setting/setting-about-content";
import ProtectedRoute from "../../../src/features/protectedRoute";
export default function Setup() { export default function Setup() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
return ( return (
<Fragment> <Fragment>
<ProtectedRoute role="admin">
<Head> <Head>
<title>{t("setup")}</title> <title>{t("setup")}</title>
</Head> </Head>
...@@ -17,6 +19,7 @@ export default function Setup() { ...@@ -17,6 +19,7 @@ export default function Setup() {
<SettingAboutContent /> <SettingAboutContent />
</main> </main>
</AppLayout> </AppLayout>
</ProtectedRoute>
</Fragment> </Fragment>
); );
} }
...@@ -5,10 +5,12 @@ import { Fragment } from "react"; ...@@ -5,10 +5,12 @@ import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import SettingProfileContent from "../../../src/features/setting/setting-profile"; import SettingProfileContent from "../../../src/features/setting/setting-profile";
import ProtectedRoute from "../../../src/features/protectedRoute";
export default function Setup() { export default function Setup() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
return ( return (
<Fragment> <Fragment>
<ProtectedRoute role="admin">
<Head> <Head>
<title>{t("setup")}</title> <title>{t("setup")}</title>
</Head> </Head>
...@@ -17,6 +19,7 @@ export default function Setup() { ...@@ -17,6 +19,7 @@ export default function Setup() {
<SettingProfileContent /> <SettingProfileContent />
</main> </main>
</AppLayout> </AppLayout>
</ProtectedRoute>
</Fragment> </Fragment>
); );
} }
...@@ -6,22 +6,25 @@ import { Fragment } from "react"; ...@@ -6,22 +6,25 @@ import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import ShowUsers from "@/src/features/show-users"; import ShowUsers from "@/src/features/show-users";
import ProtectedRoute from "../../src/features/protectedRoute";
export default function Users() { export default function Users() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
return ( return (
<Fragment> <Fragment>
<Head> <ProtectedRoute role="admin">
<title>{t("users")}</title> <Head>
</Head> <title>{t("users")}</title>
<AppLayout> </Head>
<main className={`app-main-container`}> <AppLayout>
<div className={"page-header"}>{t("users")}</div> <main className={`app-main-container`}>
<div> <div className={"page-header"}>{t("users")}</div>
<ShowUsers /> <div>
</div> <ShowUsers />
</main> </div>
</AppLayout> </main>
</AppLayout>
</ProtectedRoute>
</Fragment> </Fragment>
); );
} }
This diff is collapsed.
<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M255.96 134.393c0-21.521-13.373-40.117-33.223-47.43a75.239 75.239 0 0 0 1.253-13.791c0-39.909-32.386-72.295-72.295-72.295-23.193 0-44.923 11.074-58.505 30.088-6.686-5.224-14.835-7.94-23.402-7.94-21.104 0-38.446 17.133-38.446 38.446 0 4.597.836 9.194 2.298 13.373C13.582 81.739 0 100.962 0 122.274c0 21.522 13.373 40.327 33.431 47.64-.835 4.388-1.253 8.985-1.253 13.79 0 39.7 32.386 72.087 72.086 72.087 23.402 0 44.924-11.283 58.505-30.088 6.686 5.223 15.044 8.149 23.611 8.149 21.104 0 38.446-17.134 38.446-38.446 0-4.597-.836-9.194-2.298-13.373 19.64-7.104 33.431-26.327 33.431-47.64z" fill="#FFF"/><path d="M100.085 110.364l57.043 26.119 57.669-50.565a64.312 64.312 0 0 0 1.253-12.746c0-35.52-28.834-64.355-64.355-64.355-21.313 0-41.162 10.447-53.072 27.998l-9.612 49.73 11.074 23.82z" fill="#F4BD19"/><path d="M40.953 170.75c-.835 4.179-1.253 8.567-1.253 12.955 0 35.52 29.043 64.564 64.564 64.564 21.522 0 41.372-10.656 53.49-28.208l9.403-49.729-12.746-24.238-57.251-26.118-56.207 50.774z" fill="#3CBEB1"/><path d="M40.536 71.918l39.073 9.194 8.775-44.506c-5.432-4.179-11.91-6.268-18.805-6.268-16.925 0-30.924 13.79-30.924 30.924 0 3.552.627 7.313 1.88 10.656z" fill="#E9478C"/><path d="M37.192 81.32c-17.551 5.642-29.67 22.567-29.67 40.954 0 17.97 11.074 34.059 27.79 40.327l54.953-49.73-10.03-21.52-43.043-10.03z" fill="#2C458F"/><path d="M167.784 219.852c5.432 4.18 11.91 6.478 18.596 6.478 16.925 0 30.924-13.79 30.924-30.924 0-3.761-.627-7.314-1.88-10.657l-39.073-9.193-8.567 44.296z" fill="#95C63D"/><path d="M175.724 165.317l43.043 10.03c17.551-5.85 29.67-22.566 29.67-40.954 0-17.97-11.074-33.849-27.79-40.326l-56.415 49.311 11.492 21.94z" fill="#176655"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60"><path d="M48.42 31.888l1.365-1.705 3.453-3.656h2.74l-4.57 4.878 4.862 6.484h-2.82l-3.645-4.982-1.326 1.096v3.892H46.1v-16h2.395V29.7l-.126 2.192zm9.553-8.348c-.023-.367.106-.728.356-.998a1.39 1.39 0 0 1 1.014-.345c.364-.022.72.102.992.345a1.34 1.34 0 0 1 .35.998 1.31 1.31 0 0 1-.351.97c-.267.25-.626.38-.992.356-.373.026-.74-.103-1.014-.356a1.31 1.31 0 0 1-.356-.97zm2.56 14.377H58.12v-11.4h2.412zm9.262-11.597c1.28-.05 2.508.523 3.3 1.54q1.2 1.546 1.2 4.33c0 1.864-.4 3.3-1.206 4.352-.833.982-2.056 1.548-3.343 1.548a4.4 4.4 0 0 1-3.343-1.548h-.164l-.444 1.343h-1.8v-16h2.428v3.837l-.044 1.25-.06 1.058h.104c.75-1.137 2.044-1.792 3.404-1.72zm-.63 1.973c-.8-.075-1.583.247-2.1.86-.428.548-.652 1.53-.663 2.872v.164q0 2.072.658 3.004c.5.656 1.32 1.007 2.15.932a2.19 2.19 0 0 0 1.946-1.019 5.37 5.37 0 0 0 .663-2.938q0-3.875-2.653-3.875zM84.2 37.9l-.482-1.58h-.082a4.63 4.63 0 0 1-1.644 1.409c-.678.275-1.406.404-2.138.378-.957.057-1.897-.268-2.614-.904a3.4 3.4 0 0 1-.943-2.56 3.01 3.01 0 0 1 1.31-2.653q1.3-.893 3.974-.976l1.962-.06v-.608c.048-.592-.132-1.18-.504-1.644a2.07 2.07 0 0 0-1.579-.548 5.51 5.51 0 0 0-1.677.252 14.06 14.06 0 0 0-1.551.625l-.784-1.727c.642-.33 1.323-.577 2.028-.734a9.14 9.14 0 0 1 2.077-.252q2.16 0 3.3.948 1.13.948 1.096 2.965v7.673zm-3.596-1.644a2.97 2.97 0 0 0 2.11-.734c.554-.538.846-1.3.8-2.06v-.987l-1.463.066a4.94 4.94 0 0 0-2.477.548 1.73 1.73 0 0 0-.778 1.557 1.53 1.53 0 0 0 .449 1.173 1.95 1.95 0 0 0 1.387.438zM99.3 37.9h-2.428v-7a3.07 3.07 0 0 0-.548-1.962 2.05 2.05 0 0 0-1.683-.647 2.68 2.68 0 0 0-2.242.904q-.707.904-.707 3.03v5.662h-2.417v-11.36h1.9l.34 1.485h.126a3.33 3.33 0 0 1 1.458-1.25 4.86 4.86 0 0 1 2.094-.444q4.094 0 4.094 4.16zm10.47 0l-.482-1.58h-.082a4.63 4.63 0 0 1-1.644 1.409c-.678.275-1.406.404-2.138.378a3.61 3.61 0 0 1-2.614-.904 3.4 3.4 0 0 1-.943-2.56 3.01 3.01 0 0 1 1.31-2.653q1.3-.893 3.974-.976l1.962-.06v-.608c.048-.592-.132-1.18-.504-1.644a2.07 2.07 0 0 0-1.579-.548 5.51 5.51 0 0 0-1.677.252 14.06 14.06 0 0 0-1.551.625l-.784-1.727c.642-.33 1.323-.577 2.028-.734a9.21 9.21 0 0 1 2.077-.252q2.16 0 3.3.948 1.13.948 1.096 2.965v7.673zm-3.596-1.644a2.97 2.97 0 0 0 2.11-.734c.554-.538.846-1.3.8-2.06v-.987l-1.463.066a4.94 4.94 0 0 0-2.477.548 1.73 1.73 0 0 0-.778 1.557 1.53 1.53 0 0 0 .449 1.173 1.94 1.94 0 0 0 1.359.438z"/><g fill-rule="evenodd"><path d="M8.48 24.5v23.128l16.44-18.933C19.88 25.932 14.226 24.5 8.48 24.5z" fill="#343741"/><path d="M8.48 7.96V24.5c5.745 0 11.398 1.442 16.44 4.194L42.918 7.96z" fill="#f04e98"/><path d="M28.454 30.902L10.113 52.04H42.23c-1.752-8.535-6.675-16.088-13.775-21.137z" fill="#00bfb3"/></g></svg>
\ No newline at end of file
...@@ -45,6 +45,9 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) { ...@@ -45,6 +45,9 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
// } // }
}; };
}, []); }, []);
const openKibana = () => {
window.open("http://172.29.3.220:5601", "_blank");
};
return ( return (
...@@ -59,6 +62,11 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) { ...@@ -59,6 +62,11 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
</Col> </Col>
<Col span={12}> <Col span={12}>
<Row gutter={8} align={"middle"} justify={"end"}> <Row gutter={8} align={"middle"} justify={"end"}>
<Col className={"app-notifications"}>
<a href="http://172.29.3.220:5601" target="_blank" onClick={openKibana}>
<img src="/images/elasticsearch.svg" alt="Kibana" style={{ width: "40px", height: "30px" }} title="Archive"/>
</a>
</Col>
<Col className={"app-language-switcher"}> <Col className={"app-language-switcher"}>
<AppLanguageSwitcher /> <AppLanguageSwitcher />
</Col> </Col>
......
...@@ -42,26 +42,31 @@ export default function AppHeader() { ...@@ -42,26 +42,31 @@ export default function AppHeader() {
// // } // // }
// }; // };
// }, []); // }, []);
const openKibana = () => {
window.open("http://172.29.3.220:5601", "_blank");
};
return ( return (
<Header className="app-header-mini-sidebar"> <Header className="app-header-mini-sidebar">
<Row justify={"space-between"} align={"middle"} className={"fullContent"}> <Row justify={"space-between"} className={"fullContent"}>
<Col span={12}> {/* <Col span={12}> */}
<Row align={"middle"}> {/* <Row align={"middle"}> */}
<Col span={2}> <Col span={12}>
<NavBar /> <NavBar />
</Col> </Col>
</Row> {/* </Row> */}
</Col> {/* </Col> */}
<Col span={12}> <Col span={12}>
<Row gutter={8} align={"middle"} justify={"end"}> <Row gutter={8} align={"middle"} justify={"end"}>
<Col className={"app-notifications"}>
<a href="http://172.29.3.220:5601" target="_blank" onClick={openKibana}>
<img src="/images/elasticsearch.svg" alt="Kibana" style={{ width: "40px", height: "30px" }} title="Archive"/>
</a>
</Col>
<Col className={"app-language-switcher"}> <Col className={"app-language-switcher"}>
<AppLanguageSwitcher /> <AppLanguageSwitcher />
</Col> </Col>
{/* <Col className={"app-notifications"}>
<AppNotifications data={data} setData={setData} />
</Col> */}
<Col className={"app-user-info"}> <Col className={"app-user-info"}>
<UserInfo /> <UserInfo />
</Col> </Col>
......
import { Button, Col, Row } from "antd";
import React from "react";
import styles from "./index.module.css";
import router from "next/router";
import ArrowLeftIcon from "@/src/components/assets/custom-ant-icons/arrow-left-icon";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import { useCookies } from "react-cookie";
const AccessDenied = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]);
const handleGoBack = () => {
router.back();
};
const handleGoHome = () => {
if(cookies["role"]=="user")
{
router.push("/user/landing");
}
else if(cookies["role"]=="admin")
router.push("/dashboard");
else{
router.push("/sign-in");
}
};
return (
<Row data-testid="not-found-component" className={styles.notFoundPage}>
<Col span={12} xs={24} md={12} lg={12}>
<Row className={styles.text}>
<span>{t("error-403 Forbidden")}</span>
</Row>
<Row>
<h1 className={styles.notFoundHead}>{t("access-denied")}</h1>
</Row>
<Row>
<p className={styles.notFoundParaghraph}>
{t("access-denied")}
<br />
{/* {t("helpful-links")} : */}
</p>
</Row>
<Row gutter={10} className={styles.notFoundBtns}>
{/* <Col
className={styles.TakeHome}
span={8}
xs={24}
sm={24}
md={10}
lg={8}
>
<Button onClick={handleGoBack} className={styles.notFoundBtn}>
<ArrowLeftIcon />
{t("go-back")}
</Button>
</Col> */}
<Col
className={styles.goBack}
span={8}
xs={24}
sm={24}
md={12}
lg={8}
>
<Button
onClick={handleGoHome}
className={`${styles.btnColor} ${styles.notFoundBtn}`}
>
{t("take-me-home")}
</Button>
</Col>
</Row>
</Col>
<Col
span={12}
xs={24}
md={12}
lg={12}
className={styles.accessDeniedView}
></Col>
</Row>
);
};
export default AccessDenied;
...@@ -16,6 +16,14 @@ ...@@ -16,6 +16,14 @@
width: 400px; width: 400px;
height: 100%; height: 100%;
} }
.accessDeniedView{
background-image: url(../../../public/images/access-denied.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 400px;
height: 100%;
}
.text { .text {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
......
...@@ -5,16 +5,26 @@ import router from "next/router"; ...@@ -5,16 +5,26 @@ import router from "next/router";
import ArrowLeftIcon from "@/src/components/assets/custom-ant-icons/arrow-left-icon"; import ArrowLeftIcon from "@/src/components/assets/custom-ant-icons/arrow-left-icon";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import { useCookies } from "react-cookie";
const NotFound = () => { const NotFound = () => {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]);
const handleGoBack = () => { const handleGoBack = () => {
router.back(); router.back();
}; };
const handleGoHome = () => { const handleGoHome = () => {
router.push("/"); if(cookies["role"]=="user")
{
router.push("/user/landing");
}
else if(cookies["role"]=="admin")
router.push("/dashboard");
else{
router.push("/sign-in");
}
}; };
return ( return (
<Row data-testid="not-found-component" className={styles.notFoundPage}> <Row data-testid="not-found-component" className={styles.notFoundPage}>
......
...@@ -47,7 +47,7 @@ export default function AboutContent() { ...@@ -47,7 +47,7 @@ export default function AboutContent() {
return item ? item.value : ""; return item ? item.value : "";
} }
}; };
if (data.length === 0) { if ( MainUtils.isEmptyValue(data)) {
return <div>Loading...</div>; return <div>Loading...</div>;
} }
return ( return (
......
.signIn { .signIn {
overflow: hidden; overflow: hidden;
background-color: #fff !important; background-color: #fff !important;
height: 100vh; /* height: 100vh; */
} }
.signIn .logoImg { .signIn .logoImg {
margin-bottom: 0px; margin-bottom: 0px;
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
.signIn .logoView { .signIn .logoView {
width: 860px; width: 860px;
background-color: #082561; background-color: #082561;
height: 100%; height: 100vh;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
url("../../../public/images/login-image2.jpg"); url("../../../public/images/login-image2.jpg");
background-size: auto; background-size: auto;
......
...@@ -5,6 +5,7 @@ import FmsButton from "../../../../shared-library/src/buttons/fms-button"; ...@@ -5,6 +5,7 @@ import FmsButton from "../../../../shared-library/src/buttons/fms-button";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { getUserInfo } from "@/src/services/user-service"; import { getUserInfo } from "@/src/services/user-service";
import { useCookies } from "react-cookie"; import { useCookies } from "react-cookie";
import MainUtils from "@/src/utils/main";
const ProfileForm = () => { const ProfileForm = () => {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]); const [cookies] = useCookies([]);
...@@ -23,7 +24,7 @@ const ProfileForm = () => { ...@@ -23,7 +24,7 @@ const ProfileForm = () => {
fetchUserInfo(); fetchUserInfo();
}, []); }, []);
if (data.length === 0) { if ( MainUtils.isEmptyValue(data)) {
return <div>Loading...</div>; return <div>Loading...</div>;
} }
return ( return (
......
import React, { useEffect , useState} from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import FmsButton from "../../../../shared-library/src/buttons/fms-button"; import FmsButton from "../../../../shared-library/src/buttons/fms-button";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
const UserProfileForm = () => { import { getUserInfo } from "@/src/services/user-service";
import { useCookies } from "react-cookie";
import MainUtils from "@/src/utils/main";
const UserProfile = () => {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]);
const [data, setData] = useState([]);
const router = useRouter(); const router = useRouter();
useEffect(() => {
async function fetchUserInfo() {
try {
const response = await getUserInfo(cookies["username"], cookies["token"]);
setData(response);
console.log(response);
} catch (error) {
// Handle any errors that might occur during the API call
}
}
fetchUserInfo();
}, []);
if ( MainUtils.isEmptyValue(data)) {
return <div>Loading...</div>;
}
return ( return (
<> <>
<main className="profile-page"> <main className="profile-page">
...@@ -48,16 +70,16 @@ const UserProfileForm = () => { ...@@ -48,16 +70,16 @@ const UserProfileForm = () => {
<div className="flex flex-wrap justify-center"> <div className="flex flex-wrap justify-center">
<div className="w-full lg:w-3/12 px-4 lg:order-2 flex justify-center"> <div className="w-full lg:w-3/12 px-4 lg:order-2 flex justify-center">
<div className="relative"> <div className="relative">
<img {/* <img
alt="..." alt="..."
src="/images/Reem.jpg" src="/images/login-image2.jpg"
className="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px" className="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
/> /> */}
</div> </div>
</div> </div>
<div className="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center"> <div className="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
{/* <div className="py-6 px-3 mt-32 sm:mt-0"> <div className="py-6 px-3 mt-32 sm:mt-0">
<FmsButton {/* <FmsButton
className="bg-blueGray-700 active:bg-blueGray-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150" className="bg-blueGray-700 active:bg-blueGray-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
type="primary" type="primary"
borderRadius="32" borderRadius="32"
...@@ -66,8 +88,8 @@ const UserProfileForm = () => { ...@@ -66,8 +88,8 @@ const UserProfileForm = () => {
}} }}
> >
{t("edit")} {t("edit")}
</FmsButton> </FmsButton> */}
</div> */} </div>
</div> </div>
<div className="w-full lg:w-4/12 px-4 lg:order-1"> <div className="w-full lg:w-4/12 px-4 lg:order-1">
<div className="flex justify-center py-4 lg:pt-4 pt-8"> <div className="flex justify-center py-4 lg:pt-4 pt-8">
...@@ -80,8 +102,8 @@ const UserProfileForm = () => { ...@@ -80,8 +102,8 @@ const UserProfileForm = () => {
</span> </span>
</div> </div>
<div className="mr-4 p-3 text-center"> <div className="mr-4 p-3 text-center">
<span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600"> <span className="text-xl font-bold block tracking-wide text-blueGray-600">
10 {data.gender}
</span> </span>
<span className="text-sm text-blueGray-400"> <span className="text-sm text-blueGray-400">
{t("gender")} {t("gender")}
...@@ -89,7 +111,7 @@ const UserProfileForm = () => { ...@@ -89,7 +111,7 @@ const UserProfileForm = () => {
</div> </div>
<div className="lg:mr-4 p-3 text-center"> <div className="lg:mr-4 p-3 text-center">
<span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600"> <span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">
89 {data.workingDate}
</span> </span>
<span className="text-sm text-blueGray-400"> <span className="text-sm text-blueGray-400">
{t("start-working-date")} {t("start-working-date")}
...@@ -99,20 +121,23 @@ const UserProfileForm = () => { ...@@ -99,20 +121,23 @@ const UserProfileForm = () => {
</div> </div>
</div> </div>
<div className="text-center mt-12"> <div className="text-center mt-12">
<h3 className="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2"> <h3 className="text-4xl font-semibold uppercase leading-normal mb-2 text-blueGray-700 mb-2">
REEM HASAN {data.username}
</h3> </h3>
<div className="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase"> <div className="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase">
<i className="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>{" "} <i className="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>{" "}
Syria-Damascus {data.country}
</div>
<div className="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase">
<i className="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>{" "}
{data.email}
</div> </div>
</div> </div>
<div className="mt-10 py-10 border-t border-blueGray-200 text-center"> <div className="mt-10 py-10 border-t border-blueGray-200 text-center">
<div className="flex flex-wrap justify-center"> <div className="flex flex-wrap justify-center">
<div className="w-full lg:w-9/12 px-4"> <div className="w-full lg:w-9/12 px-4">
<p className="mb-4 text-lg leading-relaxed text-blueGray-700"> <p className="mb-4 text-lg leading-relaxed text-blueGray-700">
Site Admin {`${data.fname} ${data.lname}`}
</p> </p>
<div className="mb-2 text-lightBlue-500 mt-10"> <div className="mb-2 text-lightBlue-500 mt-10">
<i className="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i> <i className="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
...@@ -120,7 +145,7 @@ const UserProfileForm = () => { ...@@ -120,7 +145,7 @@ const UserProfileForm = () => {
</div> </div>
<div className="mb-2 text-lightBlue-500"> <div className="mb-2 text-lightBlue-500">
<i className="fas fa-university mr-2 text-lg "></i> <i className="fas fa-university mr-2 text-lg "></i>
Site Admin {data.role}
</div> </div>
</div> </div>
</div> </div>
...@@ -133,4 +158,4 @@ const UserProfileForm = () => { ...@@ -133,4 +158,4 @@ const UserProfileForm = () => {
</> </>
); );
}; };
export default UserProfileForm; export default UserProfile;
import { useEffect } from "react";
import { useRouter } from "next/router";
import { useCookies } from "react-cookie";
const ProtectedRoute = ({ role, children }:any) => {
const router = useRouter();
const [cookies] = useCookies([]);
// useEffect(() => {
if (typeof window !== "undefined" && cookies["role"] !== role) {
router.push("/access-denied");
}
// }, [cookies, role, router]);
return children;
};
export default ProtectedRoute;
\ No newline at end of file
// import React, { useEffect, useState, useContext } from 'react';
// import { useCookies } from "react-cookie";
// import DataContext from "../context/trap-context"
// import MainUtils from '../utils/main';
// // const SSEDataContext = createContext([]);
// const SSEService = ({ children }:any) => {
// const [data, setData] = useState([]);
// const [eventSource, setEventSource] = useState(null);
// const [new_val, setNewVal] = useState([]);
// const [cookies] = useCookies([]);
// const contextValue = React.useMemo(() => ({ data, setData, setNewVal, eventSource, setEventSource }), [
// data,
// setData,
// setNewVal,
// eventSource,
// setEventSource
// ]);
// useEffect(() => {
// if (eventSource) {
// // Close the existing SSE connection if it exists (to avoid duplicates)
// eventSource.close();
// setEventSource(null);
// }
// // const headers = {
// // Authorization: `Bearer ${cookies["token"]}`, // Replace 'YOUR_ACCESS_TOKEN' with your actual access token
// // };
// console.log("token "+cookies["token"]);
// // if (!MainUtils.isEmptyValue(cookies["token"])) {
// const newEventSource = new EventSource('http://localhost:6647/api/notifications'
// //, { withCredentials: true }
// );
// setEventSource(newEventSource);
// newEventSource.onmessage = (event:any) => {
// const message = JSON.parse(event.data);
// console.log("rrr "+message.new_val.severity);
// if (message.new_val != null) {
// const newData = message.new_val;
// const transformedData = {
// flag:'0',
// id: newData.id,
// timestamp: newData.timestamp,
// agentAddress: newData.agentAddress,
// severity: newData.severity,
// specificTrap: newData.specificTrap,
// genericTrap: newData.genericTrap,
// variableBindings: newData.variableBindings,
// };
// // console.log("eeee"+transformedData.genericTrap);
// if (!data.some((item) => item.id === newData.id)) {
// setData((prevData) => [...prevData, newData]);
// }
// setNewVal(transformedData);
// setData((prevData: any) => [...prevData, newData]);
// }
// else{
// setNewVal({id:message.old_val.id,flag:-1,});
// }
// };
// // }
// }, [cookies["token"]]);
// useEffect(() => {
// // Close the SSE connection when the component unmounts
// return () => {
// if (eventSource) {
// eventSource.close();
// setEventSource(null);
// }
// };
// }, []);
// return (
// <DataContext.Provider value={contextValue}>
// {children}
// </DataContext.Provider>
// );
// };
// export default SSEService;
\ No newline at end of file
...@@ -18,7 +18,7 @@ export const login = async (data: any) => { ...@@ -18,7 +18,7 @@ export const login = async (data: any) => {
export const Register = async (data:any,token:any,role:any) => { export const Register = async (data:any,token:any,role:any) => {
if(role=="admin"){ if(role=="admin"){
try { try {
const response = await axios.post(AuthURL+"register",data const response = await axios.post(UserURL+"register",data
,{ ,{
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment