From d547a63094dbfdd64b1e99fd4e9b5fe6a5f85aff Mon Sep 17 00:00:00 2001
From: philonebeyond <127224813+philonebeyond@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:05:47 +0000
Subject: [PATCH]  Auth pages - HTML fixes #924   - Add correct classes to all
 buttons   - Add utility scss file for all utility classes   - Update card
 elements on all auth pages to provide a consistant layout

---
 src/css/_base/_utility.scss                   |   5 +
 src/css/_components/_buttons.scss             |  33 ++++-
 src/css/_components/_cards.scss               |   2 +-
 src/css/_components/_general.scss             |  12 +-
 src/css/_components/_header.scss              |   6 +
 src/css/_components/_modals.scss              |   2 +-
 src/css/site.scss                             |   3 +
 src/src/components/admin/changePassword.vue   |   4 +-
 src/src/components/admin/users.vue            |   2 +-
 src/src/components/auth/accessDenied.vue      |  24 ++--
 src/src/components/auth/forgotPassword.vue    |  79 +++++-------
 src/src/components/auth/setPassword.vue       | 112 ++++++++--------
 src/src/components/auth/signIn.vue            | 122 +++++++++---------
 .../auth/signInWithRecoveryCode.vue           |  58 ++++-----
 src/src/components/auth/signInWithTfa.vue     |  91 ++++++-------
 src/src/components/tfa/disableTfa.vue         |  38 +++---
 .../components/tfa/enableAuthenticator.vue    | 110 ++++++++--------
 .../components/tfa/generateRecoveryCodes.vue  |  57 ++++----
 src/src/components/tfa/resetAuthenticator.vue |  49 +++----
 src/src/components/tfa/showRecoveryCodes.vue  |  72 +++++------
 .../tfa/twoFactorAuthentication.vue           |  40 +++---
 .../components/util/globalErrorHandler.vue    |   2 +-
 src/src/components/util/modalPopup.vue        |   4 +-
 src/src/components/util/sessionTimeout.vue    |   2 +-
 .../resources/components/accessDenied.ts      |   2 +-
 25 files changed, 447 insertions(+), 484 deletions(-)
 create mode 100644 src/css/_base/_utility.scss

diff --git a/src/css/_base/_utility.scss b/src/css/_base/_utility.scss
new file mode 100644
index 0000000..bf4f2e6
--- /dev/null
+++ b/src/css/_base/_utility.scss
@@ -0,0 +1,5 @@
+@import "_variables.scss";
+
+.border-0 {
+    border: none !important;
+}
\ No newline at end of file
diff --git a/src/css/_components/_buttons.scss b/src/css/_components/_buttons.scss
index 9b2e3d3..845737d 100644
--- a/src/css/_components/_buttons.scss
+++ b/src/css/_components/_buttons.scss
@@ -1,7 +1,38 @@
 @import "../_base/_variables.scss";
 @import "../_base/_mixins.scss";
 
-.v-btn {
+.btn-primary {
+    color: #fff !important;
+    border: 1px solid $primary;
+    background-color: $primary !important;
+    &:hover {
+        border-color: $greyDark !important;
+        background-color: $greyDark !important;
+    }
+}
+.btn-secondary {
+    background-color: transparent !important;
+    color: $greyDark !important;
+    border: 1px solid $greyMedium;
+    &:hover {
+        background-color: $greyLight !important;
+    }
+}
+
+button.v-btn, a.btn {
+    &.v-btn--size-default {
+        font-size: $textSmall;
+    }
+
+    &.bg-primary,
+    &.text-primary {
+        @extend .btn-primary;
+    }
+    &.bg-secondary,
+    &.text-secondary {
+        @extend .btn-secondary;
+    }
+
     &:not(.v-btn--round).v-size--small {
         height: 28px;
         padding: 0 12px;
diff --git a/src/css/_components/_cards.scss b/src/css/_components/_cards.scss
index 8abf285..e085585 100644
--- a/src/css/_components/_cards.scss
+++ b/src/css/_components/_cards.scss
@@ -10,7 +10,7 @@
         white-space: normal;
     }
     .v-card-text {
-        padding: 1rem 2rem 2rem;
+        padding: 1rem 2rem;
     }
     .v-card-actions {
         padding: 1rem 2rem 1rem;
diff --git a/src/css/_components/_general.scss b/src/css/_components/_general.scss
index 3f2a3d9..89819a0 100644
--- a/src/css/_components/_general.scss
+++ b/src/css/_components/_general.scss
@@ -12,14 +12,4 @@ body {
 
 .container {
     padding: 30px;
-}
-
-.border-0 {
-    border: none !important;
-}
-
-.user-avatar {
-    font-size: 1.2em;
-    box-shadow: 0 0 3px white;
-    border: 1px solid white;
-}
+}
\ No newline at end of file
diff --git a/src/css/_components/_header.scss b/src/css/_components/_header.scss
index e78600b..fdda283 100644
--- a/src/css/_components/_header.scss
+++ b/src/css/_components/_header.scss
@@ -61,4 +61,10 @@ header {
             }
         }
     }
+    
+    .user-avatar {
+        font-size: 1.2em;
+        box-shadow: 0 0 3px white;
+        border: 1px solid white;
+    }    
 }
\ No newline at end of file
diff --git a/src/css/_components/_modals.scss b/src/css/_components/_modals.scss
index e1616e0..6a59cbf 100644
--- a/src/css/_components/_modals.scss
+++ b/src/css/_components/_modals.scss
@@ -28,7 +28,7 @@
         padding: 12px 24px;
     }
 
