From c1abc028e1122f57aec1c70dddef65f005d2e09f Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 15:03:52 +0200
Subject: [PATCH] Add Signup validation and feedback

---
 web/src/components/SignupForm.vue | 120 +++++++++++++++++++-----------
 1 file changed, 76 insertions(+), 44 deletions(-)

diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
index ec17ca9..d747aeb 100644
--- a/web/src/components/SignupForm.vue
+++ b/web/src/components/SignupForm.vue
@@ -1,50 +1,65 @@
 <template>
     <div>
-        <b-form @submit.prevent="handleSubmit">
-            <b-form-group
-                    id="email-group"
-                    label="Email address:"
-                    label-for="email"
-                    description="We'll never share your email with anyone else."
-            >
-                <b-form-input
-                        id="email"
-                        v-model="form.email"
-                        type="email"
-                        required
-                        placeholder="Enter email"
-                ></b-form-input>
-            </b-form-group>
+        <b-card class="mt-3" header="Signup">
+            <b-form @submit.prevent="handleSubmit">
+                <b-form-group
+                        id="email-group"
+                        label="Email address:"
+                        label-for="email"
+                        description="We'll never share your email with anyone else."
+                >
+                    <b-form-input
+                            id="email"
+                            v-model="form.email"
+                            type="email"
+                            required
+                            placeholder="Enter email"
+                    ></b-form-input>
+                </b-form-group>
 
-            <b-form-group id="username-group" label="Username:" label-for="username">
-                <b-form-input
-                        id="username"
-                        v-model="form.username"
-                        required
-                        placeholder="Enter a username"
-                ></b-form-input>
-            </b-form-group>
+                <b-form-group id="username-group" label="Username:" label-for="username">
+                    <b-form-input
+                            id="username"
+                            v-model="form.username"
+                            required
+                            placeholder="Enter a username"
+                            :state="validUsername"
+                    ></b-form-input>
+                    <b-form-invalid-feedback :state="validUsername">
+                        Your username must be at least 5 characters long.
+                    </b-form-invalid-feedback>
+                </b-form-group>
 
-            <b-form-group id="password-group" label="Password:" label-for="password">
-                <b-form-input
-                        id="password"
-                        v-model="form.password"
-                        required
-                        placeholder="Enter a password"
-                ></b-form-input>
-            </b-form-group>
+                <b-form-group id="password-group" label="Password:" label-for="password">
+                    <b-form-input
+                            id="password"
+                            v-model="form.password"
+                            required
+                            placeholder="Enter a password"
+                            :state="validPassword"
+                    ></b-form-input>
+                    <b-form-invalid-feedback :state="validPassword">
+                        Your password must be at least 6 characters long.
+                    </b-form-invalid-feedback>
+                </b-form-group>
 
-            <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
-                <b-form-input
-                        id="password-confirm"
-                        v-model="form.passwordConfirm"
-                        required
-                        placeholder="Confirm your password"
-                ></b-form-input>
-            </b-form-group>
+                <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
+                    <b-form-input
+                            id="password-confirm"
+                            v-model="form.passwordConfirm"
+                            required
+                            placeholder="Confirm your password"
+                            :state="passwordEquals"
+                    ></b-form-input>
+                    <b-form-invalid-feedback :state="passwordEquals">
+                        Your password must be at least 6 characters long.
+                    </b-form-invalid-feedback>
+                </b-form-group>
+
+                <b-button type="submit" variant="primary">Submit</b-button>
+            </b-form>
+        </b-card>
 
-            <b-button type="submit" variant="primary">Submit</b-button>
-        </b-form>
         <b-card class="mt-3" header="Form Data Result">
             <pre class="m-0">{{ form }}</pre>
         </b-card>
@@ -61,12 +76,29 @@
                     email: '',
                     password: '',
                     passwordConfirm: ''
-                }
+                },
+            }
+        },
+        computed: {
+            passwordEquals: function () {
+                return this.form.password === this.form.passwordConfirm
+            },
+            validUsername: function () {
+                return this.form.username.length >= 5
+            },
+            validPassword: function () {
+                return this.form.password.length >= 6
+            },
+            validInput() {
+                return this.validUsername && this.passwordEquals && this.validPassword;
             }
         },
         methods: {
-            handleSubmit(){
-                
+            handleSubmit() {
+                console.log("submitted")
+                if (this.validInput) {
+                    console.log("Valid")
+                }
             }
         }
     }