API page of Settings menu

apps/sensenet/src/application-paths.ts

@@ -18,7 +18,7 @@ export const PATHS = {
   settings: { appPath: '/settings/:submenu?' },
 } as const
 
-type SettingsItemType = 'stats' | 'apiKeys' | 'webhooks' | 'adminui'
+type SettingsItemType = 'stats' | 'apikeys' | 'webhooks' | 'adminui'
 
 type RoutesWithContentBrowser = keyof Pick<typeof PATHS, 'content' | 'usersAndGroups' | 'contentTypes' | 'trash'>
 

apps/sensenet/src/components/settings/api-key.ts

@@ -0,0 +1,21 @@
+export interface Secret {
+  id: string
+  value: string
+  creationDate: string
+  validTill: string
+}
+
+export enum ApiKeyType {
+  ExternalClient = 'ExternalClient',
+  ExternalSpa = 'ExternalSpa',
+}
+
+export interface ApiKey {
+  name: string
+  repository: string
+  clientId: string
+  userName: string
+  authority: string
+  type: ApiKeyType
+  secrets: Secret[]
+}

apps/sensenet/src/components/settings/api-keys-endpoint-widget.tsx

@@ -0,0 +1,144 @@
+import { useRepository } from '@sensenet/hooks-react'
+import {
+  createStyles,
+  Divider,
+  Grid,
+  Hidden,
+  Link,
+  makeStyles,
+  Paper,
+  TextField,
+  Theme,
+  Tooltip,
+} from '@material-ui/core'
+import React from 'react'
+import jslogo from '../../assets/js.svg'
+import dotnetlogo from '../../assets/net.svg'
+import reactlogo from '../../assets/react.svg'
+import reduxlogo from '../../assets/redux.svg'
+import { useWidgetStyles } from '../../globalStyles'
+import { useLocalization } from '../../hooks'
+
+const useStyles = makeStyles((theme: Theme) => {
+  return createStyles({
+    rowContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '10px 0 16px 0',
+      fontSize: '16px',
+    },
+    clientLink: {
+      color: theme.palette.primary.main,
+    },
+    input: {
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      backgroundColor: theme.palette.common.white,
+      color: theme.palette.common.black,
+    },
+    paragraph: {
+      padding: '16px 0',
+    },
+    logo: {
+      margin: '30px 16px 16px',
+      cursor: 'pointer',
+    },
+    apiDocsLink: {
+      display: 'inline-block',
+      '&:hover': {
+        textDecoration: 'none',
+      },
+    },
+  })
+})
+
+export const ApiEndpointWidget: React.FunctionComponent = () => {
+  const classes = useStyles()
+  const widgetClasses = useWidgetStyles()
+  const localization = useLocalization().settings
+  const repository = useRepository()
+
+  return (
+    <div className={widgetClasses.root}>
+      <Paper elevation={0} className={widgetClasses.container} style={{ padding: 0 }}>
+        <Grid container spacing={1} style={{ padding: '10px' }}>
+          <Grid item xs={12} lg={6} style={{ padding: '1.5rem' }}>
+            <div className={classes.rowContainer}>{localization.apiEndpoint}</div>
+            <div>{localization.apiEndPointApi}</div>
+            <TextField
+              name="endpoint"
+              variant="outlined"
+              fullWidth
+              value={repository.configuration.repositoryUrl}
+              inputProps={{
+                readOnly: true,
+                className: classes.input,
+              }}
+              className={classes.paragraph}
+            />
+            <div>{localization.apiEndPointIs}</div>
+            <TextField
+              name="endpoint"
+              variant="outlined"
+              fullWidth
+              value={repository.configuration.identityServerUrl}
+              inputProps={{
+                readOnly: true,
+                className: classes.input,
+              }}
+              className={classes.paragraph}
+            />
+          </Grid>
+
+          <Hidden mdDown>
+            <Divider orientation="vertical" flexItem />
+          </Hidden>
+
+          <Grid item style={{ padding: '1.5rem' }}>
+            <div className={classes.rowContainer}>
+              <span>{localization.apiClients}</span>
+            </div>
+            <div style={{ margin: '0 0 16px 0' }}>{localization.learnAboutApi}</div>
+            <Link target="_blank" className={classes.clientLink} href={localization.clientLink}>
+              {localization.clientLink}
+            </Link>
+            <div>
+              <Tooltip title="javascript" placement="bottom">
+                <Link
+                  className={classes.apiDocsLink}
+                  target="_blank"
+                  href="https://docs.sensenet.com/api-docs/basic-concepts?chosenLanguage=js-snclient">
+                  <img className={classes.logo} src={jslogo} alt="js-logo" width="35" height="35" />
+                </Link>
+              </Tooltip>
+              <Tooltip title=".net" placement="bottom">
+                <Link
+                  className={classes.apiDocsLink}
+                  target="_blank"
+                  href="https://docs.sensenet.com/api-docs/basic-concepts?chosenLanguage=dotnet">
+                  <img className={classes.logo} src={dotnetlogo} alt="dotnet-logo" width="35" height="35" />
+                </Link>
+              </Tooltip>
+              <Tooltip title="react" placement="bottom">
+                <Link
+                  className={classes.apiDocsLink}
+                  target="_blank"
+                  href="https://docs.sensenet.com/api-docs/basic-concepts?chosenLanguage=reactjs">
+                  <img className={classes.logo} src={reactlogo} alt="react-logo" width="35" height="35" />
+                </Link>
+              </Tooltip>
+              <Tooltip title="redux" placement="bottom">
+                <Link
+                  className={classes.apiDocsLink}
+                  target="_blank"
+                  href="https://docs.sensenet.com/api-docs/basic-concepts?chosenLanguage=react-redux">
+                  <img className={classes.logo} src={reduxlogo} alt="reduc-logo" width="35" height="35" />
+                </Link>
+              </Tooltip>
+            </div>
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  )
+}

