Create Home page (Before and After Login) (#12)

ui/src/app/(index)/_components/AfterLogin.tsx

@@ -0,0 +1,126 @@
+import Role from '@/access/Role';
+import Image from 'next/image';
+import { KeyRound } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { getNumberOfGroupings, getNumberOfMemberships } from '@/services/GroupingsApiService';
+import { getCurrentUser } from '@/access/AuthenticationService';
+
+const AfterLogin = async ()=>{
+    const [currentUser, numberOfGroupings, numberOfMemberships] = await Promise.all([
+        getCurrentUser(),
+        getNumberOfGroupings(),
+        getNumberOfMemberships()
+    ]);
+
+    const getHighestRole = () => {
+        if (currentUser.roles.includes(Role.ADMIN)) return 'Admin';
+        else if (currentUser.roles.includes(Role.OWNER)) return 'Owner';
+        else return 'Member';
+    };
+
+    const pageInfoItems = [
+        {
+            title: 'Admin',
+            description: 'Manage the list of Administrators for this service.' +
+                ' Search for and manage any grouping on behalf of the owner.',
+            href: '/admin',
+            icon: {
+                alt: 'key-solid',
+                src: '/uhgroupings/key-solid.svg',
+                width: 48,
+                height: 48,
+            },
+            role: Role.ADMIN
+        },
+        {
+            title: 'Memberships',
+            description: 'View and manage my memberships. Search for new groupings to join as a member.',
+            href: '/memberships',
+            icon: {
+                src: '/uhgroupings/id-card-solid.svg',
+                alt: 'id-card',
+                width: 54,
+                height: 48,
+            },
+            number: numberOfMemberships,
+            role: Role.UH
+        },
+        {
+            title: 'Groupings',
+            description: 'Review members, manage Include and Exclude lists, ' +
+                'configure preferences, and export members.',
+            href: '/groupings',
+            icon: {
+                alt: 'wrench-solid',
+                src: '/uhgroupings/wrench-solid.svg',
+                width: 48,
+                height: 48
+            },
+            number: numberOfGroupings,
+            role: Role.OWNER
+        }
+    ];
+
+    return (
+        <main>
+            <div className="bg-seafoam pt-5 pb-5">
+                <div className="container bg-seafoam pt-7 pb-7">
+                    <div className="grid sm:grid-cols-12 text-center justify-center items-center gap-4">
+                        <div className="sm:col-span-3 md:col-span-2">
+                            <div className="flex justify-center items-center rounded-full
+                            h-[100px] w-[100px] bg-white mx-auto relative lg:ml-0">
+                                <Image
+                                    src="/uhgroupings/user-solid.svg"
+                                    alt="user-solid"
+                                    width={56}
+                                    height={64}
+                                />
+                                <div
+                                    className="bg-blue-background rounded-full flex justify-center
+                                    items-center h-[30px] w-[30px] absolute left-3 bottom-0 ml-16">
+                                    <KeyRound className="fill-white stroke-none p-0.5" aria-label='key-round'/>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="sm:col-span-9 md:col-span-10 text-center md:text-left">
+                            <h1 className="whitespace-nowrap text-[1.75rem]"
+                                data-testid="welcome-message">Welcome, <span
+                                    className="text-text-color">{currentUser.firstName}</span>!</h1>
+                            <h1 className="whitespace-nowrap text-[1.75rem]" data-testid="role">Role: <span
+                                className="text-text-color">{getHighestRole()}</span></h1>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="container grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mt-10 mb-10">
+                {pageInfoItems
+                    .filter((pageInfoItem) => currentUser.roles.includes(pageInfoItem.role))
+                    .map((pageInfoItem, index) => (
+                        <div key={index} className="flex flex-col justify-between">
+                            <div>
+                                <div className="flex items-center mb-1">
+                                    <Image
+                                        alt={pageInfoItem.icon.alt}
+                                        src={pageInfoItem.icon.src}
+                                        width={pageInfoItem.icon.width}
+                                        height={pageInfoItem.icon.height}
+                                        className={`mr-5 mb-4 max-w-${pageInfoItem.icon.width} h-auto`}/>
+                                    {pageInfoItem.number
+                                        && <span className="text-[2.5rem] text-text-color">{pageInfoItem.number}</span>}
+                                </div>
+                                <h2 className="text-2xl text-text-color font-medium mb-2">{pageInfoItem.title}</h2>
+                                <p className="mb-4 text-base font-normal">{pageInfoItem.description}</p>
+                            </div>
+                            <Link href={pageInfoItem.href}>
+                                <Button>{pageInfoItem.title}</Button>
+                            </Link>
+                        </div>
+                    ))}
+            </div>
+        </main>
+    );
+};
+
+export default AfterLogin;

ui/src/app/(index)/_components/Announcements.tsx

@@ -0,0 +1,30 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
+import { getAnnouncements } from '@/services/GroupingsApiService';
+
+const Announcements = async () => {
+    const announcements = await getAnnouncements();
+    const activeAnnouncements = () => {
+        if (!announcements || !announcements.announcements) {
+            return []
+        }
+        return announcements.announcements
+            .filter((announcement) => announcement.state === 'Active')
+            .map((announcement) => announcement.message)
+    };
+
+    return (
+        <div className="mt-5 mb-5">
+            {activeAnnouncements().map((announcement:string, index:number) => (
+                <Alert key={index} className="bg-yellow-100 border border-yellow-200 mb-2">
+                    <AlertCircle aria-label="icon" className="h-4 w-4"/>
+                    <AlertTitle className="font-semibold">Announcement</AlertTitle>
+                    <AlertDescription>
+                        {announcement}
+                    </AlertDescription>
+                </Alert>))}
+        </div>
+    );
+};
+
+export default Announcements;

ui/src/app/(index)/_components/BeforeLogin.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button';
+import { ArrowRight } from 'lucide-react';
+import UHGroupingsInfo from '@/components/UHGroupingsInfo';
+
+const BeforeLogin = () => (
+    <main className="bg-seafoam pb-10">
+        <UHGroupingsInfo size='lg'/>
+        <div className="row">
+            <div className="text-center">
+                <a href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings">
+                    <Button size="lg" variant="default">
+                            Learn More <ArrowRight className="ml-1"/>
+                    </Button>
+                </a>
+            </div>
+        </div>
+    </main>
+);
+
+export default BeforeLogin;

ui/src/app/(index)/_components/LoginButton.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { Button } from '@/components/ui/button';
+import Role from '@/access/Role';
+import User from '@/access/User';
+import { login, logout } from '@/access/AuthenticationService';
+
+const LoginButton = ({
+    currentUser
+}: {
+    currentUser: User;
+}) => (
+    <>
+        {!currentUser.roles.includes(Role.UH) ? (
+            <Button
+                size="lg"
+                variant="default"
+                onClick={() => login()}>
+                Login Here
+            </Button>
+        ) : (
+            <Button
+                size="lg"
+                variant="default"
+                onClick={() => logout()}>
+                Logout
+            </Button>
+        )}
+    </>
+);
+
+export default LoginButton;

ui/src/app/(index)/page.tsx

@@ -1,6 +1,53 @@
-const Home = () => {
+import Image from 'next/image';
+import BeforeLogin from '@/app/(index)/_components/BeforeLogin';
+import AfterLogin from '@/app/(index)/_components/AfterLogin';
+import { getCurrentUser } from '@/access/AuthenticationService';
+import Role from '@/access/Role';
+import LoginButton from '@/app/(index)/_components/LoginButton';
+import Announcements from '@/app/(index)/_components/Announcements';
+
+const Home = async () => {
+    const currentUser = await getCurrentUser();
+
     return (
-        null
+        <main>
+            <div className="container mt-5 mb-5">
+                <Announcements />
+                <div className="flex flex-row py-8 px-0.5 justify-between">
+                    <div className="md:w-7/12 flex items-center">
+                        <div>
+                            <h1 className="sr-only">UH Groupings</h1>
+                            <Image
+                                src="/uhgroupings/uh-groupings-text.svg"
+                                alt="UH Groupings logotype"
+                                width={337.5}
+                                height={52.5}
+                                className="w-[210px] h-[32.67px] sm:w-1/2 sm:h-auto md:w-[337.5px] md:h-[52.5px]"
+                            />
+
+                            <p className="text-xl mt-1"> Manage your groupings in one place, use them in many.</p>
+                            <div className="mt-4">
+                                <LoginButton currentUser={currentUser}/>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="hidden lg:block md:w-5/12">
+                        <Image
+                            src="/uhgroupings/uh-groupings-logo-large.svg"
+                            alt="UH Groupings"
+                            width={365.5}
+                            height={292.5}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {currentUser.roles.includes(Role.UH) ? (
+                <AfterLogin/>
+            ) : (
+                <BeforeLogin/>
+            )}
+        </main>
     );
 }