Create Home page (Before and After Login)

uhawaii-system-its-ti-iam · Apr 5, 2024 · 0b5ed1d · 0b5ed1d
1 parent df7c92e
commit 0b5ed1d
Show file tree

Hide file tree

Showing 20 changed files with 449 additions and 62 deletions.
diff --git a/ui/public/cogs.svg b/ui/public/cogs.svg
diff --git a/ui/public/id-card-solid.svg b/ui/public/id-card-solid.svg
diff --git a/ui/public/id-email.svg b/ui/public/id-email.svg
diff --git a/ui/public/key-solid.svg b/ui/public/key-solid.svg
diff --git a/ui/public/uh-groupings-text.svg b/ui/public/uh-groupings-text.svg
diff --git a/ui/public/user-solid.svg b/ui/public/user-solid.svg
diff --git a/ui/public/watch.svg b/ui/public/watch.svg
diff --git a/ui/public/wrench-solid.svg b/ui/public/wrench-solid.svg
diff --git a/ui/src/app/(index)/page.tsx b/ui/src/app/(index)/page.tsx
@@ -1,7 +1,70 @@
-const Home = () => {
+import Image from 'next/image';
+import BeforeLogin from '@/components/home/BeforeLogin';
+import AfterLogin from '@/components/home/AfterLogin';
+import {getCurrentUser} from '@/access/AuthenticationService';
+import Role from '@/access/Role';
+import LoginButton from '@/components/home/LoginButton';
+import {getAnnouncements, getNumberOfGroupings, getNumberOfMemberships} from '@/services/GroupingsApiService';
+import Announcement from '@/components/home/Announcement';
+
+const Home = async () => {
+    const [currentUser, numberOfGroupings, numberOfMemberships, announcements] = await Promise.all([
+        getCurrentUser(),
+        getNumberOfGroupings(),
+        getNumberOfMemberships(),
+        getAnnouncements()
+    ]);
+
+    const activeAnnouncements = announcements.announcements
+        .filter((announcement) => announcement.state === 'Active')
+        .map((announcement) => announcement.message);
+
+
     return (
-        null
+        <main>
+            <div className="container mt-5 mb-5">
+                {activeAnnouncements.map((announcement: string, index: number) => (
+                    <Announcement announcement={announcement} key={index}/>
+                ))}
+                <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">
+                                {!currentUser.roles.includes(Role.UH) &&
+                                    <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
+                    currentUser={currentUser}
+                    numberOfGroupings={numberOfGroupings}
+                    numberOfMemberships={numberOfMemberships}/>
+            ) : (
+                <BeforeLogin/>
+            )}
+        </main>
     );
 }
-
 export default Home;