apps/sensenet/src/components/settings/api-keys-secrets.tsx

@@ -0,0 +1,176 @@
+import { useRepository } from '@sensenet/hooks-react'
+import {
+  CircularProgress,
+  createStyles,
+  IconButton,
+  InputLabel,
+  makeStyles,
+  Paper,
+  TextField,
+  Theme,
+} from '@material-ui/core'
+import { Refresh } from '@material-ui/icons'
+import React, { useEffect, useState } from 'react'
+import { useGlobalStyles } from '../../globalStyles'
+import { useLocalization } from '../../hooks'
+import { ApiKey, ApiKeyType, Secret } from './api-key'
+import { Tab } from './api-keys-tab'
+import { TabPanel } from './api-keys-tab-panel'
+import { Tabs } from './api-keys-tabs'
+
+const useStyles = makeStyles((theme: Theme) => {
+  return createStyles({
+    description: {
+      marginBottom: '2rem',
+      '& a': {
+        color: theme.palette.primary.main,
+        textDecoration: 'underline',
+      },
+    },
+    inputLabel: {
+      display: 'flex',
+      alignItems: 'flex-end',
+      marginBottom: '0.5rem',
+    },
+    input: {
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      backgroundColor: theme.palette.common.white,
+      color: theme.palette.common.black,
+    },
+    refreshIcon: { marginLeft: '0.5rem', padding: 0 },
+  })
+})
+
+export const ApiSecretsWidget: React.FunctionComponent = () => {
+  const classes = useStyles()
+  const globalClasses = useGlobalStyles()
+  const repo = useRepository()
+  const localization = useLocalization().settings
+  const [activeTabIndex, setActiveTabIndex] = useState(0)
+  const [isRegenerating, setIsRegenerating] = useState(false)
+  const [externalClients, setExternalClients] = useState<ApiKey[]>([])
+  const [externalSpas, setExternalSpas] = useState<ApiKey[]>([])
+
+  const regenerateApiKey = async (client: ApiKey) => {
+    setIsRegenerating(true)
+    const response = await repo.executeAction<any, Secret>({
+      idOrPath: '/Root',
+      name: 'RegenerateSecretForRepository',
+      method: 'POST',
+      body: {
+        clientId: client.clientId,
+        secretId: client.secrets[0]?.id,
+      },
+    })
+
+    setExternalSpas(
+      externalClients.map((externalClient) => {
+        if (externalClient.secrets[0].id === response.id) {
+          externalClient.secrets[0] = response
+        }
+        return client
+      }),
+    )
+    setIsRegenerating(false)
+  }
+
+  useEffect(() => {
+    ;(async () => {
+      const response = await repo.executeAction<any, { clients: ApiKey[] }>({
+        idOrPath: '/Root',
+        name: 'GetClientsForRepository',
+        method: 'GET',
+      })
+
+      setExternalClients(response.clients.filter((client) => client.type === ApiKeyType.ExternalClient))
+      setExternalSpas(response.clients.filter((client) => client.type === ApiKeyType.ExternalSpa))
+    })()
+  }, [repo])
+
+  function a11yPropsForTab(index: number) {
+    return {
+      id: `api-key-tab-${index}`,
+      'aria-controls': `api-key-tabpanel-${index}`,
+    }
+  }
+
+  return (
+    <>
+      <Tabs value={activeTabIndex} aria-label={localization.apiKeys} onChange={(_, value) => setActiveTabIndex(value)}>
+        <Tab label={localization.yourAppId} {...a11yPropsForTab(0)} />
+        <Tab label={localization.personalAccessToken} {...a11yPropsForTab(1)} />
+      </Tabs>
+
+      <TabPanel value={activeTabIndex} index={0}>
+        <p className={classes.description} dangerouslySetInnerHTML={{ __html: localization.spaDescription }} />
+        {externalSpas.map((spa) => (
+          <Paper key={spa.clientId} className={globalClasses.cardRoot}>
+            <InputLabel shrink htmlFor={spa.clientId} className={classes.inputLabel}>
+              {localization.clientId}
+            </InputLabel>
+            <TextField
+              name={spa.clientId}
+              variant="outlined"
+              fullWidth
+              value={spa.clientId}
+              inputProps={{
+                readOnly: true,
+                className: classes.input,
+              }}
+            />
+          </Paper>
+        ))}
+      </TabPanel>
+
+      <TabPanel value={activeTabIndex} index={1}>
+        <p className={classes.description} dangerouslySetInnerHTML={{ __html: localization.clientDescription }} />
+        {externalClients.map((client) => (
+          <Paper key={client.clientId} className={globalClasses.cardRoot}>
+            <div style={{ marginBottom: '1rem' }}>
+              <InputLabel shrink htmlFor={client.clientId} className={classes.inputLabel}>
+                {localization.clientId}
+              </InputLabel>
+              <TextField
+                name={client.clientId}
+                variant="outlined"
+                fullWidth
+                value={client.clientId}
+                inputProps={{
+                  readOnly: true,
+                  className: classes.input,
+                }}
+              />
+            </div>
+
+            <div>
+              <InputLabel shrink htmlFor="repository" className={classes.inputLabel}>
+                {localization.clientSecret}
+                <IconButton
+                  disabled={isRegenerating}
+                  onClick={() => regenerateApiKey(client)}
+                  className={classes.refreshIcon}>
+                  <Refresh aria-label={localization.regenerate} />
+                </IconButton>
+              </InputLabel>
+              {isRegenerating ? (
+                <CircularProgress color="primary" size={32} />
+              ) : (
+                <TextField
+                  name="repository"
+                  variant="outlined"
+                  fullWidth
+                  value={client.secrets[0].value}
+                  inputProps={{
+                    readOnly: true,
+                    className: classes.input,
+                  }}
+                />
+              )}
+            </div>
+          </Paper>
+        ))}
+      </TabPanel>
+    </>
+  )
+}

apps/sensenet/src/components/settings/api-keys-tab-panel.tsx

@@ -0,0 +1,26 @@
+import { Box, Typography } from '@material-ui/core'
+import React from 'react'
+
+interface TabPanelProps {
+  value: number
+  index: number
+}
+
+export const TabPanel: React.FC<TabPanelProps> = (props) => {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`api-keys-tabpanel-${index}`}
+      aria-labelledby={`api-keys-tab-${index}`}
+      {...other}>
+      {value === index && (
+        <Box>
+          <Typography component="div">{children}</Typography>
+        </Box>
+      )}
+    </div>
+  )
+}