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

Enhanced archived account signin experience

Browse Source
This commit is contained in:
Adam C
2024-06-26 15:00:48 +08:00
parent 161fa3dd1d
commit d3838100e0
6 changed files with 130 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import { retrieveUserInformation } from "../security/users";
export default function SpringboardPage() {
let { accessToken } = useParams<string>(); // TODO: Replace AT from props with AT from localstorage
let [userInformation, setUserInformation] = useState<any>();
let [accountUnavailable, setAccountUnavaliable] = useState(false);
let timeOfDay = getTimeOfDay();
const navigate = useNavigate();
@@ -23,63 +24,102 @@ export default function SpringboardPage() {
greeting = "Good evening";
}
useEffect(
() => retrieveUserInformation(accessToken!, setUserInformation),
[]
);
useEffect(() => {
retrieveUserInformation(accessToken!)
.then((response) => {
setUserInformation(response);
})
.catch((error) => {
setAccountUnavaliable(true);
});
return;
}, []);
return (
<DefaultLayout>
{userInformation && (
<div className="flex flex-col w-full">
<div className="flex flex-row justify-between p-8 *:my-auto">
<div className="flex flex-col gap-4">
<p className="text-3xl font-bold">
{greeting}, {userInformation.firstName}.
</p>
<p>
Resident of <Link>Bishan-Toa Payoh Town Council</Link>
</p>
<Button
className="w-max"
size="sm"
variant="flat"
color="primary"
startContent={
<div className="scale-80">
<PencilSquareIcon />
</div>
}
onPress={() => {
navigate("/manage-account/" + accessToken);
}}
>
Manage your account
</Button>
<div>
{userInformation && (
<div className="flex flex-col w-full">
<div className="flex flex-row justify-between p-8 *:my-auto">
<div className="flex flex-col gap-4">
<p className="text-3xl font-bold">
{greeting}, {userInformation.firstName}.
</p>
<p>
Resident of <Link>Bishan-Toa Payoh Town Council</Link>
</p>
<Button
className="w-max"
size="sm"
variant="flat"
color="primary"
startContent={
<div className="scale-80">
<PencilSquareIcon />
</div>
}
onPress={() => {
navigate("/manage-account/" + accessToken);
}}
>
Manage your account
</Button>
</div>
<div className="bg-red-500 w-40 h-40 rounded-full"></div>
</div>
<div className="bg-red-500 w-40 h-40 rounded-full"></div>
<div className="flex flex-row justify-stretch *:w-full *:h-56 w-full p-4 pt-0 gap-4">
<SpringboardButton
title="Community Forums"
subtitle="Be involved in discussions among your neighbourhood"
></SpringboardButton>
<SpringboardButton
title="Events"
subtitle="Participate in exciting upcoming events around Singapore"
></SpringboardButton>
<SpringboardButton
title="Home Bill Contest"
subtitle="Save resources, win vouchers!"
></SpringboardButton>
<SpringboardButton
title="Karang Guni Scheduling"
subtitle="Arrange doorstep sales for your old gears with Karang Guni"
></SpringboardButton>
</div>
<div className="w-full h-[600px] bg-red-500"></div>
</div>
<div className="flex flex-row justify-stretch *:w-full *:h-56 w-full p-4 pt-0 gap-4">
<SpringboardButton
title="Community Forums"
subtitle="Be involved in discussions among your neighbourhood"
></SpringboardButton>
<SpringboardButton
title="Events"
subtitle="Participate in exciting upcoming events around Singapore"
></SpringboardButton>
<SpringboardButton
title="Home Bill Contest"
subtitle="Save resources, win vouchers!"
></SpringboardButton>
<SpringboardButton
title="Karang Guni Scheduling"
subtitle="Arrange doorstep sales for your old gears with Karang Guni"
></SpringboardButton>
)}
</div>
<div>
{accountUnavailable && (
<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>
<p>
In order 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="w-min mx-auto">
<Button color="primary" onPress={() => navigate("/signin")}>
Sign in with a different account
</Button>
</div>
</div>
</div>
<div className="w-full h-[600px] bg-red-500"></div>
</div>
)}
)}
</div>
</DefaultLayout>
);
}