diff --git a/ui/src/app/about/page.tsx b/ui/src/app/about/page.tsx
@@ -1,67 +1,19 @@
-import Image from 'next/image';
+import UHGroupingsInfo from '@/components/UHGroupingsInfo';
 
 const About = () => (
     <main>
-        <div className="bg-seafoam py-10">
-            <div className="container">
-                <div className="grid gap-2">
-                    <h1 className="text-center text-4xl font-medium">What is a UH Grouping?</h1>
-                    <p className="text-center text-lg">A <em>grouping</em> is a collection of members
-                        (e.g., all full-time
-                        Hilo faculty).</p>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-7 pt-3">
-                    <div className="col-span-1">
-                        <div className="flex justify-center">
-                            <Image
-                                src="/uhgroupings/cogs.svg"
-                                alt="Cogs icon"
-                                width={115}
-                                height={115}/>
-                        </div>
-                        <p className="text-center">Create groupings, manage grouping memberships,
-                            control members&apos; self-service
-                            options, designate sync destinations, and more.</p>
-                    </div>
-
-                    <div className="col-span-1">
-                        <div className="flex justify-center">
-                            <Image
-                                src="/uhgroupings/id-email.svg"
-                                alt="Email icon"
-                                width={115}
-                                height={115}/>
-                        </div>
-                        <p className="text-center">Synchronize groupings email LISTSERV lists, attributes for access
-                            control via
-                            CAS and LDAP, etc.</p>
-                    </div>
-
-                    <div className="col-span-1">
-                        <div className="flex justify-center">
-                            <Image
-                                src="/uhgroupings/watch.svg"
-                                alt="Watch icon"
-                                width={115}
-                                height={115}/>
-                        </div>
-                        <p className="text-center">Leverage group data from official sources, which can
-                            substantially reduce the
-                            manual overhead of membership management.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
+        <UHGroupingsInfo/>
         <div className="container pt-10 pb-10">
             <h2 className="text-center text-xl font-bold text-text-color pb-7">GENERAL INFO</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 ">
                 <div className="col-span-1">
                     <h3 className="text-text-color text-lg pb-1">How do I request a new grouping?</h3>
                     <p className="pb-7">
                         <a className="text-link-color hover:underline hover:text-link-hover-color"
-                            href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13402308/UH+Groupings+Request+Form"
-                            aria-label="A request form is available">A request form is available</a>.
+                            href={'https://uhawaii.atlassian.net/wiki/spaces/UHIAM/' +
+                            'pages/13402308/UH+Groupings+Request+Form'}
+                            aria-label="A request form is available">A request form is available
+                        </a>.
                     </p>
 
                     <h3 className="text-text-color text-lg pb-1">Exactly what is a grouping?</h3>

diff --git a/ui/src/components/AboutInfoItem.tsx b/ui/src/components/AboutInfoItem.tsx
@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+const AboutInfoItem = ({src, alt, description, variant}: {
+    src: string,
+    alt: string,
+    description: string,
+    variant?: 'default'| 'home'
+}) => {
+    const size = variant === 'home'? 'text-1.2': 'text-base';
+    return (
+        <div className="col-span-1">
+            <div className="flex justify-center">
+                <Image
+                    src={src}
+                    alt={alt}
+                    width={115}
+                    height={115}/>
+            </div>
+            <p className={`text-center font-normal ${size}`}>{description}</p>
+        </div>
+    );
+}
+export default AboutInfoItem;
diff --git a/ui/src/components/UHGroupingsInfo.tsx b/ui/src/components/UHGroupingsInfo.tsx
@@ -0,0 +1,48 @@
+import AboutInfoItem from '@/components/AboutInfoItem';
+
+
+const UHGroupingsInfo = (
+    {  variant
+    }: {
+        variant?: 'default' | 'home';
+    }) => {
+    const h1Color = variant === 'home' ? 'text-text-color' : 'text-uh-black';
+    const page = variant === 'home' ? 'home': 'default';
+    return (
+        <div>
+            <div className="bg-seafoam pt-10 pb-10">
+                <div className="container">
+                    <div className="grid">
+                        <h1 className={`text-center text-2.5 font-medium ${h1Color}`}>What is a UH Grouping?</h1>
+                        <p className="text-center text-1.25 font-light">A <em>grouping</em> is a collection of members
+                            (e.g., all full-time
+                            Hilo faculty).</p>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-7 pt-3">
+                        <AboutInfoItem
+                            variant={page}
+                            src={'/uhgroupings/cogs.svg'}
+                            alt={'Cogs icon'}
+                            description={'Create groupings, manage grouping memberships, control members\' ' +
+                                'self-service options, designate sync destinations, and more.'}/>
+                        <AboutInfoItem
+                            variant={page}
+                            src={'/uhgroupings/id-email.svg'}
+                            alt={'Email icon'}
+                            description={'Synchronize groupings email LISTSERV lists,' +
+                                ' attributes for access control via CAS and LDAP, etc..'}/>
+                        <AboutInfoItem
+                            variant={page}
+                            src={'/uhgroupings/watch.svg'}
+                            alt={'Watch icon'}
+                            description={'Leverage group data from official sources,' +
+                                ' which can substantially reduce the manual overhead of membership management.'}/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+
+}
+
+export default UHGroupingsInfo;