Add descriptions to page when not logged in

Author: itsisak

lego-webapp/pages/contact/+Page.tsx

@@ -1,15 +1,55 @@
-import { Page } from '@webkom/lego-bricks';
+import { Card, Flex, Page } from '@webkom/lego-bricks';
 import { Helmet } from 'react-helmet-async';
-import { guardLogin } from '~/utils/replaceUnlessLoggedIn';
+import { useIsLoggedIn } from '~/redux/slices/auth';
 import ContactForm from './ContactForm';
 
 const Contact = () => {
+  const loggedIn = useIsLoggedIn();
+
   return (
     <Page title="Kontaktskjema for Abakus">
       <Helmet title="Kontakt" />
-      <ContactForm />
+      <Flex column gap="var(--spacing-md)">
+        <p>
+          Dette skjemaet er et verktøy for å nå ut til Abakus sine komiteer
+          eller Hovedstyret, enten du har spørsmål, tilbakemeldinger, eller bare
+          ønsker å dele informasjon med oss.
+        </p>
+        <Card severity="info">
+          <span>
+            Dersom du ønsker å varsle om kritikkverdige forhold, vennligst
+            benytt vår{' '}
+            <a
+              href="https://avvik.abakus.no"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              varslingsportal
+            </a>
+            . Da sikrer du at saken din blir behandlet best mulig, og du har
+            mulighet til å følge opp saken samtidig som du forblir <strong>anonym</strong>.
+            <br />
+            Les mer i våre{' '}
+            <a href="/pages/organisasjon/117-abakus-etiske-retningslinjer">
+              Etiske retningslinjer
+            </a>
+            .
+          </span>
+        </Card>
+
+      {loggedIn ? (
+        <ContactForm />
+      ) : (
+        <span>
+          <h3>Du er ikke innlogget</h3>
+          Du må være innlogget for å benytte dette skjemaet. Dersom du ikke har
+          abakus bruker se andre kontaktmuligheter under{' '}
+          <a href="/pages/info-om-abakus#contact">Om Abakus - Kontakt Oss</a>.
+        </span>
+      )}
+      </Flex>
     </Page>
   );
 };
 
-export default guardLogin(Contact);
+export default Contact;

lego-webapp/pages/contact/ContactForm.tsx

@@ -15,7 +15,6 @@ import { SubmitButton } from '~/components/Form/SubmitButton';
 import { sendContactMessage } from '~/redux/actions/ContactActions';
 import { fetchAllWithType, fetchGroup } from '~/redux/actions/GroupActions';
 import { useAppDispatch, useAppSelector } from '~/redux/hooks';
-import { useIsLoggedIn } from '~/redux/slices/auth';
 import { selectGroupById, selectGroupsByType } from '~/redux/slices/groups';
 import { isNotNullish } from '~/utils';
 import { createValidator, maxLength, required } from '~/utils/validation';
@@ -30,7 +29,6 @@ const validate = createValidator({
 const REVUE_BOARD_GROUP_ID = 59;
 
 const ContactForm = () => {
-  const loggedIn = useIsLoggedIn();
 
   const committees = useAppSelector((state) =>
     selectGroupsByType(state, GroupType.Committee),
@@ -84,38 +82,9 @@ const ContactForm = () => {
       onSubmit={onSubmit}
       validate={validate}
       validateOnSubmitOnly
-      initialValues={{
-        anonymous: !loggedIn,
-      }}
     >
       {({ handleSubmit }) => (
         <Form onSubmit={handleSubmit}>
-          <p>
-            Dette skjemaet er et verktøy for å nå ut til Abakus sine komiteer
-            eller Hovedstyret, enten du har spørsmål, tilbakemeldinger, eller
-            bare ønsker å dele informasjon med oss.
-          </p>
-          <Card severity="info">
-            <span>
-              Dersom du ønsker å varsle om kritikkverdige forhold, vennligst
-              benytt vår{' '}
-              <a
-                href="https://avvik.abakus.no"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                varslingsportal
-              </a>
-              . Da sikrer du at saken din blir behandlet best mulig, og du har
-              mulighet til å følge opp saken samtidig som du forblir anonym.
-              <br />
-              Les mer i våre{' '}
-              <a href="/pages/organisasjon/117-abakus-etiske-retningslinjer">
-                Etiske retningslinjer
-              </a>
-              .
-            </span>
-          </Card>
           <p>
             Sender du meldingen til en spesifikk komité er det kun lederen av
             komiteen som vil motta meldingen. Dersom du sender til Hovedstyret