icynet-admin/components/OAuth2Page/OAuth2Page.tsx

import useSWR from 'swr';
import Image from 'next/image';
import {
  OAuth2ClientListItem,
  OAuth2ClientURL,
  OAuth2ClientURLType,
} from '../../lib/types/oauth2-client.interface';
import { PaginatedResponse } from '../../lib/types/paginated-response.interface';
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 useUser from '../../lib/hooks/useUser';
import { Container } from '../common/Container/Container';
import { Header } from '../common/Header/Header';
import Modal from '../common/Modal/Modal/Modal';
import ModalHeader from '../common/Modal/ModalHeader/ModalHeader';
import ModalBody from '../common/Modal/ModalBody/ModalBody';
import ModalFooter from '../common/Modal/ModalFooter/ModalFooter';
import ModalService from '../common/Modal/services/ModalService';
import { Dropdown } from '../common/Dropdown/Dropdown';
import { ModalProps } from '../../lib/types/modal.interface';
import { useForm } from '../../lib/hooks/useForm';
import { FormWrapper } from '../common/Form/FormWrapper/FormWrapper';
import { FormControl } from '../common/Form/FormControl/FormControl';

const LINK_NAMES = {
  redirect_uri: 'Redirect URI',
  terms: 'Terms of Service',
  privacy: 'Privacy Policy',
  website: 'Website',
};

const LinkEdit = ({
  formData,
  handleInputChange,
  linkType,
}: {
  formData: Partial<OAuth2ClientListItem>;
  handleInputChange: (
    e: ChangeEvent,
    setValue?: any,
    formField?: string
  ) => void;
  linkType: OAuth2ClientURLType;
}) => {
  const formUrl = useMemo<Partial<OAuth2ClientURL>>(
    () => (formData.urls || []).find(({ type }) => type === linkType) || {},
    [formData, linkType]
  );
  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>[])?.push(formUrl);
          }
          formUrl.url = e.target.value;
          handleInputChange(e, formData.urls, 'urls');
        }}
      />
    </FormControl>
  );
};

const EditClientModal = ({
  close,
  modalRef,
  client,
}: ModalProps<{ client?: OAuth2ClientListItem }>) => {
  const formRef = useRef<HTMLFormElement>(null);

  const { formData, handleInputChange, handleSubmit } = useForm<
    Partial<OAuth2ClientListItem>
  >(client || {}, () => {
    console.log(formData);
    return false;
  });

  return (
    <Modal modalRef={modalRef}>
      <ModalHeader>
        <h3>Edit OAuth2 Client</h3>
      </ModalHeader>
      <ModalBody>
        <FormWrapper>
          <form ref={formRef} onSubmit={handleSubmit}>
            <FormControl>
              <label htmlFor="title">Title</label>
              <input
                id="title"
                type="text"
                name="title"
                value={formData.title}
                onChange={handleInputChange}
              />
            </FormControl>
            <FormControl>
              <label htmlFor="description">Description</label>
              <textarea
                id="description"
                name="description"
                value={formData.description}
                onChange={handleInputChange}
              />
            </FormControl>
            <FormControl>
              <label htmlFor="scope">Allowed scopes</label>
              <input
                id="scope"
                name="scope"
                value={formData.scope}
                onChange={handleInputChange}
              />
            </FormControl>
            <FormControl>
              <label htmlFor="grants">Allowed grant types</label>
              <input
                id="grants"
                name="grants"
                value={formData.grants}
                onChange={handleInputChange}
              />
            </FormControl>
            <FormControl inline={true}>
              <label htmlFor="activated">Activated</label>
              <input
                id="activated"
                name="activated"
                type="checkbox"
                checked={formData.activated}
                onChange={handleInputChange}
              />
            </FormControl>
            <FormControl inline={true}>
              <label htmlFor="verified">Verified</label>
              <input
                id="verified"
                name="verified"
                type="checkbox"
                checked={formData.verified}
                onChange={handleInputChange}
              />
            </FormControl>
            <LinkEdit
              formData={formData}
              handleInputChange={handleInputChange}
              linkType={OAuth2ClientURLType.REDIRECT_URI}
            ></LinkEdit>
          </form>
        </FormWrapper>
      </ModalBody>
      <ModalFooter>
        <button onClick={() => close(true)}>Cancel</button>
        <button>New secret</button>
        <button onClick={() => handleSubmit()}>Submit</button>
      </ModalFooter>
    </Modal>
  );
};

const OAuth2ClientCard = ({ client }: { client: OAuth2ClientListItem }) => (
  <div className={styles.clientCard}>
    <div className={styles.pictureWrapper}>
      {client.picture ? (
        <Image
          src={`${UPLOADS_URL}/${client.picture.file}`}
          width={128}
          height={128}
          alt=""
        />
      ) : (
        <Image src={application} alt="" width={128} height={128} />
      )}
    </div>
    <div className={styles.clientInfo}>
      <div className={styles.titleWrap}>
        <h2>{client.title}</h2>
        <Dropdown opens="right">
          <button
            onClick={() =>
              ModalService.open(EditClientModal, { client: client })
            }
          >
            Edit client
          </button>
          {!client.activated && <button>Delete client</button>}
        </Dropdown>
      </div>
      <span className={styles.clientDescription}>{client.description}</span>
      <dl>
        <dt>Client ID</dt>
        <dd>{client.client_id}</dd>
        <dt>Allowed scopes</dt>
        <dd>{client.scope?.split(' ').join(', ')}</dd>
        <dt>Allowed grant types</dt>
        <dd>{client.grants?.split(' ').join(', ')}</dd>
        <dt>Activated</dt>
        <dd>{client.activated ? 'Yes' : <b>NOT ACTIVATED</b>}</dd>
        <dt>Verified</dt>
        <dd>{client.verified ? 'Yes' : 'No'}</dd>
        <dt>Created</dt>
        <dd>{new Date(client.created_at).toDateString()}</dd>
      </dl>
    </div>
  </div>
);

const OAuth2ClientList = ({
  pageIndex,
  searchTerm,
  setPage,
}: {
  pageIndex: number;
  searchTerm: string;
  setPage: (page: number) => void;
}) => {
  const { data } = useSWR<PaginatedResponse<OAuth2ClientListItem>>(
    `/api/admin/oauth2/clients?page=${pageIndex}${
      searchTerm ? `&q=${searchTerm}` : ''
    }`
  );

  return data ? (
    <>
      <div className={styles.clientList}>
        {data.list.map((client) => (
          <OAuth2ClientCard client={client} key={client.client_id} />
        ))}
        {data?.pagination && (
          <Paginator setPage={setPage} pagination={data.pagination}></Paginator>
        )}
      </div>
    </>
  ) : (
    <span>Nothing found</span>
  );
};

export const OAuth2Page = () => {
  const { user } = useUser({ redirectTo: '/login' });
  const [pageIndex, setPageIndex] = useState(1);
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <>
      <Header user={user}></Header>
      <Container>
        <h1>OAuth2 clients</h1>
        <OAuth2ClientList
          pageIndex={pageIndex}
          searchTerm={searchTerm}
          setPage={setPageIndex}
        />
      </Container>
    </>
  );
};