Initial approach where I replaced all the entries for checkAccess
This commit is contained in:
Joao Ramos
@@ -16,6 +16,7 @@ import ShortUniqueId from "short-unique-id";
|
|||||||
import Button from "../Low/Button";
|
import Button from "../Low/Button";
|
||||||
import Input from "../Low/Input";
|
import Input from "../Low/Input";
|
||||||
import Select from "../Low/Select";
|
import Select from "../Low/Select";
|
||||||
|
import { checkAccess } from "@/utils/permissions";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user: User;
|
user: User;
|
||||||
@@ -137,13 +138,13 @@ export default function TicketDisplay({ user, ticket, onClose }: Props) {
|
|||||||
options={[
|
options={[
|
||||||
{ value: "me", label: "Assign to me" },
|
{ value: "me", label: "Assign to me" },
|
||||||
...users
|
...users
|
||||||
.filter((x) => ["admin", "developer", "agent"].includes(x.type))
|
.filter((x) => checkAccess(x, ["admin", "developer", "agent"]))
|
||||||
.map((u) => ({
|
.map((u) => ({
|
||||||
value: u.id,
|
value: u.id,
|
||||||
label: `${u.name} - ${u.email}`,
|
label: `${u.name} - ${u.email}`,
|
||||||
})),
|
})),
|
||||||
]}
|
]}
|
||||||
disabled={user.type === "agent"}
|
disabled={checkAccess(user, ["agent"])}
|
||||||
value={
|
value={
|
||||||
assignedTo
|
assignedTo
|
||||||
? {
|
? {
|
||||||
|
|||||||
@@ -1,160 +1,215 @@
|
|||||||
import {User} from "@/interfaces/user";
|
import { User } from "@/interfaces/user";
|
||||||
import {Dialog, Transition} from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import {useRouter} from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import {Fragment} from "react";
|
import { Fragment } from "react";
|
||||||
import {BsXLg} from "react-icons/bs";
|
import { BsXLg } from "react-icons/bs";
|
||||||
|
import { checkAccess, getTypesOfUser } from "@/utils/permissions";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
path: string;
|
path: string;
|
||||||
user: User;
|
user: User;
|
||||||
disableNavigation?: boolean;
|
disableNavigation?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function MobileMenu({isOpen, onClose, path, user, disableNavigation}: Props) {
|
export default function MobileMenu({
|
||||||
const router = useRouter();
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
path,
|
||||||
|
user,
|
||||||
|
disableNavigation,
|
||||||
|
}: Props) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const logout = async () => {
|
const logout = async () => {
|
||||||
axios.post("/api/logout").finally(() => {
|
axios.post("/api/logout").finally(() => {
|
||||||
setTimeout(() => router.reload(), 500);
|
setTimeout(() => router.reload(), 500);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Transition appear show={isOpen} as={Fragment}>
|
<Transition appear show={isOpen} as={Fragment}>
|
||||||
<Dialog as="div" className="relative z-10" onClose={onClose}>
|
<Dialog as="div" className="relative z-10" onClose={onClose}>
|
||||||
<Transition.Child
|
<Transition.Child
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="ease-out duration-300"
|
enter="ease-out duration-300"
|
||||||
enterFrom="opacity-0"
|
enterFrom="opacity-0"
|
||||||
enterTo="opacity-100"
|
enterTo="opacity-100"
|
||||||
leave="ease-in duration-200"
|
leave="ease-in duration-200"
|
||||||
leaveFrom="opacity-100"
|
leaveFrom="opacity-100"
|
||||||
leaveTo="opacity-0">
|
leaveTo="opacity-0"
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
>
|
||||||
</Transition.Child>
|
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||||
|
</Transition.Child>
|
||||||
|
|
||||||
<div className="fixed inset-0 overflow-y-auto">
|
<div className="fixed inset-0 overflow-y-auto">
|
||||||
<div className="flex min-h-full items-center justify-center text-center">
|
<div className="flex min-h-full items-center justify-center text-center">
|
||||||
<Transition.Child
|
<Transition.Child
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="ease-out duration-300"
|
enter="ease-out duration-300"
|
||||||
enterFrom="opacity-0 scale-95"
|
enterFrom="opacity-0 scale-95"
|
||||||
enterTo="opacity-100 scale-100"
|
enterTo="opacity-100 scale-100"
|
||||||
leave="ease-in duration-200"
|
leave="ease-in duration-200"
|
||||||
leaveFrom="opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="opacity-0 scale-95">
|
leaveTo="opacity-0 scale-95"
|
||||||
<Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
|
>
|
||||||
<Dialog.Title as="header" className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden">
|
<Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
|
||||||
<Link href={disableNavigation ? "" : "/"}>
|
<Dialog.Title
|
||||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
as="header"
|
||||||
</Link>
|
className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"
|
||||||
<div className="cursor-pointer" onClick={onClose} tabIndex={0}>
|
>
|
||||||
<BsXLg className="text-mti-purple-light text-2xl" onClick={onClose} />
|
<Link href={disableNavigation ? "" : "/"}>
|
||||||
</div>
|
<Image
|
||||||
</Dialog.Title>
|
src="/logo_title.png"
|
||||||
<div className="flex h-full flex-col gap-6 px-8 text-lg">
|
alt="EnCoach logo"
|
||||||
<Link
|
width={69}
|
||||||
href={disableNavigation ? "" : "/"}
|
height={69}
|
||||||
className={clsx(
|
/>
|
||||||
"w-fit transition duration-300 ease-in-out",
|
</Link>
|
||||||
path === "/" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
<div
|
||||||
)}>
|
className="cursor-pointer"
|
||||||
Dashboard
|
onClick={onClose}
|
||||||
</Link>
|
tabIndex={0}
|
||||||
{(user.type === "student" || user.type === "teacher" || user.type === "developer") && (
|
>
|
||||||
<>
|
<BsXLg
|
||||||
<Link
|
className="text-mti-purple-light text-2xl"
|
||||||
href={disableNavigation ? "" : "/exam"}
|
onClick={onClose}
|
||||||
className={clsx(
|
/>
|
||||||
"w-fit transition duration-300 ease-in-out",
|
</div>
|
||||||
path === "/exam" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
</Dialog.Title>
|
||||||
)}>
|
<div className="flex h-full flex-col gap-6 px-8 text-lg">
|
||||||
Exams
|
<Link
|
||||||
</Link>
|
href={disableNavigation ? "" : "/"}
|
||||||
<Link
|
className={clsx(
|
||||||
href={disableNavigation ? "" : "/exercises"}
|
"w-fit transition duration-300 ease-in-out",
|
||||||
className={clsx(
|
path === "/" &&
|
||||||
"w-fit transition duration-300 ease-in-out",
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
path === "/exercises" &&
|
)}
|
||||||
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
>
|
||||||
)}>
|
Dashboard
|
||||||
Exercises
|
</Link>
|
||||||
</Link>
|
{checkAccess(user, ["student", "teacher", "developer"]) && (
|
||||||
</>
|
<>
|
||||||
)}
|
<Link
|
||||||
<Link
|
href={disableNavigation ? "" : "/exam"}
|
||||||
href={disableNavigation ? "" : "/stats"}
|
className={clsx(
|
||||||
className={clsx(
|
"w-fit transition duration-300 ease-in-out",
|
||||||
"w-fit transition duration-300 ease-in-out",
|
path === "/exam" &&
|
||||||
path === "/stats" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
)}>
|
)}
|
||||||
Stats
|
>
|
||||||
</Link>
|
Exams
|
||||||
<Link
|
</Link>
|
||||||
href={disableNavigation ? "" : "/record"}
|
<Link
|
||||||
className={clsx(
|
href={disableNavigation ? "" : "/exercises"}
|
||||||
"w-fit transition duration-300 ease-in-out",
|
className={clsx(
|
||||||
path === "/record" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
"w-fit transition duration-300 ease-in-out",
|
||||||
)}>
|
path === "/exercises" &&
|
||||||
Record
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
</Link>
|
)}
|
||||||
{["admin", "developer", "agent", "corporate", "mastercorporate"].includes(user.type) && (
|
>
|
||||||
<Link
|
Exercises
|
||||||
href={disableNavigation ? "" : "/payment-record"}
|
</Link>
|
||||||
className={clsx(
|
</>
|
||||||
"w-fit transition duration-300 ease-in-out",
|
)}
|
||||||
path === "/payment-record" &&
|
<Link
|
||||||
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
href={disableNavigation ? "" : "/stats"}
|
||||||
)}>
|
className={clsx(
|
||||||
Payment Record
|
"w-fit transition duration-300 ease-in-out",
|
||||||
</Link>
|
path === "/stats" &&
|
||||||
)}
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
{["admin", "developer", "corporate", "teacher", "mastercorporate"].includes(user.type) && (
|
)}
|
||||||
<Link
|
>
|
||||||
href={disableNavigation ? "" : "/settings"}
|
Stats
|
||||||
className={clsx(
|
</Link>
|
||||||
"w-fit transition duration-300 ease-in-out",
|
<Link
|
||||||
path === "/settings" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
href={disableNavigation ? "" : "/record"}
|
||||||
)}>
|
className={clsx(
|
||||||
Settings
|
"w-fit transition duration-300 ease-in-out",
|
||||||
</Link>
|
path === "/record" &&
|
||||||
)}
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
{["admin", "developer", "agent"].includes(user.type) && (
|
)}
|
||||||
<Link
|
>
|
||||||
href={disableNavigation ? "" : "/tickets"}
|
Record
|
||||||
className={clsx(
|
</Link>
|
||||||
"w-fit transition duration-300 ease-in-out",
|
{checkAccess(user, [
|
||||||
path === "/tickets" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
"admin",
|
||||||
)}>
|
"developer",
|
||||||
Tickets
|
"agent",
|
||||||
</Link>
|
"corporate",
|
||||||
)}
|
"mastercorporate",
|
||||||
<Link
|
]) && (
|
||||||
href={disableNavigation ? "" : "/profile"}
|
<Link
|
||||||
className={clsx(
|
href={disableNavigation ? "" : "/payment-record"}
|
||||||
"w-fit transition duration-300 ease-in-out",
|
className={clsx(
|
||||||
path === "/profile" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
"w-fit transition duration-300 ease-in-out",
|
||||||
)}>
|
path === "/payment-record" &&
|
||||||
Profile
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
</Link>
|
)}
|
||||||
|
>
|
||||||
|
Payment Record
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{checkAccess(user, [
|
||||||
|
"admin",
|
||||||
|
"developer",
|
||||||
|
"corporate",
|
||||||
|
"teacher",
|
||||||
|
"mastercorporate",
|
||||||
|
]) && (
|
||||||
|
<Link
|
||||||
|
href={disableNavigation ? "" : "/settings"}
|
||||||
|
className={clsx(
|
||||||
|
"w-fit transition duration-300 ease-in-out",
|
||||||
|
path === "/settings" &&
|
||||||
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{checkAccess(user, ["admin", "developer", "agent"]) && (
|
||||||
|
<Link
|
||||||
|
href={disableNavigation ? "" : "/tickets"}
|
||||||
|
className={clsx(
|
||||||
|
"w-fit transition duration-300 ease-in-out",
|
||||||
|
path === "/tickets" &&
|
||||||
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Tickets
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<Link
|
||||||
|
href={disableNavigation ? "" : "/profile"}
|
||||||
|
className={clsx(
|
||||||
|
"w-fit transition duration-300 ease-in-out",
|
||||||
|
path === "/profile" &&
|
||||||
|
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Profile
|
||||||
|
</Link>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className={clsx("w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out")}
|
className={clsx(
|
||||||
onClick={logout}>
|
"w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out"
|
||||||
Logout
|
)}
|
||||||
</span>
|
onClick={logout}
|
||||||
</div>
|
>
|
||||||
</Dialog.Panel>
|
Logout
|
||||||
</Transition.Child>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Dialog.Panel>
|
||||||
</Dialog>
|
</Transition.Child>
|
||||||
</Transition>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</Transition>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,19 +1,19 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
/* eslint-disable @next/next/no-img-element */
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import {withIronSessionSsr} from "iron-session/next";
|
import { withIronSessionSsr } from "iron-session/next";
|
||||||
import {sessionOptions} from "@/lib/session";
|
import { sessionOptions } from "@/lib/session";
|
||||||
import useUser from "@/hooks/useUser";
|
import useUser from "@/hooks/useUser";
|
||||||
import {toast, ToastContainer} from "react-toastify";
|
import { toast, ToastContainer } from "react-toastify";
|
||||||
import Layout from "@/components/High/Layout";
|
import Layout from "@/components/High/Layout";
|
||||||
import {shouldRedirectHome} from "@/utils/navigation.disabled";
|
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||||
import {useState} from "react";
|
import { useState } from "react";
|
||||||
import {Module} from "@/interfaces";
|
import { Module } from "@/interfaces";
|
||||||
import {RadioGroup, Tab} from "@headlessui/react";
|
import { RadioGroup, Tab } from "@headlessui/react";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import {MODULE_ARRAY} from "@/utils/moduleUtils";
|
import { MODULE_ARRAY } from "@/utils/moduleUtils";
|
||||||
import {capitalize} from "lodash";
|
import { capitalize } from "lodash";
|
||||||
import Button from "@/components/Low/Button";
|
import Button from "@/components/Low/Button";
|
||||||
import {Exercise, ReadingPart} from "@/interfaces/exam";
|
import { Exercise, ReadingPart } from "@/interfaces/exam";
|
||||||
import Input from "@/components/Low/Input";
|
import Input from "@/components/Low/Input";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import ReadingGeneration from "./(generation)/ReadingGeneration";
|
import ReadingGeneration from "./(generation)/ReadingGeneration";
|
||||||
@@ -21,101 +21,109 @@ import ListeningGeneration from "./(generation)/ListeningGeneration";
|
|||||||
import WritingGeneration from "./(generation)/WritingGeneration";
|
import WritingGeneration from "./(generation)/WritingGeneration";
|
||||||
import LevelGeneration from "./(generation)/LevelGeneration";
|
import LevelGeneration from "./(generation)/LevelGeneration";
|
||||||
import SpeakingGeneration from "./(generation)/SpeakingGeneration";
|
import SpeakingGeneration from "./(generation)/SpeakingGeneration";
|
||||||
|
import { checkAccess, getTypesOfUser } from "@/utils/permissions";
|
||||||
|
|
||||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
|
||||||
const user = req.session.user;
|
const user = req.session.user;
|
||||||
|
|
||||||
if (!user || !user.isVerified) {
|
if (!user || !user.isVerified) {
|
||||||
return {
|
return {
|
||||||
redirect: {
|
redirect: {
|
||||||
destination: "/login",
|
destination: "/login",
|
||||||
permanent: false,
|
permanent: false,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
if (shouldRedirectHome(user) || user.type !== "developer") {
|
if (
|
||||||
return {
|
shouldRedirectHome(user) ||
|
||||||
redirect: {
|
checkAccess(user, getTypesOfUser(["developer"]))
|
||||||
destination: "/",
|
) {
|
||||||
permanent: false,
|
return {
|
||||||
}
|
redirect: {
|
||||||
};
|
destination: "/",
|
||||||
}
|
permanent: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
props: {user: req.session.user},
|
props: { user: req.session.user },
|
||||||
};
|
};
|
||||||
}, sessionOptions);
|
}, sessionOptions);
|
||||||
|
|
||||||
export default function Generation() {
|
export default function Generation() {
|
||||||
const [module, setModule] = useState<Module>("reading");
|
const [module, setModule] = useState<Module>("reading");
|
||||||
|
|
||||||
const {user} = useUser({redirectTo: "/login"});
|
const { user } = useUser({ redirectTo: "/login" });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Exam Generation | EnCoach</title>
|
<title>Exam Generation | EnCoach</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||||
/>
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
{user && (
|
{user && (
|
||||||
<Layout user={user} className="gap-6">
|
<Layout user={user} className="gap-6">
|
||||||
<h1 className="text-2xl font-semibold">Exam Generation</h1>
|
<h1 className="text-2xl font-semibold">Exam Generation</h1>
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<label className="font-normal text-base text-mti-gray-dim">Module</label>
|
<label className="font-normal text-base text-mti-gray-dim">
|
||||||
<RadioGroup
|
Module
|
||||||
value={module}
|
</label>
|
||||||
onChange={setModule}
|
<RadioGroup
|
||||||
className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
|
value={module}
|
||||||
{[...MODULE_ARRAY].map((x) => (
|
onChange={setModule}
|
||||||
<RadioGroup.Option value={x} key={x}>
|
className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between"
|
||||||
{({checked}) => (
|
>
|
||||||
<span
|
{[...MODULE_ARRAY].map((x) => (
|
||||||
className={clsx(
|
<RadioGroup.Option value={x} key={x}>
|
||||||
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
{({ checked }) => (
|
||||||
"transition duration-300 ease-in-out",
|
<span
|
||||||
x === "reading" &&
|
className={clsx(
|
||||||
(!checked
|
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||||
? "bg-white border-mti-gray-platinum"
|
"transition duration-300 ease-in-out",
|
||||||
: "bg-ielts-reading/70 border-ielts-reading text-white"),
|
x === "reading" &&
|
||||||
x === "listening" &&
|
(!checked
|
||||||
(!checked
|
? "bg-white border-mti-gray-platinum"
|
||||||
? "bg-white border-mti-gray-platinum"
|
: "bg-ielts-reading/70 border-ielts-reading text-white"),
|
||||||
: "bg-ielts-listening/70 border-ielts-listening text-white"),
|
x === "listening" &&
|
||||||
x === "writing" &&
|
(!checked
|
||||||
(!checked
|
? "bg-white border-mti-gray-platinum"
|
||||||
? "bg-white border-mti-gray-platinum"
|
: "bg-ielts-listening/70 border-ielts-listening text-white"),
|
||||||
: "bg-ielts-writing/70 border-ielts-writing text-white"),
|
x === "writing" &&
|
||||||
x === "speaking" &&
|
(!checked
|
||||||
(!checked
|
? "bg-white border-mti-gray-platinum"
|
||||||
? "bg-white border-mti-gray-platinum"
|
: "bg-ielts-writing/70 border-ielts-writing text-white"),
|
||||||
: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
|
x === "speaking" &&
|
||||||
x === "level" &&
|
(!checked
|
||||||
(!checked
|
? "bg-white border-mti-gray-platinum"
|
||||||
? "bg-white border-mti-gray-platinum"
|
: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
|
||||||
: "bg-ielts-level/70 border-ielts-level text-white"),
|
x === "level" &&
|
||||||
)}>
|
(!checked
|
||||||
{capitalize(x)}
|
? "bg-white border-mti-gray-platinum"
|
||||||
</span>
|
: "bg-ielts-level/70 border-ielts-level text-white")
|
||||||
)}
|
)}
|
||||||
</RadioGroup.Option>
|
>
|
||||||
))}
|
{capitalize(x)}
|
||||||
</RadioGroup>
|
</span>
|
||||||
</div>
|
)}
|
||||||
{module === "reading" && <ReadingGeneration />}
|
</RadioGroup.Option>
|
||||||
{module === "listening" && <ListeningGeneration />}
|
))}
|
||||||
{module === "writing" && <WritingGeneration />}
|
</RadioGroup>
|
||||||
{module === "speaking" && <SpeakingGeneration />}
|
</div>
|
||||||
{module === "level" && <LevelGeneration />}
|
{module === "reading" && <ReadingGeneration />}
|
||||||
</Layout>
|
{module === "listening" && <ListeningGeneration />}
|
||||||
)}
|
{module === "writing" && <WritingGeneration />}
|
||||||
</>
|
{module === "speaking" && <SpeakingGeneration />}
|
||||||
);
|
{module === "level" && <LevelGeneration />}
|
||||||
|
</Layout>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,25 +1,33 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
/* eslint-disable @next/next/no-img-element */
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import Navbar from "@/components/Navbar";
|
import Navbar from "@/components/Navbar";
|
||||||
import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs";
|
import {
|
||||||
import {withIronSessionSsr} from "iron-session/next";
|
BsFileEarmarkText,
|
||||||
import {sessionOptions} from "@/lib/session";
|
BsPencil,
|
||||||
import {useEffect, useState} from "react";
|
BsStar,
|
||||||
|
BsBook,
|
||||||
|
BsHeadphones,
|
||||||
|
BsPen,
|
||||||
|
BsMegaphone,
|
||||||
|
} from "react-icons/bs";
|
||||||
|
import { withIronSessionSsr } from "iron-session/next";
|
||||||
|
import { sessionOptions } from "@/lib/session";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
import useStats from "@/hooks/useStats";
|
import useStats from "@/hooks/useStats";
|
||||||
import {averageScore, groupBySession, totalExams} from "@/utils/stats";
|
import { averageScore, groupBySession, totalExams } from "@/utils/stats";
|
||||||
import useUser from "@/hooks/useUser";
|
import useUser from "@/hooks/useUser";
|
||||||
import Diagnostic from "@/components/Diagnostic";
|
import Diagnostic from "@/components/Diagnostic";
|
||||||
import {ToastContainer} from "react-toastify";
|
import { ToastContainer } from "react-toastify";
|
||||||
import {capitalize} from "lodash";
|
import { capitalize } from "lodash";
|
||||||
import {Module} from "@/interfaces";
|
import { Module } from "@/interfaces";
|
||||||
import ProgressBar from "@/components/Low/ProgressBar";
|
import ProgressBar from "@/components/Low/ProgressBar";
|
||||||
import Layout from "@/components/High/Layout";
|
import Layout from "@/components/High/Layout";
|
||||||
import {calculateAverageLevel} from "@/utils/score";
|
import { calculateAverageLevel } from "@/utils/score";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import DemographicInformationInput from "@/components/DemographicInformationInput";
|
import DemographicInformationInput from "@/components/DemographicInformationInput";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import {MODULE_ARRAY} from "@/utils/moduleUtils";
|
import { MODULE_ARRAY } from "@/utils/moduleUtils";
|
||||||
import ProfileSummary from "@/components/ProfileSummary";
|
import ProfileSummary from "@/components/ProfileSummary";
|
||||||
import StudentDashboard from "@/dashboards/Student";
|
import StudentDashboard from "@/dashboards/Student";
|
||||||
import AdminDashboard from "@/dashboards/Admin";
|
import AdminDashboard from "@/dashboards/Admin";
|
||||||
@@ -28,171 +36,209 @@ import TeacherDashboard from "@/dashboards/Teacher";
|
|||||||
import AgentDashboard from "@/dashboards/Agent";
|
import AgentDashboard from "@/dashboards/Agent";
|
||||||
import MasterCorporateDashboard from "@/dashboards/MasterCorporate";
|
import MasterCorporateDashboard from "@/dashboards/MasterCorporate";
|
||||||
import PaymentDue from "./(status)/PaymentDue";
|
import PaymentDue from "./(status)/PaymentDue";
|
||||||
import {useRouter} from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import {PayPalScriptProvider} from "@paypal/react-paypal-js";
|
import { PayPalScriptProvider } from "@paypal/react-paypal-js";
|
||||||
import {CorporateUser, MasterCorporateUser, Type, userTypes} from "@/interfaces/user";
|
import {
|
||||||
|
CorporateUser,
|
||||||
|
MasterCorporateUser,
|
||||||
|
Type,
|
||||||
|
userTypes,
|
||||||
|
} from "@/interfaces/user";
|
||||||
import Select from "react-select";
|
import Select from "react-select";
|
||||||
import {USER_TYPE_LABELS} from "@/resources/user";
|
import { USER_TYPE_LABELS } from "@/resources/user";
|
||||||
|
import { checkAccess, getTypesOfUser } from "@/utils/permissions";
|
||||||
|
|
||||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
|
||||||
const user = req.session.user;
|
const user = req.session.user;
|
||||||
|
|
||||||
const envVariables: {[key: string]: string} = {};
|
const envVariables: { [key: string]: string } = {};
|
||||||
Object.keys(process.env)
|
Object.keys(process.env)
|
||||||
.filter((x) => x.startsWith("NEXT_PUBLIC"))
|
.filter((x) => x.startsWith("NEXT_PUBLIC"))
|
||||||
.forEach((x: string) => {
|
.forEach((x: string) => {
|
||||||
envVariables[x] = process.env[x]!;
|
envVariables[x] = process.env[x]!;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!user || !user.isVerified) {
|
if (!user || !user.isVerified) {
|
||||||
return {
|
return {
|
||||||
redirect: {
|
redirect: {
|
||||||
destination: "/login",
|
destination: "/login",
|
||||||
permanent: false,
|
permanent: false,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
props: {user: req.session.user, envVariables},
|
props: { user: req.session.user, envVariables },
|
||||||
};
|
};
|
||||||
}, sessionOptions);
|
}, sessionOptions);
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user: any;
|
user: any;
|
||||||
envVariables: {[key: string]: string};
|
envVariables: { [key: string]: string };
|
||||||
}
|
}
|
||||||
export default function Home(props: Props) {
|
export default function Home(props: Props) {
|
||||||
const {envVariables} = props;
|
const { envVariables } = props;
|
||||||
const [showDiagnostics, setShowDiagnostics] = useState(false);
|
const [showDiagnostics, setShowDiagnostics] = useState(false);
|
||||||
const [showDemographicInput, setShowDemographicInput] = useState(false);
|
const [showDemographicInput, setShowDemographicInput] = useState(false);
|
||||||
const [selectedScreen, setSelectedScreen] = useState<Type>("admin");
|
const [selectedScreen, setSelectedScreen] = useState<Type>("admin");
|
||||||
|
|
||||||
const {user, mutateUser} = useUser({redirectTo: "/login"});
|
const { user, mutateUser } = useUser({ redirectTo: "/login" });
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user) {
|
if (user) {
|
||||||
setShowDemographicInput(
|
setShowDemographicInput(
|
||||||
!user.demographicInformation ||
|
!user.demographicInformation ||
|
||||||
!user.demographicInformation.country ||
|
!user.demographicInformation.country ||
|
||||||
!user.demographicInformation.gender ||
|
!user.demographicInformation.gender ||
|
||||||
!user.demographicInformation.phone,
|
!user.demographicInformation.phone
|
||||||
);
|
);
|
||||||
setShowDiagnostics(user.isFirstLogin && user.type === "student");
|
setShowDiagnostics(user.isFirstLogin && user.type === "student");
|
||||||
}
|
}
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
const checkIfUserExpired = () => {
|
const checkIfUserExpired = () => {
|
||||||
const expirationDate = user!.subscriptionExpirationDate;
|
const expirationDate = user!.subscriptionExpirationDate;
|
||||||
|
|
||||||
if (expirationDate === null || expirationDate === undefined) return false;
|
if (expirationDate === null || expirationDate === undefined) return false;
|
||||||
if (moment(expirationDate).isAfter(moment(new Date()))) return false;
|
if (moment(expirationDate).isAfter(moment(new Date()))) return false;
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
if (user && (user.status === "paymentDue" || user.status === "disabled" || checkIfUserExpired())) {
|
if (
|
||||||
return (
|
user &&
|
||||||
<>
|
(user.status === "paymentDue" ||
|
||||||
<Head>
|
user.status === "disabled" ||
|
||||||
<title>EnCoach</title>
|
checkIfUserExpired())
|
||||||
<meta
|
) {
|
||||||
name="description"
|
return (
|
||||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
<>
|
||||||
/>
|
<Head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<title>EnCoach</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<meta
|
||||||
</Head>
|
name="description"
|
||||||
{user.status === "disabled" && (
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||||
<Layout user={user} navDisabled>
|
/>
|
||||||
<div className="flex flex-col items-center justify-center text-center w-full gap-4">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<span className="font-bold text-lg">Your account has been disabled!</span>
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<span>Please contact an administrator if you believe this to be a mistake.</span>
|
</Head>
|
||||||
</div>
|
{user.status === "disabled" && (
|
||||||
</Layout>
|
<Layout user={user} navDisabled>
|
||||||
)}
|
<div className="flex flex-col items-center justify-center text-center w-full gap-4">
|
||||||
{(user.status === "paymentDue" || checkIfUserExpired()) && <PaymentDue hasExpired user={user} reload={router.reload} />}
|
<span className="font-bold text-lg">
|
||||||
</>
|
Your account has been disabled!
|
||||||
);
|
</span>
|
||||||
}
|
<span>
|
||||||
|
Please contact an administrator if you believe this to be a
|
||||||
|
mistake.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)}
|
||||||
|
{(user.status === "paymentDue" || checkIfUserExpired()) && (
|
||||||
|
<PaymentDue hasExpired user={user} reload={router.reload} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (user && showDemographicInput) {
|
if (user && showDemographicInput) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>EnCoach</title>
|
<title>EnCoach</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||||
/>
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<Layout user={user} navDisabled>
|
<Layout user={user} navDisabled>
|
||||||
<DemographicInformationInput mutateUser={mutateUser} user={user} />
|
<DemographicInformationInput mutateUser={mutateUser} user={user} />
|
||||||
</Layout>
|
</Layout>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (user && showDiagnostics) {
|
if (user && showDiagnostics) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>EnCoach</title>
|
<title>EnCoach</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||||
/>
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<Layout user={user} navDisabled>
|
<Layout user={user} navDisabled>
|
||||||
<Diagnostic user={user} onFinish={() => setShowDiagnostics(false)} />
|
<Diagnostic user={user} onFinish={() => setShowDiagnostics(false)} />
|
||||||
</Layout>
|
</Layout>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>EnCoach</title>
|
<title>EnCoach</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||||
/>
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
{user && (
|
{user && (
|
||||||
<Layout user={user}>
|
<Layout user={user}>
|
||||||
{user.type === "student" && <StudentDashboard user={user} />}
|
{checkAccess(user, ["student"]) && <StudentDashboard user={user} />}
|
||||||
{user.type === "teacher" && <TeacherDashboard user={user} />}
|
{checkAccess(user, ["teacher"]) && <TeacherDashboard user={user} />}
|
||||||
{user.type === "corporate" && <CorporateDashboard user={user} />}
|
{checkAccess(user, ["corporate"]) && (
|
||||||
{user.type === "mastercorporate" && <MasterCorporateDashboard user={user} />}
|
<CorporateDashboard user={user as CorporateUser} />
|
||||||
{user.type === "agent" && <AgentDashboard user={user} />}
|
)}
|
||||||
{user.type === "admin" && <AdminDashboard user={user} />}
|
{checkAccess(user, ["mastercorporate"]) && (
|
||||||
{user.type === "developer" && (
|
<MasterCorporateDashboard user={user as MasterCorporateUser} />
|
||||||
<>
|
)}
|
||||||
<Select
|
{checkAccess(user, ["agent"]) && <AgentDashboard user={user} />}
|
||||||
options={userTypes.map((u) => ({value: u, label: USER_TYPE_LABELS[u]}))}
|
{checkAccess(user, ["admin"]) && <AdminDashboard user={user} />}
|
||||||
value={{value: selectedScreen, label: USER_TYPE_LABELS[selectedScreen]}}
|
{checkAccess(user, ["developer"]) && (
|
||||||
onChange={(value) => (value ? setSelectedScreen(value.value) : setSelectedScreen("admin"))}
|
<>
|
||||||
/>
|
<Select
|
||||||
|
options={userTypes.map((u) => ({
|
||||||
|
value: u,
|
||||||
|
label: USER_TYPE_LABELS[u],
|
||||||
|
}))}
|
||||||
|
value={{
|
||||||
|
value: selectedScreen,
|
||||||
|
label: USER_TYPE_LABELS[selectedScreen],
|
||||||
|
}}
|
||||||
|
onChange={(value) =>
|
||||||
|
value
|
||||||
|
? setSelectedScreen(value.value)
|
||||||
|
: setSelectedScreen("admin")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
{selectedScreen === "student" && <StudentDashboard user={user} />}
|
{selectedScreen === "student" && <StudentDashboard user={user} />}
|
||||||
{selectedScreen === "teacher" && <TeacherDashboard user={user} />}
|
{selectedScreen === "teacher" && <TeacherDashboard user={user} />}
|
||||||
{selectedScreen === "corporate" && <CorporateDashboard user={user as unknown as CorporateUser} />}
|
{selectedScreen === "corporate" && (
|
||||||
{selectedScreen === "mastercorporate" && <MasterCorporateDashboard user={user as unknown as MasterCorporateUser} />}
|
<CorporateDashboard user={user as unknown as CorporateUser} />
|
||||||
{selectedScreen === "agent" && <AgentDashboard user={user} />}
|
)}
|
||||||
{selectedScreen === "admin" && <AdminDashboard user={user} />}
|
{selectedScreen === "mastercorporate" && (
|
||||||
</>
|
<MasterCorporateDashboard
|
||||||
)}
|
user={user as unknown as MasterCorporateUser}
|
||||||
</Layout>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
{selectedScreen === "agent" && <AgentDashboard user={user} />}
|
||||||
);
|
{selectedScreen === "admin" && <AdminDashboard user={user} />}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Layout>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user