wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhanced account archived screen

Browse Source
This commit is contained in:
Adam C
2024-06-26 19:13:37 +08:00
parent 75f30a738e
commit d8db68e411
2 changed files with 74 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/icons.tsx
View File

@@ -35,3 +35,22 @@ export const PencilSquareIcon = () => {
</svg> </svg>
); );
}; };
export const LockClosedIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="size-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>
);
};

78
client/src/pages/SpringboardPage.tsx
View File

@@ -1,8 +1,8 @@
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import DefaultLayout from "../layouts/default"; import DefaultLayout from "../layouts/default";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Button, Link } from "@nextui-org/react"; import { Button, Card, Link } from "@nextui-org/react";
import { PencilSquareIcon } from "../icons"; import { LockClosedIcon, PencilSquareIcon } from "../icons";
import SpringboardButton from "../components/SpringboardButton"; import SpringboardButton from "../components/SpringboardButton";
import { getTimeOfDay } from "../utilities"; import { getTimeOfDay } from "../utilities";
import { retrieveUserInformation } from "../security/users"; import { retrieveUserInformation } from "../security/users";
@@ -91,32 +91,64 @@ export default function SpringboardPage() {
</div> </div>
<div> <div>
{accountUnavailable && ( {accountUnavailable && (
<div className="flex flex-col"> <div className="m-8 flex flex-col gap-4">
<div className="flex flex-col gap-8 p-4 justify-center bg-red-500 text-center text-white h-96"> <Card>
<p className="text-9xl">🔒</p> <div className="flex flex-col m-8 gap-8">
<div className="flex flex-col gap-4"> <div className="rounded-xl flex flex-col gap-8 p-4 justify-center bg-red-500 text-center text-white">
<p className="text-4xl font-bold">Account unavailable.</p> <div className="pt-10 w-full flex flex-row justify-center scale-150">
<div className="flex flex-col"> <div className="scale-150 pb-2">
<p className="text-xl"> <LockClosedIcon />
This account seems to have been archived. </div>
</div>
<div className="flex flex-col gap-8">
<div className="flex flex-col">
<p className="text-4xl font-bold">Account unavailable.</p>
<p className="text-xl opacity-70">
This account has been archived.
</p>
</div>
<p>
If you wish to recover the account, please{" "}
<Link className="text-white px-1 rounded-md bg-red-400">
contact us
</Link>
</p>
<div className="w-min mx-auto"></div>
</div>
</div>
<div className="flex flex-col justify-center">
<div className="w-min mx-auto">
<Button color="primary" onPress={() => navigate("/signin")}>
Sign in with a different account
</Button>
</div>
</div>
</div>
</Card>
<Card>
<div className="p-8 flex flex-col gap-4">
<p className="text-2xl font-semibold">Why am I seeing this?</p>
<div className="flex flex-col gap-2">
<p>
You have attempted to access an account that has been
archived.
</p> </p>
<p> <p>
In order to recover the account, please{" "} This may due to, either manual operation by the owner of the
<Link className="text-white px-1 rounded-md bg-red-400"> account, or administrative decision from the management
contact us team.
</Link> </p>
<p>
The information related to this account remains, however the
access to the account will not be available.
</p>
<p>
If you believe that this is incorrect, or would like to
request an unarchive, please <Link>contact us</Link>.
</p> </p>
</div> </div>
<div className="w-min mx-auto"></div>
</div> </div>
</div> </Card>
<div className="flex flex-col justify-center p-8">
<div className="w-min mx-auto">
<Button color="primary" onPress={() => navigate("/signin")}>
Sign in with a different account
</Button>
</div>
</div>
</div> </div>
)} )}
</div> </div>