First version of Maskinporten Admin page

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>
+  );
+};

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;
+  }
+
+}

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>
+  );
+};

frontend/src/features/maskinportenIntAdm/index.ts

@@ -0,0 +1 @@
+export { MaskinportenIntAdmPage } from './MaskinportenIntAdmPage';

frontend/src/routes/Router/Router.tsx

@@ -6,6 +6,7 @@ import { CreationPage } from '@/features/creationpage/CreationPage';
 import { CustomCreationPage } from '@/features/customCreationPage/CustomCreationPage';
 
 import { DirectConsentPage } from '@/features/directconsentpage/DirectConsentPage';
+import { MaskinportenIntAdmPage } from '@/features/maskinportenIntAdm/MaskinportenIntAdmPage';
 
 import { NotFoundSite } from '@/sites/NotFoundSite';
 import { GeneralPath, AuthenticationPath } from '../paths';
@@ -46,6 +47,13 @@ export const Router = createBrowserRouter(
           errorElement={<NotFoundSite />}
         />
 
+
+        <Route
+          path={AuthenticationPath.MaskinportenAdm}
+          element={<MaskinportenIntAdmPage />}
+          errorElement={<NotFoundSite />}
+        />
+
 
       </Route>
     </Route>,

frontend/src/routes/paths/AuthenticationPath.tsx

@@ -3,5 +3,6 @@ export enum AuthenticationPath {
   Creation = 'creation',
   CustomCreation = 'customcreation',
   Overview = 'overview',
-  DirectConsent = 'directconsent'
+  DirectConsent = 'directconsent',
+  MaskinportenAdm = 'maskinportenadm'
 }