#42 - wip

resources/js/Pages/Login.vue

@@ -1,41 +1,5 @@
 <template>
   <InertiaHead title="Zaloguj się" />
-  <transition
-    enter-active-class="transform ease-out duration-300 transition"
-    enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-    leave-active-class="transition ease-in duration-100"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div
-      v-if="errors.oauth"
-      class="absolute inset-x-2 top-2 sm:mx-auto sm:w-full sm:max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
-    >
-      <div class="p-4">
-        <div class="flex items-center">
-          <div class="w-0 flex-1 flex justify-between">
-            <ExclamationIcon class="h-5 w-5 text-white" />
-            <p class="w-0 flex-1 text-sm font-medium text-white">
-              {{ errors.oauth }}
-            </p>
-          </div>
-          <div class="ml-4 flex-shrink-0 flex">
-            <button
-              class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
-              @click="delete errors.oauth"
-            >
-              <span class="sr-only">Close</span>
-              <XIcon
-                class="h-5 w-5"
-                aria-hidden="true"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </transition>
   <div
     class="sm:mx-auto sm:w-full sm:max-w-md text-white space-y-4 flex flex-col items-center rounded-lg px-4 py-8"
     dusk="login-link"
@@ -66,21 +30,10 @@
 
 <script>
 import GuestLayout from '@/Shared/Layout/GuestLayout'
-import {XIcon} from '@heroicons/vue/solid'
-import {ExclamationIcon} from '@heroicons/vue/solid'
 
 export default {
   name: 'LoginPage',
-  components: {
-    XIcon,
-    ExclamationIcon,
-  },
+
   layout: GuestLayout,
-  props: {
-    errors: {
-      type: Object,
-      default: () => ({oauth: null}),
-    },
-  },
 }
 </script>

resources/js/Shared/FlashMessage.vue

@@ -0,0 +1,97 @@
+<template>
+  <transition
+    enter-active-class="transform ease-out duration-300 transition"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition ease-in duration-100"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="$page.props.flash.success && show"
+      class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-green-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
+    >
+      <div class="p-4">
+        <div class="flex items-center">
+          <div class="w-0 flex-1 flex justify-between">
+            <CheckCircleIcon class="h-5 w-5 text-white mr-2" />
+            <p class="w-0 flex-1 text-sm font-medium text-white">
+              {{ $page.props.flash.success }}
+            </p>
+          </div>
+          <div class="ml-4 flex-shrink-0 flex">
+            <button
+              class="bg-green-500 rounded-md inline-flex text-green-100 hover:text-green-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600"
+              @click="show = false"
+            >
+              <span class="sr-only">Close</span>
+              <XIcon
+                class="h-5 w-5"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+  <div
+    v-if="($page.props.flash.error) && show"
+    class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
+  >
+    <div class="p-4">
+      <div class="flex items-center">
+        <div class="w-0 flex-1 flex justify-between">
+          <ExclamationIcon class="h-5 w-5 text-white mr-2" />
+          <p class="w-0 flex-1 text-sm font-medium text-white">
+            {{ $page.props.flash.error }}
+          </p>
+        </div>
+        <div class="ml-4 flex-shrink-0 flex">
+          <button
+            class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
+            @click="show = false"
+          >
+            <span class="sr-only">Close</span>
+            <XIcon
+              class="h-5 w-5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {XIcon} from '@heroicons/vue/outline'
+import {ExclamationIcon, CheckCircleIcon} from '@heroicons/vue/solid'
+
+export default {
+  name: 'FlashMessage',
+  components: {
+    CheckCircleIcon,
+    ExclamationIcon,
+    XIcon,
+  },
+  props: {
+    flash: Object,
+    default: () => ({success: null, error: null}),
+  },
+  data() {
+    return {
+      show:true,
+    }
+  },
+  watch: {
+    '$page.props.flash': {
+      handler() {
+        this.show = true
+        setTimeout(() => this.show = false, 6000)
+      },
+    },
+    deep: true,
+  },
+}
+</script>

resources/js/Shared/Layout/AppLayout.vue

@@ -2,6 +2,7 @@
   <div class="min-h-full">
     <MainMenu />
     <main class="lg:ml-64 flex flex-col flex-1 py-8">
+      <FlashMessage />
       <div>
         <slot />
       </div>
@@ -11,9 +12,13 @@
 
 <script>
 import MainMenu from '@/Shared/MainMenu'
+import FlashMessage from '@/Shared/FlashMessage'
 
 export default {
   name: 'AppLayout',
-  components: {MainMenu},
+  components: {
+    FlashMessage,
+    MainMenu,
+  },
 }
 </script>

resources/js/Shared/Layout/GuestLayout.vue

@@ -1,12 +1,14 @@
-
 <template>
   <div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
+    <FlashMessage />
     <slot />
   </div>
 </template>
 
 <script>
+import FlashMessage from '@/Shared/FlashMessage'
 export default {
   name: 'GuestLayout',
+  components: {FlashMessage},
 }
 </script>

resources/js/Shared/MainMenu.vue

@@ -363,11 +363,11 @@ export default {
 
     const navigation = [
       {name: 'Strona główna', href: '/', icon: HomeIcon, current: true},
-      {name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
-      {name: 'Dostępne urlopy', href: '/vacation-limits', icon: SunIcon, current: false},
-      {name: 'Twoje wnioski', href: '/vacation-requests', icon: CollectionIcon, current: false},
-      {name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false},
+      {name: 'Wnioski urlopowe', href: '/vacation-requests', icon: CollectionIcon, current: false},
       {name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon, current: false},
+      {name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false},
+      {name: 'Limity urlopów', href: '/vacation-limits', icon: SunIcon, current: false},
+      {name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
     ]
     const userNavigation = [
       {name: 'Your Profile', href: '#'},