better login flow

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)
+      console.log("ERROR fetching homeserver url", error)
-      this.setState({error: 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"
+    let hsState = "inactive"
-    if (this.state.promptHS) {
+    if (this.state.hs.prompt) {
-      hsActive = "active"
+      hsState = "active"
     }
+    if (this.state.hs.error != null) {
+      hsState = "error"
+    }
+    if (this.state.hs.valid) {
+      hsState = "validated"
+    }
+
     return (
       <div className="loginwrapper">
         <img src="./neo.png"/>
-        <div className="error">{this.state.error != null && this.state.error}</div>
+        <div className="errorMessage">{this.state.error}</div>
         <div className="login">
           <label htmlFor="user">Username: </label>
-          <input type="text" id="user" placeholder="username" value={this.state.formState["user"]} onChange={this.handleUserChange}/>
+          <input type="text" id="user" placeholder="@user:homeserver.tld" value={this.state.formState["user"]} onChange={this.handleUserChange}/>
 
           <label htmlFor="pass">Password: </label>
-          <input type="password" id="pass" value={this.state.formState["pass"]} onChange={this.handlePassChange}/>
+          <input type="password" id="pass" placeholder="password" value={this.state.formState["pass"]} onChange={this.handlePassChange}/>
 
-          <label htmlFor="hs" className={hsActive}>Homeserver: </label>
+          <label htmlFor="hs" className={hsState}>Homeserver: </label>
-          {this.state.promptHS ? (
+          {this.state.hs.prompt ? (
             <>
               <input type="text" id="hs" placeholder="https://lain.haus" value={this.state.formState["hs"]} onChange={this.handleHsChange}/>
             </>
           ) : (
-            <span>{this.state.formState["hs"]}</span>
+            <span id="hs">{this.state.formState["hs"]}</span>
           )}
 
           <button onClick={()=>this.login()}>Log in</button>

public/scss/style.scss

@@ -6,13 +6,13 @@ $bg3: #888888;
 $bg4: #ebebeb;
 $bg5: #ffffff;
 
-$red: #cc6666;
+$red: #e15151;
-$green: #b5bd68;
+$green: #75e151;
-$yellow: #f0c674;
+$yellow: #e1da51;
-$amber: #de935f;
+$amber: #e18151;
-$blue: #81a2be;
+$blue: #5294e2;
-$purple: #b294bb;
+$purple: #df51e1;
-$cyan: #8abeb7;
+$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;