-    .v-card__actions {
+    .v-card-actions {
         background-color: white;
         align-items: center;
         display: flex;
diff --git a/src/css/site.scss b/src/css/site.scss
index 460798c..7f5172d 100644
--- a/src/css/site.scss
+++ b/src/css/site.scss
@@ -1,6 +1,9 @@
 // Fonts
 @import "./google-fonts/google-fonts.css";
 
+// Base
+@import "_base/_utility.scss";
+
 // Components
 @import "_components/_general.scss";
 @import "_components/_header.scss";
diff --git a/src/src/components/admin/changePassword.vue b/src/src/components/admin/changePassword.vue
index a236576..1bc9244 100644
--- a/src/src/components/admin/changePassword.vue
+++ b/src/src/components/admin/changePassword.vue
@@ -55,10 +55,10 @@
                                     </v-text-field>
                                 </v-card-text>
                                 <div class="v-card-actions">
-                                    <v-btn v-if="passwordChanged" color="primary" @click="cancel">
+                                    <v-btn v-if="passwordChanged" color="secondary" @click="cancel">
                                         {{ t("button.close") }}
                                     </v-btn>
-                                    <v-btn v-if="!passwordChanged" @click="cancel">
+                                    <v-btn v-if="!passwordChanged" color="secondary" @click="cancel">
                                         {{ t("button.cancel") }}
                                     </v-btn>
                                     <v-btn v-if="!passwordChanged" color="primary" @click="change">
diff --git a/src/src/components/admin/users.vue b/src/src/components/admin/users.vue
index 6ca81cf..70f7eab 100644
--- a/src/src/components/admin/users.vue
+++ b/src/src/components/admin/users.vue
@@ -75,7 +75,7 @@
                 </v-card-text>
             </template>
             <template #footer>
-                <v-btn id="closePopupBtn" @click="closeEntityModal">{{ t("button.close") }}</v-btn>
+                <v-btn id="closePopupBtn" color="secondary" @click="closeEntityModal">{{ t("button.close") }}</v-btn>
                 <v-btn id="unlockBtn" color="success" v-if="!entity.isNew && entity.isLockedOut" @click="unlock">{{
                     t("button.unlock")
                 }}</v-btn>
diff --git a/src/src/components/auth/accessDenied.vue b/src/src/components/auth/accessDenied.vue
index 93c8673..2b33477 100644
--- a/src/src/components/auth/accessDenied.vue
+++ b/src/src/components/auth/accessDenied.vue
@@ -3,15 +3,17 @@
         <v-dialog v-model="showForm" persistent max-width="480px">
             <v-card>
                 <v-form>
-                    <v-container>
-                        <v-row>
-                            <v-col text cols="12">
-                                <h1>{{ t("title") }}</h1>
-
-                                <p>{{ t("info") }}.</p>
-                            </v-col>
-                        </v-row>
-                    </v-container>
+                    <v-card-title>
+                        <h1>{{ t("title") }}</h1>
+                    </v-card-title>
+                    <v-card-text>
+                        <p class="text-center">{{ t("info") }}</p>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn id="submit-btn" color="primary" @click="cancel">
+                            {{ t("password.backToLogin") }}
+                        </v-btn>
+                    </v-card-actions>
                 </v-form>
             </v-card>
         </v-dialog>
@@ -27,4 +29,8 @@
     });
 
     const showForm = true;
+
+    function cancel(): void {
+        window.location.href = "/";
+    }
 </script>
diff --git a/src/src/components/auth/forgotPassword.vue b/src/src/components/auth/forgotPassword.vue
index aeab2e2..79f3a17 100644
--- a/src/src/components/auth/forgotPassword.vue
+++ b/src/src/components/auth/forgotPassword.vue
@@ -3,57 +3,48 @@
         <v-dialog v-model="showForm" persistent max-width="480px">
             <v-card>
                 <v-form ref="formRef">
-                    <v-container>
-                        <v-row>
-                            <v-col text cols="12">
-                                <h1>{{ t("title") }}?</h1>
+                    <v-card-title>
+                        <h1>{{ t("title") }}?</h1>
+                    </v-card-title>
+                    <v-card-text>
+                        <p>{{ t("instructions") }}.</p>
 
-                                <v-card-text>
-                                    <p>{{ t("instructions") }}.</p>
-
-                                    <v-text-field
-                                        v-model="emailInput"
-                                        type="text"
-                                        hide-details="auto"
-                                        dense
-                                        outlined
-                                        name="email"
-                                        :data-vv-as="t('password.email')"
-                                        :label="t('password.email')"
-                                        :rules="[rules.required, rules.email]"
-                                    >
-                                    </v-text-field>
-                                </v-card-text>
-                                <div class="v-card-actions">
-                                    <v-btn id="submit-btn" @click="cancel">{{ t("button.cancel") }}</v-btn>
-                                    <v-btn id="submit-btn" color="primary" @click="sendResetPassword">
-                                        {{ t("resetButton") }}
-                                    </v-btn>
-                                </div>
-                            </v-col>
-                        </v-row>
-                    </v-container>
+                        <v-text-field
+                            v-model="emailInput"
+                            type="text"
+                            hide-details="auto"
+                            dense
+                            outlined
+                            name="email"
+                            :data-vv-as="t('password.email')"
+                            :label="t('password.email')"
+                            :rules="[rules.required, rules.email]"
+                        >
+                        </v-text-field>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn id="submit-btn" color="secondary" @click="cancel">{{ t("button.cancel") }}</v-btn>
+                        <v-btn id="submit-btn" color="primary" @click="sendResetPassword">
+                            {{ t("resetButton") }}
+                        </v-btn>
+                    </v-card-actions>
                 </v-form>
             </v-card>
         </v-dialog>
         <v-dialog v-model="showPasswordConfirmation" persistent max-width="480px">
             <v-card>
                 <v-form>
