import useSWR, { mutate } 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'; 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'; const LINK_NAMES = { redirect_uri: 'Redirect URI', terms: 'Terms of Service', privacy: 'Privacy Policy', website: 'Website', }; const LinkEdit = ({ formData, handleInputChange, linkType, }: { formData: Partial; handleInputChange: ( e: ChangeEvent, setValue?: any, formField?: string ) => void; linkType: OAuth2ClientURLType; }) => { const formUrl = useMemo>( () => (formData.urls || []).find(({ type }) => type === linkType) || {}, [formData, linkType] ); return ( { if (!formUrl.type) { formUrl.type = linkType; (formData.urls as Partial[]) = [ ...(formData.urls || []), formUrl, ]; } formUrl.url = e.target.value; handleInputChange(e, formData.urls, 'urls'); }} /> ); }; const EditClientModal = ({ close, modalRef, client, isAdmin, update, }: ModalProps<{ client?: OAuth2ClientListItem; update: () => void; isAdmin: boolean; }>) => { const formRef = useRef(null); const scopeReq = useSWR('/api/admin/oauth2/scopes'); const grantReq = useSWR('/api/admin/oauth2/grants'); const { formData, handleInputChange, handleSubmit } = useForm< Partial >(client || { grants: 'authorization_code' }, () => { toast .promise( publishJSON( client ? `/api/admin/oauth2/clients/${client.id}` : '/api/admin/oauth2/clients', client ? 'PATCH' : 'POST', { activated: true, ...formData } ), { loading: 'Saving client...', success: 'Client saved!', error: (err) => `Saving the client failed: ${err.message}`, } ) .then((data) => { if (data) { close(true); update(); } }); return false; }); return (

{client ? 'Edit OAuth2 Client' : 'New OAuth2 Client'}