From bb4365c83fe3ab4edd4450aec80d85d68207254f Mon Sep 17 00:00:00 2001 From: Mickael Kerjean Date: Wed, 22 Dec 2021 00:01:01 +1100 Subject: [PATCH] refactoring (connect): simplify & cleanup connection page --- client/components/decorator.js | 3 ++ client/pages/connectpage.js | 13 ++++++--- client/pages/connectpage/forkme.js | 18 ++++++------ client/pages/connectpage/form.js | 47 ++++++++++++++++++++---------- 4 files changed, 52 insertions(+), 29 deletions(-) diff --git a/client/components/decorator.js b/client/components/decorator.js index ef600842..4c696523 100644 --- a/client/components/decorator.js +++ b/client/components/decorator.js @@ -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(); diff --git a/client/pages/connectpage.js b/client/pages/connectpage.js index 5140979d..a4deedc2 100644 --- a/client/pages/connectpage.js +++ b/client/pages/connectpage.js @@ -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)); } }, []); diff --git a/client/pages/connectpage/forkme.js b/client/pages/connectpage/forkme.js index cce81493..90a8bb22 100644 --- a/client/pages/connectpage/forkme.js +++ b/client/pages/connectpage/forkme.js @@ -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 (
- - - + + +
); }; export const PoweredByFilestash = () => { - if(!window.CONFIG["fork_button"]) return null; return (
{ t("Powered by") } Filestash diff --git a/client/pages/connectpage/form.js b/client/pages/connectpage/form.js index e76f358c..fb8c211c 100644 --- a/client/pages/connectpage/form.js +++ b/client/pages/connectpage/form.js @@ -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 (