-                    <v-container>
-                        <v-row>
-                            <v-col text cols="12">
-                                <h1>{{ t("confirmationMessage.title") }}</h1>
-
-                                <p>{{ t("confirmationMessage.instructions") }}.</p>
-
-                                <div class="v-card__actions">
-                                    <v-btn id="submit-btn" color="primary" @click="cancel">
-                                        {{ t("password.backToLogin") }}
-                                    </v-btn>
-                                </div>
-                            </v-col>
-                        </v-row>
-                    </v-container>
+                    <v-card-title>
+                        <h1>{{ t("confirmationMessage.title") }}</h1>
+                    </v-card-title>
+                    <v-card-text>
+                            <p>{{ t("confirmationMessage.instructions") }}.</p>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn id="submit-btn" color="primary" @click="cancel">
+                            {{ t("password.backToLogin") }}
+                        </v-btn>
+                    </v-card-actions>
                 </v-form>
             </v-card>
         </v-dialog>
diff --git a/src/src/components/auth/setPassword.vue b/src/src/components/auth/setPassword.vue
index ce07843..8c97cd7 100644
--- a/src/src/components/auth/setPassword.vue
+++ b/src/src/components/auth/setPassword.vue
@@ -3,72 +3,64 @@
         <v-dialog v-model="showForm" persistent max-width="480px">
             <v-card>
                 <v-form ref="formRef">
-                    <v-container>
-                        <v-row>
-                            <v-col text cols="12">
-                                <h1>{{ props.isFirstTimeSetup ? t("setTitle") : t("resetTitle") }}</h1>
-
-                                <v-text-field
-                                    class="pt-3"
-                                    v-model="password"
-                                    type="password"
-                                    hide-details="auto"
-                                    dense
-                                    outlined
-                                    name="password"
-                                    :disabled="passwordChanged"
-                                    :label="t('password')"
-                                    :rules="passwordRules"
-                                >
-                                </v-text-field>
-
-                                <v-text-field
-                                    class="pt-3"
-                                    v-model="confirmPassword"
-                                    type="password"
-                                    hide-details="auto"
-                                    dense
-                                    outlined
-                                    name="confirmPassword"
-                                    :disabled="passwordChanged"
-                                    :label="t('confirmPassword')"
-                                    :rules="[rules.required, rules.passwordMatch]"
-                                >
-                                </v-text-field>
-
-                                <div class="v-card-actions">
-                                    <v-btn id="submit-btn" color="primary" @click="cancel">
-                                        {{ t("password.backToLogin") }}
-                                    </v-btn>
-
-                                    <v-btn id="submit-btn" :disabled="passwordChanged" color="primary" @click="change">
-                                        {{ t("setPasswordButton") }}
-                                    </v-btn>
-                                </div>
-                            </v-col>
-                        </v-row>
-                    </v-container>
+                    <v-card-title>
+                        <h1>{{ props.isFirstTimeSetup ? t("setTitle") : t("resetTitle") }}</h1>
+                    </v-card-title>
+                    <v-card-text>
+                        <v-text-field
+                            class="pt-3"
+                            v-model="password"
+                            type="password"
+                            hide-details="auto"
+                            dense
+                            outlined
+                            name="password"
+                            :disabled="passwordChanged"
+                            :label="t('password')"
+                            :rules="passwordRules"
+                        >
+                        </v-text-field>
+
+                        <v-text-field
+                            class="pt-3"
+                            v-model="confirmPassword"
+                            type="password"
+                            hide-details="auto"
+                            dense
+                            outlined
+                            name="confirmPassword"
+                            :disabled="passwordChanged"
+                            :label="t('confirmPassword')"
+                            :rules="[rules.required, rules.passwordMatch]"
+                        >
+                        </v-text-field>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn id="submit-btn" color="secondary" @click="cancel">
+                            {{ t("password.backToLogin") }}
+                        </v-btn>
+
+                        <v-btn id="submit-btn" :disabled="passwordChanged" color="primary" @click="change">
+                            {{ t("setPasswordButton") }}
+                        </v-btn>
+                    </v-card-actions>
                 </v-form>
             </v-card>
         </v-dialog>
         <v-dialog v-model="passwordChanged" persistent max-width="480px">
             <v-card>
                 <v-form>
-                    <v-container>
-                        <v-row>
-                            <v-col text cols="12">
-                                <h1>{{ t("confirmationMessage.title") }}</h1>
-
-                                <p>{{ t("confirmationMessage.instructions") }}.</p>
-
-                                <div class="v-card__actions">
-                                    <v-btn id="submit-btn" color="primary" @click="cancel">
-                                        {{ t("password.backToLogin") }}
-                                    </v-btn>
-                                </div>
-                            </v-col>
-                        </v-row>
-                    </v-container>
+                    <v-card-title>
+                        <h1>{{ t("confirmationMessage.title") }}</h1>
+                    </v-card-title>
+                    <v-card-text>
+                        <p>{{ t("confirmationMessage.instructions") }}.</p>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn id="submit-btn" color="primary" @click="cancel">
+                            {{ t("password.backToLogin") }}
+                        </v-btn>
+                    </v-card-actions>
                 </v-form>
             </v-card>
         </v-dialog>
diff --git a/src/src/components/auth/signIn.vue b/src/src/components/auth/signIn.vue
index 9ebd699..eb30f07 100644
--- a/src/src/components/auth/signIn.vue
+++ b/src/src/components/auth/signIn.vue
@@ -3,72 +3,68 @@
         <v-dialog v-model="dialog" persistent max-width="360px">
             <v-card>
                 <v-form ref="formRef">
-                    <v-container>
-                        <v-row>
-                            <v-col cols="12">
-                                <img
-                                    src="/assets/images/one-beyond-logo-black.svg"
-                                    height="60"
-                                    class="mx-auto d-block logo"
-                                    alt="company logo"
-                                />
-                                <h1 class="text-center mt-2 mb-4">{{ t("title") }}</h1>
+                    <v-card-title>
+                        <img
+                            src="/assets/images/one-beyond-logo-black.svg"
+                            height="60"
+                            class="mx-auto d-block logo"
+                            alt="company logo"
+                        />
+                        <h1 class="text-center mt-2 mb-4">{{ t("title") }}</h1>
+                    </v-card-title>
+                    <v-card-text>
+                        <div>
+                            <label>{{ t("field.username") }}</label>
+                            <v-text-field
+                                density="compact"
+                                variant="outlined"
+                                v-model="username"
+                                :rules="[rules.required]"
+                                data-cy="inputUserName"
+                            ></v-text-field>
+                        </div>
 
-                                <div>
-                                    <label>{{ t("field.username") }}</label>
-                                    <v-text-field
-                                        density="compact"
-                                        variant="outlined"
-                                        v-model="username"
-                                        :rules="[rules.required]"
-                                        data-cy="inputUserName"
-                                    ></v-text-field>
-                                </div>
+                        <div>
+                            <label for="password">{{ t("field.password") }}</label>
+                            <v-text-field
+                                density="compact"
+                                variant="outlined"
+                                type="password"
+                                v-model="password"
+                                :rules="[rules.required]"
+                                data-cy="inputPassword"
+                            ></v-text-field>
+                        </div>
 
-                                <div>
-                                    <label for="password">{{ t("field.password") }}</label>
-                                    <v-text-field
-                                        density="compact"
-                                        variant="outlined"
-                                        type="password"
-                                        v-model="password"
-                                        :rules="[rules.required]"
-                                        data-cy="inputPassword"
-                                    ></v-text-field>
-                                </div>
+                        <div class="text-center">
+                            <div class="custom-control custom-checkbox">
+                                <input
+                                    type="checkbox"
+                                    class="custom-control-input"
+                                    id="rememberMe"
+                                    name="rememberMe"
+                                    value="true"
+                                    v-model="rememberMe"
+                                />
+                                <label class="custom-control-label" for="rememberMe">{{ t("field.rememberMe") }}</label>
+                            </div>
+                        </div>
+                    </v-card-text>
+                    <v-card-actions class="border-0 flex-column">
+                        <v-btn
+                            id="submit-btn"
+                            color="primary"
+                            type="submit"
+                            :disabled="signingIn"
+                            @click="signIn"
+                            data-cy="submitBtn"
+                            >{{ t("button.signIn") }}</v-btn
+                        >
 
-                                <div class="text-center">
-                                    <div class="custom-control custom-checkbox">
-                                        <input
-                                            type="checkbox"
-                                            class="custom-control-input"
-                                            id="rememberMe"
-                                            name="rememberMe"
-                                            value="true"
-                                            v-model="rememberMe"
-                                        />
-                                        <label class="custom-control-label" for="rememberMe">{{
-                                            t("field.rememberMe")
-                                        }}</label>
-                                    </div>
-                                </div>
-                                <div class="v-card-actions border-0">
-                                    <v-btn
-                                        id="submit-btn"
-                                        color="primary"
-                                        type="submit"
-                                        :disabled="signingIn"
-                                        @click="signIn"
-                                        data-cy="submitBtn"
-                                        >{{ t("button.signIn") }}</v-btn
-                                    >
-                                </div>
-                                <p class="v-card-actions border-0">
-                                    <router-link to="forgotPassword">{{ t("button.forgottenPassword") }}</router-link>
-                                </p>
-                            </v-col>
-                        </v-row>
-                    </v-container>
+                        <p class="mt-8">
+                            <router-link to="forgotPassword">{{ t("button.forgottenPassword") }}</router-link>
+                        </p>
+                    </v-card-actions>
                 </v-form>
             </v-card>
         </v-dialog>
diff --git a/src/src/components/auth/signInWithRecoveryCode.vue b/src/src/components/auth/signInWithRecoveryCode.vue
index 76b1ad8..c69ee39 100644
--- a/src/src/components/auth/signInWithRecoveryCode.vue
+++ b/src/src/components/auth/signInWithRecoveryCode.vue
@@ -2,42 +2,28 @@
     <v-dialog v-model="dialog" persistent max-width="360px">
         <v-card>
             <v-form ref="formRef">
-                <v-container>
-                    <v-row>
-                        <v-col cols="12">
-                            <img
-                                src="/assets/images/one-beyond-logo-black.svg"
-                                height="60"
-                                class="mx-auto d-block logo"
-                            />
-                            <h3 class="text-center">{{ t("title") }}</h3>
-                            <hr />
-                            <p class="text-center mb-4">{{ t("message.recoveryInfo") }}</p>
-
-                            <div>
-                                <label>{{ t("field.recoveryCode") }}</label>
-                                <v-text-field
-                                    dense
-                                    outlined
-                                    v-model="code"
-                                    :rules="[rules.required, rules.length(11), rules.alphaDash]"
-                                >
-                                </v-text-field>
-                            </div>
-
-                            <div class="v-card-actions">
-                                <v-btn
-                                    id="submit-btn"
-                                    color="primary"
-                                    type="submit"
-                                    :disabled="signingIn"
-                                    @click="signIn"
-                                    >{{ t("button.signIn") }}</v-btn
-                                >
-                            </div>
-                        </v-col>
-                    </v-row>
-                </v-container>
+                <v-card-title>
+                    <img src="/assets/images/one-beyond-logo-black.svg" height="60" class="mx-auto d-block logo" />
+                    <h3 class="text-center">{{ t("title") }}</h3>
+                </v-card-title>
+                <v-card-text>
+                    <p class="text-center mb-4">{{ t("message.recoveryInfo") }}</p>
+                    <div>
+                        <label>{{ t("field.recoveryCode") }}</label>
+                        <v-text-field
+                            dense
+                            outlined
+                            v-model="code"
+                            :rules="[rules.required, rules.length(11), rules.alphaDash]"
+                        >
+                        </v-text-field>
+                    </div>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn id="submit-btn" color="primary" type="submit" :disabled="signingIn" @click="signIn">{{
+                        t("button.signIn")
+                    }}</v-btn>
+                </v-card-actions>
             </v-form>
         </v-card>
     </v-dialog>
