From 7f3fa54faf745db19c11e66c727f52d17d2c313f Mon Sep 17 00:00:00 2001
From: Torgeir Holen <torgeir333@gmail.com>
Date: Fri, 6 Oct 2023 14:30:33 +0200
Subject: [PATCH 1/2] set up of new maskinporten admin page

---
 .../MaskinportenIntAdmPage.tsx                |  30 ++++
 .../MaskinportenIntAdmPageContent.module.css  |  91 +++++++++++
 .../MaskinportenIntAdmPageContent.tsx         | 150 ++++++++++++++++++
 .../src/features/maskinportenIntAdm/index.ts  |   1 +
 4 files changed, 272 insertions(+)
 create mode 100644 frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPage.tsx
 create mode 100644 frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPageContent.module.css
 create mode 100644 frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPageContent.tsx
 create mode 100644 frontend/src/features/maskinportenIntAdm/index.ts

diff --git a/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPage.tsx b/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPage.tsx
new file mode 100644
index 00000000..758315e8
--- /dev/null
+++ b/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPage.tsx
@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import * as React from 'react';
+
+import { Page, PageHeader, PageContent, PageContainer } from '@/components';
+import { ReactComponent as ApiIcon } from '@/assets/Api.svg';
+import { useMediaQuery } from '@/resources/hooks';
+
+import { MaskinportenIntAdmPageContent } from './MaskinportenIntAdmPageContent';
+
+
+export const MaskinportenIntAdmPage = () => {
+  const { t } = useTranslation('common');
+  const isSm = useMediaQuery('(max-width: 768px)');
+
+  // fix-me: set language key in <PageHeader>
+
+  return (
+    <PageContainer>
+      <Page
+        color='dark'
+        size={isSm ? 'small' : 'medium'}
+      >
+        <PageHeader icon={<ApiIcon />}>{'Administrere maskinporten integrasjoner'}</PageHeader>
+        <PageContent>
+          <MaskinportenIntAdmPageContent />
+        </PageContent>
+      </Page>
+    </PageContainer>
+  );
+};
diff --git a/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPageContent.module.css b/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPageContent.module.css
new file mode 100644
index 00000000..22ea0c7b
--- /dev/null
+++ b/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPageContent.module.css
@@ -0,0 +1,91 @@
+.creationPageContainer {
+  margin-left: 40px;
+  margin-right: 40px;
+  margin-top: 3rem;
+}
+
+.header {
+  margin-top: -2rem;
+  font-weight: 500;
+}
+
+.flexContainer {
+  display: flex;
+}
+
+.leftContainer {
+  flex: 3;
+  margin-right: 1rem;
+}
+
+
+.nameWrapper {
+  margin: 10px;
+  max-width: 270px;
+
+}
+
+.descriptionWrapper {
+  margin: 10px;
+  margin-top: 2rem;
+  max-width: 270px;
+}
+
+.warningUpdateText {
+  font-size: 12px;
+}
+
+
+
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  
+}
+
+.cancelButton {
+  margin: 10px;
+  display: flex;
+}
+
+.confirmButton {
+  margin: 10px;
+  display: flex;
+}
+
+@media only screen and (min-width: 769px) {
+
+  .contentText {
+    font-size: 18px;
+  }
+  
+}
+
+@media only screen and (max-width: 768px) {
+
+  .contentText {
+    font-size: 16px;
+  }
+
+}
+
+@media only screen and (max-width: 576px) {
+
+  .flexContainer {
+    flex-direction: column;
+  }
+
+  .creationPageContainer {
+    margin-top: 1rem;
+  }
+
+  .header {
+    font-size: 20px;
+  }
+
+  .contentText {
+    font-size: 14px;
+  }
+
+}
diff --git a/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPageContent.tsx b/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPageContent.tsx
new file mode 100644
index 00000000..441f8b26
--- /dev/null
+++ b/frontend/src/features/maskinportenIntAdm/MaskinportenIntAdmPageContent.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, Link } from 'react-router-dom';
+import { AuthenticationPath } from '@/routes/paths';
+import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks';
+import { TextField, Button, Select } from '@digdir/design-system-react';
+import classes from './MaskinportenIntAdmPageContent.module.css';
+import { useMediaQuery } from '@/resources/hooks';
+
+
+export const MaskinportenIntAdmPageContent = () => {
+  
+  // State variabler for input-bokser:
+  const [navn, setNavn] = useState('');
+  const [beskrivelse, setBeskrivelse] = useState('');
+
+  // State variabel for nedtrekksmeny:
+  const [selected, setSelected] = useState(''); 
+
+  const { t } = useTranslation('common');
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch(); // fix-me: bygg kobling til REDUX 
+  // const overviewOrgs = useAppSelector((state) => state.overviewOrg.overviewOrgs);
+  
+
+  // brukes i h2, ikke vist i Small/mobile view
+  const isSm = useMediaQuery('(max-width: 768px)'); // trengs denne?
+  let overviewText: string;
+  // overviewText = t('authentication_dummy.auth_overview_text_creation'); 
+  overviewText = 'Opprett og administrer maskinporten integrasjon'; // flytt til språkstøtte
+
+  // skal nå bare gå tilbake til OverviewPage
+  // selv om vi må vurdere en sletting av ting?
+  const handleReject = () => {
+    setNavn('');
+    setBeskrivelse('');
+    setSelected('');
+    navigate('/' + AuthenticationPath.Auth + '/' + AuthenticationPath.Overview);
+  }
+
+  // Mulig at her skal man trigge en dispatch
+  // og så navigere til OverviewPage
+  // har opprettet en creationPageSlice som nå er synlig i 
+  // Chrome DevTools --> må ut og løpe...
+  const handleConfirm = () => {
+    setNavn('ReduxLagret');
+    setBeskrivelse('ReduxLagret');
+    setSelected('');
+  }
+
+
+  
+  
+  // Håndterer skifte av valgmuligheter (options) i Nedtrekksmeny
+  const handleChangeInput = (val: string) => {
+    setSelected(val);
+  };
+  // const minInputId:string = "inputIdString"; // valg id trengs ikke?
+
+  // Dette er mest for knapper og videre navigering,
+  // mens her er <Link> kanskje bedre: fra Studio Dashboard
+  // men bør også sjekke Designsystemet om de har noe på gang der
+  const handleSkiftTilCustomCreationPage = () => {
+    navigate('/' + AuthenticationPath.Auth + '/' + AuthenticationPath.CustomCreation);
+  };
+ 
+  return (
+    <div className={classes.creationPageContainer}>
+      <h2 className={classes.header}>{overviewText}</h2>  
+      <div className={classes.flexContainer}>
+        
+        <div className={classes.leftContainer}>
+          <div className={classes.nameWrapper}>
+            <TextField 
+              label = 'Navn'
+              type = 'text'
+              value = { navn }
+              onChange={e => setNavn(e.target.value)}
+            />
+          </div>
+
+          <div className={classes.descriptionWrapper}>
+            <TextField 
+              label= 'Beskrivelse' 
+              type = 'text'
+              value = { beskrivelse }
+              onChange={e => setBeskrivelse(e.target.value)}
+            />
+          </div>
+
+          <p className={classes.contentText}>
+            
+          <br></br>
+            Last opp i jwk i format <br></br>
+            
+            <div className={classes.uploadButton}>
+              <Button
+                color='primary'
+                variant='outline'
+                size='small'
+                onClick={handleReject}
+              >
+                Choose File 
+              </Button>
+              <span>No file chosen</span> 
+            </div>
+            <br></br>
+            
+          </p>
+
+          <p className={classes.warningUpdateText}>
+            <b>
+              Maskinporten krever at du oppdaterer JWK hver 12. måned.
+              Hvis JWK ikke oppdateres vil integrasjon slutte å virke.
+            </b>
+          </p>
+
+          <div className={classes.buttonContainer}>
+
+            <div className={classes.cancelButton}>
+              <Button
+                color='primary'
+                variant='outline'
+                size='small'
+                onClick={handleReject}
+              >
+                Avbryt 
+              </Button> 
+            </div>
+
+            <div className={classes.confirmButton}>
+              <Button
+                color='primary'
+                size='small'
+                onClick={handleConfirm}
+              >
+                Opprett 
+              </Button> 
+            </div>
+
+          </div>
+          
+        </div>
+
+              
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/features/maskinportenIntAdm/index.ts b/frontend/src/features/maskinportenIntAdm/index.ts
new file mode 100644
index 00000000..0158c90d
--- /dev/null
+++ b/frontend/src/features/maskinportenIntAdm/index.ts
@@ -0,0 +1 @@
+export { MaskinportenIntAdmPage } from './MaskinportenIntAdmPage';

From 4c4a1c95d3189b41c3f46766453f1a2c6d0ac956 Mon Sep 17 00:00:00 2001
From: Torgeir Holen <torgeir333@gmail.com>
Date: Fri, 6 Oct 2023 14:34:42 +0200
Subject: [PATCH 2/2] link up maskinportenPage with Router

---
 frontend/src/routes/Router/Router.tsx            | 7 +++++++
 frontend/src/routes/paths/AuthenticationPath.tsx | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/Router/Router.tsx b/frontend/src/routes/Router/Router.tsx
index 25bb8c3c..f5adfacf 100644
--- a/frontend/src/routes/Router/Router.tsx
+++ b/frontend/src/routes/Router/Router.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { OverviewPage as AuthenticationOverviewPage } from '@/features/overviewpage/OverviewPage';
 import { CreationPage } from '@/features/creationpage/CreationPage';
 import { DirectConsentPage } from '@/features/directconsentpage/DirectConsentPage';
+import { MaskinportenIntAdmPage } from '@/features/maskinportenIntAdm/MaskinportenIntAdmPage';
 
 import { NotFoundSite } from '@/sites/NotFoundSite';
 import { GeneralPath, AuthenticationPath } from '../paths';
@@ -37,6 +38,12 @@ export const Router = createBrowserRouter(
           element={<DirectConsentPage />}
           errorElement={<NotFoundSite />}
         />
+
+        <Route
+          path={AuthenticationPath.MaskinportenAdm}
+          element={<MaskinportenIntAdmPage />}
+          errorElement={<NotFoundSite />}
+        />
         
       </Route>
     </Route>,
diff --git a/frontend/src/routes/paths/AuthenticationPath.tsx b/frontend/src/routes/paths/AuthenticationPath.tsx
index 1644364e..871a453b 100644
--- a/frontend/src/routes/paths/AuthenticationPath.tsx
+++ b/frontend/src/routes/paths/AuthenticationPath.tsx
@@ -2,5 +2,6 @@ export enum AuthenticationPath {
   Auth = 'auth',
   Creation = 'creation',
   Overview = 'overview',
-  DirectConsent = 'directconsent'
+  DirectConsent = 'directconsent',
+  MaskinportenAdm = 'maskinportenadm'
 }
\ No newline at end of file