From 1310649e2907e030083fe382b4381dd7cc4e01e4 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Mon, 13 Apr 2020 19:37:02 +0200
Subject: [PATCH] Fix form width

---
 web/src/components/SigninForm.vue |  61 +++++++-------
 web/src/components/SignupForm.vue | 131 ++++++++++++++++--------------
 2 files changed, 100 insertions(+), 92 deletions(-)

diff --git a/web/src/components/SigninForm.vue b/web/src/components/SigninForm.vue
index 5a7e4f5..f4d74ef 100644
--- a/web/src/components/SigninForm.vue
+++ b/web/src/components/SigninForm.vue
@@ -1,38 +1,41 @@
 <template>
-    <div>
-        <b-card class="mt-3" header="Sign in">
-            <b-form @submit.prevent="signin">
+    <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">
 
-                <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>
 
-        </b-card>
     </div>
 </template>
 
diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
index f6dd1e2..cfeb18a 100644
--- a/web/src/components/SignupForm.vue
+++ b/web/src/components/SignupForm.vue
@@ -1,74 +1,79 @@
 <template>
     <div>
-        <b-card class="mt-3" 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>
+        <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>
 
-                <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-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>
+                </b-card>
+            </div>
+        </div>
     </div>
 </template>