|
1 | 1 | import { EyeFilled, EyeScreenedFilled } from "@navikt/ds-icons"
|
2 |
| -import { Table } from "@navikt/ds-react" |
| 2 | +import { Button, Heading, Modal, Table } from "@navikt/ds-react" |
3 | 3 | import { useState } from "react"
|
| 4 | +import { ArrowsCirclepathIcon } from '@navikt/aksel-icons'; |
| 5 | +import { apiUrl } from '../../lib/rest/restApi'; |
| 6 | +import { useRouter } from "next/navigation"; |
4 | 7 |
|
5 |
| -const TokenCell = ({token}: {token: string}) => { |
| 8 | +const TokenCell = ({token, team}: {token: string, team: string}) => { |
6 | 9 | const [hidden, setHidden] = useState(true)
|
| 10 | + const [showRotateModal, setShowRotateModal] = useState(false) |
| 11 | + const router = useRouter() |
| 12 | + |
| 13 | + const rotateTeamToken = (team: string) => { |
| 14 | + fetch(`${apiUrl()}/user/token?team=${team}`, { |
| 15 | + method: 'PUT', |
| 16 | + credentials: "include", |
| 17 | + headers: { |
| 18 | + 'Content-type': 'application/json' |
| 19 | + } |
| 20 | + }) |
| 21 | + .catch(err => { |
| 22 | + console.log("err", err) |
| 23 | + }) |
| 24 | + setShowRotateModal(false) |
| 25 | + router.refresh() |
| 26 | + } |
7 | 27 |
|
8 | 28 | return (
|
| 29 | + <> |
| 30 | + <Modal |
| 31 | + open={showRotateModal} |
| 32 | + aria-label="Roter nada token" |
| 33 | + onClose={() => setShowRotateModal(false)} |
| 34 | + className="max-w-full md:max-w-3xl px-8 h-[20rem]" |
| 35 | + > |
| 36 | + <Modal.Body className="h-full"> |
| 37 | + <div className="flex flex-col gap-8"> |
| 38 | + <Heading level="1" size="medium"> |
| 39 | + Er du sikker på at du vil rotere tokenet for team {team}? |
| 40 | + </Heading> |
| 41 | + <div> |
| 42 | + Dette vil innebære at du må oppdatere til nytt token i all kode der dette brukes for å autentisere seg mot datamarkedsplassen. |
| 43 | + </div> |
| 44 | + <div className="flex flex-row gap-4"> |
| 45 | + <Button |
| 46 | + onClick={() => rotateTeamToken(team)} |
| 47 | + variant="primary" |
| 48 | + size="small" |
| 49 | + > |
| 50 | + Roter |
| 51 | + </Button> |
| 52 | + <Button |
| 53 | + onClick={() => setShowRotateModal(false)} |
| 54 | + variant="secondary" |
| 55 | + size="small" |
| 56 | + > |
| 57 | + Avbryt |
| 58 | + </Button> |
| 59 | + </div> |
| 60 | + </div> |
| 61 | + </Modal.Body> |
| 62 | + </Modal> |
9 | 63 | <Table.DataCell className="flex flex-row gap-2 items-center w-full">
|
10 | 64 | <div>
|
11 | 65 | {hidden
|
12 | 66 | ? (<EyeFilled className="cursor-pointer" onClick={() => setHidden(!hidden)} />)
|
13 | 67 | : (<EyeScreenedFilled className="cursor-pointer" onClick={() => setHidden(!hidden)} />)}
|
14 | 68 | </div>
|
15 | 69 | <span>{hidden
|
16 |
| - ? "*********" |
| 70 | + ? "*********" |
17 | 71 | : token
|
18 | 72 | }</span>
|
| 73 | + <ArrowsCirclepathIcon className="cursor-pointer" title="roter token" fontSize="1.2rem" onClick={() => setShowRotateModal(true)}/> |
19 | 74 | </Table.DataCell>
|
| 75 | + </> |
20 | 76 | )
|
21 | 77 | }
|
22 | 78 |
|
|
0 commit comments