diff --git a/src/src/components/auth/signInWithTfa.vue b/src/src/components/auth/signInWithTfa.vue
index a368ddf..3cf84c8 100644
--- a/src/src/components/auth/signInWithTfa.vue
+++ b/src/src/components/auth/signInWithTfa.vue
@@ -2,58 +2,49 @@
     <v-dialog v-model="dialog" persistent max-width="360px">
         <v-card>
             <v-form @submit.prevent="signIn" ref="formRef">
-                <v-container>
-                    <v-row>
-                        <v-col cols="12">
-                            <img
-                                src="/assets/images/one-beyond-logo-black.svg"
-                                height="60"
-                                class="mx-auto d-block logo"
-                            />
-                            <h3 class="text-center">{{ t("title") }}</h3>
-                            <hr />
-                            <p class="text-center mb-4">{{ t("field.twoFactorInfo") }}</p>
-
-                            <div>
-                                <label>{{ t("field.twoFactorCode") }}</label>
-                                <v-text-field
-                                    type="text"
-                                    dense
-                                    outlined
-                                    v-model="code"
-                                    :rules="[rules.required, rules.numeric, rules.length(6)]"
-                                ></v-text-field>
-                            </div>
+                <v-card-title>
+                    <img src="/assets/images/one-beyond-logo-black.svg" height="60" class="mx-auto d-block logo" />
+                    <h3 class="text-center">{{ t("title") }}</h3>
+                </v-card-title>
+                <v-card-text>
+                    <p class="text-center mb-4">{{ t("field.twoFactorInfo") }}</p>
 
-                            <div class="text-center">
-                                <div class="custom-control custom-checkbox">
-                                    <input
-                                        type="checkbox"
-                                        class="custom-control-input"
-                                        id="rememberMe"
-                                        name="rememberMe"
-                                        value="true"
-                                        v-model="rememberThisMachine"
-                                    />
-                                    <label class="custom-control-label" for="rememberMe">{{
-                                        t("field.rememberThisMachine")
-                                    }}</label>
-                                </div>
-                            </div>
+                    <div>
+                        <label>{{ t("field.twoFactorCode") }}</label>
+                        <v-text-field
+                            type="text"
+                            dense
+                            outlined
+                            v-model="code"
+                            :rules="[rules.required, rules.numeric, rules.length(6)]"
+                        ></v-text-field>
+                    </div>
 
-                            <div class="v-card-actions">
-                                <v-btn id="submit2-btn" color="primary" type="submit" :disabled="signingIn">{{
-                                    t("button.signIn")
-                                }}</v-btn>
-                            </div>
-
-                            <p class="text-center mb-4">
-                                {{ t("field.recoveryInfo") }}
-                                <router-link to="signInWithRecoveryCode">{{ t("field.recoveryCode") }}</router-link>
-                            </p>
-                        </v-col>
-                    </v-row>
-                </v-container>
+                    <div class="text-center">
+                        <div class="custom-control custom-checkbox">
+                            <input
+                                type="checkbox"
+                                class="custom-control-input"
+                                id="rememberMe"
+                                name="rememberMe"
+                                value="true"
+                                v-model="rememberThisMachine"
+                            />
+                            <label class="custom-control-label" for="rememberMe">{{
+                                t("field.rememberThisMachine")
+                            }}</label>
+                        </div>
+                    </div>
+                </v-card-text>
+                <v-card-actions class="border-0 flex-column">
+                    <v-btn id="submit2-btn" color="primary" type="submit" :disabled="signingIn">{{
+                        t("button.signIn")
+                    }}</v-btn>
+                    <p class="text-center mt-7">
+                        {{ t("field.recoveryInfo") }}
+                        <router-link to="signInWithRecoveryCode">{{ t("field.recoveryCode") }}</router-link>
+                    </p>
+                </v-card-actions>
             </v-form>
         </v-card>
     </v-dialog>
diff --git a/src/src/components/tfa/disableTfa.vue b/src/src/components/tfa/disableTfa.vue
index 973abe6..b6d8257 100644
--- a/src/src/components/tfa/disableTfa.vue
+++ b/src/src/components/tfa/disableTfa.vue
@@ -3,27 +3,23 @@
         <v-dialog v-model="showDisableTFA" persistent max-width="480px">
             <v-card>
                 <v-form>
-                    <v-container>
-                        <v-row>
-                            <v-col text cols="12">
-                                <h1>{{ t("title") }}</h1>
-
-                                <v-alert dense outlined type="warning">
-                                    <p>
-                                        {{ t("message") }}
-                                        <a @click="showEnableAuthenticatorCard">{{ t("messageLink") }}</a>
-                                    </p>
-                                </v-alert>
-
-                                <div class="v-card__actions">
-                                    <v-btn @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
-                                    <v-btn color="error" class="white--text" @click="disableTFA">
-                                        {{ t("button.disableTfa") }}
-                                    </v-btn>
-                                </div>
-                            </v-col>
-                        </v-row>
-                    </v-container>
+                    <v-card-title>
+                        <h1>{{ t("title") }}</h1>
+                    </v-card-title>
+                    <v-card-text>
+                        <v-alert dense outlined type="warning">
+                            <p>
+                                {{ t("message") }}
+                                <a @click="showEnableAuthenticatorCard">{{ t("messageLink") }}</a>
+                            </p>
+                        </v-alert>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn color="secondary" @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
+                        <v-btn color="error" class="white--text" @click="disableTFA">
+                            {{ t("button.disableTfa") }}
+                        </v-btn>
+                    </v-card-actions>
                 </v-form>
             </v-card>
         </v-dialog>
