From 0fb5ebe13986dbd1aecf990184be293b2bfb3778 Mon Sep 17 00:00:00 2001
From: Ivar Nakken <ivarnakken1441@gmail.com>
Date: Sat, 14 Oct 2023 19:31:28 +0200
Subject: [PATCH] Give unverified users a warning on overview page

---
 app/components/Footer/Footer.css              |  1 -
 app/routes/overview/components/Overview.css   | 24 +++++
 app/routes/overview/components/Overview.tsx   | 94 +++++++++++++------
 .../users/components/StudentConfirmation.tsx  |  2 +-
 4 files changed, 89 insertions(+), 32 deletions(-)

diff --git a/app/components/Footer/Footer.css b/app/components/Footer/Footer.css
index c805568e98..6f38babfcd 100644
--- a/app/components/Footer/Footer.css
+++ b/app/components/Footer/Footer.css
@@ -82,7 +82,6 @@ html[data-theme='dark'] .bottomContent a {
   height: auto;
   margin-left: 1px;
   transition: transform var(--easing-slow);
-  transform-style: preserve-3d;
 }
 
 .gitHubLink:hover .octocat {
diff --git a/app/routes/overview/components/Overview.css b/app/routes/overview/components/Overview.css
index a509ef4811..c4696fef07 100644
--- a/app/routes/overview/components/Overview.css
+++ b/app/routes/overview/components/Overview.css
@@ -63,3 +63,27 @@
     display: grid;
   }
 }
+
+.verificationWarning {
+  position: fixed;
+  width: 400px;
+  margin: 40px;
+  bottom: 0;
+  left: 0;
+
+  @media (--small-viewport) {
+    width: 100%;
+    margin: 10px 0;
+  }
+}
+
+.verificationWarning .close {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  cursor: pointer;
+}
+
+.verificationWarning .header {
+  width: 80%;
+}
diff --git a/app/routes/overview/components/Overview.tsx b/app/routes/overview/components/Overview.tsx
index 26a48f2476..157140919a 100644
--- a/app/routes/overview/components/Overview.tsx
+++ b/app/routes/overview/components/Overview.tsx
@@ -1,16 +1,19 @@
 import moment from 'moment-timezone';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link } from 'react-router-dom';
+import Card from 'app/components/Card';
 // import Banner from 'app/components/Banner';
 import Icon from 'app/components/Icon';
 import { Container, Flex } from 'app/components/Layout';
 import Poll from 'app/components/Poll';
 import RandomQuote from 'app/components/RandomQuote';
 import type { Event, Readme } from 'app/models';
+import { selectCurrentUser } from 'app/reducers/auth';
 import type { WithDocumentType } from 'app/reducers/frontpage';
 import { isArticle, isEvent } from 'app/reducers/frontpage';
 import type { PollEntity } from 'app/reducers/polls';
+import { useAppSelector } from 'app/store/hooks';
 import type { PublicArticle } from 'app/store/models/Article';
 import type { FrontpageEvent } from 'app/store/models/Event';
 import ArticleItem from './ArticleItem';
