Add Signup validation and feedback

web/src/components/SignupForm.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <b-card class="mt-3" header="Signup">
             <b-form @submit.prevent="handleSubmit">
                 <b-form-group
                         id="email-group"
@@ -22,7 +23,11 @@
                             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">
@@ -31,7 +36,11 @@
                             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">
@@ -40,11 +49,17 @@
                             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-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")
+                }
             }
         }
     }