mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-15 21:04:46 +01:00
refactoring (connect): simplify & cleanup connection page
This commit is contained in:
Mickael Kerjean
parent
efe202bfd0
commit
bb4365c83f
4 changed files with 52 additions and 29 deletions
|
|
@ -55,6 +55,9 @@ export function ErrorPage(WrappedComponent) {
|
|||
error: null,
|
||||
has_back_button: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.unlisten = this.props.history.listen(() => {
|
||||
this.setState({ has_back_button: false });
|
||||
this.unlisten();
|
||||
|
|
|
|||
|
|
@ -44,14 +44,19 @@ function ConnectPageComponent({ error, history }) {
|
|||
};
|
||||
|
||||
const onFormChangeLoadingState = (onOrOff) => {
|
||||
if (_GET["state"]) return; // Don't do anything when using oauth2
|
||||
// we might not want to update the UI when:
|
||||
// 1. user came from oauth2/oidc request
|
||||
// 2. user came from a form pointing to this page
|
||||
if (_GET["state"]) return;
|
||||
else if (_GET["type"]) return;
|
||||
setIsLoading(onOrOff);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (_GET["state"]) {
|
||||
authenticate({ ..._GET, type: _GET["state"] })
|
||||
.catch((err) => error(err));
|
||||
if (_GET["state"]) { // oauth2/oidc
|
||||
authenticate({ ..._GET, type: _GET["state"] }).catch((err) => error(err));
|
||||
} else if (_GET["type"]) { // form using get
|
||||
authenticate(_GET).catch((err) => error(err));
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
/* eslint-disable max-len */
|
||||
import React from "react";
|
||||
import "./forkme.scss";
|
||||
import { t } from "../../locales/";
|
||||
|
||||
export const ForkMe = ({ repo = "" }) => {
|
||||
export const ForkMe = ({ repo = "https://github.com/mickael-kerjean/filestash" }) => {
|
||||
return (
|
||||
<div className="component_forkme">
|
||||
<a href={repo} className="github-corner" aria-label="View source on GitHub" rel="nofollow">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" className="bg"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={{"transformOrigin": "130px 106px"}} className="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href={repo} className="github-corner" aria-label="View source on GitHub" rel="nofollow">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" className="bg"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={{ "transformOrigin": "130px 106px" }} className="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PoweredByFilestash = () => {
|
||||
if(!window.CONFIG["fork_button"]) return null;
|
||||
return (
|
||||
<div className="component_poweredbyfilestash">
|
||||
{ t("Powered by") } <strong><a href="https://www.filestash.app">Filestash</a></strong>
|
||||
|
|
|
|||
|
|
@ -7,31 +7,46 @@ import { Backend } from "../../model/";
|
|||
import { t } from "../../locales/";
|
||||
import "./form.scss";
|
||||
|
||||
/*
|
||||
* This is the automatic form generation that we uses in:
|
||||
* login page, admin console, form filetype (eg: mysql & ldap plugin)
|
||||
*
|
||||
* FAQ:
|
||||
* Why reinvent the wheel? no existing library were fitting all the use cases so we made our own
|
||||
* How does that work?
|
||||
* 1. window.CONFIG["connection"] contains all the valid connections one can make with all sort
|
||||
of prefilled data
|
||||
* 2. Backend.all gives the specs of the login form as generated by the relevant backend plugin
|
||||
* 3. The FormBuilder component generates the form from the specs generated by createFormBackend
|
||||
*/
|
||||
|
||||
export function Form({
|
||||
onLoadingChange = nop, onError = nop, onSubmit = nop,
|
||||
}) {
|
||||
const [enabledBackends, setEnabledBackends] = useState([]);
|
||||
const [selectedTab, setSelectedTab] = useState(function() { // TODO: buggy
|
||||
const connLength = window.CONFIG["connections"].length;
|
||||
if (connLength < 4) return 0;
|
||||
else if (connLength < 5) return 1;
|
||||
return 2;
|
||||
}());
|
||||
const [selectedTab, setSelectedTab] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const select = settings_get("login_tab");
|
||||
if (select !== null && select < window.CONFIG["connections"].length) {
|
||||
setSelectedTab(select);
|
||||
}
|
||||
Backend.all().then((backend) => {
|
||||
onLoadingChange(false);
|
||||
setEnabledBackends(window.CONFIG["connections"].reduce((acc, conn) => {
|
||||
const backends = window.CONFIG["connections"].reduce((acc, conn) => {
|
||||
const f = createFormBackend(backend, conn);
|
||||
if (Object.keys(f).length > 0) {
|
||||
acc.push(f);
|
||||
}
|
||||
return acc;
|
||||
}, []));
|
||||
}, []);
|
||||
setEnabledBackends(backends);
|
||||
setSelectedTab((function() {
|
||||
const select = settings_get("login_tab");
|
||||
if (select !== null && select < backends.length) {
|
||||
setSelectedTab(select);
|
||||
}
|
||||
if (backends.length === 0) return null;
|
||||
else if (backends.length < 4) return 0;
|
||||
else if (backends.length < 5) return 1;
|
||||
return 2;
|
||||
}()));
|
||||
}).catch((err) => onError(err));
|
||||
|
||||
return () => {
|
||||
|
|
@ -48,9 +63,9 @@ export function Form({
|
|||
const tmp = enabledBackends[selectedTab];
|
||||
return tmp[Object.keys(tmp)[0]];
|
||||
})());
|
||||
delete formData.image;
|
||||
delete formData.label;
|
||||
delete formData.advanced;
|
||||
delete formData["image"];
|
||||
delete formData["label"];
|
||||
delete formData["advanced"];
|
||||
onSubmit(formData);
|
||||
};
|
||||
const onTypeChange = (tabn) => {
|
||||
|
|
@ -76,7 +91,7 @@ export function Form({
|
|||
}
|
||||
return (
|
||||
<label htmlFor={props.params["id"]}
|
||||
className={"no-select input_type_" + props.params["type"]}>
|
||||
className={`no-select input_type_${props.params["type"]}`}>
|
||||
<div>
|
||||
{ $input }
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue