devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made sure the user can’t navigate to another page when they shouldn’t via the URL

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-12 10:00:44 +01:00
parent 1d27da71ec
commit 4c95d85cf9
9 changed files with 74 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/admin.tsx
View File

@@ -11,6 +11,7 @@ import {Tab} from "@headlessui/react";
import clsx from "clsx";
import Lists from "./(admin)/Lists";
import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -26,7 +27,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}
if (user.type !== "developer") {
if (shouldRedirectHome(user) || user.type !== "developer") {
res.setHeader("location", "/");
res.statusCode = 302;
res.end();

12
src/pages/exam.tsx
View File

@@ -34,6 +34,7 @@ import AbandonPopup from "@/components/AbandonPopup";
import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
import {useRouter} from "next/router";
import {getExam} from "@/utils/exams";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -49,6 +50,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}
if (shouldRedirectHome(user)) {
res.setHeader("location", "/");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};

12
src/pages/exercises.tsx
View File

@@ -37,6 +37,7 @@ import AbandonPopup from "@/components/AbandonPopup";
import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
import {useRouter} from "next/router";
import {getExam} from "@/utils/exams";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -52,6 +53,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}
if (shouldRedirectHome(user)) {
res.setHeader("location", "/");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};

12
src/pages/profile.tsx
View File

@@ -17,6 +17,7 @@ import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/us
import countryCodes from "country-codes-list";
import {countries, TCountries} from "countries-list";
import CountrySelect from "@/components/Low/CountrySelect";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -32,6 +33,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}
if (shouldRedirectHome(user)) {
res.setHeader("location", "/");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};

12
src/pages/record.tsx
View File

@@ -21,6 +21,7 @@ import {calculateBandScore} from "@/utils/score";
import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
import Select from "react-select";
import useGroups from "@/hooks/useGroups";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -36,6 +37,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}
if (shouldRedirectHome(user)) {
res.setHeader("location", "/");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};

12
src/pages/stats.tsx
View File

@@ -21,6 +21,7 @@ import Select from "react-select";
import useGroups from "@/hooks/useGroups";
import DatePicker from "react-datepicker";
import moment from "moment";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
@@ -40,6 +41,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}
if (shouldRedirectHome(user)) {
res.setHeader("location", "/");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};

190
src/pages/test.tsx
View File

