Enhanced account archived screen
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user