support multiple redirect uris

2022-09-14 20:31:38 +03:00 · 2022-09-14 20:31:38 +03:00 · 83c235e94d
parent c8becea8e5
commit 83c235e94d
9 changed files with 201 additions and 67 deletions
--- a/components/AuditPage/AuditPage.tsx
+++ b/components/AuditPage/AuditPage.tsx
@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import useUser from '../../lib/hooks/useUser';
@ -168,6 +169,9 @@ export const AuditPage = () => {

  return (
    <>
+      <Head>
+        <title>Audit logs | Icy Network Administration</title>
+      </Head>
      <Header user={user}></Header>
      <Container>
        <h1>Audit logs</h1>
--- a/components/LoginPage/LoginPage.tsx
+++ b/components/LoginPage/LoginPage.tsx
@ -1,15 +1,21 @@
+import Head from 'next/head';
 import Link from 'next/link';
 import styles from './LoginPage.module.scss';

 export const LoginPage = () => {
  return (
-    <main className={styles.wrapper}>
-      <div className={styles.loginBox}>
-        <h1>Icy Network Administration</h1>
-        <Link href={'/api/login'}>
-          <a className={styles.loginButton}>Log in with Icy Network</a>
-        </Link>
-      </div>
-    </main>
+    <>
+      <Head>
+        <title>Login | Icy Network Administration</title>
+      </Head>
+      <main className={styles.wrapper}>
+        <div className={styles.loginBox}>
+          <h1>Icy Network Administration</h1>
+          <Link href={'/api/login'}>
+            <a className={styles.loginButton}>Log in with Icy Network</a>
+          </Link>
+        </div>
+      </main>
+    </>
  );
 };
--- a/components/OAuth2Page/OAuth2Page.module.scss
+++ b/components/OAuth2Page/OAuth2Page.module.scss
@ -52,3 +52,16 @@
  flex-direction: column;
  gap: 1rem;
 }
+
+.urlWrapper {
+  display: flex;
+  gap: 0.5rem;
+
+  :first-child {
+    flex-grow: 1;
+  }
+
+  button {
+    min-width: 4.625rem;
+  }
+}
--- a/components/OAuth2Page/OAuth2Page.tsx
+++ b/components/OAuth2Page/OAuth2Page.tsx
@ -1,4 +1,4 @@
-import useSWR, { mutate } from 'swr';
+import useSWR from 'swr';
 import Image from 'next/image';
 import {
  OAuth2ClientListItem,
@ -10,7 +10,7 @@ import { Paginator } from '../common/Paginator/Paginator';
 import styles from './OAuth2Page.module.scss';
 import { UPLOADS_URL } from '../../lib/constants';
 import application from '../../public/application.png';
-import { ChangeEvent, useMemo, useRef, useState } from 'react';
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import useUser from '../../lib/hooks/useUser';
 import { Container } from '../common/Container/Container';
 import { Header } from '../common/Header/Header';
@ -28,51 +28,141 @@ import toast from 'react-hot-toast';
 import { Button } from '../common/Button/Button';
 import userHasPrivileges from '../../lib/utils/has-privileges';
 import { publishJSON } from '../../lib/utils/fetch';
+import Head from 'next/head';

-const LINK_NAMES = {
+const LINK_NAMES: Record<string, string> = {
  redirect_uri: 'Redirect URI',
  terms: 'Terms of Service',
  privacy: 'Privacy Policy',
  website: 'Website',
 };

+const REDIRECT_URI_COUNT = 3;
+
 const LinkEdit = ({
+  link,
+  onChange,
+  onRemove,
+}: {
+  link: Partial<OAuth2ClientURL>;
+  onChange: () => void;
+  onRemove: () => void;
+}) => {
+  return (
+    <FormControl>
+      <label htmlFor={link.type}>{LINK_NAMES[link.type!]}</label>
+      <div className={styles.urlWrapper}>
+        <input
+          id={link.type}
+          name={link.type}
+          value={link.url || ''}
+          onChange={(e) => {
+            link.url = e.target.value;
+            onChange();
+          }}
+        />
+        <Button variant="link" onClick={() => onRemove()} type="button">
+          Remove
+        </Button>
+      </div>
+      {link.type === OAuth2ClientURLType.REDIRECT_URI && (
+        <span>Wildcards are NOT allowed!</span>
+      )}
+    </FormControl>
+  );
+};
+
+const LinkEditor = ({
  formData,
  handleInputChange,
-  linkType,
 }: {
  formData: Partial<OAuth2ClientListItem>;
  handleInputChange: (
-    e: ChangeEvent,
+    e?: ChangeEvent,
    setValue?: any,
    formField?: string
  ) => void;
-  linkType: OAuth2ClientURLType;
 }) => {
-  const formUrl = useMemo<Partial<OAuth2ClientURL>>(
-    () => (formData.urls || []).find(({ type }) => type === linkType) || {},
-    [formData, linkType]
+  const [links, setLinks] = useState<Partial<OAuth2ClientURL>[]>(
+    formData.urls || []
  );
+  const [addNewSelection, setAddNewSelection] = useState<OAuth2ClientURLType>();
+  const availableTypes = useMemo(
+    () =>
+      Object.values(OAuth2ClientURLType).filter((type) =>
+        type === 'redirect_uri'
+          ? links.filter(
+              (link) => link.type === OAuth2ClientURLType.REDIRECT_URI
+            ).length < REDIRECT_URI_COUNT
+          : !links.some((link) => link.type === type)
+      ),
+    [links]
+  );
+
+  useEffect(() => {
+    if (
+      (!addNewSelection ||
+        availableTypes.indexOf(addNewSelection as OAuth2ClientURLType) ===
+          -1) &&
+      availableTypes.length
+    ) {
+      setAddNewSelection(availableTypes[0]);
+    }
+  }, [availableTypes, addNewSelection]);
+
  return (
-    <FormControl>
-      <label htmlFor={linkType}>{LINK_NAMES[linkType]}</label>
-      <input
-        id={linkType}
-        name={linkType}
-        value={formUrl?.url || ''}
-        onChange={(e) => {
-          if (!formUrl.type) {
-            formUrl.type = linkType;
-            (formData.urls as Partial<OAuth2ClientURL>[]) = [
-              ...(formData.urls || []),
-              formUrl,
-            ];
-          }
-          formUrl.url = e.target.value;
-          handleInputChange(e, formData.urls, 'urls');
-        }}
-      />
-    </FormControl>
+    <>
+      <h3>Client URLs</h3>
+      {links.map((link, index) => (
+        <LinkEdit
+          key={index}
+          link={link}
+          onChange={() => {
+            setLinks(links);
+            handleInputChange(undefined, links, 'urls');
+          }}
+          onRemove={() => {
+            const clone = links.slice();
+            clone.splice(index, 1);
+            setLinks(clone);
+            handleInputChange(undefined, clone, 'urls');
+          }}
+        />
+      ))}
+      <FormControl>
+        {availableTypes.length > 0 && (
+          <div className={styles.urlWrapper}>
+            <select
+              value={addNewSelection}
+              onChange={(e) =>
+                setAddNewSelection(e.target.value as OAuth2ClientURLType)
+              }
+            >
+              {availableTypes.map((value, index) => (
+                <option value={value} key={index}>
+                  {LINK_NAMES[value]}
+                </option>
+              ))}
+            </select>
+            <Button
+              variant="default"
+              type="button"
+              onClick={() => {
+                setLinks([
+                  ...links,
+                  {
+                    type: addNewSelection,
+                    url: '',
+                  },
+                ]);
+              }}
+            >
+              Add
+            </Button>
+          </div>
+        )}
+      </FormControl>
+    </>
  );
 };

@ -207,26 +297,10 @@ const EditClientModal = ({
                </FormControl>
              </>
            )}
-            <LinkEdit
+            <LinkEditor
              formData={formData}
              handleInputChange={handleInputChange}
-              linkType={OAuth2ClientURLType.REDIRECT_URI}
-            ></LinkEdit>
-            <LinkEdit
-              formData={formData}
-              handleInputChange={handleInputChange}
-              linkType={OAuth2ClientURLType.WEBSITE}
-            ></LinkEdit>
-            <LinkEdit
-              formData={formData}
-              handleInputChange={handleInputChange}
-              linkType={OAuth2ClientURLType.PRIVACY}
-            ></LinkEdit>
-            <LinkEdit
-              formData={formData}
-              handleInputChange={handleInputChange}
-              linkType={OAuth2ClientURLType.TERMS}
-            ></LinkEdit>
+            ></LinkEditor>
          </form>
        </FormWrapper>
      </ModalBody>
@ -392,6 +466,7 @@ const OAuth2ClientCard = ({

 const OAuth2ClientList = ({ isAdmin }: { isAdmin: boolean }) => {
  const [pageIndex, setPageIndex] = useState(1);
+  const [clientCount, setClientCount] = useState<number>();
  const [searchTerm, setSearchTerm] = useState('');
  const { data, mutate } = useSWR<PaginatedResponse<OAuth2ClientListItem>>(
    `/api/admin/oauth2/clients?page=${pageIndex}${
@ -399,10 +474,16 @@ const OAuth2ClientList = ({ isAdmin }: { isAdmin: boolean }) => {
    }&pageSize=8`
  );

+  useEffect(() => {
+    if (data?.pagination?.rowCount) {
+      setClientCount(data?.pagination.rowCount);
+    }
+  }, [data]);
+
  return (
    <>
      <div className={styles.header}>
-        <h1>OAuth2 clients</h1>
+        <h1>OAuth2 clients{clientCount && ` (${clientCount})`}</h1>
        <Button
          onClick={() =>
            ModalService.open(EditClientModal, { isAdmin, update: mutate })
@ -451,6 +532,9 @@ export const OAuth2Page = () => {

  return (
    <>
+      <Head>
+        <title>OAuth2 | Icy Network Administration</title>
+      </Head>
      <Header user={user}></Header>
      <Container>
        <OAuth2ClientList isAdmin={isAdmin} />
--- a/components/UsersPage/UsersPage.tsx
+++ b/components/UsersPage/UsersPage.tsx
@ -25,6 +25,7 @@ import ModalHeader from '../common/Modal/ModalHeader/ModalHeader';
 import ModalService from '../common/Modal/services/ModalService';
 import { Privilege } from '../../lib/types/privilege.interface';
 import useHasPrivileges from '../../lib/hooks/useHasPrivileges';
+import Head from 'next/head';

 function getSelectValues(selectElement: HTMLSelectElement) {
  const result = [];
@ -364,17 +365,25 @@ const UserList = ({
  pageIndex,
  searchTerm,
  privPriv,
+  setUserCount,
  setPage,
 }: {
  pageIndex: number;
  searchTerm: string;
  privPriv: boolean;
+  setUserCount: (count: number) => void;
  setPage: (page: number) => void;
 }) => {
  const { data, mutate } = useSWR<PaginatedResponse<UserListItem>>(
    `/api/admin/users?page=${pageIndex}${searchTerm ? `&q=${searchTerm}` : ''}`
  );

+  useEffect(() => {
+    if (data?.pagination?.rowCount) {
+      setUserCount(data?.pagination.rowCount);
+    }
+  }, [data, setUserCount]);
+
  return data ? (
    <>
      {data?.list?.length && (
@ -398,15 +407,19 @@ const UserList = ({

 export const UsersPage = () => {
  const { user } = useUser({ redirectTo: '/login' });
+  const [userCount, setUserCount] = useState<number>();
  const [pageIndex, setPageIndex] = useState(1);
  const [searchTerm, setSearchTerm] = useState('');
  const privPriv = useHasPrivileges(user, 'admin:user:privilege');

  return (
    <>
+      <Head>
+        <title>Users | Icy Network Administration</title>
+      </Head>
      <Header user={user}></Header>
      <Container>
-        <h1>Users</h1>
+        <h1>Users{userCount && ` (${userCount})`}</h1>
        <FormWrapper>
          <FormControl>
            <input
@ -421,6 +434,7 @@ export const UsersPage = () => {
          pageIndex={pageIndex}
          searchTerm={searchTerm}
          privPriv={privPriv}
+          setUserCount={setUserCount}
          setPage={setPageIndex}
        />
      </Container>
--- a/components/common/Button/Button.module.scss
+++ b/components/common/Button/Button.module.scss
@ -64,6 +64,7 @@
    --btn-border: transparent;
    --btn-background: transparent;
    --btn-color: var(--button-link-color);
+    padding: 0.5rem 0.5rem;

    &:not([disabled]) {
      &:hover,
--- a/components/common/Form/Form.module.scss
+++ b/components/common/Form/Form.module.scss
@ -26,6 +26,7 @@
  input[type='email'],
  input[type='password'],
  input:not([type]),
+  select,
  textarea {
    padding: 8px;
    border-radius: 4px;
@ -36,12 +37,12 @@
    background: var(--form-field-background);
    border: 1px solid var(--form-field-border);
    box-shadow: inset 0 0 4px var(--form-field-box-shadow);
+  }

-    + span {
-      font-size: 0.875rem;
-      margin-top: 0.25rem;
-      color: var(--form-field-helper-color);
-    }
+  > span {
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    color: var(--form-field-helper-color);
  }

  &:last-child {
--- a/lib/hooks/useForm.ts
+++ b/lib/hooks/useForm.ts
@ -4,16 +4,23 @@ export function useForm<T>(initialState: T, onSubmit: (data: T) => void) {
  const [formData, setFormData] = useState<T>(initialState);

  const handleInputChange = (
-    e: ChangeEvent,
-    setValue?: any,
+    e?: ChangeEvent,
+    setValue?: unknown,
    formField?: string
  ) => {
-    const target = e.target as HTMLInputElement;
-    const checkedOrValue =
-      target.type === 'checkbox' ? target.checked : target.value;
+    if (e && e.target) {
+      const target = e.target as HTMLInputElement;
+      formField = formField || target.name;
+      setValue =
+        setValue ??
+        (target.type === 'checkbox' ? target.checked : target.value);
+    } else if (!formField) {
+      throw new Error('Invalid invocation of the change method');
+    }
+
    setFormData({
      ...formData,
-      [formField || target.name]: setValue ?? checkedOrValue,
+      [formField]: setValue,
    });
  };

--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,4 +1,5 @@
 import type { NextPage } from 'next';
+import Head from 'next/head';
 import { Container } from '../components/common/Container/Container';
 import { Header } from '../components/common/Header/Header';
 import useUser from '../lib/hooks/useUser';
@ -7,6 +8,9 @@ const Home: NextPage = () => {
  const { user } = useUser({ redirectTo: '/login' });
  return (
    <>
+      <Head>
+        <title>Icy Network Administration</title>
+      </Head>
      <Header user={user}></Header>
      <Container>Welcome back, {user?.display_name}!</Container>
    </>