support multiple redirect uris

This commit is contained in:
Evert Prants 2022-09-14 20:31:38 +03:00
parent c8becea8e5
commit 83c235e94d
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
9 changed files with 201 additions and 67 deletions

View File

@ -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>

View File

@ -1,8 +1,13 @@
import Head from 'next/head';
import Link from 'next/link';
import styles from './LoginPage.module.scss';
export const LoginPage = () => {
return (
<>
<Head>
<title>Login | Icy Network Administration</title>
</Head>
<main className={styles.wrapper}>
<div className={styles.loginBox}>
<h1>Icy Network Administration</h1>
@ -11,5 +16,6 @@ export const LoginPage = () => {
</Link>
</div>
</main>
</>
);
};

View File

@ -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;
}
}

View File

@ -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 || []
);
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,
];
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]);
}
formUrl.url = e.target.value;
handleInputChange(e, formData.urls, 'urls');
}, [availableTypes, addNewSelection]);
return (
<>
<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} />

View File

@ -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>

View File

@ -64,6 +64,7 @@
--btn-border: transparent;
--btn-background: transparent;
--btn-color: var(--button-link-color);
padding: 0.5rem 0.5rem;
&:not([disabled]) {
&:hover,

View File

@ -26,6 +26,7 @@
input[type='email'],
input[type='password'],
input:not([type]),
select,
textarea {
padding: 8px;
border-radius: 4px;
@ -36,13 +37,13 @@
background: var(--form-field-background);
border: 1px solid var(--form-field-border);
box-shadow: inset 0 0 4px var(--form-field-box-shadow);
}
+ span {
> span {
font-size: 0.875rem;
margin-top: 0.25rem;
color: var(--form-field-helper-color);
}
}
&:last-child {
margin-bottom: 0;

View File

@ -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
) => {
if (e && e.target) {
const target = e.target as HTMLInputElement;
const checkedOrValue =
target.type === 'checkbox' ? target.checked : target.value;
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,
});
};

View File

@ -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>
</>