Browse Source

better login flow

pull/2/head
f0x 1 month ago
parent
commit
a5790c079a
2 changed files with 58 additions and 23 deletions
  1. 34
    14
      components/Login.js
  2. 24
    9
      public/scss/style.scss

+ 34
- 14
components/Login.js View File

@@ -18,12 +18,21 @@ let login = create({
18 18
         pass: "",
19 19
         hs: ""
20 20
       },
21
-      promptHS: false
21
+      hs: {
22
+        prompt: false,
23
+        error: null,
24
+        valid: false
25
+      }
22 26
     }
23 27
   },
24 28
 
25 29
   login: function() {
26 30
     this.setState({error: ""})
31
+
32
+    if (this.state.hs.valid) {
33
+      return this.doLogin()
34
+    }
35
+
27 36
     let parts = this.state.formState.user.split(':')
28 37
     if (parts.length != 2) {
29 38
       return this.setState({error: "Please enter a full mxid, like username:homeserver.tld"})
@@ -35,17 +44,19 @@ let login = create({
35 44
       let formState = this.state.formState
36 45
       formState.user = parts[0]
37 46
       formState.hs = hs
38
-      this.setState({apiUrl: hs, formState: formState})
47
+      let hsState = Object.assign(this.state.hs, {valid: true})
48
+      this.setState({apiUrl: hs, formState: formState, hs: hsState})
39 49
       this.doLogin()
40 50
     }).catch((error) => {
41
-      console.log("LOGIN ERROR", error)
42
-      this.setState({error: error})
51
+      console.log("ERROR fetching homeserver url", error)
52
+      let hsState = Object.assign(this.state.hs, {error: error, valid: false})
53
+      this.setState({hs: hsState})
43 54
     })
44 55
   },
45 56
 
46 57
   doLogin: function() {
47 58
     console.log("Logging in")
48
-    let user = this.state.formState.user
59
+    let user = this.state.formState.user.replace('@', '')
49 60
     let password = this.state.formState.pass
50 61
     let hs = this.state.apiUrl
51 62
 
@@ -86,6 +97,8 @@ let login = create({
86 97
     let parts = user.split(':')
87 98
     if (parts.length == 2) {
88 99
       formState.hs = parts[1]
100
+      let hsState = Object.assign(this.state.hs, {error: null, valid: false})
101
+      this.setState({hs: hsState})
89 102
     }
90 103
     this.setState({formState: formState})
91 104
   },
@@ -103,28 +116,35 @@ let login = create({
103 116
   },
104 117
 
105 118
   render: function() {
106
-    let hsActive = "inactive"
107
-    if (this.state.promptHS) {
108
-      hsActive = "active"
119
+    let hsState = "inactive"
120
+    if (this.state.hs.prompt) {
121
+      hsState = "active"
109 122
     }
123
+    if (this.state.hs.error != null) {
124
+      hsState = "error"
125
+    }
126
+    if (this.state.hs.valid) {
127
+      hsState = "validated"
128
+    }
129
+
110 130
     return (
111 131
       <div className="loginwrapper">
112 132
         <img src="./neo.png"/>
113
-        <div className="error">{this.state.error != null && this.state.error}</div>
133
+        <div className="errorMessage">{this.state.error}</div>
114 134
         <div className="login">
115 135
           <label htmlFor="user">Username: </label>
116
-          <input type="text" id="user" placeholder="username" value={this.state.formState["user"]} onChange={this.handleUserChange}/>
136
+          <input type="text" id="user" placeholder="@user:homeserver.tld" value={this.state.formState["user"]} onChange={this.handleUserChange}/>
117 137
 
118 138
           <label htmlFor="pass">Password: </label>
119
-          <input type="password" id="pass" value={this.state.formState["pass"]} onChange={this.handlePassChange}/>
139
+          <input type="password" id="pass" placeholder="password" value={this.state.formState["pass"]} onChange={this.handlePassChange}/>
120 140
 
121
-          <label htmlFor="hs" className={hsActive}>Homeserver: </label>
122
-          {this.state.promptHS ? (
141
+          <label htmlFor="hs" className={hsState}>Homeserver: </label>
142
+          {this.state.hs.prompt ? (
123 143
             <>
124 144
               <input type="text" id="hs" placeholder="https://lain.haus" value={this.state.formState["hs"]} onChange={this.handleHsChange}/>
125 145
             </>
126 146
           ) : (
127
-            <span>{this.state.formState["hs"]}</span>
147
+            <span id="hs">{this.state.formState["hs"]}</span>
128 148
           )}
129 149
 
130 150
           <button onClick={()=>this.login()}>Log in</button>

+ 24
- 9
public/scss/style.scss View File

@@ -6,13 +6,13 @@ $bg3: #888888;
6 6
 $bg4: #ebebeb;
7 7
 $bg5: #ffffff;
8 8
 
9
-$red: #cc6666;
10
-$green: #b5bd68;
11
-$yellow: #f0c674;
12
-$amber: #de935f;
13
-$blue: #81a2be;
14
-$purple: #b294bb;
15
-$cyan: #8abeb7;
9
+$red: #e15151;
10
+$green: #75e151;
11
+$yellow: #e1da51;
12
+$amber: #e18151;
13
+$blue: #5294e2;
14
+$purple: #df51e1;
15
+$cyan: #51dfe1;
16 16
 
17 17
 $spacing: 0.7rem;
18 18
 
@@ -69,7 +69,7 @@ body {
69 69
   }
70 70
 }
71 71
 
72
-.error {
72
+.errorMessage {
73 73
   color: $red;
74 74
   font-size: 140%;
75 75
 }
@@ -79,7 +79,6 @@ body {
79 79
   display: inline-grid;
80 80
   grid-template-columns: 1fr 1fr;
81 81
 
82
-  $blue: #5294e2;
83 82
   $grey: #999;
84 83
 
85 84
   label, input, button, span {
@@ -96,6 +95,22 @@ body {
96 95
     background: $grey;
97 96
   }
98 97
 
98
+  label.error {
99
+    background: $red;
100
+
101
+    & ~ input, & ~ span {
102
+      border-color: $red;
103
+    }
104
+  }
105
+
106
+  label.validated {
107
+    background: $green;
108
+
109
+    & ~ input, & ~ span {
110
+      border-color: $green;
111
+    }
112
+  }
113
+
99 114
   span {
100 115
     display: inline-block;
101 116
     border: 0.05rem solid $grey;

Loading…
Cancel
Save