Enhanced account archived screen

This commit is contained in:
2024-06-26 19:13:37 +08:00
parent 75f30a738e
commit d8db68e411
2 changed files with 74 additions and 23 deletions

View File

@@ -35,3 +35,22 @@ export const PencilSquareIcon = () => {
</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>
);
};

View File

@@ -1,8 +1,8 @@
import { useNavigate, useParams } from "react-router-dom";
import DefaultLayout from "../layouts/default";
import { useEffect, useState } from "react";
import { Button, Link } from "@nextui-org/react";
import { PencilSquareIcon } from "../icons";
import { Button, Card, Link } from "@nextui-org/react";
import { LockClosedIcon, PencilSquareIcon } from "../icons";
import SpringboardButton from "../components/SpringboardButton";
import { getTimeOfDay } from "../utilities";
import { retrieveUserInformation } from "../security/users";
@@ -91,26 +91,32 @@ export default function SpringboardPage() {
</div>
<div>
{accountUnavailable && (
<div className="m-8 flex flex-col gap-4">
<Card>
<div className="flex flex-col m-8 gap-8">
<div className="rounded-xl flex flex-col gap-8 p-4 justify-center bg-red-500 text-center text-white">
<div className="pt-10 w-full flex flex-row justify-center scale-150">
<div className="scale-150 pb-2">
<LockClosedIcon />
</div>
</div>
<div className="flex flex-col gap-8">
<div className="flex flex-col">
<div className="flex flex-col gap-8 p-4 justify-center bg-red-500 text-center text-white h-96">
<p className="text-9xl">🔒</p>
<div className="flex flex-col gap-4">
<p className="text-4xl font-bold">Account unavailable.</p>
<div className="flex flex-col">
<p className="text-xl">
This account seems to have been archived.
<p className="text-xl opacity-70">
This account has been archived.
</p>
</div>
<p>
In order to recover the account, please{" "}
If you wish to recover the account, please{" "}
<Link className="text-white px-1 rounded-md bg-red-400">
contact us
</Link>
</p>
</div>
<div className="w-min mx-auto"></div>
</div>
</div>
<div className="flex flex-col justify-center p-8">
<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
@@ -118,6 +124,32 @@ export default function SpringboardPage() {
</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>
This may due to, either manual operation by the owner of the
account, or administrative decision from the management
team.
</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>
</div>
</div>
</Card>
</div>
)}
</div>
</DefaultLayout>