From 6cb99576c077d5356fc9f97faa7806f895f4d561 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sun, 19 Jan 2020 14:29:32 +1000
Subject: [PATCH] moar red

---
 client/src/components/welcome.register.jsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/src/components/welcome.register.jsx b/client/src/components/welcome.register.jsx
index e3835b8e..d6c85ee1 100644
--- a/client/src/components/welcome.register.jsx
+++ b/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"