Retrofit bootstrap layout to Jetstream pages

munkireport · Jan 11, 2024 · 9db7d5c · 9db7d5c
1 parent f64c6e4
commit 9db7d5c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 49 deletions.
diff --git a/resources/js/Layouts/BlankLayout.vue b/resources/js/Layouts/BlankLayout.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, defineProps, withDefaults } from 'vue';
+import { Head, Link, usePage } from '@inertiajs/vue3';
+import Footer from '@/Components/Footer.vue'
+
+export interface Props {
+  title?: string;
+  theme?: string;
+}
+
+const page = usePage()
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'MunkiReport 6.0',
+  theme: 'Default',
+})
+
+
+</script>
+
+<template>
+  <Head>
+    <title>{{ title }}</title>
+    <link
+      id="bootstrap-stylesheet"
+      rel="stylesheet"
+      :href="`/assets/themes/${theme}/bootstrap.min.css`"
+    >
+  </Head>
+  <main style="padding-top: 56px;">
+    <slot />
+  </main>
+  <Footer />
+</template>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,11 +1,7 @@
 <script setup>
 import { Head, useForm } from '@inertiajs/vue3';
 import AuthenticationCard from '@/Components/AuthenticationCard.vue';
-import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
+import BlankLayout from '@/Layouts/BlankLayout.vue';
 
 defineProps({
     status: String,
@@ -21,10 +17,10 @@ const submit = () => {
 </script>
 
 <template>
-    <Head title="Forgot Password" />
-
-    <div class="d-flex justify-content-center">
-      <div class="d-flex flex-column justify-content-center vh-100">
+  <Head title="Forgot Password" />
+  <BlankLayout>
+    <div class="container">
+      <div class="d-flex justify-content-center">
         <AuthenticationCard>
             <template #header>
               Forgot Password
@@ -55,7 +51,7 @@ const submit = () => {
                 </div>
             </form>
         </AuthenticationCard>
-
       </div>
     </div>
+  </BlankLayout>
 </template>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { Head, useForm } from '@inertiajs/vue3';
 import AuthenticationCard from '@/Components/AuthenticationCard.vue';
-
+import BlankLayout from '@/Layouts/BlankLayout.vue';
 
 const props = defineProps({
     email: String,
@@ -23,47 +23,49 @@ const submit = () => {
 </script>
 
 <template>
-    <Head title="Reset Password" />
+  <Head title="Reset Password" />
+  <BlankLayout>
+    <div class="container mt-4">
+      <AuthenticationCard>
+          <template #header>
+            Reset Password
+          </template>
+          <form @submit.prevent="submit">
+              <div class="form-group">
+                <label for="email">Email</label>
+                <input id="email"
+                       class="form-control"
+                       v-model="form.email"
+                       type="email"
+                       required
+                       autofocus
+                       autocomplete="username" />
+                <div class="invalid-feedback" v-if="form.errors.email">{{ form.errors.email }}</div>
+              </div>
 
-    <AuthenticationCard>
-        <template #header>
-          Reset Password
-        </template>
-        <form @submit.prevent="submit">
             <div class="form-group">
-              <label for="email">Email</label>
-              <input id="email"
+              <label for="password">Password</label>
+              <input id="password"
                      class="form-control"
-                     v-model="form.email"
-                     type="email"
+                     v-model="form.password"
+                     type="password"
                      required
-                     autofocus
-                     autocomplete="username" />
-              <div class="invalid-feedback" v-if="form.errors.email">{{ form.errors.email }}</div>
+                     autocomplete="new-password" />
+              <div class="invalid-feedback" v-if="form.errors.password">{{ form.errors.password }}</div>
             </div>
-
-          <div class="form-group">
-            <label for="password">Password</label>
-            <input id="password"
-                   class="form-control"
-                   v-model="form.password"
-                   type="password"
-                   required
-                   autocomplete="new-password" />
-            <div class="invalid-feedback" v-if="form.errors.password">{{ form.errors.password }}</div>
-          </div>
-          <div class="form-group">
-            <label for="password_confirmation">Confirm Password</label>
-            <input id="password_password"
-                   class="form-control"
-                   v-model="form.password_confirmation"
-                   type="password"
-                   required
-                   autocomplete="new-password" />
-            <div class="invalid-feedback" v-if="form.errors.password_confirmation">{{ form.errors.password_confirmation }}</div>
-          </div>
-
-          <button class="btn btn-primary" type="submit" :disabled="form.processing">Reset Password</button>
-        </form>
-    </AuthenticationCard>
+            <div class="form-group">
+              <label for="password_confirmation">Confirm Password</label>
+              <input id="password_password"
+                     class="form-control"
+                     v-model="form.password_confirmation"
+                     type="password"
+                     required
+                     autocomplete="new-password" />
+              <div class="invalid-feedback" v-if="form.errors.password_confirmation">{{ form.errors.password_confirmation }}</div>
+            </div>
+              <button class="btn btn-primary" type="submit" :disabled="form.processing">Reset Password</button>
+          </form>
+      </AuthenticationCard>
+    </div>
+  </BlankLayout>
 </template>