[1.x] Reduce verbosity by introducing a 'Guest' layout (#52)

* [1.x] Reduce verbosity by introducing a 'Guest' layout

* Consistent usage of `<slot />`

* Prefix 'Breeze' for Authenticated Layout

* More <slot /> consistency fixes

* Another <slot /> consistency fix

stubs/inertia/resources/js/Components/Button.vue

@@ -1,6 +1,6 @@
 <template>
  <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150">
- <slot></slot>
+ <slot />
  </button>
 </template>
 

stubs/inertia/resources/js/Components/Dropdown.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="relative">
  <div @click="open = ! open">
- <slot name="trigger"></slot>
+ <slot name="trigger" />
  </div>
 
  <!-- Full Screen Dropdown Overlay -->
@@ -21,7 +21,7 @@
  style="display: none;"
  @click="open = false">
  <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
- <slot name="content"></slot>
+ <slot name="content" />
  </div>
  </div>
  </transition>

stubs/inertia/resources/js/Components/DropdownLink.vue

@@ -1,11 +1,11 @@
 <template>
  <div>
  <button type="submit" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" v-if="as == 'button'">
- <slot></slot>
+ <slot />
  </button>
 
  <inertia-link :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" v-else>
- <slot></slot>
+ <slot />
  </inertia-link>
  </div>
 </template>

stubs/inertia/resources/js/Components/Label.vue

@@ -1,7 +1,7 @@
 <template>
  <label class="block font-medium text-sm text-gray-700">
  <span v-if="value">{{ value }}</span>
- <span v-else><slot></slot></span>
+ <span v-else><slot /></span>
  </label>
 </template>
 

stubs/inertia/resources/js/Components/NavLink.vue

@@ -1,6 +1,6 @@
 <template>
  <inertia-link :href="href" :class="classes">
- <slot></slot>
+ <slot />
  </inertia-link>
 </template>
 

stubs/inertia/resources/js/Components/ResponsiveNavLink.vue

@@ -1,11 +1,11 @@
 <template>
  <div>
  <button :class="classes" class="w-full text-left" v-if="as == 'button'">
- <slot></slot>
+ <slot />
  </button>
 
  <inertia-link :href="href" :class="classes" v-else>
- <slot></slot>
+ <slot />
  </inertia-link>
  </div>
 </template>

stubs/inertia/resources/js/Layouts/AppLayout.vue → stubs/inertia/resources/js/Layouts/Authenticated.vue

@@ -89,13 +89,13 @@
  <!-- Page Heading -->
  <header class="bg-white shadow" v-if="$slots.header">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
- <slot name="header"></slot>
+ <slot name="header" />
  </div>
  </header>
 
  <!-- Page Content -->
  <main>
- <slot></slot>
+ <slot />
  </main>
  </div>
  </div>

stubs/inertia/resources/js/Layouts/Guest.vue

@@ -0,0 +1,23 @@
+<template>
+ <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+ <div>
+ <inertia-link href="/">
+ <breeze-application-logo class="w-20 h-20 fill-current text-gray-500" />
+ </inertia-link>
+ </div>
+
+ <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+ <slot />
+ </div>
+ </div>
+</template>
+
+<script>
+ import BreezeApplicationLogo from '@/Components/ApplicationLogo'
+
+ export default {
+ components: {
+ BreezeApplicationLogo,
+ }
+ }
+</script>

stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue

@@ -1,44 +1,35 @@
 <template>
- <breeze-authentication-card>
- <template #logo>
- <inertia-link href="/">
- <breeze-application-logo class="w-20 h-20 fill-current text-gray-500" />
- </inertia-link>
- </template>
+ <div class="mb-4 text-sm text-gray-600">
+ This is a secure area of the application. Please confirm your password before continuing.
+ </div>
 
- <div class="mb-4 text-sm text-gray-600">
- This is a secure area of the application. Please confirm your password before continuing.
- </div>
-
- <breeze-validation-errors class="mb-4" />
+ <breeze-validation-errors class="mb-4" />
 
-  <form @submit.prevent="submit">
-  <div>
-  <breeze-label for="password" value="Password" />
-  <breeze-input id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" autofocus />
-  </div>
+ <form @submit.prevent="submit">
+ <div>
+ <breeze-label for="password" value="Password" />
+ <breeze-input id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" autofocus />
+ </div>
 
- <div class="flex justify-end mt-4">
- <breeze-button class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
- Confirm
- </breeze-button>
- </div>
- </form>
- </breeze-authentication-card>
+ <div class="flex justify-end mt-4">
+ <breeze-button class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+ Confirm
+ </breeze-button>
+ </div>
+ </form>
 </template>
 
 <script>
- import BreezeAuthenticationCard from '@/Components/AuthenticationCard'
- import BreezeApplicationLogo from '@/Components/ApplicationLogo'
  import BreezeButton from '@/Components/Button'
+ import BreezeGuestLayout from "@/Layouts/Guest"
  import BreezeInput from '@/Components/Input'
  import BreezeLabel from '@/Components/Label'
  import BreezeValidationErrors from '@/Components/ValidationErrors'
 
  export default {
+ layout: BreezeGuestLayout,
+
  components: {
- BreezeAuthenticationCard,
- BreezeApplicationLogo,
  BreezeButton,
  BreezeInput,
  BreezeLabel,

stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue

@@ -1,48 +1,39 @@
 <template>
- <breeze-authentication-card>
- <template #logo>
- <inertia-link href="/">
- <breeze-application-logo class="w-20 h-20 fill-current text-gray-500" />
- </inertia-link>
- </template>
+ <div class="mb-4 text-sm text-gray-600">
+ Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
+ </div>
 
- <div class="mb-4 text-sm text-gray-600">
- Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
- </div>
-
- <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
- {{ status }}
- </div>
+ <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
+ {{ status }}
+ </div>
 
-  <breeze-validation-errors class="mb-4" />
+ <breeze-validation-errors class="mb-4" />
 
-  <form @submit.prevent="submit">
-  <div>
-  <breeze-label for="email" value="Email" />
-  <breeze-input id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus />
-  </div>
+ <form @submit.prevent="submit">
+ <div>
+ <breeze-label for="email" value="Email" />
+ <breeze-input id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus />
+ </div>
 
- <div class="flex items-center justify-end mt-4">
- <breeze-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
- Email Password Reset Link
- </breeze-button>
- </div>
- </form>
- </breeze-authentication-card>
+ <div class="flex items-center justify-end mt-4">
+ <breeze-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+ Email Password Reset Link
+ </breeze-button>
+ </div>
+ </form>
 </template>
 
 <script>
- import BreezeApplicationLogo from '@/Components/ApplicationLogo'
- import BreezeAuthenticationCard from '@/Components/AuthenticationCard'
  import BreezeButton from '@/Components/Button'
+ import BreezeGuestLayout from "@/Layouts/Guest"
  import BreezeInput from '@/Components/Input'
  import BreezeLabel from '@/Components/Label'
  import BreezeValidationErrors from '@/Components/ValidationErrors'
 
  export default {
+ layout: BreezeGuestLayout,
+
  components: {
- BreezeApplicationLogo,
- BreezeAuthenticationCard,
  BreezeButton,
  BreezeInput,
  BreezeLabel,

stubs/inertia/resources/js/Pages/Auth/Login.vue

@@ -1,61 +1,52 @@
 <template>
- <breeze-authentication-card>
- <template #logo>
- <inertia-link href="/">
- <breeze-application-logo class="w-20 h-20 fill-current text-gray-500" />
- </inertia-link>
- </template>
+ <breeze-validation-errors class="mb-4" />
 
- <breeze-validation-errors class="mb-4" />
+ <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
+ {{ status }}
+ </div>
 
- <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
- {{ status }}
+ <form @submit.prevent="submit">
+ <div>
+ <breeze-label for="email" value="Email" />
+ <breeze-input id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus />
  </div>
 
- <form @submit.prevent="submit">
- <div>
- <breeze-label for="email" value="Email" />
- <breeze-input id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus />
- </div>
-
- <div class="mt-4">
- <breeze-label for="password" value="Password" />
- <breeze-input id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" />
- </div>
+ <div class="mt-4">
+ <breeze-label for="password" value="Password" />
+ <breeze-input id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" />
+ </div>
 
-  <div class="block mt-4">
-  <label class="flex items-center">
-  <breeze-checkbox name="remember" v-model:checked="form.remember" />
-  <span class="ml-2 text-sm text-gray-600">Remember me</span>
-  </label>
-  </div>
+ <div class="block mt-4">
+ <label class="flex items-center">
+ <breeze-checkbox name="remember" v-model:checked="form.remember" />
+ <span class="ml-2 text-sm text-gray-600">Remember me</span>
+ </label>
+ </div>
 
-  <div class="flex items-center justify-end mt-4">
-  <inertia-link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900">
-  Forgot your password?
-  </inertia-link>
+ <div class="flex items-center justify-end mt-4">
+ <inertia-link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900">
+ Forgot your password?
+ </inertia-link>
 
- <breeze-button class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
- Log in
- </breeze-button>
- </div>
- </form>
- </breeze-authentication-card>
+ <breeze-button class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+ Log in
+ </breeze-button>
+ </div>
+ </form>
 </template>
 
 <script>
- import BreezeApplicationLogo from '@/Components/ApplicationLogo'
- import BreezeAuthenticationCard from '@/Components/AuthenticationCard'
  import BreezeButton from '@/Components/Button'
+ import BreezeGuestLayout from "@/Layouts/Guest"
  import BreezeInput from '@/Components/Input'
  import BreezeCheckbox from '@/Components/Checkbox'
  import BreezeLabel from '@/Components/Label'
  import BreezeValidationErrors from '@/Components/ValidationErrors'
 
  export default {
+ layout: BreezeGuestLayout,
+
  components: {
- BreezeApplicationLogo,
- BreezeAuthenticationCard,
  BreezeButton,
  BreezeInput,
  BreezeCheckbox,