Navy.gif/webserver-framework-frontend
Template
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Linter rules update

Browse Source
This commit is contained in:
Erik 2024-05-01 16:57:32 +03:00
parent e68de7f432
commit 29da1ceace
23 changed files with 148 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
.eslintrc.json
View File

@ -15,7 +15,8 @@
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": [
"react",
@ -31,11 +32,18 @@
"allman"
],
"indent": ["warn", 4, {
"SwitchCase": 1
"SwitchCase": 1,
"VariableDeclarator": "first",
"FunctionDeclaration": {"parameters": "first"},
"CallExpression": {"arguments": "first"},
"ArrayExpression": "first",
"ObjectExpression": "first",
"ImportDeclaration": "first"
}],
"no-warning-comments": [1, {
"terms": ["todo", "fixme"]
}],
"no-multi-spaces": ["warn", {"ignoreEOLComments": true, "exceptions": {"ImportDeclaration": true}}],
"prefer-arrow-callback": "warn",
"prefer-const": "warn",
"prefer-destructuring": "warn",
@ -77,7 +85,20 @@
"no-console": "warn",
"no-constant-binary-expression": "error",
"no-trailing-spaces": "warn",
"no-tabs": "error",
"quotes": ["error" , "single"],
"jsx-quotes": [
"error",
"prefer-single"
],
"key-spacing": [
"warn",
{
"beforeColon": false,
"afterColon": true,
"align": "value"
}
],
"guard-for-in": "warn",
"yoda": [
"warn",

4
src/App.tsx
View File

@ -101,7 +101,7 @@ const App = () =>
{user ?
<div>
<header className="">
<header className=''>
{/* <OnlineList /> */}
<UserControls />
</header>
@ -153,7 +153,7 @@ const App = () =>
</ErrorBoundary>
<div className={`footer ${user ? '' : 'login'}`}>
<p className='m-0 text-center'>Made with <i className="icon corgi transparent"></i> by <a href="https://corgi.wtf" target="_blank" rel="noreferrer">Navy.gif</a> &nbsp;|&nbsp; Front-end magic by <a href="https://d3vision.dev" target="_blank" rel="noreferrer">D3vision</a></p>
<p className='m-0 text-center'>Made with <i className='icon corgi transparent'></i> by <a href='https://corgi.wtf' target='_blank' rel='noreferrer'>Navy.gif</a> &nbsp;|&nbsp; Front-end magic by <a href='https://d3vision.dev' target='_blank' rel='noreferrer'>D3vision</a></p>
</div>
</div>

20
src/components/InputElements.tsx
View File

@ -25,11 +25,11 @@ export const FileSelector = ({ file, cb, types = '' }: { types?: string, file: F
cb(file);
};
return <label onDrop={onDrop} onDragOver={onDragOver} htmlFor="fileUpload" className="drop-container">
<span className="drop-title">Drag &apos;n&apos; drop a file here</span>
return <label onDrop={onDrop} onDragOver={onDragOver} htmlFor='fileUpload' className='drop-container'>
<span className='drop-title'>Drag &apos;n&apos; drop a file here</span>
or
<span className="drop-title">Click to select a file</span>
<p className="fileName m-0">{file ? `Selected: ${file.name}` : null}</p>
<span className='drop-title'>Click to select a file</span>
<p className='fileName m-0'>{file ? `Selected: ${file.name}` : null}</p>
<input onChange={(event) =>
{
if (!event.target.files)
@ -37,7 +37,7 @@ export const FileSelector = ({ file, cb, types = '' }: { types?: string, file: F
const [ f ] = event.target.files;
cb(f);
}}
type="file" id="fileUpload" accept={types} required />
type='file' id='fileUpload' accept={types} required />
</label>;
};
@ -55,7 +55,7 @@ export type InputElementProperties<T> = {
export const ToggleSwitch = ({ name, defaultValue: value, onChange, inputRef, children, className = '' }: InputElementProperties<boolean>) =>
{
return <label className={`label-fix ${className}`}>
<span className="check-box check-box-row">
<span className='check-box check-box-row'>
{children && <b>{children}</b>}
<input name={name} ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
</span>
@ -64,9 +64,9 @@ export const ToggleSwitch = ({ name, defaultValue: value, onChange, inputRef, ch
export const VerticalToggleSwitch = ({ name, defaultValue: value, onChange, inputRef, children }: InputElementProperties<boolean>) =>
{
return <label className="label-fix">
return <label className='label-fix'>
{children && <b>{children}</b>}
<span className="check-box">
<span className='check-box'>
<input name={name} ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
</span>
</label>;
@ -121,7 +121,7 @@ export const NumberInput = ({ name, children, placeholder, inputRef, onChange, d
ref={inputRef}
defaultValue={value}
onChange={onChange}
type="number"
type='number'
min={min}
max={max}
step={step}
@ -164,7 +164,7 @@ export const ClickToEdit = ({ value, onUpdate, inputElement, placeholder }:
return <span className='input-group'>
{input}
<div className='input-group-btn'>
<button className="button primary" onClick={onClick} >OK</button>
<button className='button primary' onClick={onClick} >OK</button>
</div>
</span>;
return <span onClick={() => setEditing(true)} className='mt-0 mb-1 clickable'>{value || placeholder}</span>;

4
src/components/PageControls.tsx
View File

@ -53,7 +53,7 @@ export const PageButtons = ({ setPage, page, pages, disabled }: PageButtonProps)
};
return <div className='flex is-vertical-align is-center page-controls'>
<button className="button dark" disabled={page === 1 || disabled} onClick={previous}>Previous</button>
<button className='button dark' disabled={page === 1 || disabled} onClick={previous}>Previous</button>
<div className='flex gap-3 align-items-center'><span>Page:</span> {showInput ? <input onKeyUp={(e) =>
{
if (e.key === 'Enter')
@ -62,7 +62,7 @@ export const PageButtons = ({ setPage, page, pages, disabled }: PageButtonProps)
onEnter(field.value);
}
}} className='page-number-input mb-0 p-2 pb-1' defaultValue={page} type='number' /> : <span className='clickable' onClick={onClick}>{page}</span>}<span> / {pages || 1}</span></div>
<button className="button dark" disabled={page >= pages || disabled} onClick={next}>Next</button>
<button className='button dark' disabled={page >= pages || disabled} onClick={next}>Next</button>
</div>;
};

18
src/components/PageElements.tsx
View File

@ -29,18 +29,18 @@ export const Refresher = ({ state, className = '', tooltipText, onRefresh: onCli
onClick();
};
return <div className={`refresher-wrapper ${className}`} {...tooltipText ? { 'data-tooltip': tooltipText } : {}}>
<div id="reportRefresher" className={`refresher ${stateClass}`} onClick={refresh}>
<svg className="icon-loading" viewBox="0 0 32 32">
<path d="M 16 4 C 10.886719 4 6.617188 7.160156 4.875 11.625 L 6.71875 12.375 C 8.175781 8.640625 11.710938 6 16 6 C 19.242188 6 22.132813 7.589844 23.9375 10 L 20 10 L 20 12 L 27 12 L 27 5 L 25 5 L 25 8.09375 C 22.808594 5.582031 19.570313 4 16 4 Z M 25.28125 19.625 C 23.824219 23.359375 20.289063 26 16 26 C 12.722656 26 9.84375 24.386719 8.03125 22 L 12 22 L 12 20 L 5 20 L 5 27 L 7 27 L 7 23.90625 C 9.1875 26.386719 12.394531 28 16 28 C 21.113281 28 25.382813 24.839844 27.125 20.375 Z ">
<div id='reportRefresher' className={`refresher ${stateClass}`} onClick={refresh}>
<svg className='icon-loading' viewBox='0 0 32 32'>
<path d='M 16 4 C 10.886719 4 6.617188 7.160156 4.875 11.625 L 6.71875 12.375 C 8.175781 8.640625 11.710938 6 16 6 C 19.242188 6 22.132813 7.589844 23.9375 10 L 20 10 L 20 12 L 27 12 L 27 5 L 25 5 L 25 8.09375 C 22.808594 5.582031 19.570313 4 16 4 Z M 25.28125 19.625 C 23.824219 23.359375 20.289063 26 16 26 C 12.722656 26 9.84375 24.386719 8.03125 22 L 12 22 L 12 20 L 5 20 L 5 27 L 7 27 L 7 23.90625 C 9.1875 26.386719 12.394531 28 16 28 C 21.113281 28 25.382813 24.839844 27.125 20.375 Z '>
</path>
</svg>
<svg className="icon-success" viewBox="0 0 76 76">
<path fill="none" strokeWidth="7" d="M17.5,40.9l10.9,10.9l28.7-28"></path>
<svg className='icon-success' viewBox='0 0 76 76'>
<path fill='none' strokeWidth='7' d='M17.5,40.9l10.9,10.9l28.7-28'></path>
</svg>
<svg className="icon-error" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="10"></circle>
<polyline points="5 15, 15 5"></polyline>
<polyline points="15 15, 5 5"></polyline>
<svg className='icon-error' viewBox='0 0 20 20'>
<circle cx='10' cy='10' r='10'></circle>
<polyline points='5 15, 15 5'></polyline>
<polyline points='15 15, 5 5'></polyline>
</svg>
</div>
</div>;

8
src/components/Sidebar.tsx
View File

@ -12,7 +12,7 @@ const Sidebar = ({ children }: {children?: React.ReactNode}) =>
{
return <div className='sidebar card'>
<div className='flex align-items-center'>
<img className="sidebar-logo" src={logoImg}/>
<img className='sidebar-logo' src={logoImg}/>
<span className='hamburger mr-5 mb-2' onClick={expandMobileMenu}></span>
</div>
{children}
@ -83,7 +83,7 @@ const SidebarMenu = ({ menuItems = [], children }: {menuItems: SidebarMenuItem[]
});
let link = <NavLink className={`sidebar-menu-item ${subElements?.length ? 'has-children' : ''}`} onClick={closeMobileMenu} activeClassName='active open' {...rest} key={label}>
{label}{subElements && <i className="sidebar-menu-item-carrot" onClick={toggleMenu}></i>}
{label}{subElements && <i className='sidebar-menu-item-carrot' onClick={toggleMenu}></i>}
</NavLink>;
if(external)
link = <Link className='sidebar-menu-item' {...rest}>{label}</Link>;
@ -102,8 +102,8 @@ const SidebarMenu = ({ menuItems = [], children }: {menuItems: SidebarMenuItem[]
{elements}
{children}
<div className="parent-menu log-out-menu-item">
<a className="sidebar-menu-item" onClick={logOut} href="#">Log Out</a>
<div className='parent-menu log-out-menu-item'>
<a className='sidebar-menu-item' onClick={logOut} href='#'>Log Out</a>
</div>
</div>;

2
src/components/Table.tsx
View File

@ -33,7 +33,7 @@ export const Table = ({ headerItems, children, items, itemKeys }: TableProps) =>
if(!children && !items)
throw new Error('Missing items or children');
let i = 0;
return <table className="striped hover table-pd" >
return <table className='striped hover table-pd' >
<thead>
<tr>
{headerItems.map(item => <th key={item}>{item}</th>)}

4
src/components/TitledPage.tsx
View File

@ -30,11 +30,11 @@ export const useSubtitle = () =>
const Main = ({ title, crumbs: crumbs, children }: {title: string, crumbs: string[], children: React.ReactNode}) =>
{
const trail = crumbs.length ? `/ ${crumbs.join(' / ')}` : '';
return <div className="page">
return <div className='page'>
<Helmet>
<title>{title} {trail}</title>
</Helmet>
<h2 className="pageTitle">{title} {trail}</h2>
<h2 className='pageTitle'>{title} {trail}</h2>
<div className='card'>
{children}
</div>

8
src/components/UserControls.tsx
View File

@ -32,15 +32,15 @@ const UserControls = () =>
detailsRef.current.removeAttribute('open');
}}>
<details ref={detailsRef} className='dropdown user-controls card'>
<summary className="is-vertical-align">
<summary className='is-vertical-align'>
Hello {user.displayName || user.name}
<img className="profile-picture" src={`/api/users/${user.id}/avatar`}></img>
<img className='profile-picture' src={`/api/users/${user.id}/avatar`}></img>
</summary>
<div className="card">
<div className='card'>
<p className='mb-0'><span className='clickable' onClick={() => navigate('/home/profile')}>Profile</span></p>
<hr className='mt-3 mb-3'/>
<p><a onClick={logOut} className="text-error">Logout</a></p>
<p><a onClick={logOut} className='text-error'>Logout</a></p>
</div>
</details>

34
src/pages/Login.tsx
View File

@ -71,31 +71,31 @@ const CredentialFields = () =>
return <div>
<LoadingBar color='#2685ff' ref={ref} />
<div className="is-center">
<img className="logoImg mb-4" src={logoImg}></img>
<div className='is-center'>
<img className='logoImg mb-4' src={logoImg}></img>
</div>
<div className="card mb-3 is-center dir-column">
<div className='card mb-3 is-center dir-column'>
<h2>Log in</h2>
<form className="loginForm">
<form className='loginForm'>
<input ref={usernameRef} autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
<input ref={passwordRef} autoComplete='off' placeholder='Password' required id='password' type='password' />
<div className='button-group'>
<button className="button primary" onClick={loginClick}>Enter</button>
<button className='button primary' onClick={loginClick}>Enter</button>
<button className='button red' onClick={forgotPassword}>Forgot password</button>
</div>
</form>
{registrationEnabled ? <div className="text-center registerText">
{ 'Don\'t have an account?'}<br/><a onClick={() => navigate('/register')} className="clickable">Register</a> instead!
{registrationEnabled ? <div className='text-center registerText'>
{ 'Don\'t have an account?'}<br/><a onClick={() => navigate('/register')} className='clickable'>Register</a> instead!
</div> : null}
</div>
<div className="card is-center dir-column">
<div className='card is-center dir-column'>
<b>Alternate login methods</b>
<div className="methodsWrapper is-center flex-wrap">
<div className='methodsWrapper is-center flex-wrap'>
{loginMethods.map((method: OAuthProvider) => <div
className='third-party-login'
key={method.name}
@ -104,7 +104,7 @@ const CredentialFields = () =>
window.location.pathname = `/api/login/${method.name}`;
}}>
<img
crossOrigin="anonymous"
crossOrigin='anonymous'
alt={method.name}
src={method.icon}
width={48} height={48}
@ -145,16 +145,16 @@ const TwoFactor = () =>
return <div>
<LoadingBar color='#2685ff' ref={ref} />
<div className="is-center">
<img className="logoImg mb-4" src={logoImg}></img>
<div className='is-center'>
<img className='logoImg mb-4' src={logoImg}></img>
</div>
<div className="card mb-3 is-center dir-column">
<div className='card mb-3 is-center dir-column'>
<h2>Verification Code</h2>
{fail ? <p className="mt-0">Invalid code</p> : null}
<form className="is-center dir-column">
{fail ? <p className='mt-0'>Invalid code</p> : null}
<form className='is-center dir-column'>
<input ref={mfaCode} autoComplete='off' placeholder='Your 2FA code...' required id='2faCode' type='password' />
<button className="button primary mt-1 mb-3" onClick={twoFactorClick}>Enter</button>
<button className='button primary mt-1 mb-3' onClick={twoFactorClick}>Enter</button>
</form>
</div>
</div>;
@ -162,7 +162,7 @@ const TwoFactor = () =>
const Login = ({ title }: {title: string}) =>
{
return <div className="row is-center is-full-screen is-marginless">
return <div className='row is-center is-full-screen is-marginless'>
<div className='loginWrapper col-6 col-6-md col-3-lg'>
<Helmet>
<title>{title}</title>

4
src/pages/Recover.tsx
View File

@ -56,8 +56,8 @@ const Main = () =>
const Recover = ({ title }: {title: string}) =>
{
return <div className="row is-center is-fucll-screen is-marginless">
<div className="col-6 col-6-md col-3-lg">
return <div className='row is-center is-fucll-screen is-marginless'>
<div className='col-6 col-6-md col-3-lg'>
<Helmet>
<title>{title}</title>
</Helmet>

16
src/pages/Register.tsx
View File

@ -40,28 +40,28 @@ const Register = ({ title }: {title: string}) =>
navigate('/login');
};
return <div className="row is-center is-full-screen is-marginless">
return <div className='row is-center is-full-screen is-marginless'>
<LoadingBar color='#2685ff' ref={ref} />
<Helmet>
<title>{title}</title>
</Helmet>
<div className='registerWrapper col-6 col-6-md col-3-lg'>
<div>
<div className="is-center">
<img className="logoImg mb-4" src={logoImg}></img>
<div className='is-center'>
<img className='logoImg mb-4' src={logoImg}></img>
</div>
<div className="card mb-3 is-center dir-column">
<div className='card mb-3 is-center dir-column'>
<h2>Register</h2>
<form className="registerForm">
<form className='registerForm'>
<input ref={usernameRef} autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
<input ref={passwordRef} autoComplete='off' placeholder='Password' required id='password' type='password' />
<button className="button primary" onClick={submit}>Register</button>
<button className='button primary' onClick={submit}>Register</button>
</form>
<div className="text-center registerText">
Have an account?<br/><a onClick={() => navigate('/login')} className="clickable">Log in</a> instead!
<div className='text-center registerText'>
Have an account?<br/><a onClick={() => navigate('/login')} className='clickable'>Log in</a> instead!
</div>
</div>
</div>

10
src/pages/admin/Admin.tsx
View File

@ -20,9 +20,9 @@ const Main = () =>
// console.log(file);
};
return <div className="row">
return <div className='row'>
<div className="col-6-lg col-12">
<div className='col-6-lg col-12'>
<h2>Thematic customisation</h2>
<form>
<input type='text' placeholder='Site name' />
@ -32,7 +32,7 @@ const Main = () =>
</div>
<div className="col-6-lg col-12">
<div className='col-6-lg col-12'>
<h2>Dingus</h2>
</div>
@ -51,8 +51,8 @@ const Admin = () =>
}, [ window.location.href ]);
return <ErrorBoundary>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/users/*" element={<PermissionBarrier permission='administrator:users:*'>
<Route path='/' element={<Main />} />
<Route path='/users/*' element={<PermissionBarrier permission='administrator:users:*'>
<Users/>
</PermissionBarrier>} />
<Route path='/roles/*' element={<PermissionBarrier permission='administrator:roles:*'>

4
src/pages/admin/Flags.tsx
View File

@ -362,7 +362,7 @@ const Main = () =>
}}
placeholder='Flag name or ID'
/>
{availableFilters && <Dropdown className="m-0">
{availableFilters && <Dropdown className='m-0'>
<Dropdown.Header className='p-2'>
{selectedFilters.length === 0
? <p className='placeholder'>Click to filter</p>
@ -398,7 +398,7 @@ const Main = () =>
<h4 className='mt-3'>Flags</h4>
<button onClick={() => togglePopup(true)} className='button primary'>Create</button>
<ToggleSwitch className="mt-3 mb-3" defaultValue={listView} onChange={(event) =>
<ToggleSwitch className='mt-3 mb-3' defaultValue={listView} onChange={(event) =>
{
toggleListView(event.target.checked);
}}>List View:</ToggleSwitch>

12
src/pages/admin/Users.tsx
View File

@ -313,7 +313,7 @@ const UserData = ({ user, updateUser }: {user: UserStruct | null, updateUser: (u
<Dropdown.Header className='w-25-rem p-0'>
{equippedRoles.map(role =>
<div key={role.id} className='card role flex gap-5px align-items-center'>
{role.name} <span className="icon x hover" onClick={(e) =>
{role.name} <span className='icon x hover' onClick={(e) =>
{
e.preventDefault();
deselectRole(role);
@ -345,7 +345,7 @@ const UserData = ({ user, updateUser }: {user: UserStruct | null, updateUser: (u
</div>
<hr />
<div className='ml-4'>
<button onClick={commitPerms} className="button primary">Save</button>
<button onClick={commitPerms} className='button primary'>Save</button>
<button onClick={resetPerms} className='button red'>Reset</button>
</div>
</div>
@ -504,15 +504,15 @@ const UserList = ({ page, pages, setPage, loadState, onRefresh }: UserListProps)
<h4>Invitation Link</h4>
{
link ?
<div className="registerCodeWrapper tooltip"><p onClick={copyToClipboard}>{link}</p></div>
: <button onClick={getSignupCode} className="button primary is-center">Create sign-up link</button>
<div className='registerCodeWrapper tooltip'><p onClick={copyToClipboard}>{link}</p></div>
: <button onClick={getSignupCode} className='button primary is-center'>Create sign-up link</button>
}
<hr />
<h4>Create User</h4>
<form>
<p>Users will be forced to change the password you set here.</p>
<input ref={usernameRef} placeholder="Username" autoComplete="off" type='text' id='username' />
<input ref={passwordRef} placeholder="Password" autoComplete="off" type='password' id='password' />
<input ref={usernameRef} placeholder='Username' autoComplete='off' type='text' id='username' />
<input ref={passwordRef} placeholder='Password' autoComplete='off' type='password' id='password' />
<button onClick={createUser} className='button primary'>Create User</button>
</form>
</div>

14
src/pages/home/Applications.tsx
View File

@ -182,7 +182,7 @@ const Applications = () =>
const Main = () =>
{
return <div className="row">
return <div className='row'>
<PaginatedCard
path='/api/user/applications'
@ -215,12 +215,12 @@ const Applications = () =>
</Table>
</div> */}
<div className="col">
<div className='col'>
<h2>Create Application</h2>
<form>
<input ref={nameField} placeholder="Name" type='text' />
<textarea ref={descField} rows={5} placeholder="Describe your application" />
<button onClick={createApp} className="button primary mt-3">Create</button>
<input ref={nameField} placeholder='Name' type='text' />
<textarea ref={descField} rows={5} placeholder='Describe your application' />
<button onClick={createApp} className='button primary mt-3'>Create</button>
</form>
</div>
</div>;
@ -237,8 +237,8 @@ const Applications = () =>
return <ErrorBoundary>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/:id" element={<Application />} />
<Route path='/' element={<Main />} />
<Route path='/:id' element={<Application />} />
</Routes>
</ErrorBoundary>;
};

6
src/pages/home/Home.tsx
View File

@ -49,9 +49,9 @@ const Home = () =>
}, [ window.location.href ]);
return <ErrorBoundary>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/profile" element={<Profile />} />
<Route path="/applications/*" element={
<Route path='/' element={<Main />} />
<Route path='/profile' element={<Profile />} />
<Route path='/applications/*' element={
<PermissionBarrier permission='applications:*'>
<Applications />
</PermissionBarrier>

11
src/pages/home/Profile.tsx
View File

@ -104,6 +104,12 @@ const Profile = () =>
const newPassRef = useRef<HTMLInputElement>(null);
const newPassRepeatRef = useRef<HTMLInputElement>(null);
useEffect(() =>
{
subtitle.set('Profile');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (!user)
return <div>
Not logged in
@ -170,11 +176,6 @@ const Profile = () =>
window.open('/api/user/connect/discord', '_blank', 'noreferrer');
};
useEffect(() =>
{
subtitle.set('Profile');
}, []);
return <div>
<div className='row'>
<DataCard className='col-6-lg col-12'>

6
src/util/ClickDetector.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef } from 'react';
// Listens for mouse clicks outside of the wrapped element
const alerter = (ref: React.RefObject<HTMLElement>, callback: () => void) =>
const useAlerter = (ref: React.RefObject<HTMLElement>, callback: () => void) =>
{
useEffect(() =>
{
@ -20,7 +20,7 @@ const alerter = (ref: React.RefObject<HTMLElement>, callback: () => void) =>
document.removeEventListener('mousedown', listener);
};
}, [ ref ]);
}, [ callback, ref ]);
};
/**
@ -32,7 +32,7 @@ const alerter = (ref: React.RefObject<HTMLElement>, callback: () => void) =>
const ClickDetector = ({ children, callback, className='', style }: { style?: React.CSSProperties, children: React.ReactNode, callback: () => void, className?: string}) =>
{
const wrapperRef = useRef(null);
alerter(wrapperRef, callback);
useAlerter(wrapperRef, callback);
return (
<div style={style} className={`click-detector ${className}`} ref={wrapperRef}>

8
src/views/PermissionsView.tsx
View File

@ -15,7 +15,7 @@ export const Permission = ({ name, value, chain, updatePerms, readOnly = false }
updatePerms(chain, val);
};
return <li className="flex is-vertical-align space-between">
return <li className='flex is-vertical-align space-between'>
<label>{name}</label>
<input readOnly={readOnly} ref={inputRef} onChange={onChange} max={10} min={0} type='number' defaultValue={value as number}></input>
</li>;
@ -36,9 +36,9 @@ export const PermissionGroup = ({ name, value, chain, updatePerms, readOnly = fa
elements.push(<Permission {...props} />);
}
return <li>
<input type="checkbox" className="collapsible" id={`${chain}_${name}_collapsible`}></input>
<input type='checkbox' className='collapsible' id={`${chain}_${name}_collapsible`}></input>
<label htmlFor={`${chain}_${name}_collapsible`} >
<div className="groupName">
<div className='groupName'>
<b>Group: {name}</b>
</div>
</label>
@ -97,7 +97,7 @@ export const Permissions = ({ perms, onUpdate }: { perms: PermissionsStruct, onU
elements.push(<Elem {...props} />);
}
return <ul className="tree w-max-fit-content w-min-35-rem">
return <ul className='tree w-max-fit-content w-min-35-rem'>
{elements}
</ul>;
};

8
src/views/RateLimitsView.tsx
View File

@ -10,7 +10,7 @@ const RateLimit = ({ route, limit }: {route: string, limit: RL}) =>
<label>Time</label>
<input min={0} defaultValue={limit.time} type='number' />
<label>Enabled</label>
<div className="check-box">
<div className='check-box'>
<input defaultChecked={!limit.disabled} type='checkbox' />
</div>
</Fragment>;
@ -21,14 +21,14 @@ export const RateLimits = ({ rateLimits }: {rateLimits: RLs}) =>
const routes = Object.keys(rateLimits);
const elements = routes.map((route, index) =>
{
return <div key={index} className="card">
<RateLimit {...{ route, limit:rateLimits[route], index }} />
return <div key={index} className='card'>
<RateLimit {...{ route, limit: rateLimits[route], index }} />
</div>;
});
return <div className='col-6-lg col-12'>
<h2>Rate Limits</h2>
<div className="flex flex-wrap">
<div className='flex flex-wrap'>
{elements}
</div>