IcyNetwork/icynet-admin
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

support multiple redirect uris

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/AuditPage/AuditPage.tsx
View File

@ -1,3 +1,4 @@
import Head from 'next/head';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import useSWR from 'swr'; import useSWR from 'swr';
import useUser from '../../lib/hooks/useUser'; import useUser from '../../lib/hooks/useUser';
@ -168,6 +169,9 @@ export const AuditPage = () => {
return ( return (
<> <>
<Head>
<title>Audit logs | Icy Network Administration</title>
</Head>
<Header user={user}></Header> <Header user={user}></Header>
<Container> <Container>
<h1>Audit logs</h1> <h1>Audit logs</h1>

22
components/LoginPage/LoginPage.tsx
View File

@ -1,15 +1,21 @@
import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import styles from './LoginPage.module.scss'; import styles from './LoginPage.module.scss';
export const LoginPage = () => { export const LoginPage = () => {
return ( return (
<main className={styles.wrapper}> <>
<div className={styles.loginBox}> <Head>
<h1>Icy Network Administration</h1> <title>Login | Icy Network Administration</title>
<Link href={'/api/login'}> </Head>
<a className={styles.loginButton}>Log in with Icy Network</a> <main className={styles.wrapper}>
</Link> <div className={styles.loginBox}>
</div> <h1>Icy Network Administration</h1>
</main> <Link href={'/api/login'}>
<a className={styles.loginButton}>Log in with Icy Network</a>
</Link>
</div>
</main>
</>
); );
}; };

13
components/OAuth2Page/OAuth2Page.module.scss
View File

@ -52,3 +52,16 @@
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
.urlWrapper {
display: flex;
gap: 0.5rem;
:first-child {
flex-grow: 1;
}
button {
min-width: 4.625rem;
}
}

178
components/OAuth2Page/OAuth2Page.tsx
View File

@ -1,4 +1,4 @@
import useSWR, { mutate } from 'swr'; import useSWR from 'swr';
import Image from 'next/image'; import Image from 'next/image';
import { import {
OAuth2ClientListItem, OAuth2ClientListItem,
@ -10,7 +10,7 @@ import { Paginator } from '../common/Paginator/Paginator';
import styles from './OAuth2Page.module.scss'; import styles from './OAuth2Page.module.scss';
import { UPLOADS_URL } from '../../lib/constants'; import { UPLOADS_URL } from '../../lib/constants';
import application from '../../public/application.png'; 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 useUser from '../../lib/hooks/useUser';
import { Container } from '../common/Container/Container'; import { Container } from '../common/Container/Container';
import { Header } from '../common/Header/Header'; import { Header } from '../common/Header/Header';
@ -28,51 +28,141 @@ import toast from 'react-hot-toast';
import { Button } from '../common/Button/Button'; import { Button } from '../common/Button/Button';
import userHasPrivileges from '../../lib/utils/has-privileges'; import userHasPrivileges from '../../lib/utils/has-privileges';
import { publishJSON } from '../../lib/utils/fetch'; import { publishJSON } from '../../lib/utils/fetch';
import Head from 'next/head';
const LINK_NAMES = { const LINK_NAMES: Record<string, string> = {
redirect_uri: 'Redirect URI', redirect_uri: 'Redirect URI',
terms: 'Terms of Service', terms: 'Terms of Service',
privacy: 'Privacy Policy', privacy: 'Privacy Policy',
website: 'Website', website: 'Website',
}; };
const REDIRECT_URI_COUNT = 3;
const LinkEdit = ({ 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, formData,
handleInputChange, handleInputChange,
linkType,
}: { }: {
formData: Partial<OAuth2ClientListItem>; formData: Partial<OAuth2ClientListItem>;
handleInputChange: ( handleInputChange: (
e: ChangeEvent, e?: ChangeEvent,
setValue?: any, setValue?: any,
formField?: string formField?: string
) => void; ) => void;
linkType: OAuth2ClientURLType;
}) => { }) => {
const formUrl = useMemo<Partial<OAuth2ClientURL>>( const [links, setLinks] = useState<Partial<OAuth2ClientURL>[]>(
() => (formData.urls || []).find(({ type }) => type === linkType) || {}, formData.urls || []
[formData, linkType]
); );
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 ( return (
<FormControl> <>
<label htmlFor={linkType}>{LINK_NAMES[linkType]}</label> <h3>Client URLs</h3>
<input {links.map((link, index) => (
id={linkType} <LinkEdit
name={linkType} key={index}
value={formUrl?.url || ''} link={link}
onChange={(e) => { onChange={() => {
if (!formUrl.type) { setLinks(links);
formUrl.type = linkType; handleInputChange(undefined, links, 'urls');
(formData.urls as Partial<OAuth2ClientURL>[]) = [ }}
...(formData.urls || []), onRemove={() => {
formUrl, const clone = links.slice();
]; clone.splice(index, 1);
} setLinks(clone);
formUrl.url = e.target.value; handleInputChange(undefined, clone, 'urls');
handleInputChange(e, formData.urls, 'urls'); }}
}} />
/> ))}
</FormControl> <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> </FormControl>
</> </>
)} )}
<LinkEdit <LinkEditor
formData={formData} formData={formData}
handleInputChange={handleInputChange} handleInputChange={handleInputChange}
linkType={OAuth2ClientURLType.REDIRECT_URI} ></LinkEditor>
></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>
</form> </form>
</FormWrapper> </FormWrapper>
</ModalBody> </ModalBody>
@ -392,6 +466,7 @@ const OAuth2ClientCard = ({
const OAuth2ClientList = ({ isAdmin }: { isAdmin: boolean }) => { const OAuth2ClientList = ({ isAdmin }: { isAdmin: boolean }) => {
const [pageIndex, setPageIndex] = useState(1); const [pageIndex, setPageIndex] = useState(1);
const [clientCount, setClientCount] = useState<number>();
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const { data, mutate } = useSWR<PaginatedResponse<OAuth2ClientListItem>>( const { data, mutate } = useSWR<PaginatedResponse<OAuth2ClientListItem>>(
`/api/admin/oauth2/clients?page=${pageIndex}${ `/api/admin/oauth2/clients?page=${pageIndex}${
@ -399,10 +474,16 @@ const OAuth2ClientList = ({ isAdmin }: { isAdmin: boolean }) => {
}&pageSize=8` }&pageSize=8`
); );
useEffect(() => {
if (data?.pagination?.rowCount) {
setClientCount(data?.pagination.rowCount);
}
}, [data]);
return ( return (
<> <>
<div className={styles.header}> <div className={styles.header}>
<h1>OAuth2 clients</h1> <h1>OAuth2 clients{clientCount && ` (${clientCount})`}</h1>
<Button <Button
onClick={() => onClick={() =>
ModalService.open(EditClientModal, { isAdmin, update: mutate }) ModalService.open(EditClientModal, { isAdmin, update: mutate })
@ -451,6 +532,9 @@ export const OAuth2Page = () => {
return ( return (
<> <>
<Head>
<title>OAuth2 | Icy Network Administration</title>
</Head>
<Header user={user}></Header> <Header user={user}></Header>
<Container> <Container>
<OAuth2ClientList isAdmin={isAdmin} /> <OAuth2ClientList isAdmin={isAdmin} />

16
components/UsersPage/UsersPage.tsx
View File

@ -25,6 +25,7 @@ import ModalHeader from '../common/Modal/ModalHeader/ModalHeader';
import ModalService from '../common/Modal/services/ModalService'; import ModalService from '../common/Modal/services/ModalService';
import { Privilege } from '../../lib/types/privilege.interface'; import { Privilege } from '../../lib/types/privilege.interface';
import useHasPrivileges from '../../lib/hooks/useHasPrivileges'; import useHasPrivileges from '../../lib/hooks/useHasPrivileges';
import Head from 'next/head';
function getSelectValues(selectElement: HTMLSelectElement) { function getSelectValues(selectElement: HTMLSelectElement) {
const result = []; const result = [];
@ -364,17 +365,25 @@ const UserList = ({
pageIndex, pageIndex,
searchTerm, searchTerm,
privPriv, privPriv,
setUserCount,
setPage, setPage,
}: { }: {
pageIndex: number; pageIndex: number;
searchTerm: string; searchTerm: string;
privPriv: boolean; privPriv: boolean;
setUserCount: (count: number) => void;
setPage: (page: number) => void; setPage: (page: number) => void;
}) => { }) => {
const { data, mutate } = useSWR<PaginatedResponse<UserListItem>>( const { data, mutate } = useSWR<PaginatedResponse<UserListItem>>(
`/api/admin/users?page=${pageIndex}${searchTerm ? `&q=${searchTerm}` : ''}` `/api/admin/users?page=${pageIndex}${searchTerm ? `&q=${searchTerm}` : ''}`
); );
useEffect(() => {
if (data?.pagination?.rowCount) {
setUserCount(data?.pagination.rowCount);
}
}, [data, setUserCount]);
return data ? ( return data ? (
<> <>
{data?.list?.length && ( {data?.list?.length && (
@ -398,15 +407,19 @@ const UserList = ({
export const UsersPage = () => { export const UsersPage = () => {
const { user } = useUser({ redirectTo: '/login' }); const { user } = useUser({ redirectTo: '/login' });
const [userCount, setUserCount] = useState<number>();
const [pageIndex, setPageIndex] = useState(1); const [pageIndex, setPageIndex] = useState(1);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const privPriv = useHasPrivileges(user, 'admin:user:privilege'); const privPriv = useHasPrivileges(user, 'admin:user:privilege');
return ( return (
<> <>
<Head>
<title>Users | Icy Network Administration</title>
</Head>
<Header user={user}></Header> <Header user={user}></Header>
<Container> <Container>
<h1>Users</h1> <h1>Users{userCount && ` (${userCount})`}</h1>
<FormWrapper> <FormWrapper>
<FormControl> <FormControl>
<input <input
@ -421,6 +434,7 @@ export const UsersPage = () => {
pageIndex={pageIndex} pageIndex={pageIndex}
searchTerm={searchTerm} searchTerm={searchTerm}
privPriv={privPriv} privPriv={privPriv}
setUserCount={setUserCount}
setPage={setPageIndex} setPage={setPageIndex}
/> />
</Container> </Container>

1
components/common/Button/Button.module.scss
View File

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

11
components/common/Form/Form.module.scss
View File

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

19
lib/hooks/useForm.ts
View File

@ -4,16 +4,23 @@ export function useForm<T>(initialState: T, onSubmit: (data: T) => void) {
const [formData, setFormData] = useState<T>(initialState); const [formData, setFormData] = useState<T>(initialState);
const handleInputChange = ( const handleInputChange = (
e: ChangeEvent, e?: ChangeEvent,
setValue?: any, setValue?: unknown,
formField?: string formField?: string
) => { ) => {
const target = e.target as HTMLInputElement; if (e && e.target) {
const checkedOrValue = const target = e.target as HTMLInputElement;
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({ setFormData({
...formData, ...formData,
[formField || target.name]: setValue ?? checkedOrValue, [formField]: setValue,
}); });
}; };

4
pages/index.tsx
View File

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