From a5790c079a793c16d86c1df34109aff5698f70ad Mon Sep 17 00:00:00 2001 From: f0x Date: Tue, 9 Apr 2019 21:34:30 +0200 Subject: [PATCH] better login flow --- components/Login.js | 48 ++++++++++++++++++++++++++++++------------ public/scss/style.scss | 33 +++++++++++++++++++++-------- 2 files changed, 58 insertions(+), 23 deletions(-) diff --git a/components/Login.js b/components/Login.js index aaa1bd9..225e9d8 100644 --- a/components/Login.js +++ b/components/Login.js @@ -18,12 +18,21 @@ let login = create({ pass: "", hs: "" }, - promptHS: false + hs: { + prompt: false, + error: null, + valid: false + } } }, login: function() { this.setState({error: ""}) + + if (this.state.hs.valid) { + return this.doLogin() + } + let parts = this.state.formState.user.split(':') if (parts.length != 2) { return this.setState({error: "Please enter a full mxid, like username:homeserver.tld"}) @@ -35,17 +44,19 @@ let login = create({ let formState = this.state.formState formState.user = parts[0] formState.hs = hs - this.setState({apiUrl: hs, formState: formState}) + let hsState = Object.assign(this.state.hs, {valid: true}) + this.setState({apiUrl: hs, formState: formState, hs: hsState}) this.doLogin() }).catch((error) => { - console.log("LOGIN ERROR", error) - this.setState({error: error}) + console.log("ERROR fetching homeserver url", error) + let hsState = Object.assign(this.state.hs, {error: error, valid: false}) + this.setState({hs: hsState}) }) }, doLogin: function() { console.log("Logging in") - let user = this.state.formState.user + let user = this.state.formState.user.replace('@', '') let password = this.state.formState.pass let hs = this.state.apiUrl @@ -86,6 +97,8 @@ let login = create({ let parts = user.split(':') if (parts.length == 2) { formState.hs = parts[1] + let hsState = Object.assign(this.state.hs, {error: null, valid: false}) + this.setState({hs: hsState}) } this.setState({formState: formState}) }, @@ -103,28 +116,35 @@ let login = create({ }, render: function() { - let hsActive = "inactive" - if (this.state.promptHS) { - hsActive = "active" + let hsState = "inactive" + if (this.state.hs.prompt) { + hsState = "active" } + if (this.state.hs.error != null) { + hsState = "error" + } + if (this.state.hs.valid) { + hsState = "validated" + } + return (
-
{this.state.error != null && this.state.error}
+
{this.state.error}
- + - + - - {this.state.promptHS ? ( + + {this.state.hs.prompt ? ( <> ) : ( - {this.state.formState["hs"]} + {this.state.formState["hs"]} )} diff --git a/public/scss/style.scss b/public/scss/style.scss index e5e8d9a..a3a7404 100644 --- a/public/scss/style.scss +++ b/public/scss/style.scss @@ -6,13 +6,13 @@ $bg3: #888888; $bg4: #ebebeb; $bg5: #ffffff; -$red: #cc6666; -$green: #b5bd68; -$yellow: #f0c674; -$amber: #de935f; -$blue: #81a2be; -$purple: #b294bb; -$cyan: #8abeb7; +$red: #e15151; +$green: #75e151; +$yellow: #e1da51; +$amber: #e18151; +$blue: #5294e2; +$purple: #df51e1; +$cyan: #51dfe1; $spacing: 0.7rem; @@ -69,7 +69,7 @@ body { } } -.error { +.errorMessage { color: $red; font-size: 140%; } @@ -79,7 +79,6 @@ body { display: inline-grid; grid-template-columns: 1fr 1fr; - $blue: #5294e2; $grey: #999; label, input, button, span { @@ -96,6 +95,22 @@ body { background: $grey; } + label.error { + background: $red; + + & ~ input, & ~ span { + border-color: $red; + } + } + + label.validated { + background: $green; + + & ~ input, & ~ span { + border-color: $green; + } + } + span { display: inline-block; border: 0.05rem solid $grey;