From efe202bfd02e831a45a54f9dd22a4044b674d68f Mon Sep 17 00:00:00 2001 From: Mickael Kerjean Date: Tue, 21 Dec 2021 17:04:35 +1100 Subject: [PATCH] refactoring (login): simplify code + lint --- client/pages/connectpage.js | 145 +++++--------- client/pages/connectpage.scss | 16 ++ client/pages/connectpage/form.js | 309 ++++++++--------------------- client/pages/connectpage/form.scss | 10 - 4 files changed, 155 insertions(+), 325 deletions(-) diff --git a/client/pages/connectpage.js b/client/pages/connectpage.js index 69e17fec..5140979d 100644 --- a/client/pages/connectpage.js +++ b/client/pages/connectpage.js @@ -1,111 +1,74 @@ -import React from 'react'; -import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; +import React, { useState, useEffect } from "react"; -import './connectpage.scss'; -import { Session } from '../model/'; -import { Container, NgIf, NgShow, Loader, Notification, ErrorPage } from '../components/'; -import { ForkMe, PoweredByFilestash, Form } from './connectpage/'; -import { cache, notify, urlParams } from '../helpers/'; +import "./connectpage.scss"; +import { Session } from "../model/"; +import { Container, NgShow, Loader, ErrorPage } from "../components/"; +import { ForkMe, PoweredByFilestash, Form } from "./connectpage/"; +import { cache, notify, urlParams } from "../helpers/"; -import { Alert } from '../components/'; +function ConnectPageComponent({ error, history }) { + const [isLoading, setIsLoading] = useState(true); + const _GET = urlParams(); -@ErrorPage -export class ConnectPage extends React.Component { - constructor(props){ - super(props); - this.state = { - loading: true, - doing_a_third_party_login: false - }; - } - - componentDidMount(){ - const urlData = urlParams(); - const get_params = Object.keys(urlData); - if(get_params.length === 0){ - return; - }else if(get_params.length === 1 && !!urlData["next"]){ - return; - } - - if(!urlData.type){ - urlData.type = urlData.state; - } - this.setState({ - doing_a_third_party_login: true, - loading: true - }, () => this.authenticate(urlData)); - } - - authenticate(params){ - Session.authenticate(params) + const authenticate = (formData) => { + return Session.authenticate(formData) .then(Session.currentUser) .then((user) => { - if(location.search.indexOf("?next=") === 0){ - location = urlParams()["next"]; + if (formData["next"]) { + location = formData["next"]; + return; } let url = "/files/"; - let path = user.home; - if(path){ - path = path.replace(/^\/?(.*?)\/?$/, "$1"); - if(path !== ""){ - url += path + "/"; - } + if (user["home"]) { + user["home"] = user["home"].replace(/^\/?(.*?)\/?$/, "$1").trim(); + if (user["home"] !== "") url = `${url}${user["home"]}/`; } cache.destroy(); - this.props.history.push(url); - }) - .catch((err) => { - this.setState({loading: false}); - notify.send(err, "error"); + history.push(url); }); - } + }; - onFormSubmit(data){ - if("oauth2" in data){ - this.setState({loading: true}); - Session.oauth2(data.oauth2).then((url) => { + const onFormSubmit = (formData) => { + if ("oauth2" in formData) { + setIsLoading(true); + Session.oauth2(formData["oauth2"]).then((url) => { window.location.href = url; }); return; } - this.setState({ - loading: true - }, () => this.authenticate(data)); - } + setIsLoading(true); + authenticate({ ..._GET, ...formData }).catch((err) => { + setIsLoading(false); + notify.send(err, "error"); + }); + }; - setLoading(value){ - if(this.state.doing_a_third_party_login !== true){ - this.setState({loading: value}); + const onFormChangeLoadingState = (onOrOff) => { + if (_GET["state"]) return; // Don't do anything when using oauth2 + setIsLoading(onOrOff); + }; + + useEffect(() => { + if (_GET["state"]) { + authenticate({ ..._GET, type: _GET["state"] }) + .catch((err) => error(err)); } - } + }, []); - onError(err){ - this.props.error(err); - } - - render() { - return ( -
- - - - - - - - - -
- - - - + return ( +
+ { window.CONFIG["fork_button"] && } + + { isLoading && } + + + { window.CONFIG["fork_button"] && } - -
- ); - } + +
+ ); } + +export const ConnectPage = ErrorPage(ConnectPageComponent); diff --git a/client/pages/connectpage.scss b/client/pages/connectpage.scss index 9c151d39..9888d3fd 100644 --- a/client/pages/connectpage.scss +++ b/client/pages/connectpage.scss @@ -5,3 +5,19 @@ .dark-mode .component_page_connect{ background: var(--dark-mode-bg-color); } + +/* PAGE ANIMATION */ +@keyframes PageConnectionPoweredBy { + from { transform: translateY(2px); opacity: 0;} + to {transform: translateY(0); opacity: 1; } +} +@keyframes PageConnectionForm { + from { transform: scale(0.99); } + to {transform: scale(1); } +} +.component_poweredbyfilestash, .component_page_connect .component_page_connection_form { + animation-duration: 0.3s; + animation-fill-mode: forwards; +} +.component_poweredbyfilestash { animation-name: PageConnectionPoweredBy; animation-delay: 0.2s; opacity: 0; } +.component_page_connect .component_page_connection_form { animation-name: PageConnectionForm; } diff --git a/client/pages/connectpage/form.js b/client/pages/connectpage/form.js index 109bbc22..e76f358c 100644 --- a/client/pages/connectpage/form.js +++ b/client/pages/connectpage/form.js @@ -1,41 +1,33 @@ import React, { useState, useEffect } from "react"; -import { Container, Card, NgIf, Input, Button, Textarea, FormBuilder } from "../../components/"; -import { gid, settings_get, settings_put, createFormBackend, FormObjToJSON, nop } from "../../helpers/"; -import { Session, Backend } from "../../model/"; +import { Card, Button, FormBuilder } from "../../components/"; +import { + settings_get, settings_put, createFormBackend, FormObjToJSON, nop, +} from "../../helpers/"; +import { Backend } from "../../model/"; import { t } from "../../locales/"; import "./form.scss"; export function Form({ - onLoadingChange = nop, onError = nop, onSubmit = nop + onLoadingChange = nop, onError = nop, onSubmit = nop, }) { - const [selectedTab, setSelectedTab] = useState(function(){ + 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; + if (connLength < 4) return 0; + else if (connLength < 5) return 1; return 2; }()); - const [enabledBackends, setEnabledBackends] = useState([]); - const _marginTop = () => { - let size = 300; - const $screen = document.querySelector(".login-form"); - if($screen) size = $screen.offsetHeight; - - size = Math.round((document.body.offsetHeight - size) / 2); - if(size < 0) return 0; - if(size > 150) return 150; - return size; - }; useEffect(() => { const select = settings_get("login_tab"); - if(select !== null && select < window.CONFIG["connections"].length){ + if (select !== null && select < window.CONFIG["connections"].length) { setSelectedTab(select); } Backend.all().then((backend) => { - onLoadingChange(false) + onLoadingChange(false); setEnabledBackends(window.CONFIG["connections"].reduce((acc, conn) => { const f = createFormBackend(backend, conn); - if(Object.keys(f).length > 0){ + if (Object.keys(f).length > 0) { acc.push(f); } return acc; @@ -52,70 +44,82 @@ export function Form({ }; const onSubmitForm = (e) => { e.preventDefault(); - - const data = () => { + const formData = FormObjToJSON((() => { const tmp = enabledBackends[selectedTab]; return tmp[Object.keys(tmp)[0]]; - }; - const dataToBeSubmitted = JSON.parse(JSON.stringify(FormObjToJSON(data()))); - delete dataToBeSubmitted.image; - delete dataToBeSubmitted.label; - delete dataToBeSubmitted.advanced; - onSubmit(dataToBeSubmitted); + })()); + delete formData.image; + delete formData.label; + delete formData.advanced; + onSubmit(formData); }; const onTypeChange = (tabn) => { setSelectedTab(tabn); }; - return ( - - 1 }> -
- { - enabledBackends.map((backend, i) => { - const key = Object.keys(backend)[0]; - if(!backend[key]) return null; - return ( - - ); - }) - } + const renderForm = ($input, props, struct, onChange) => { + if (struct.type === "image") { + return ( +
+ { $input }
- + ); + } else if (struct.enabled === true) { + return null; + } else if (struct.label === "advanced") { + return ( + + ); + } + return ( + + ); + }; + + return ( + + { + enabledBackends.length > 1 && ( +
+ { + enabledBackends.map((backend, i) => { + const key = Object.keys(backend)[0]; + if (!backend[key]) return null; // TODO: this shouldn't be needed + return ( + + ); + }) + } +
+ ) + }
- onSubmitForm(e)} autoComplete="off" autoCapitalize="off" spellCheck="false" autoCorrect="off"> + onSubmitForm(e)} autoComplete="off" autoCapitalize="off" + spellCheck="false" autoCorrect="off"> { enabledBackends.map((form, i) => { const key = Object.keys(form)[0]; - if(!form[key]) return null; - else if(selectedTab !== i) return null; + if (!form[key]) return null; // TODO: this shouldn't be needed + else if (selectedTab !== i) return null; return ( { - if(struct.type === "image"){ - return ( -
- { $input } -
- ); - } else if(struct.enabled === true){ - return null; - } else if(struct.label === "advanced") return ( - - ); - return ( - - ); - }} /> + render={renderForm} /> ); }) } @@ -123,159 +127,16 @@ export function Form({
- ) + ); } +const _centerThis = () => { + let size = 300; + const $screen = document.querySelector(".login-form"); + if ($screen) size = $screen.offsetHeight; -export class FormOld extends React.Component { - constructor(props){ - super(props); - this.state = { - select: function(){ - const connLength = window.CONFIG["connections"].length; - if(connLength < 4) return 0; - else if(connLength < 5) return 1; - return 2; - }(), - backends_enabled: [] - }; - - const select = settings_get("login_tab"); - if(select !== null && select < window.CONFIG["connections"].length){ this.state.select = select; } - this.rerender = () => this.setState({_refresh: !this.state._refresh}); - } - - componentDidMount(){ - window.addEventListener("resize", this.rerender); - Backend.all().then((backend) => { - this.props.onLoadingChange(false); - this.setState({ - backends_available: backend, - backends_enabled: window.CONFIG["connections"].reduce((acc, conn) => { - const f = createFormBackend(backend, conn); - if(Object.keys(f).length > 0){ - acc.push(f); - } - return acc; - }, []) - }, () => this.publishState(this.props)); - }).catch((err) => this.props.onError(err)); - } - - componentWillUnmount(){ - settings_put("login_tab", this.state.select); - window.removeEventListener("resize", this.rerender); - } - - componentWillReceiveProps(props){ - if(JSON.stringify(props.credentials) !== JSON.stringify(this.props.credentials)){ - this.publishState(props); - } - } - - publishState(props){ - for(let key in props.credentials){ - this.state.backends_enabled = this.state.backends_enabled.map((backend) => { - const b = backend[Object.keys(backend)[0]]; - if(b["type"].value + "_" + b["label"].value === key){ - for(let k in b){ - if(props.credentials[key][k]){ - b[k].value = props.credentials[key][k]; - } - } - } - return backend; - }); - } - this.setState({backends_enabled: this.state.backends_enabled}); - } - - onSubmit(e){ - e.preventDefault(); - const data = () => { - const tmp = this.state.backends_enabled[this.state.select]; - return tmp[Object.keys(tmp)[0]]; - }; - const dataToBeSubmitted = JSON.parse(JSON.stringify(FormObjToJSON(data()))); - const key = dataToBeSubmitted["type"] + "_" + dataToBeSubmitted["label"]; - delete dataToBeSubmitted.image; - delete dataToBeSubmitted.label; - delete dataToBeSubmitted.advanced; - this.props.credentials[key] = dataToBeSubmitted; - this.props.onSubmit(dataToBeSubmitted, this.props.credentials); - } - - onTypeChange(n){ - this.setState({select: n}); - } - - render() { - const _marginTop = () => { - let size = 300; - const $screen = document.querySelector(".login-form"); - if($screen) size = $screen.offsetHeight; - - size = Math.round((document.body.offsetHeight - size) / 2); - if(size < 0) return 0; - if(size > 150) return 150; - return size; - }; - return ( - - 1 }> -
- { - this.state.backends_enabled.map((backend, i) => { - const key = Object.keys(backend)[0]; - if(!backend[key]) return null; - return ( - - ); - }) - } -
- -
-
- { - this.state.backends_enabled.map((form, i) => { - const key = Object.keys(form)[0]; - if(!form[key]) return null; - else if(this.state.select !== i) return null; - return ( - { - if(struct.type === "image"){ - return ( -
- { $input } -
- ); - } else if(struct.enabled === true){ - return null; - } else if(struct.label === "advanced") return ( - - ); - return ( - - ); - }} /> - ); - }) - } - - -
- - ); - } -} + size = Math.round((document.body.offsetHeight - size) / 2); + if (size < 0) return 0; + if (size > 150) return 150; + return size; +}; diff --git a/client/pages/connectpage/form.scss b/client/pages/connectpage/form.scss index 713832e7..d25e63bd 100644 --- a/client/pages/connectpage/form.scss +++ b/client/pages/connectpage/form.scss @@ -67,16 +67,6 @@ } -.component_rememberme.remember-appear{ - opacity: 0; - transform: translateX(40px); -} -.component_rememberme.remember-appear.remember-appear-active{ - opacity: 1; - transform: translateX(0px); - transition: all 0.3s ease-out; - transition-delay: 0.5s; -} .scroll-x{ overflow-x: auto!important;