@@ -35,6 +38,14 @@ const Overview = (props: Props) => {
   const [eventsToShow, setEventsToShow] = useState(9);
   const [articlesToShow, setArticlesToShow] = useState(2);
 
+  const [showVerificationWarning, setShowVerificationWarning] = useState(false);
+  const currentUser = useAppSelector(selectCurrentUser);
+  useEffect(() => {
+    if (currentUser.isStudent) {
+      setShowVerificationWarning(!currentUser.isStudent);
+    }
+  }, [currentUser.isStudent]);
+
   const showMore = () => {
     setEventsToShow(eventsToShow + 6);
     setArticlesToShow(articlesToShow + 2);
@@ -93,47 +104,70 @@ const Overview = (props: Props) => {
   );
 
   return (
-    <Container>
-      <Helmet title="Hjem" />
-      {/* <Banner
+    <>
+      <Container>
+        <Helmet title="Hjem" />
+        {/* <Banner
         header="Abakusrevyen har opptak!"
         subHeader="Søk her"
         link="https://opptak.abakus.no"
         color="red"
       /> */}
-      <Flex className={styles.desktopContainer}>
-        <Flex column className={styles.leftColumn}>
-          <CompactEvents events={events} />
-          {pinnedComponent}
-          <Events events={eventsShown} loggedIn={loggedIn} />
+        <Flex className={styles.desktopContainer}>
+          <Flex column className={styles.leftColumn}>
+            <CompactEvents events={events} />
+            {pinnedComponent}
+            <Events events={eventsShown} loggedIn={loggedIn} />
+          </Flex>
+          <Flex column className={styles.rightColumn}>
+            <NextEventSection events={events} />
+            <PollItem poll={poll} votePoll={votePoll} />
+            <QuoteItem loggedIn={loggedIn} />
+            {readMe}
+            <Weekly weeklyArticle={weeklyArticle} />
+            <Articles articles={articlesShown} />
+          </Flex>
         </Flex>
-        <Flex column className={styles.rightColumn}>
-          <NextEventSection events={events} />
+        <section className={styles.mobileContainer}>
+          <CompactEvents events={events} />
+          <NextEvent events={events} />
           <PollItem poll={poll} votePoll={votePoll} />
           <QuoteItem loggedIn={loggedIn} />
+          {pinnedComponent}
           {readMe}
           <Weekly weeklyArticle={weeklyArticle} />
           <Articles articles={articlesShown} />
-        </Flex>
-      </Flex>
-      <section className={styles.mobileContainer}>
-        <CompactEvents events={events} />
-        <NextEvent events={events} />
-        <PollItem poll={poll} votePoll={votePoll} />
-        <QuoteItem loggedIn={loggedIn} />
-        {pinnedComponent}
-        {readMe}
-        <Weekly weeklyArticle={weeklyArticle} />
-        <Articles articles={articlesShown} />
-        <Events events={eventsShown} loggedIn={loggedIn} />
-      </section>
-
-      {frontpage.length > 8 && (
-        <div className={styles.showMore}>
-          <Icon onClick={showMore} name="chevron-down-outline" size={30} />
-        </div>
+          <Events events={eventsShown} loggedIn={loggedIn} />
+        </section>
+
+        {frontpage.length > 8 && (
+          <div className={styles.showMore}>
+            <Icon onClick={showMore} name="chevron-down-outline" size={30} />
+          </div>
+        )}
+      </Container>
+
+      {showVerificationWarning && (
+        <Card severity="warning" className={styles.verificationWarning}>
+          <Icon
+            name="close"
+            className={styles.close}
+            onClick={() => setShowVerificationWarning(false)}
+          />
+
+          <Card.Header className={styles.header}>Er du student?</Card.Header>
+          <span>
+            Du har enda ikke verifisert studentstatusen din. For å kunne bli
+            medlem i Abakus og få mulighet til å delta på arrangementer, få
+            tilgang til bilder, interessegrupper og mer må du{' '}
+            <Link to="/users/me/settings/student-confirmation">
+              verifisere deg
+            </Link>
+            .
+          </span>
+        </Card>
       )}
-    </Container>
+    </>
   );
 };
 
diff --git a/app/routes/users/components/StudentConfirmation.tsx b/app/routes/users/components/StudentConfirmation.tsx
index a84bed98d0..a6cfe7ef1d 100644
--- a/app/routes/users/components/StudentConfirmation.tsx
+++ b/app/routes/users/components/StudentConfirmation.tsx
@@ -99,7 +99,7 @@ const StudentConfirmation = ({
       {isStudent === null && (
         <p>
           For å kunne bli medlem i Abakus og få mulighet til å delta på
-          arrangementer, få tilgang til bilder og interessegrupper og mer må du
+          arrangementer, få tilgang til bilder, interessegrupper og mer må du
           verifisere at du går enten Kommunikasjonsteknologi & Digital Sikkerhet
           eller Datateknologi. Ved å trykke på knappen under gir du Abakus
           tilgang til dine studier og fag i StudentWeb gjennom FEIDE slik at vi