diff --git a/src/src/components/tfa/enableAuthenticator.vue b/src/src/components/tfa/enableAuthenticator.vue
index 8d74c7d..9b6cc4b 100644
--- a/src/src/components/tfa/enableAuthenticator.vue
+++ b/src/src/components/tfa/enableAuthenticator.vue
@@ -2,64 +2,62 @@
     <div>
         <v-dialog v-model="showEnableAuthenticator" persistent max-width="480px">
             <v-card>
-                <v-container>
-                    <v-row>
-                        <v-col text cols="12">
-                            <h1>{{ t("title") }}</h1>
-                            <v-form id="send-code" @submit.prevent="enableTfa">
-                                <ol class="list">
-                                    <li>
-                                        {{ t("downloadMessage") }}:
-                                        <a href="https://go.microsoft.com/fwlink?Linkid=825072">{{ t("android") }}</a>
-                                        {{ t("and") }}
-                                        <a href="https://go.microsoft.com/fwlink?Linkid=825073">{{ t("ios") }}</a>
-                                        {{ t("or") }}
-                                        {{ t("downloadLinkGoogleAuthenticator") }}
-                                        <a
-                                            href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en"
-                                            >{{ t("android") }}</a
-                                        >
-                                        {{ t("and") }}
-                                        <a
-                                            href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8"
-                                            >{{ t("ios") }}</a
-                                        >.
-                                    </li>
-                                    <li>
-                                        {{ t("scanQrCode") }}
-                                        <kbd>{{ tfaSettings?.sharedKey }}</kbd>
-                                        {{ t("scanQrCodeInfo") }}
-                                        <QRCode
-                                            :value="tfaSettings?.authenticationUri"
-                                            :size="200"
-                                            v-if="tfaSettings?.authenticationUri"
-                                        />
-                                    </li>
-                                    <li>
-                                        {{ t("scanQrCodeInfoTwo") }}
-                                        <div class="row">
-                                            <div class="col-12 mt-3">
-                                                <div class="form-group">
-                                                    <label class="control-label">{{ t("verificationCode") }}</label>
-                                                    <v-text-field
-                                                        dense
-                                                        outlined
-                                                        v-model="code"
-                                                        :rules="[rules.code]"
-                                                    ></v-text-field>
-                                                </div>
-                                            </div>
+                <v-card-title>
+                    <h1>{{ t("title") }}</h1>
+                </v-card-title>
+                <v-form id="send-code" @submit.prevent="enableTfa">
+                    <v-card-text>
+                        <ol class="list">
+                            <li>
+                                {{ t("downloadMessage") }}:
+                                <a href="https://go.microsoft.com/fwlink?Linkid=825072">{{ t("android") }}</a>
+                                {{ t("and") }}
+                                <a href="https://go.microsoft.com/fwlink?Linkid=825073">{{ t("ios") }}</a>
+                                {{ t("or") }}
+                                {{ t("downloadLinkGoogleAuthenticator") }}
+                                <a
+                                    href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en"
+                                    >{{ t("android") }}</a
+                                >
+                                {{ t("and") }}
+                                <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">{{
+                                    t("ios")
+                                }}</a
+                                >.
+                            </li>
+                            <li>
+                                {{ t("scanQrCode") }}
+                                <kbd>{{ tfaSettings?.sharedKey }}</kbd>
+                                {{ t("scanQrCodeInfo") }}
+                                <QRCode
+                                    :value="tfaSettings?.authenticationUri"
+                                    :size="200"
+                                    v-if="tfaSettings?.authenticationUri"
+                                />
+                            </li>
+                            <li>
+                                {{ t("scanQrCodeInfoTwo") }}
+                                <div class="row">
+                                    <div class="col-12 mt-3">
+                                        <div class="form-group">
+                                            <label class="control-label">{{ t("verificationCode") }}</label>
+                                            <v-text-field
+                                                dense
+                                                outlined
+                                                v-model="code"
+                                                :rules="[rules.code]"
+                                            ></v-text-field>
                                         </div>
-                                    </li>
-                                </ol>
-                                <div class="v-card-actions">
-                                    <v-btn @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
-                                    <v-btn color="primary" type="submit">{{ t("verify") }}</v-btn>
+                                    </div>
                                 </div>
-                            </v-form>
-                        </v-col>
-                    </v-row>
-                </v-container>
+                            </li>
+                        </ol>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn color="secondary" @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
+                        <v-btn color="primary" type="submit">{{ t("verify") }}</v-btn>
+                    </v-card-actions>
+                </v-form>
             </v-card>
         </v-dialog>
     </div>
diff --git a/src/src/components/tfa/generateRecoveryCodes.vue b/src/src/components/tfa/generateRecoveryCodes.vue
index 883e6dd..01788d5 100644
--- a/src/src/components/tfa/generateRecoveryCodes.vue
+++ b/src/src/components/tfa/generateRecoveryCodes.vue
@@ -2,40 +2,29 @@
     <div>
         <v-dialog v-model="showGenerateRecoveryCodes" persistent max-width="480px">
             <v-card>
