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 + + return ( + + + }>{'Administrere maskinporten integrasjoner'} + + + + + + ); +}; 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 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 ( +
+

{overviewText}

+
+ +
+
+ setNavn(e.target.value)} + /> +
+ +
+ setBeskrivelse(e.target.value)} + /> +
+ +

+ +

+ Last opp i jwk i format

+ +

+ + No file chosen +
+

+ +

+ +

+ + Maskinporten krever at du oppdaterer JWK hver 12. måned. + Hvis JWK ikke oppdateres vil integrasjon slutte å virke. + +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+ ); +}; 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'; diff --git a/frontend/src/routes/Router/Router.tsx b/frontend/src/routes/Router/Router.tsx index e653e6e5..d4837adb 100644 --- a/frontend/src/routes/Router/Router.tsx +++ b/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={} /> + + } + errorElement={} + /> + , diff --git a/frontend/src/routes/paths/AuthenticationPath.tsx b/frontend/src/routes/paths/AuthenticationPath.tsx index 29dbb15b..b68e55e2 100644 --- a/frontend/src/routes/paths/AuthenticationPath.tsx +++ b/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' } \ No newline at end of file