Add Centered component

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>

web/src/components/SigninForm.vue

@@ -1,6 +1,5 @@
 <template>
-    <div class="row d-flex justify-content-center">
+    <Centered>
-        <div class="mt-3 col-md-6">
         <b-card header="Sign in">
             <b-form @submit.prevent="signin">
 
@@ -34,17 +33,19 @@
             </b-alert>
 
         </b-card>
-        </div>
+    </Centered>
-
-    </div>
 </template>
 
 <script>
     import Api from '@/api'
     import {mapMutations} from "vuex";
+    import Centered from '@/components/Centered'
 
     export default {
         name: "SignupForm",
+        components: {
+            Centered
+        },
         data() {
             return {
                 form: {

web/src/components/SignupForm.vue

@@ -1,7 +1,5 @@
 <template>
-    <div>
+    <Centered>
-        <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
@@ -70,18 +68,20 @@
             <b-alert :show="error" variant="danger" dismissible class="mt-3">
                 An error occurred while attempting to create your account
             </b-alert>
-
         </b-card>
-            </div>
+    </Centered>
-        </div>
-    </div>
 </template>
 
 <script>
     import Api from '@/api'
+    import Centered from '@/components/Centered'
+
 
     export default {
         name: "SignupForm",
+        components: {
+            Centered
+        },
         data() {
             return {
                 form: {