-                <v-container>
-                    <v-row>
-                        <v-col text cols="12">
-                            <div>
-                                <div class="text-center">
-                                    <h1>{{ t("title") }}</h1>
-
-                                    <v-alert dense outlined type="warning">
-                                        <p>
-                                            <strong>{{ t("recoveryCodesInfo") }}</strong>
-                                        </p>
-                                        <p>
-                                            {{ t("reminder") }}
-                                        </p>
-                                    </v-alert>
-                                    <p>
-                                        {{ t("generateInfo") }}
-                                        <a @click="showEnableAuthenticatorCard">{{ t("resetLink") }}</a>
-                                    </p>
-                                    <div></div>
-                                </div>
-                            </div>
-                            <div class="text-center mt-4">
-                                <div class="v-card-actions">
-                                    <v-btn @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
-
-                                    <v-btn color="primary" type="button" @click="showRecoveryCodesCard">{{
-                                        t("button.generate")
-                                    }}</v-btn>
-                                </div>
-                            </div>
-                        </v-col>
-                    </v-row>
-                </v-container>
+                <v-card-title>
+                    <h1>{{ t("title") }}</h1>
+                </v-card-title>
+                <v-card-text class="text-center">
+                    <v-alert dense outlined type="warning">
+                        <p>
+                            <strong>{{ t("recoveryCodesInfo") }}</strong>
+                        </p>
+                        <p>
+                            {{ t("reminder") }}
+                        </p>
+                    </v-alert>
+                    <p>
+                        {{ t("generateInfo") }}
+                        <a @click="showEnableAuthenticatorCard">{{ t("resetLink") }}</a>
+                    </p>
+                </v-card-text>
+                <v-card-actions class="text-center mt-4">
+                    <v-btn color="secondary" @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
+                    <v-btn color="primary" type="button" @click="showRecoveryCodesCard">{{
+                        t("button.generate")
+                    }}</v-btn>
+                </v-card-actions>
             </v-card>
         </v-dialog>
     </div>
diff --git a/src/src/components/tfa/resetAuthenticator.vue b/src/src/components/tfa/resetAuthenticator.vue
index 4a44dcf..fd3244f 100644
--- a/src/src/components/tfa/resetAuthenticator.vue
+++ b/src/src/components/tfa/resetAuthenticator.vue
@@ -2,36 +2,25 @@
     <div>
         <v-dialog v-model="showResetAuthenticator" persistent max-width="480px">
             <v-card>
-                <v-container>
-                    <v-row>
-                        <v-col text cols="12">
-                            <div>
-                                <div class="text-center">
-                                    <h1>{{ t("title") }}</h1>
-
-                                    <v-alert dense outlined type="warning">
-                                        <strong>{{ t("resetKey") }}</strong>
-                                    </v-alert>
-                                    <p>
-                                        {{ t("disableTfaInfo") }}
-                                    </p>
-                                    <div>
-                                        <v-form method="post" class="form-group" @submit.prevent="resetTfa">
-                                            <div class="v-card-actions">
-                                                <v-btn @click="showTwoFactorAuthentication">
-                                                    {{ t("button.cancel") }}</v-btn
-                                                >
-                                                <v-btn color="error" class="white--text" type="submit">{{
-                                                    t("button.resetBtn")
-                                                }}</v-btn>
-                                            </div>
-                                        </v-form>
-                                    </div>
-                                </div>
-                            </div>
-                        </v-col>
-                    </v-row>
-                </v-container>
+                <v-card-title>
+                    <h1>{{ t("title") }}</h1>
+                </v-card-title>
+                <v-card-text>
+                    <div class="text-center">
+                        <v-alert dense outlined type="warning">
+                            <strong>{{ t("resetKey") }}</strong>
+                        </v-alert>
+                        <p>
+                            {{ t("disableTfaInfo") }}
+                        </p>
+                    </div>
+                </v-card-text>
+                <v-card-actions>
+                    <v-form method="post" @submit.prevent="resetTfa">
+                        <v-btn color="secondary" @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
+                        <v-btn color="error" class="white--text" type="submit">{{ t("button.resetBtn") }}</v-btn>
+                    </v-form>
+                </v-card-actions>
             </v-card>
         </v-dialog>
     </div>
diff --git a/src/src/components/tfa/showRecoveryCodes.vue b/src/src/components/tfa/showRecoveryCodes.vue
index c2cafcb..22b0ac3 100644
--- a/src/src/components/tfa/showRecoveryCodes.vue
+++ b/src/src/components/tfa/showRecoveryCodes.vue
@@ -2,47 +2,39 @@
     <div>
         <v-dialog v-model="showRecoveryCodes" persistent max-width="480px">
             <v-card>
-                <v-container>
-                    <v-row>
-                        <v-col text cols="12">
-                            <div class="text-center">
-                                <h1>{{ t("title") }}</h1>
-
-                                <v-alert dense outlined type="warning">
-                                    <p>
-                                        <strong>{{ t("codeInfo") }}</strong>
-                                    </p>
-                                    <p>
-                                        {{ t("loseCodeInfo") }}
-                                    </p>
-                                </v-alert>
-
-                                <v-container class="pb-10">
-                                    <v-row>
-                                        <v-col cols="12">
-                                            <v-row
-                                                justify="center"
-                                                v-for="i in Math.ceil(recoveryCodes.length / 2)"
-                                                :key="i"
-                                            >
-                                                <code
-                                                    class="text-center ma-1"
-                                                    v-for="item in recoveryCodes.slice((i - 1) * 2, i * 2)"
-                                                    :key="item"
-                                                    >{{ item }} <br
-                                                /></code>
-                                            </v-row>
-                                        </v-col>
+                <v-card-title>
+                    <h1>{{ t("title") }}</h1>
+                </v-card-title>
+                <v-card-text>
+                    <div class="text-center">
+                        <v-alert dense outlined type="warning">
+                            <p>
+                                <strong>{{ t("codeInfo") }}</strong>
+                            </p>
+                            <p>
+                                {{ t("loseCodeInfo") }}
+                            </p>
+                        </v-alert>
+                        <v-container class="pb-10">
+                            <v-row>
+                                <v-col cols="12">
+                                    <v-row justify="center" v-for="i in Math.ceil(recoveryCodes.length / 2)" :key="i">
+                                        <code
+                                            class="text-center ma-1"
+                                            v-for="item in recoveryCodes.slice((i - 1) * 2, i * 2)"
+                                            :key="item"
+                                            >{{ item }} <br
+                                        /></code>
                                     </v-row>
