From 3e27d4fa86b2d165a7a32f273c9d7c1d2478a2a0 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Mon, 13 Apr 2020 19:46:54 +0200
Subject: [PATCH] Add Centered component

---
 web/src/components/Centered.vue   |  13 +++
 web/src/components/SigninForm.vue |  67 +++++++-------
 web/src/components/SignupForm.vue | 142 +++++++++++++++---------------
 3 files changed, 118 insertions(+), 104 deletions(-)
 create mode 100644 web/src/components/Centered.vue

diff --git a/web/src/components/Centered.vue b/web/src/components/Centered.vue
new file mode 100644
index 0000000..dd20d79
--- /dev/null
+++ b/web/src/components/Centered.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="row d-flex justify-content-center">
+        <div class="mt-3 col-md-6">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Centered"
+    }
+</script>
diff --git a/web/src/components/SigninForm.vue b/web/src/components/SigninForm.vue
index f4d74ef..c4f58c7 100644
--- a/web/src/components/SigninForm.vue
+++ b/web/src/components/SigninForm.vue
@@ -1,50 +1,51 @@
 <template>
-    <div class="row d-flex justify-content-center">
-        <div class="mt-3 col-md-6">
-            <b-card header="Sign in">
-                <b-form @submit.prevent="signin">
+    <Centered>
+        <b-card header="Sign in">
+            <b-form @submit.prevent="signin">
 
-                    <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"
+                    ></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"
-                                type="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"
+                            type="password"
+                    ></b-form-input>
+                </b-form-group>
 
-                    <b-button type="submit" variant="primary">Submit</b-button>
-                </b-form>
+                <b-button type="submit" variant="primary">Submit</b-button>
+            </b-form>
 
-                <b-alert :show="invalid" variant="danger" dismissible class="mt-3">
-                    Invalid credential
-                </b-alert>
-                <b-alert :show="error" variant="danger" dismissible class="mt-3">
-                    An error occurred while signin in
-                </b-alert>
+            <b-alert :show="invalid" variant="danger" dismissible class="mt-3">
+                Invalid credential
+            </b-alert>
+            <b-alert :show="error" variant="danger" dismissible class="mt-3">
+                An error occurred while signin in
+            </b-alert>
 
-            </b-card>
-        </div>
-
-    </div>
+        </b-card>
+    </Centered>
 </template>
 
 <script>
     import Api from '@/api'
     import {mapMutations} from "vuex";
+    import Centered from '@/components/Centered'
 
     export default {
         name: "SignupForm",
+        components: {
+            Centered
+        },
         data() {
             return {
                 form: {
diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
index cfeb18a..43dbf5c 100644
--- a/web/src/components/SignupForm.vue
+++ b/web/src/components/SignupForm.vue
@@ -1,87 +1,87 @@
 <template>
-    <div>
-        <div class="row d-flex justify-content-center">
-            <div class="mt-3 col-md-6">
-                <b-card header="Create an account">
-                    <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>
+    <Centered>
+        <b-card header="Create an account">
+            <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"
-                                    :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="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"
-                                    :state="validPassword"
-                                    type="password"
-                            ></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-group" label="Password:" label-for="password">
+                    <b-form-input
+                            id="password"
+                            v-model="form.password"
+                            required
+                            placeholder="Enter a password"
+                            :state="validPassword"
+                            type="password"
+                    ></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"
-                                    :state="passwordEquals"
-                                    type="password"
-                            ></b-form-input>
-                            <b-form-invalid-feedback :state="passwordEquals">
-                                Both passwords must be equals.
-                            </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"
+                            :state="passwordEquals"
+                            type="password"
+                    ></b-form-input>
+                    <b-form-invalid-feedback :state="passwordEquals">
+                        Both passwords must be equals.
+                    </b-form-invalid-feedback>
+                </b-form-group>
 
-                        <b-button type="submit" variant="primary">Submit</b-button>
-                    </b-form>
+                <b-button type="submit" variant="primary">Submit</b-button>
+            </b-form>
 
-                    <b-alert :show="exists" variant="danger" dismissible class="mt-3">
-                        A user with that username or email already exists
-                    </b-alert>
-                    <b-alert :show="error" variant="danger" dismissible class="mt-3">
-                        An error occurred while attempting to create your account
-                    </b-alert>
-
-                </b-card>
-            </div>
-        </div>
-    </div>
+            <b-alert :show="exists" variant="danger" dismissible class="mt-3">
+                A user with that username or email already exists
+            </b-alert>
+            <b-alert :show="error" variant="danger" dismissible class="mt-3">
+                An error occurred while attempting to create your account
+            </b-alert>
+        </b-card>
+    </Centered>
 </template>
 
 <script>
     import Api from '@/api'
+    import Centered from '@/components/Centered'
+
 
     export default {
         name: "SignupForm",
+        components: {
+            Centered
+        },
         data() {
             return {
                 form: {