Projekte/web-base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

localization

Browse Source
This commit is contained in:
Roman
2022-11-30 23:15:52 +01:00
parent 1ba27e4f40
commit 3e3b7d7b2b
16 changed files with 176 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
react/admin-panel/src/App.jsx
View File

@@ -11,19 +11,24 @@ import Sidebar from "./elements/sidebar";
import LoginForm from "./views/login";
import {Alert} from "@material-ui/lab";
import {Button} from "@material-ui/core";
import {Locale} from "shared/locale";
import { LocaleContext } from "shared/locale";
const L = (key) => {
return "<nope>";
}
export default class AdminDashboard extends React.Component {
static contextType = LocaleContext;
constructor(props) {
super(props);
this.api = new API();
this.locale = Locale.getInstance();
this.state = {
loaded: false,
dialog: { onClose: () => this.hideDialog() },
info: { },
error: null,
error: null
};
}
@@ -40,6 +45,7 @@ export default class AdminDashboard extends React.Component {
}
onInit() {
// return;
this.setState({ ...this.state, loaded: false, error: null });
this.api.getLanguageEntries("general").then(data => {
if (data.success) {
@@ -68,10 +74,6 @@ export default class AdminDashboard extends React.Component {
this.onInit();
}
onUpdateLocale() {
this.setState({ ...this.state, locale: currentLocale })
}
onLogin(username, password, rememberMe, callback) {
this.setState({ ...this.state, error: "" });
return this.api.login(username, password, rememberMe).then((res) => {
@@ -126,14 +128,14 @@ export default class AdminDashboard extends React.Component {
if (!this.state.loaded) {
if (this.state.error) {
return <Alert severity={"error"} title={"An error occurred"}>
return <Alert severity={"error"} title={L("general.error_occurred")}>
<div>{this.state.error}</div>
<Button type={"button"} variant={"outlined"} onClick={() => this.onInit()}>
Retry
</Button>
</Alert>
} else {
return <b>Loading… <Icon icon={"spinner"}/></b>
return <b>{L("general.loading")}… <Icon icon={"spinner"}/></b>
}
}
@@ -141,8 +143,6 @@ export default class AdminDashboard extends React.Component {
showDialog: this.showDialog.bind(this),
api: this.api,
info: this.state.info,
locale: this.locale,
onUpdateLocale: this.onUpdateLocale.bind(this),
onLogout: this.onLogout.bind(this),
onLogin: this.onLogin.bind(this),
onTotp2FA: this.onTotp2FA.bind(this),
@@ -179,7 +179,7 @@ export default class AdminDashboard extends React.Component {
<Dialog {...this.state.dialog}/>
</section>
</div>
<Footer />
<Footer info={this.state.info} />
</BrowserRouter>
}
}

4
react/admin-panel/src/elements/footer.jsx
View File

@@ -1,11 +1,11 @@
import React from "react";
export default function Footer() {
export default function Footer(props) {
return (
<footer className={"main-footer"}>
Theme: <strong>Copyright © 2014-2019 <a href={"https://adminlte.io"}>AdminLTE.io</a>. <b>Version</b> 3.0.3</strong>&nbsp;
CMS: <strong><a href={"https://git.romanh.de/Projekte/web-base"}>WebBase</a></strong>. <b>Version</b> 1.2.6
CMS: <strong><a href={"https://git.romanh.de/Projekte/web-base"}>WebBase</a></strong>. <b>Version</b> {props.info.version}
</footer>
)
}

17
react/admin-panel/src/elements/language-selection.js
View File

@@ -1,7 +1,7 @@
import React, {useState} from 'react';
import {L} from "shared/locale";
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: {
@@ -15,17 +15,16 @@ export default function LanguageSelection(props) {
const api = props.api;
const classes = useStyles();
let [languages, setLanguages] = useState(null);
const [languages, setLanguages] = useState(null);
const {translate: L, setLanguageByCode} = useContext(LocaleContext);
const onSetLanguage = (code) => {
api.setLanguageByCode(code).then((res) => {
if (res.success) {
props.onUpdateLocale();
} else {
const onSetLanguage = useCallback((code) => {
setLanguageByCode(api, code).then((res) => {
if (!res.success) {
alert(res.msg);
}
});
};
}, []);
let flags = [];
if (languages === null) {

5
react/admin-panel/src/index.js
View File

@@ -1,6 +1,9 @@
import React from "react";
import {createRoot} from "react-dom/client";
import AdminDashboard from "./App";
import {LocaleProvider} from "shared/locale";
const root = createRoot(document.getElementById('admin-panel'));
root.render(<AdminDashboard />);
root.render(<LocaleProvider>
<AdminDashboard />
</LocaleProvider>);

26
react/admin-panel/src/views/login.jsx
View File

@@ -11,13 +11,13 @@ import {
import {makeStyles} from '@material-ui/core/styles';
import {Alert} from '@material-ui/lab';
import React, {useCallback, useEffect, useState} from "react";
import React, {useCallback, useContext, useEffect, useState} from "react";
import {Navigate} from "react-router-dom";
import {L} from "shared/locale";
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: {
@@ -81,24 +81,26 @@ export default function LoginForm(props) {
let [tfaState, set2FAState] = useState(0); // 0: not sent, 1: sent, 2: retry
let [tfaError, set2FAError] = useState("");
let [error, setError] = useState("");
let [loaded, setLoaded] = useState(0);
let [loaded, setLoaded] = useState(false);
const {translate: L, currentLocale, requestModules} = useContext(LocaleContext);
const getNextUrl = () => {
return getParameter("next") || "/admin";
}
const onUpdateLocale = useCallback(() => {
api.getLanguageEntries(["general", "account"]).then(data => {
setLoaded(loaded + 1);
if (!data.success) {
alert(data.msg);
}
requestModules(api, ["general", "account"], currentLocale).then(data => {
setLoaded(true);
if (!data.success) {
alert(data.msg);
}
});
}, [loaded]);
}, [currentLocale]);
useEffect(() => {
onUpdateLocale();
}, []);
}, [currentLocale]);
const onLogin = useCallback(() => {
if (!isLoggingIn) {
@@ -294,7 +296,7 @@ export default function LoginForm(props) {
</>
}
if (loaded === 0) {
if (!loaded) {
return <b>{L("general.loading")}… <Icon icon={"spinner"}/></b>
}
@@ -309,7 +311,7 @@ export default function LoginForm(props) {
</div>
<form className={classes.form} onSubmit={(e) => e.preventDefault()}>
{ createForm() }
<LanguageSelection api={api} onUpdateLocale={onUpdateLocale} />
<LanguageSelection api={api} />
</form>
</div>
</Container>