-                                </v-container>
-                            </div>
-                            <div class="v-card-actions">
-                                <v-btn @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
-                                <v-btn color="primary" @click="returnToDashboard">{{ t("button.generate") }}</v-btn>
-                            </div>
-                        </v-col>
-                    </v-row>
-                </v-container>
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                    </div>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn color="secondary" @click="showTwoFactorAuthentication"> {{ t("button.cancel") }}</v-btn>
+                    <v-btn color="primary" @click="returnToDashboard">{{ t("button.generate") }}</v-btn>
+                </v-card-actions>
             </v-card>
         </v-dialog>
     </div>
diff --git a/src/src/components/tfa/twoFactorAuthentication.vue b/src/src/components/tfa/twoFactorAuthentication.vue
index 7a704e0..f0b74af 100644
--- a/src/src/components/tfa/twoFactorAuthentication.vue
+++ b/src/src/components/tfa/twoFactorAuthentication.vue
@@ -2,8 +2,10 @@
     <div>
         <v-dialog v-model="showForm" persistent max-width="480px">
             <v-card>
-                <v-container>
+                <v-card-title>
                     <h1>{{ t("title") }}</h1>
+                </v-card-title>
+                <v-card-text>
                     <v-row v-if="tfaSettings.is2faEnabled">
                         <v-col text cols="12" class="text-center">
                             <h2 v-if="message != ''">{{ message }}</h2>
@@ -54,26 +56,26 @@
                             <p v-if="showEnableAuthenticator">
                                 To set up two-factor authentication first you must configure the app.
                             </p>
-                            <div class="v-card-actions">
-                                <v-btn @click="dashboard">{{ t("button.cancel") }}</v-btn>
-
-                                <div>
-                                    <div v-if="!tfaSettings.is2faEnabled">
-                                        <v-btn color="primary" @click="showEnableAuthenticatorCard">
-                                            {{ t("link.enableAuthenticator") }}
-                                        </v-btn>
-                                    </div>
-                                </div>
-
-                                <div v-if="tfaSettings.hasAuthenticator && tfaSettings.is2faEnabled">
-                                    <v-btn color="primary" @click="showResetAuthenticatorCard">
-                                        {{ t("link.resetAuthenticator") }}
-                                    </v-btn>
-                                </div>
-                            </div>
                         </v-col>
                     </v-row>
-                </v-container>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn color="secondary" @click="dashboard">{{ t("button.cancel") }}</v-btn>
+
+                    <div>
+                        <div v-if="!tfaSettings.is2faEnabled">
+                            <v-btn color="primary" @click="showEnableAuthenticatorCard">
+                                {{ t("link.enableAuthenticator") }}
+                            </v-btn>
+                        </div>
+                    </div>
+
+                    <div v-if="tfaSettings.hasAuthenticator && tfaSettings.is2faEnabled">
+                        <v-btn color="primary" @click="showResetAuthenticatorCard">
+                            {{ t("link.resetAuthenticator") }}
+                        </v-btn>
+                    </div>
+                </v-card-actions>
             </v-card>
         </v-dialog>
 
diff --git a/src/src/components/util/globalErrorHandler.vue b/src/src/components/util/globalErrorHandler.vue
index 4ce9f57..3517724 100644
--- a/src/src/components/util/globalErrorHandler.vue
+++ b/src/src/components/util/globalErrorHandler.vue
@@ -21,7 +21,7 @@
             </template>
 
             <template #footer>
-                <v-btn type="button" class="btn btn-primary" @click="refreshPage">{{ $t("button.reload") }}</v-btn>
+                <v-btn color="primary" type="button" class="btn btn-primary" @click="refreshPage">{{ $t("button.reload") }}</v-btn>
             </template>
         </v-modalPopup>
     </div>
diff --git a/src/src/components/util/modalPopup.vue b/src/src/components/util/modalPopup.vue
index 3eed5d5..c95a9e5 100644
--- a/src/src/components/util/modalPopup.vue
+++ b/src/src/components/util/modalPopup.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="visible">
         <v-dialog v-model="visible" persistent max-width="500px" :class="['modal-dialog', modalClass]">
-            <v-card class="py-5">
+            <v-card>
                 <slot name="header">
                     <h1>
                         {{ title }}
@@ -12,7 +12,7 @@
                 </slot>
                 <div class="v-card-actions">
                     <slot name="footer">
-                        <v-btn @click="onClose">{{ t("button.close") }}</v-btn>
+                        <v-btn color="secondary" @click="onClose">{{ t("button.close") }}</v-btn>
                     </slot>
                 </div>
             </v-card>
diff --git a/src/src/components/util/sessionTimeout.vue b/src/src/components/util/sessionTimeout.vue
index 869e637..f46d9b0 100644
--- a/src/src/components/util/sessionTimeout.vue
+++ b/src/src/components/util/sessionTimeout.vue
@@ -9,7 +9,7 @@
             </v-card>
             <v-card-actions class="text-right">
                 <v-spacer></v-spacer>
-                <v-btn type="button" id="cancelLogoutBtn" @click="cancelLogout">
+                <v-btn type="button" id="cancelLogoutBtn" color="primary" @click="cancelLogout">
                     {{ t("button.keepWorking") }}
                 </v-btn>
                 <v-btn id="logoutBtn" color="error" @click="doLogout">
diff --git a/src/src/js/localizations/resources/components/accessDenied.ts b/src/src/js/localizations/resources/components/accessDenied.ts
index 0bf9641..9697229 100644
--- a/src/src/js/localizations/resources/components/accessDenied.ts
+++ b/src/src/js/localizations/resources/components/accessDenied.ts
@@ -1,6 +1,6 @@
 export default {
     en: {
         title: "Access Denied",
-        info: "ou do not have access to this resource.",
+        info: "You do not have access to this resource.",
     },
 };