frontend update
This commit is contained in:
parent
84d79fcb3a
commit
0418118841
@ -1,15 +1,16 @@
|
||||
import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
|
||||
import API from "shared/api";
|
||||
import Icon from "shared/elements/icon";
|
||||
import LoginForm from "./views/login";
|
||||
import LoginForm from "shared/views/login";
|
||||
import {Alert} from "@material-ui/lab";
|
||||
import {Button} from "@material-ui/core";
|
||||
import { LocaleContext } from "shared/locale";
|
||||
import {LocaleContext} from "shared/locale";
|
||||
import AdminDashboard from "./AdminDashboard";
|
||||
|
||||
export default function App() {
|
||||
|
||||
const api = useMemo(() => new API(), []);
|
||||
|
||||
const [user, setUser] = useState(null);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [info, setInfo] = useState({});
|
||||
|
@ -32,7 +32,7 @@ export default function GroupListView(props) {
|
||||
|
||||
const actionColumn = (() => {
|
||||
let column = new DataColumn(L("general.actions"), null, false);
|
||||
column.renderData = (entry) => <>
|
||||
column.renderData = (L, entry) => <>
|
||||
<IconButton size={"small"} title={L("general.edit")} onClick={() => navigate("/admin/group/" + entry.id)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
|
@ -1,8 +1,6 @@
|
||||
import * as React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import {format, getDaysInMonth} from "date-fns";
|
||||
import {Collapse} from "react-collapse";
|
||||
import {Bar} from "react-chartjs-2";
|
||||
import {CircularProgress, Icon} from "@material-ui/core";
|
||||
import {useCallback, useEffect, useState} from "react";
|
||||
|
||||
|
@ -33,7 +33,7 @@ export default function UserListView(props) {
|
||||
|
||||
const groupColumn = (() => {
|
||||
let column = new DataColumn(L("account.groups"), "groups");
|
||||
column.renderData = (entry) => {
|
||||
column.renderData = (L, entry) => {
|
||||
return Object.values(entry.groups).map(group => <Chip key={"group-" + group.id} label={group.name}/>)
|
||||
}
|
||||
return column;
|
||||
@ -41,7 +41,7 @@ export default function UserListView(props) {
|
||||
|
||||
const actionColumn = (() => {
|
||||
let column = new DataColumn(L("general.actions"), null, false);
|
||||
column.renderData = (entry) => <>
|
||||
column.renderData = (L, entry) => <>
|
||||
<IconButton size={"small"} title={L("general.edit")} onClick={() => navigate("/admin/user/" + entry.id)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
|
@ -48,7 +48,7 @@
|
||||
"react-chartjs-2": "^5.0.1",
|
||||
"react-collapse": "^5.1.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.4.3",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"sprintf-js": "^1.1.2"
|
||||
},
|
||||
"browserslist": {
|
||||
|
@ -1,8 +1,11 @@
|
||||
import {USER_GROUP_ADMIN} from "./constants";
|
||||
|
||||
export default class API {
|
||||
constructor() {
|
||||
this.loggedIn = false;
|
||||
this.user = null;
|
||||
this.session = null;
|
||||
this.permissions = [];
|
||||
}
|
||||
|
||||
csrfToken() {
|
||||
@ -26,6 +29,40 @@ export default class API {
|
||||
return res;
|
||||
}
|
||||
|
||||
hasPermission(method) {
|
||||
if (!this.permissions) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const permission of this.permissions) {
|
||||
if (method.endsWith("*") && permission.toLowerCase().startsWith(method.toLowerCase().substr(0, method.length - 1))) {
|
||||
return true;
|
||||
} else if (method.toLowerCase() === permission.toLowerCase()) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
hasGroup(groupIdOrName) {
|
||||
if (this.loggedIn && this.user?.groups) {
|
||||
if (!isNaN(groupIdOrName) && (typeof groupIdOrName === 'string' && groupIdOrName.match(/^\d+$/))) {
|
||||
return this.user.groups.hasOwnProperty(groupIdOrName);
|
||||
} else {
|
||||
let userGroups = Object.values(this.user.groups);
|
||||
return userGroups.includes(groupIdOrName);
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
isAdmin() {
|
||||
return this.hasGroup(USER_GROUP_ADMIN);
|
||||
}
|
||||
|
||||
/** Info **/
|
||||
async info() {
|
||||
return this.apiCall("info");
|
||||
@ -41,6 +78,7 @@ export default class API {
|
||||
let data = await response.json();
|
||||
if (data) {
|
||||
this.loggedIn = data["loggedIn"];
|
||||
this.permissions = data["permissions"] ? data["permissions"].map(s => s.toLowerCase()) : [];
|
||||
if (this.loggedIn) {
|
||||
this.session = data["session"];
|
||||
this.user = data["user"];
|
||||
@ -63,6 +101,9 @@ export default class API {
|
||||
const res = await this.apiCall("user/logout");
|
||||
if (res.success) {
|
||||
this.loggedIn = false;
|
||||
this.permissions = [];
|
||||
this.session = null;
|
||||
this.user = null;
|
||||
}
|
||||
|
||||
return res;
|
||||
@ -164,7 +205,17 @@ export default class API {
|
||||
return this.apiCall("language/getEntries", {code: code, modules: modules});
|
||||
}
|
||||
|
||||
/*
|
||||
/** ApiKeyAPI **/
|
||||
// API-Key API
|
||||
async getApiKeys(showActiveOnly = false) {
|
||||
return this.apiCall("apiKey/fetch", { showActiveOnly: showActiveOnly });
|
||||
}
|
||||
|
||||
} */
|
||||
async createApiKey() {
|
||||
return this.apiCall("apiKey/create");
|
||||
}
|
||||
|
||||
async revokeKey(id) {
|
||||
return this.apiCall("apiKey/revoke", { id: id });
|
||||
}
|
||||
};
|
7
react/shared/constants.js
Normal file
7
react/shared/constants.js
Normal file
@ -0,0 +1,7 @@
|
||||
export const API_DATETIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
|
||||
export const API_DATE_FORMAT = "yyyy-MM-dd";
|
||||
export const API_TIME_FORMAT = "HH:mm:ss";
|
||||
|
||||
export const USER_GROUP_ADMIN = 1;
|
||||
export const USER_GROUP_SUPPORT = 2;
|
||||
export const USER_GROUP_MODERATOR = 3;
|
@ -8,6 +8,7 @@ import "./data-table.css";
|
||||
import {LocaleContext} from "../locale";
|
||||
import clsx from "clsx";
|
||||
import {Box} from "@mui/material";
|
||||
import {formatDate} from "../util";
|
||||
|
||||
|
||||
export function DataTable(props) {
|
||||
@ -86,7 +87,7 @@ export function DataTable(props) {
|
||||
for (const [key, entry] of Object.entries(data)) {
|
||||
let row = [];
|
||||
for (const [index, column] of columns.entries()) {
|
||||
row.push(<TableCell key={"col-" + index}>{column.renderData(entry)}</TableCell>);
|
||||
row.push(<TableCell key={"col-" + index}>{column.renderData(L, entry)}</TableCell>);
|
||||
}
|
||||
|
||||
rows.push(<TableRow key={"row-" + key}>{ row }</TableRow>);
|
||||
@ -269,7 +270,7 @@ export class DataColumn {
|
||||
throw new Error("Not implemented: compare");
|
||||
}
|
||||
|
||||
renderData(entry) {
|
||||
renderData(L, entry) {
|
||||
return entry[this.field]
|
||||
}
|
||||
|
||||
@ -320,4 +321,8 @@ export class DateTimeColumn extends DataColumn {
|
||||
|
||||
return a - b;
|
||||
}
|
||||
|
||||
renderData(L, entry) {
|
||||
return formatDate(L, super.renderData(L, entry));
|
||||
}
|
||||
}
|
47
react/shared/elements/dialog.jsx
Normal file
47
react/shared/elements/dialog.jsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function Dialog(props) {
|
||||
|
||||
const show = props.show;
|
||||
const classes = ["modal", "fade"];
|
||||
const style = { paddingRight: "12px", display: (show ? "block" : "none") };
|
||||
const onClose = props.onClose || function() { };
|
||||
const onOption = props.onOption || function() { };
|
||||
const options = props.options || ["Close"];
|
||||
|
||||
let buttons = [];
|
||||
for (let name of options) {
|
||||
let type = "default";
|
||||
if (name === "Yes") type = "warning";
|
||||
else if(name === "No") type = "danger";
|
||||
|
||||
buttons.push(
|
||||
<button type="button" key={"button-" + name} className={"btn btn-" + type}
|
||||
data-dismiss={"modal"} onClick={() => { onClose(); onOption(name); }}>
|
||||
{name}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clsx(classes, show && "show")} style={style} aria-modal={"true"} onClick={() => onClose()}>
|
||||
<div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h4 className="modal-title">{props.title}</h4>
|
||||
<button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={() => onClose()}>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>{props.message}</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
{ buttons }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
52
react/shared/elements/language-selection.js
Normal file
52
react/shared/elements/language-selection.js
Normal file
@ -0,0 +1,52 @@
|
||||
import React, {useCallback, useContext, useState} from 'react';
|
||||
import {Box} from "@material-ui/core";
|
||||
import {makeStyles} from "@material-ui/core/styles";
|
||||
import {LocaleContext} from "shared/locale";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
languageFlag: {
|
||||
margin: theme.spacing(0.2),
|
||||
cursor: "pointer",
|
||||
border: 0,
|
||||
}
|
||||
}));
|
||||
|
||||
export default function LanguageSelection(props) {
|
||||
|
||||
const api = props.api;
|
||||
const classes = useStyles();
|
||||
const [languages, setLanguages] = useState(null);
|
||||
const {translate: L, setLanguageByCode} = useContext(LocaleContext);
|
||||
|
||||
const onSetLanguage = useCallback((code) => {
|
||||
setLanguageByCode(api, code).then((res) => {
|
||||
if (!res.success) {
|
||||
alert(res.msg);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
let flags = [];
|
||||
if (languages === null) {
|
||||
api.getLanguages().then((res) => {
|
||||
if (res.success) {
|
||||
setLanguages(res.languages);
|
||||
} else {
|
||||
setLanguages({});
|
||||
alert(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
for (const language of Object.values(languages)) {
|
||||
let key = `lang-${language.code}`;
|
||||
flags.push(<button type={"button"} title={language.name} onClick={() => onSetLanguage(language.code)}
|
||||
key={key} className={classes.languageFlag} >
|
||||
<img alt={key} src={`/img/icons/lang/${language.code}.gif`} />
|
||||
</button>);
|
||||
}
|
||||
}
|
||||
|
||||
return <Box mt={1}>
|
||||
{L("general.language") + ": "} { flags }
|
||||
</Box>
|
||||
}
|
@ -33,7 +33,7 @@ function LocaleProvider(props) {
|
||||
const [entries, dispatch] = useReducer(reducer, window.languageEntries || {});
|
||||
const [currentLocale, setCurrentLocale] = useState(window.languageCode || "en_US");
|
||||
|
||||
const translate = useCallback((key) => {
|
||||
const translate = useCallback((key, defaultTranslation = null) => {
|
||||
if (currentLocale) {
|
||||
if (entries.hasOwnProperty(currentLocale)) {
|
||||
let [module, variable] = key.split(".");
|
||||
@ -46,7 +46,7 @@ function LocaleProvider(props) {
|
||||
}
|
||||
}
|
||||
|
||||
return "[" + key + "]";
|
||||
return defaultTranslation || "[" + key + "]";
|
||||
}, [currentLocale, entries]);
|
||||
|
||||
const hasModule = useCallback((code, module) => {
|
||||
|
@ -1,3 +1,6 @@
|
||||
import {format, parse} from "date-fns";
|
||||
import {API_DATE_FORMAT, API_DATETIME_FORMAT} from "./constants";
|
||||
|
||||
function humanReadableSize(bytes, dp = 1) {
|
||||
const thresh = 1024;
|
||||
|
||||
@ -44,4 +47,35 @@ const getBaseUrl = () => {
|
||||
return window.location.protocol + "//" + window.location.host;
|
||||
}
|
||||
|
||||
export { humanReadableSize, removeParameter, getParameter, encodeText, decodeText, getBaseUrl };
|
||||
const formatDate = (L, apiDate) => {
|
||||
if (!(apiDate instanceof Date)) {
|
||||
if (!isNaN(apiDate)) {
|
||||
apiDate = new Date(apiDate);
|
||||
} else {
|
||||
apiDate = parse(apiDate, API_DATE_FORMAT, new Date());
|
||||
}
|
||||
}
|
||||
|
||||
return format(apiDate, L("general.date_format", "YYY/MM/dd"));
|
||||
}
|
||||
|
||||
const formatDateTime = (L, apiDate) => {
|
||||
if (!(apiDate instanceof Date)) {
|
||||
if (!isNaN(apiDate)) {
|
||||
apiDate = new Date(apiDate);
|
||||
} else {
|
||||
apiDate = parse(apiDate, API_DATETIME_FORMAT, new Date());
|
||||
}
|
||||
}
|
||||
|
||||
return format(apiDate, L("general.date_time_format", "YYY/MM/dd HH:mm:ss"));
|
||||
}
|
||||
|
||||
const upperFirstChars = (str) => {
|
||||
return str.split(" ")
|
||||
.map(block => block.charAt(0).toUpperCase() + block.substring(1))
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
export { humanReadableSize, removeParameter, getParameter, encodeText, decodeText, getBaseUrl,
|
||||
formatDate, formatDateTime, upperFirstChars };
|
308
react/shared/views/login.jsx
Normal file
308
react/shared/views/login.jsx
Normal file
@ -0,0 +1,308 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox, CircularProgress, Container,
|
||||
FormControlLabel,
|
||||
Grid,
|
||||
Link,
|
||||
TextField,
|
||||
Typography
|
||||
} from "@material-ui/core";
|
||||
|
||||
import {makeStyles} from '@material-ui/core/styles';
|
||||
import {Alert} from '@material-ui/lab';
|
||||
import React, {useCallback, useContext, useEffect, useState} from "react";
|
||||
import ReplayIcon from '@material-ui/icons/Replay';
|
||||
import LanguageSelection from "../elements/language-selection";
|
||||
import {decodeText, encodeText, getParameter, removeParameter} from "shared/util";
|
||||
import Icon from "shared/elements/icon";
|
||||
import {LocaleContext} from "shared/locale";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
paper: {
|
||||
marginTop: theme.spacing(8),
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
},
|
||||
avatar: {
|
||||
margin: theme.spacing(2),
|
||||
width: "60px",
|
||||
height: "60px"
|
||||
},
|
||||
form: {
|
||||
width: '100%', // Fix IE 11 issue.
|
||||
marginTop: theme.spacing(1),
|
||||
},
|
||||
submit: {
|
||||
margin: theme.spacing(3, 0, 2),
|
||||
},
|
||||
logo: {
|
||||
marginRight: theme.spacing(3)
|
||||
},
|
||||
headline: {
|
||||
width: "100%",
|
||||
},
|
||||
container: {
|
||||
marginTop: theme.spacing(5),
|
||||
paddingBottom: theme.spacing(1),
|
||||
borderColor: theme.palette.primary.main,
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
borderRadius: 5
|
||||
},
|
||||
buttons2FA: {
|
||||
marginTop: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
error2FA: {
|
||||
marginTop: theme.spacing(2),
|
||||
marginBottom: theme.spacing(2),
|
||||
"& > div": {
|
||||
fontSize: 16
|
||||
},
|
||||
"& > button": {
|
||||
marginTop: theme.spacing(1)
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
export default function LoginForm(props) {
|
||||
|
||||
const api = props.api;
|
||||
const classes = useStyles();
|
||||
let [username, setUsername] = useState("");
|
||||
let [password, setPassword] = useState("");
|
||||
let [rememberMe, setRememberMe] = useState(true);
|
||||
let [isLoggingIn, setLoggingIn] = useState(false);
|
||||
let [emailConfirmed, setEmailConfirmed] = useState(null);
|
||||
let [tfaCode, set2FACode] = useState("");
|
||||
let [tfaState, set2FAState] = useState(0); // 0: not sent, 1: sent, 2: retry
|
||||
let [tfaError, set2FAError] = useState("");
|
||||
let [error, setError] = useState("");
|
||||
let [loaded, setLoaded] = useState(false);
|
||||
|
||||
const {translate: L, currentLocale, requestModules} = useContext(LocaleContext);
|
||||
|
||||
const onUpdateLocale = useCallback(() => {
|
||||
requestModules(api, ["general", "account"], currentLocale).then(data => {
|
||||
setLoaded(true);
|
||||
if (!data.success) {
|
||||
alert(data.msg);
|
||||
}
|
||||
});
|
||||
}, [currentLocale]);
|
||||
|
||||
useEffect(() => {
|
||||
onUpdateLocale();
|
||||
}, [currentLocale]);
|
||||
|
||||
const onLogin = useCallback(() => {
|
||||
if (!isLoggingIn) {
|
||||
setError("");
|
||||
setLoggingIn(true);
|
||||
removeParameter("success");
|
||||
api.login(username, password, rememberMe).then((res) => {
|
||||
set2FAState(0);
|
||||
setLoggingIn(false);
|
||||
setPassword("");
|
||||
if (!res.success) {
|
||||
setEmailConfirmed(res.emailConfirmed);
|
||||
setError(res.msg);
|
||||
} else {
|
||||
props.onLogin();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [api, isLoggingIn, password, props, rememberMe, username]);
|
||||
|
||||
const onSubmit2FA = useCallback(() => {
|
||||
setLoggingIn(true);
|
||||
props.onTotp2FA(tfaCode, (res) => {
|
||||
setLoggingIn(false);
|
||||
});
|
||||
}, [tfaCode, props]);
|
||||
|
||||
const onCancel2FA = useCallback(() => {
|
||||
props.onLogout();
|
||||
}, [props]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!api.loggedIn || !api.user) {
|
||||
return;
|
||||
}
|
||||
|
||||
let twoFactor = api.user["2fa"];
|
||||
if (!twoFactor || !twoFactor.confirmed ||
|
||||
twoFactor.authenticated || twoFactor.type !== "fido") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (tfaState === 0) {
|
||||
set2FAState(1);
|
||||
set2FAError("");
|
||||
navigator.credentials.get({
|
||||
publicKey: {
|
||||
challenge: encodeText(window.atob(twoFactor.challenge)),
|
||||
allowCredentials: [{
|
||||
id: encodeText(window.atob(twoFactor.credentialID)),
|
||||
type: "public-key",
|
||||
}],
|
||||
userVerification: "discouraged",
|
||||
},
|
||||
}).then((res) => {
|
||||
let credentialID = res.id;
|
||||
let clientDataJson = decodeText(res.response.clientDataJSON);
|
||||
let authData = window.btoa(decodeText(res.response.authenticatorData));
|
||||
let signature = window.btoa(decodeText(res.response.signature));
|
||||
props.onKey2FA(credentialID, clientDataJson, authData, signature, res => {
|
||||
if (!res.success) {
|
||||
set2FAState(2);
|
||||
}
|
||||
});
|
||||
}).catch(e => {
|
||||
set2FAState(2);
|
||||
set2FAError(e.toString());
|
||||
});
|
||||
}
|
||||
}, [api.loggedIn, api.user, tfaState, props]);
|
||||
|
||||
const createForm = () => {
|
||||
|
||||
// 2FA
|
||||
if (api.loggedIn && api.user["2fa"]) {
|
||||
return <>
|
||||
<div>{L("account.2fa_title")}: {api.user["2fa"].type}</div>
|
||||
{ api.user["2fa"].type === "totp" ?
|
||||
<TextField
|
||||
variant="outlined" margin="normal"
|
||||
id="code" label={L("account.6_digit_code")} name="code"
|
||||
autoComplete="code"
|
||||
required fullWidth autoFocus
|
||||
value={tfaCode} onChange={(e) => set2FACode(e.target.value)}
|
||||
/> : <>
|
||||
{L("account.2fa_text")}
|
||||
<Box mt={2} textAlign={"center"}>
|
||||
{tfaState !== 2
|
||||
? <CircularProgress/>
|
||||
: <div className={classes.error2FA}>
|
||||
<div>{L("general.something_went_wrong")}:<br />{tfaError}</div>
|
||||
<Button onClick={() => set2FAState(0)}
|
||||
variant={"outlined"} color={"secondary"} size={"small"}>
|
||||
<ReplayIcon /> {L("general.retry")}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
</Box>
|
||||
</>
|
||||
}
|
||||
{
|
||||
error ? <Alert severity="error">{error}</Alert> : <></>
|
||||
}
|
||||
<Grid container spacing={2} className={classes.buttons2FA}>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
fullWidth variant="contained"
|
||||
color="inherit" size={"medium"}
|
||||
disabled={isLoggingIn}
|
||||
onClick={onCancel2FA}>
|
||||
{L("general.go_back")}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
type="submit" fullWidth variant="contained"
|
||||
color="primary" size={"medium"}
|
||||
disabled={isLoggingIn || api.user["2fa"].type !== "totp"}
|
||||
onClick={onSubmit2FA}>
|
||||
{isLoggingIn ?
|
||||
<>{L("general.submitting")}… <CircularProgress size={15}/></> :
|
||||
L("general.submit")
|
||||
}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
}
|
||||
|
||||
return <>
|
||||
<TextField
|
||||
variant="outlined" margin="normal"
|
||||
id="username" label={L("account.username")} name="username"
|
||||
autoComplete="username" disabled={isLoggingIn}
|
||||
required fullWidth autoFocus
|
||||
value={username} onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
variant="outlined" margin="normal"
|
||||
name="password" label={L("account.password")} type="password" id="password"
|
||||
autoComplete="current-password"
|
||||
required fullWidth disabled={isLoggingIn}
|
||||
value={password} onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox value="remember" color="primary"/>}
|
||||
label={L("account.remember_me")}
|
||||
checked={rememberMe} onClick={(e) => setRememberMe(!rememberMe)}
|
||||
/>
|
||||
{
|
||||
error
|
||||
? <Alert severity="error">
|
||||
{error}
|
||||
{emailConfirmed === false
|
||||
? <> <Link href={"/resendConfirmation"}>Click here</Link> to resend the confirmation email.</>
|
||||
: <></>
|
||||
}
|
||||
</Alert>
|
||||
: (successMessage
|
||||
? <Alert severity="success">{successMessage}</Alert>
|
||||
: <></>)
|
||||
}
|
||||
<Button
|
||||
type={"submit"} fullWidth variant={"contained"}
|
||||
color={"primary"} className={classes.submit}
|
||||
size={"large"}
|
||||
disabled={isLoggingIn}
|
||||
onClick={onLogin}>
|
||||
{isLoggingIn ?
|
||||
<>{L("account.signing_in")}… <CircularProgress size={15}/></> :
|
||||
L("account.sign_in")
|
||||
}
|
||||
</Button>
|
||||
<Grid container>
|
||||
<Grid item xs>
|
||||
<Link href="/resetPassword" variant="body2">
|
||||
{L("account.forgot_password")}
|
||||
</Link>
|
||||
</Grid>
|
||||
{ props.info.registrationAllowed ?
|
||||
<Grid item>
|
||||
<Link href="/register" variant="body2">
|
||||
{L("account.register_text")}
|
||||
</Link>
|
||||
</Grid> : <></>
|
||||
}
|
||||
</Grid>
|
||||
</>
|
||||
}
|
||||
|
||||
if (!loaded) {
|
||||
return <b>{L("general.loading")}… <Icon icon={"spinner"}/></b>
|
||||
}
|
||||
|
||||
let successMessage = getParameter("success");
|
||||
return <Container maxWidth={"xs"} className={classes.container}>
|
||||
<div className={classes.paper}>
|
||||
<div className={classes.headline}>
|
||||
<Typography component="h1" variant="h4">
|
||||
<img src={"/img/icons/logo.png"} alt={"Logo"} height={48} className={classes.logo}/>
|
||||
{props.info.siteName}
|
||||
</Typography>
|
||||
</div>
|
||||
<form className={classes.form} onSubmit={(e) => e.preventDefault()}>
|
||||
{ createForm() }
|
||||
<LanguageSelection api={api} />
|
||||
</form>
|
||||
</div>
|
||||
</Container>
|
||||
}
|
Loading…
Reference in New Issue
Block a user