@@ -1,190 +0,0 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import Navbar from "@/components/Navbar";
import {ToastContainer} from "react-toastify";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import useUser from "@/hooks/useUser";
import Sidebar from "@/components/Sidebar";
import dynamic from "next/dynamic";
import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPauseFill, BsPlayCircle, BsPlayFill, BsTrashFill} from "react-icons/bs";
import {useEffect, useState} from "react";
import Layout from "@/components/High/Layout";
const Waveform = dynamic(() => import("../components/Waveform"), {ssr: false});
const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
ssr: false,
});
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
if (!user || !user.isVerified) {
res.setHeader("location", "/login");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};
}, sessionOptions);
export default function Page() {
const {user} = useUser({redirectTo: "/login"});
const [recordingDuration, setRecordingDuration] = useState(0);
const [isRecording, setIsRecording] = useState(false);
const [mediaBlob, setMediaBlob] = useState<string>();
useEffect(() => {
let recordingInterval: NodeJS.Timer | undefined = undefined;
if (isRecording) {
recordingInterval = setInterval(() => setRecordingDuration((prev) => prev + 1), 1000);
} else if (recordingInterval) {
clearInterval(recordingInterval);
}
return () => {
if (recordingInterval) clearInterval(recordingInterval);
};
}, [isRecording]);
return (
<>
<Head>
<title>Exam | EnCoach</title>
<meta
name="description"
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" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ToastContainer />
{user && (
<Layout user={user}>
<ReactMediaRecorder
audio
onStop={(blob) => setMediaBlob(blob)}
render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => (
<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
<p className="text-base font-normal">Record your answer:</p>
<div className="flex gap-8 items-center justify-center py-8">
{status === "idle" && (
<>
<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
{status === "idle" && (
<BsMicFill
onClick={() => {
setRecordingDuration(0);
startRecording();
setIsRecording(true);
}}
className="h-5 w-5 text-mti-gray-cool cursor-pointer"
/>
)}
</>
)}
{status === "recording" && (
<>
<div className="flex gap-4 items-center">
<span className="text-xs w-9">
{Math.round(recordingDuration / 60)
.toString(10)
.padStart(2, "0")}
:
{Math.round(recordingDuration % 60)
.toString(10)
.padStart(2, "0")}
</span>
</div>
<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
<div className="flex gap-4 items-center">
<BsPauseCircle
onClick={() => {
setIsRecording(false);
pauseRecording();
}}
className="text-red-500 w-8 h-8 cursor-pointer"
/>
<BsCheckCircleFill
onClick={() => {
setIsRecording(false);
stopRecording();
}}
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
</div>
</>
)}
{status === "paused" && (
<>
<div className="flex gap-4 items-center">
<span className="text-xs w-9">
{Math.floor(recordingDuration / 60)
.toString(10)
.padStart(2, "0")}
:
{Math.floor(recordingDuration % 60)
.toString(10)
.padStart(2, "0")}
</span>
</div>
<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
<div className="flex gap-4 items-center">
<BsPlayCircle
onClick={() => {
setIsRecording(true);
resumeRecording();
}}
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
<BsCheckCircleFill
onClick={() => {
setIsRecording(false);
stopRecording();
}}
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
</div>
</>
)}
{status === "stopped" && mediaBlobUrl && (
<>
<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
<div className="flex gap-4 items-center">
<BsTrashFill
className="text-mti-gray-cool cursor-pointer w-5 h-5"
onClick={() => {
setRecordingDuration(0);
clearBlobUrl();
}}
/>
<BsMicFill
onClick={() => {
clearBlobUrl();
setRecordingDuration(0);
startRecording();
setIsRecording(true);
}}
className="h-5 w-5 text-mti-gray-cool cursor-pointer"
/>
</div>
</>
)}
</div>
</div>
)}
/>
</Layout>
)}
</>
);
}

101
src/pages/users.tsx
View File

@@ -1,101 +0,0 @@
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {Type, User} from "@/interfaces/user";
import Head from "next/head";
import {Avatar} from "primereact/avatar";
import {useEffect, useState} from "react";
import {FilterMatchMode, FilterOperator} from "primereact/api";
import useUsers from "@/hooks/useUsers";
import {DataTable} from "primereact/datatable";
import {Column} from "primereact/column";
import {capitalize} from "lodash";
import {levelCalculator} from "@/resources/level";
import {Dropdown} from "primereact/dropdown";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
if (!user || !user.isVerified) {
res.setHeader("location", "/login");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};
}, sessionOptions);
export default function Users({user}: {user: User}) {
const {users, isLoading} = useUsers();
const [filters] = useState({
name: {value: null, matchMode: FilterMatchMode.CONTAINS},
type: {value: null, matchMode: FilterMatchMode.EQUALS},
});
const userTypes: Type[] = ["admin", "developer", "owner", "student", "teacher"];
const typeRowFilterTemplate = (options: any) => {
return (
<Dropdown
value={options.value}
options={userTypes.map(capitalize)}
onChange={(e) => options.filterApplyCallback(e.value)}
placeholder="Select One"
className="p-column-filter"
showClear
style={{minWidth: "12rem"}}
/>
);
};
return (
<>
<Head>
<title>EnCoach | Users</title>
<meta
name="description"
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" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100">
<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
<DataTable
dataKey="id"
filters={filters}
filterDisplay="row"
className="w-full h-full"
loading={isLoading}
value={users}
removableSort
stripedRows
paginator
rows={5}
rowsPerPageOptions={[5, 10, 25, 50]}
tableStyle={{minWidth: "50rem"}}>
<Column field="id" sortable header="ID" />
<Column field="name" sortable header="Name" filter filterPlaceholder="Search by name" />
<Column field="experience" sortable header="Experience" />
<Column field="experience" sortable header="Level" body={(data: User) => levelCalculator(data.experience).currentLevel} />
<Column
field="type"
showFilterMenu={false}
filter
filterElement={typeRowFilterTemplate}
sortable
header="Type"
body={(data: User) => capitalize(data.type)}
/>
</DataTable>
</div>
</main>
</>
);
}