moar red

client/src/components/welcome.register.jsx

@@ -42,6 +42,9 @@ function Register(args) {
         submitRegister(name, password);
     }
 
+    const pwLen = () =>
+        !password || password && password.length > 3;
+
     const registerConfirm = () =>
         password === confirm;
 
@@ -51,24 +54,30 @@ function Register(args) {
 
     return (
         <div class="login">
-            <label for="username">Username</label>
+            <label class="login-input" for="username">Username </label>
             <input
                 class="login-input"
-                type="email"
+                type="text"
                 placeholder="username"
                 value={this.state.name}
                 onInput={linkState(this, 'name')}
             />
-            <label for="password">Password - min 4 chars</label>
+            <label
+                class={`${pwLen() ? '' : 'red'} login-input`}
+                for="password">Password - min 4 chars
+            </label>
             <input
-                class="login-input"
+                class={`${pwLen() ? '' : 'red'} login-input`}
                 type="password"
                 placeholder="password"
                 autocomplete="new-password"
                 value={this.state.password}
                 onInput={linkState(this, 'password')}
             />
-            <label for="confirm">Confirm Password</label>
+            <label
+                class={`${registerConfirm() ? '' : 'red'} login-input`}
+                for="confirm">Confirm Password
+            </label>
             <input
                 class={`${registerConfirm() ? '' : 'red'} login-input`}
                 type="password"