more work on admin

2022-09-01 21:11:36 +03:00 · 2022-09-01 21:11:36 +03:00 · 19f2a820eb
commit 19f2a820eb
parent 9b9141d5a9
7 changed files with 439 additions and 68 deletions
--- a/components/OAuth2Page/OAuth2Page.tsx
+++ b/components/OAuth2Page/OAuth2Page.tsx
@ -27,6 +27,7 @@ import { FormControl } from '../common/Form/FormControl/FormControl';
 import toast from 'react-hot-toast';
 import { Button } from '../common/Button/Button';
 import userHasPrivileges from '../../lib/utils/has-privileges';
+import { publishJSON } from '../../lib/utils/swr-fetcher';

 const LINK_NAMES = {
  redirect_uri: 'Redirect URI',
@ -93,25 +94,13 @@ const EditClientModal = ({
  >(client || {}, () => {
    toast
      .promise(
-        fetch(
+        publishJSON(
          client
            ? `/api/admin/oauth2/clients/${client.id}`
            : '/api/admin/oauth2/clients',
-          {
-            method: client ? 'PATCH' : 'POST',
-            headers: {
-              'content-type': 'application/json',
-            },
-            body: JSON.stringify({ activated: true, ...formData }),
-          }
-        )
-          .then((res) => res.json())
-          .then(async (data) => {
-            if (data.error) {
-              throw data;
-            }
-            return data;
-          }),
+          client ? 'PATCH' : 'POST',
+          { activated: true, ...formData }
+        ),
        {
          loading: 'Saving client...',
          success: 'Client saved!',
@ -226,16 +215,10 @@ const EditClientModal = ({
            onClick={() =>
              toast
                .promise(
-                  fetch(`/api/admin/oauth2/clients/${client!.id}/new-secret`, {
-                    method: 'POST',
-                  })
-                    .then((res) => res.json())
-                    .then(async (data) => {
-                      if (data.error) {
-                        throw data;
-                      }
-                      return data;
-                    }),
+                  publishJSON(
+                    `/api/admin/oauth2/clients/${client!.id}/new-secret`,
+                    'POST'
+                  ),
                  {
                    loading: 'Generating new secret...',
                    success: 'New secret generated.',
--- a/components/UsersPage/UsersPage.module.scss
+++ b/components/UsersPage/UsersPage.module.scss
@ -6,6 +6,11 @@
  padding: 0.5rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);

+  .titleWrap {
+    display: flex;
+    justify-content: space-between;
+  }
+
  .pictureWrapper {
    overflow: hidden;
  }
@ -13,6 +18,7 @@
  .userInfo {
    display: flex;
    flex-direction: column;
+    flex-grow: 1;

    h2 {
      padding: 0;
@ -29,3 +35,33 @@
  flex-direction: column;
  gap: 1rem;
 }
+
+.privEditor {
+  display: flex;
+  flex-direction: column;
+
+  .privInner {
+    display: flex;
+
+    .described {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      h4 {
+        margin-bottom: 0.5rem;
+      }
+
+      select {
+        min-height: 120px;
+      }
+    }
+
+    .privControls {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin: 0 0.5rem;
+      gap: 0.25rem;
+    }
+  }
+}
--- a/components/UsersPage/UsersPage.tsx
+++ b/components/UsersPage/UsersPage.tsx
@ -1,5 +1,5 @@
 import styles from './UsersPage.module.scss';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import useSWR from 'swr';
 import useUser from '../../lib/hooks/useUser';
 import { PaginatedResponse } from '../../lib/types/paginated-response.interface';
@ -10,8 +10,255 @@ import avatar from '../../public/avatar.png';
 import Image from 'next/image';
 import { UPLOADS_URL } from '../../lib/constants';
 import { Paginator } from '../common/Paginator/Paginator';
+import { Dropdown } from '../common/Dropdown/Dropdown';
+import toast from 'react-hot-toast';
+import { publishJSON } from '../../lib/utils/swr-fetcher';
+import { useForm } from '../../lib/hooks/useForm';
+import { ModalProps } from '../../lib/types/modal.interface';
+import { Button } from '../common/Button/Button';
+import { FormControl } from '../common/Form/FormControl/FormControl';
+import { FormWrapper } from '../common/Form/FormWrapper/FormWrapper';
+import Modal from '../common/Modal/Modal/Modal';
+import ModalBody from '../common/Modal/ModalBody/ModalBody';
+import ModalFooter from '../common/Modal/ModalFooter/ModalFooter';
+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';

-const UserCard = ({ user }: { user: UserListItem }) => (
+function getSelectValues(selectElement: HTMLSelectElement) {
+  const result = [];
+  const options = selectElement && selectElement.options;
+
+  for (let i = 0, iLen = options.length; i < iLen; i++) {
+    const opt = options[i];
+
+    if (opt.selected) {
+      result.push(opt.value || opt.text);
+    }
+  }
+  return result;
+}
+
+const PrivilegeEditor = ({
+  user,
+  onChange,
+}: {
+  user: UserListItem;
+  onChange: (privvy: Privilege[]) => void;
+}) => {
+  const [toggle, setToggle] = useState(false);
+  const [selectionAvailable, setSelectionAvailable] = useState<string[]>([]);
+  const [selectionExisting, setSelectionExisting] = useState<string[]>([]);
+  const [availablePrivileges, setAvailablePrivileges] = useState<Privilege[]>(
+    []
+  );
+  const { data } = useSWR<Privilege[]>('/api/admin/privileges');
+
+  useEffect(() => {
+    setAvailablePrivileges(
+      (data || []).filter(
+        ({ id }) => !(user.privileges || []).some((privvy) => privvy.id === id)
+      )
+    );
+  }, [user, data, toggle]);
+
+  return (
+    <>
+      <div className={styles.privEditor}>
+        <h3>Privileges</h3>
+        <div className={styles.privInner}>
+          <div className={styles.described}>
+            <h4>Available</h4>
+            <select
+              multiple
+              value={selectionAvailable}
+              onChange={(e) => setSelectionAvailable(getSelectValues(e.target))}
+            >
+              {availablePrivileges.map(({ name, id }) => (
+                <option value={id} key={id}>
+                  {name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className={styles.privControls}>
+            <Button
+              type="button"
+              disabled={!selectionAvailable.length}
+              onClick={() => {
+                // Add privileges
+                const toAdd = availablePrivileges.filter(({ id }) =>
+                  selectionAvailable.includes(id.toString())
+                );
+                user.privileges = [...(user.privileges || []), ...toAdd];
+                setToggle(!toggle);
+                setSelectionAvailable([]);
+                onChange(user.privileges);
+              }}
+            >
+              &gt;&gt;
+            </Button>
+            <Button
+              type="button"
+              disabled={!selectionExisting.length}
+              onClick={() => {
+                // Remove privileges
+                user.privileges = (user.privileges || []).filter(
+                  ({ id }) => !selectionExisting.includes(id.toString())
+                );
+                onChange(user.privileges);
+                setSelectionExisting([]);
+                setToggle(!toggle);
+              }}
+            >
+              &lt;&lt;
+            </Button>
+          </div>
+          <div className={styles.described}>
+            <h4>Current</h4>
+            <select
+              multiple
+              value={selectionExisting}
+              onChange={(e) => setSelectionExisting(getSelectValues(e.target))}
+            >
+              {(user.privileges || []).map(({ name, id }) => (
+                <option value={id} key={id}>
+                  {name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const EditUserModal = ({
+  close,
+  modalRef,
+  privPriv,
+  user,
+  update,
+}: ModalProps<{
+  user: UserListItem;
+  update: () => void;
+  privPriv: boolean;
+}>) => {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const { formData, handleInputChange, handleSubmit } = useForm<
+    Partial<UserListItem>
+  >(user, async () => {
+    // Save privileges
+    if (privPriv) {
+      await toast.promise(
+        publishJSON(`/api/admin/users/${user.id}/privileges`, 'PUT', {
+          privileges: (user.privileges || []).map(({ id }) => id),
+        }),
+        {
+          loading: 'Saving privileges...',
+          success: 'Privileges saved!',
+          error: 'Failed to save privileges.',
+        }
+      );
+    }
+
+    // Save user data
+    toast
+      .promise(publishJSON(`/api/admin/users/${user.id}`, 'PATCH', formData), {
+        loading: 'Saving user...',
+        success: 'User saved!',
+        error: (err) => `Saving the user failed: ${err.message}`,
+      })
+      .then((data) => {
+        if (data) {
+          close(true);
+          update();
+        }
+      });
+    return false;
+  });
+
+  return (
+    <Modal modalRef={modalRef}>
+      <ModalHeader>
+        <h3>Edit user details</h3>
+      </ModalHeader>
+      <ModalBody>
+        <FormWrapper>
+          <form ref={formRef} onSubmit={handleSubmit} autoComplete="off">
+            <FormControl>
+              <label htmlFor="display_name">Display name</label>
+              <input
+                id="display_name"
+                type="text"
+                name="display_name"
+                value={formData.display_name}
+                onChange={handleInputChange}
+              />
+            </FormControl>
+            <FormControl>
+              <label htmlFor="username">Username</label>
+              <input
+                id="username"
+                type="text"
+                name="username"
+                value={formData.username}
+                onChange={handleInputChange}
+              />
+            </FormControl>
+            <FormControl>
+              <label htmlFor="email">Email</label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                value={formData.email}
+                onChange={handleInputChange}
+              />
+            </FormControl>
+            <FormControl inline={true}>
+              <label htmlFor="activated">Activated</label>
+              <input
+                id="activated"
+                name="activated"
+                type="checkbox"
+                checked={formData.activated}
+                onChange={handleInputChange}
+              />
+            </FormControl>
+            {privPriv && (
+              <PrivilegeEditor
+                user={user}
+                onChange={(privileges: Privilege[]) =>
+                  (formData.privileges = privileges)
+                }
+              ></PrivilegeEditor>
+            )}
+          </form>
+        </FormWrapper>
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={() => close(true)}>Cancel</Button>
+        <Button onClick={() => handleSubmit()} variant="primary">
+          Submit
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+const UserCard = ({
+  user,
+  update,
+  privPriv,
+}: {
+  user: UserListItem;
+  update: () => void;
+  privPriv: boolean;
+}) => (
  <div className={styles.userCard}>
    <div className={styles.pictureWrapper}>
      {user.picture ? (
@ -26,15 +273,84 @@ const UserCard = ({ user }: { user: UserListItem }) => (
      )}
    </div>
    <div className={styles.userInfo}>
+      <div className={styles.titleWrap}>
        <h2>
          {user.display_name}{' '}
          <span className={styles.username}>@{user.username}</span>
        </h2>
+        <Dropdown opens="right">
+          <button
+            onClick={() =>
+              ModalService.open(EditUserModal, { user, update, privPriv })
+            }
+          >
+            Edit user
+          </button>
+          {!user.activated && (
+            <button
+              onClick={() => {
+                toast.promise(
+                  publishJSON(`/api/admin/users/${user.id}/activation`, 'POST'),
+                  {
+                    loading: 'Sending email...',
+                    success: 'Email sent!',
+                    error: 'Failed to send activation email.',
+                  }
+                );
+              }}
+            >
+              Send activation email
+            </button>
+          )}
+          {user.activated && (
+            <button
+              onClick={() =>
+                toast.promise(
+                  publishJSON(`/api/admin/users/${user.id}/password`, 'POST'),
+                  {
+                    loading: 'Sending email...',
+                    success: 'Email sent!',
+                    error: 'Failed to send password email.',
+                  }
+                )
+              }
+            >
+              Send password email
+            </button>
+          )}
+          {user.picture && (
+            <button
+              onClick={() =>
+                toast
+                  .promise(
+                    publishJSON(`/api/admin/users/${user.id}/avatar`, 'DELETE'),
+                    {
+                      loading: 'Deleting avatar...',
+                      success: 'Avatar deleted!',
+                      error: 'Failed to delete user avatar.',
+                    }
+                  )
+                  .then(update)
+              }
+            >
+              Delete avatar
+            </button>
+          )}
+        </Dropdown>
+      </div>
      <dl>
        <dt>UUID</dt>
        <dd>{user.uuid}</dd>
        <dt>Email</dt>
        <dd>{user.email}</dd>
+        {user.privileges?.length && (
+          <>
+            <dt>Privileges</dt>
+            <dd>
+              {user.privileges.map((privilege) => privilege.name).join(', ')}
+            </dd>
+          </>
+        )}
        <dt>Activated</dt>
        <dd>{user.activated ? 'Yes' : <b>NOT ACTIVATED</b>}</dd>
        <dt>Registered</dt>
@ -47,24 +363,33 @@ const UserCard = ({ user }: { user: UserListItem }) => (
 const UserList = ({
  pageIndex,
  searchTerm,
+  privPriv,
  setPage,
 }: {
  pageIndex: number;
  searchTerm: string;
+  privPriv: boolean;
  setPage: (page: number) => void;
 }) => {
-  const { data } = useSWR<PaginatedResponse<UserListItem>>(
+  const { data, mutate } = useSWR<PaginatedResponse<UserListItem>>(
    `/api/admin/users?page=${pageIndex}${searchTerm ? `&q=${searchTerm}` : ''}`
  );

  return data ? (
    <>
+      {data?.list?.length && (
        <div className={styles.userList}>
          {data.list.map((user) => (
-          <UserCard user={user} key={user.uuid} />
+            <UserCard
+              user={user}
+              key={user.uuid}
+              update={mutate}
+              privPriv={privPriv}
+            />
          ))}
          <Paginator setPage={setPage} pagination={data.pagination}></Paginator>
        </div>
+      )}
    </>
  ) : (
    <span>Nothing found</span>
@ -75,6 +400,7 @@ export const UsersPage = () => {
  const { user } = useUser({ redirectTo: '/login' });
  const [pageIndex, setPageIndex] = useState(1);
  const [searchTerm, setSearchTerm] = useState('');
+  const privPriv = useHasPrivileges(user, 'admin:user:privilege');

  return (
    <>
@ -84,6 +410,7 @@ export const UsersPage = () => {
        <UserList
          pageIndex={pageIndex}
          searchTerm={searchTerm}
+          privPriv={privPriv}
          setPage={setPageIndex}
        />
      </Container>
--- a/components/common/Button/Button.module.scss
+++ b/components/common/Button/Button.module.scss
@ -5,6 +5,10 @@
  cursor: pointer;
  transition: background linear 0.33s;

+  &[disabled] {
+    cursor: default;
+  }
+
  &.default {
    border: 1px solid #b9b9b9;
    background: linear-gradient(
@ -13,6 +17,7 @@
      rgb(241 241 241) 100%
    );

+    &:not([disabled]) {
      &:hover,
      &:focus-visible {
        background: linear-gradient(
@ -30,6 +35,7 @@
        );
      }
    }
+  }
  &.primary {
    border: 1px solid #00aaff;
    background: linear-gradient(
@ -38,6 +44,7 @@
      rgba(59, 190, 255, 1) 100%
    );

+    &:not([disabled]) {
      &:hover,
      &:focus-visible {
        background: linear-gradient(
@ -55,6 +62,7 @@
        );
      }
    }
+  }
  &.secondary {
  }
 }
--- a/components/common/Button/Button.tsx
+++ b/components/common/Button/Button.tsx
@ -10,7 +10,7 @@ export const Button = ({
  variant?: 'default' | 'primary' | 'secondary';
  onClick: MouseEventHandler<HTMLButtonElement>;
  children?: React.ReactNode;
-}) => {
+} & JSX.IntrinsicElements['button']) => {
  return (
    <button
      {...props}
--- a/components/common/Form/Form.module.scss
+++ b/components/common/Form/Form.module.scss
@ -23,6 +23,7 @@
  }

  input[type='text'],
+  input[type='email'],
  input[type='password'],
  input:not([type]),
  textarea {
--- a/lib/utils/swr-fetcher.ts
+++ b/lib/utils/swr-fetcher.ts
@ -21,6 +21,22 @@ export default async function fetchJson<JSON = unknown>(
  });
 }

+export async function publishJSON(
+  input: RequestInfo,
+  method: string = 'POST',
+  body?: Object,
+  init?: RequestInit
+) {
+  return fetchJson(input, {
+    ...init,
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  });
+}
+
 export class FetchError extends Error {
  response: Response;
  data: {