Linter rules update
This commit is contained in:
parent
e68de7f432
commit
29da1ceace
@ -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",
|
||||
|
||||
@ -77,13 +77,13 @@ const App = () =>
|
||||
|
||||
const menuItems: SidebarMenuItem[] = [
|
||||
{
|
||||
to: '/home', label: 'Home', items: [
|
||||
to: '/home', label: 'Home', items: [
|
||||
{ to: '/profile', label: 'Profile', relative: true },
|
||||
{ to: '/applications', label: 'Applications', relative: true, permission: [ 'applications:*', 1 ] }
|
||||
]
|
||||
},
|
||||
{
|
||||
to: '/admin', label: 'Admin', permission: [ 'administrator:*', 1 ], items: [
|
||||
to: '/admin', label: 'Admin', permission: [ 'administrator:*', 1 ], items: [
|
||||
{ to: '/users', label: 'Users', relative: true, permission: [ 'administrator:users:*', 1 ] },
|
||||
{ to: '/roles', label: 'Roles', relative: true, permission: [ 'administrator:roles:*', 1 ] },
|
||||
{ to: '/flags', label: 'Flags', relative: true, permission: [ 'administrator:flags:*', 1 ] },
|
||||
@ -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> | 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> | Front-end magic by <a href='https://d3vision.dev' target='_blank' rel='noreferrer'>D3vision</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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 'n' drop a file here</span>
|
||||
return <label onDrop={onDrop} onDragOver={onDragOver} htmlFor='fileUpload' className='drop-container'>
|
||||
<span className='drop-title'>Drag 'n' 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>;
|
||||
@ -240,9 +240,9 @@ const DropdownComp = ({ children, className = '', onToggle }: DropdownProps) =>
|
||||
};
|
||||
|
||||
const Dropdown = Object.assign(DropdownComp, {
|
||||
Header: DropdownHeader,
|
||||
Header: DropdownHeader,
|
||||
ItemList: DropdownItemList,
|
||||
Item: DropdownItem
|
||||
Item: DropdownItem
|
||||
});
|
||||
|
||||
export type InputElementType =
|
||||
|
||||
@ -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>;
|
||||
};
|
||||
|
||||
|
||||
@ -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>;
|
||||
@ -194,8 +194,8 @@ type BasePaginatedCardProps = {
|
||||
// onlineList?: string
|
||||
}
|
||||
export const BasePaginatedCard = ({ children, data,
|
||||
className, id, tableDivClass, formatter, callback,
|
||||
page, pages, setPage, loadState, onRefresh }: BasePaginatedCardProps) =>
|
||||
className, id, tableDivClass, formatter, callback,
|
||||
page, pages, setPage, loadState, onRefresh }: BasePaginatedCardProps) =>
|
||||
{
|
||||
if (!(children instanceof Array))
|
||||
children = [ children ];
|
||||
|
||||
@ -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>;
|
||||
|
||||
|
||||
@ -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>)}
|
||||
|
||||
@ -12,10 +12,10 @@ type SubtitleContext = {
|
||||
}
|
||||
const Context = React.createContext<SubtitleContext>({
|
||||
breadcrumbs: [],
|
||||
set: () => null,
|
||||
clear: () => null,
|
||||
push: () => null,
|
||||
pop: () => null,
|
||||
set: () => null,
|
||||
clear: () => null,
|
||||
push: () => null,
|
||||
pop: () => null,
|
||||
});
|
||||
|
||||
let TO: NodeJS.Timeout | null = null;
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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:*'>
|
||||
|
||||
@ -8,10 +8,10 @@ import ClickDetector from '../../util/ClickDetector';
|
||||
import { useSubtitle } from '../../components/TitledPage';
|
||||
|
||||
const emptyFlag: FlagCreateData = {
|
||||
name: '',
|
||||
env: '',
|
||||
consumer: '',
|
||||
value: '',
|
||||
name: '',
|
||||
env: '',
|
||||
consumer: '',
|
||||
value: '',
|
||||
hierarchy: ''
|
||||
};
|
||||
|
||||
@ -251,7 +251,7 @@ const CreateFlag = ({ close, submit }: { close: () => void, submit: (data: FlagC
|
||||
<h4>Create Flag</h4>
|
||||
<form onSubmit={createFlag} onReset={cancel}>
|
||||
<label>Name</label>
|
||||
<input onChange={handleChange} minLength={4} name='name' autoComplete='off' placeholder='Name' type='text' required />
|
||||
<input onChange={handleChange} minLength={4} name='name' autoComplete='off' placeholder='Name' type='text' required />
|
||||
<label>Environment</label>
|
||||
<input onChange={handleChange} name='env' autoComplete='off' placeholder='Environment' type='text' required />
|
||||
<label>Consumer</label>
|
||||
@ -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>
|
||||
|
||||
@ -16,10 +16,10 @@ type UserFilters = {
|
||||
//
|
||||
}
|
||||
const emptyUsersState = {
|
||||
users: new Map(), setUsers: () => null,
|
||||
roles: new Map(), setRoles: () => null,
|
||||
users: new Map(), setUsers: () => null,
|
||||
roles: new Map(), setRoles: () => null,
|
||||
refreshState: false, refreshUsers: () => null,
|
||||
searchFilter: {}, setFilter: () => null
|
||||
searchFilter: {}, setFilter: () => null
|
||||
};
|
||||
type UsersContextObj = {
|
||||
users: Map<string, UserStruct>, setUsers: (users: Map<string, UserStruct>) => void,
|
||||
@ -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>
|
||||
@ -558,7 +558,7 @@ const Main = () =>
|
||||
}, [ refresh, setRoles ]);
|
||||
|
||||
return <Routes>
|
||||
<Route path='/*' element={<UserList {...{ page, pages, setPage, loadState, onRefresh: () => setRefresh(val => !val) }} />} />
|
||||
<Route path='/*' element={<UserList {...{ page, pages, setPage, loadState, onRefresh: () => setRefresh(val => !val) }} />} />
|
||||
<Route path='/:userId/*' element={<User refreshList={() => setRefresh(val => !val)} />} />
|
||||
{/* <Route path='/:userId/applications/:appId' element={<Application />} /> */}
|
||||
</Routes>;
|
||||
|
||||
@ -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>;
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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'>
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -23,11 +23,11 @@ class ErrorBoundary extends React.Component<BoundaryProps, StateProps>
|
||||
{
|
||||
super(props);
|
||||
this.state = {
|
||||
reAuth: false,
|
||||
reAuth: false,
|
||||
chunkIssue: false,
|
||||
active: false,
|
||||
error: null,
|
||||
info: null
|
||||
active: false,
|
||||
error: null,
|
||||
info: null
|
||||
};
|
||||
this.fallback = props.fallback;
|
||||
}
|
||||
|
||||
@ -347,7 +347,7 @@ export const dateString = (ts: number) =>
|
||||
return new Date(ts).toLocaleString(navigator.language);
|
||||
};
|
||||
|
||||
export const randomString = (len = 32) =>
|
||||
export const randomString = (len = 32) =>
|
||||
{
|
||||
let result = '';
|
||||
for (let i = 50; i > 0; --i)
|
||||
|
||||
@ -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>;
|
||||
};
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user