From a3efc2927b1a866abb368be0316b3ec6c25c083c Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 11:01:04 +0200
Subject: [PATCH 01/14] fix: scoped scrollbar homepage-specific styling to the
 homepage

---
 resources/css/app.css       | 3 ---
 resources/js/Pages/Home.vue | 6 ++++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index db9cf08b..95361bc6 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,9 +6,6 @@
 .v-leave-active {
   transition: opacity 0.3s ease;
 }
-html {
-  overflow-y: scroll;
-}
 .v-enter-from,
 .v-leave-to {
   opacity: 0;
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index 0d502cc4..b88b00fb 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -28,3 +28,9 @@ provide('isLoginRef', isLogin)
     <Footer />
   </div>
 </template>
+
+<style scoped>
+html {
+  overflow-y: scroll;
+}
+</style>

From fc18a6d116f74b28e571ef0fe026ed73a5d47480 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 11:43:34 +0200
Subject: [PATCH 02/14] feat: added underdeveloped ui

---
 resources/js/Pages/Auth/ForgotPassword.vue    | 31 +++++++++----------
 resources/js/components/Common/Banner.vue     | 24 ++++++++++++++
 .../js/components/Common/CustomInput.vue      | 30 ++++++++++++++++++
 3 files changed, 69 insertions(+), 16 deletions(-)
 create mode 100644 resources/js/components/Common/Banner.vue
 create mode 100644 resources/js/components/Common/CustomInput.vue

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 6114b281..037fabf4 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,30 +1,29 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
 import { router } from '@inertiajs/vue3'
+import CustomInput from '@/components/Common/CustomInput.vue'
+import { ref } from 'vue'
+import Banner from '@/components/Common/Banner.vue'
+import BackgroundEffect from '@/components/Home/BackgroundEffect.vue'
 
-const { errors, status } = defineProps<{
-  errors: Record<string, string[]>
+defineProps<{
+  errors: Record<string, string>
   status?: string
 }>()
 
-const form = reactive({
-  email: null,
-
-})
+const email = ref<string>()
 
 function submit() {
-  router.post('/auth/forgot-password', form)
+  router.post('/auth/forgot-password', {email:email.value})
 }
 </script>
 
 <template>
-  <form @submit.prevent="submit">
-    <div>
-      <label for="email">Email:</label>
-      <input v-model="form.email" name="email" type="email">
-      <button type="submit">Reset?</button>
-      <div v-if="errors.email">{{ errors.email }}</div>
-    </div>
-    <div v-if="status" class="alert alert-success">{{ status }}</div>
+  <BackgroundEffect />
+  <Banner :content="status" />
+  <form class="mt-8 p-5 gap-5 flex flex-col" @submit.prevent="submit">
+    <CustomInput v-model="email" label="E-mail" :error="errors.email" name="email" type="email" />
+    <button type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg">
+      Zmień hasło
+    </button>
   </form>
 </template>
diff --git a/resources/js/components/Common/Banner.vue b/resources/js/components/Common/Banner.vue
new file mode 100644
index 00000000..ab349a5e
--- /dev/null
+++ b/resources/js/components/Common/Banner.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+import { ref } from 'vue'
+defineProps<{
+  content?:string
+}>()
+
+const isVisible = ref<boolean>(true)
+</script>
+
+<template>
+  <Transition>
+    <div v-if="isVisible && !!content" class="flex absolute top-0 w-full items-center gap-x-6 bg-primary px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+      <b class="text-white">
+        {{ content }}
+      </b>
+      <div class="flex flex-1 justify-end">
+        <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
+          <XMarkIcon class="size-5 text-white" aria-hidden="true" @click="isVisible=false" />
+        </button>
+      </div>
+    </div>
+  </Transition>
+</template>
diff --git a/resources/js/components/Common/CustomInput.vue b/resources/js/components/Common/CustomInput.vue
new file mode 100644
index 00000000..27880517
--- /dev/null
+++ b/resources/js/components/Common/CustomInput.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps< {
+  label: string
+  name: string
+  error?: string
+  type?: string
+  required? : boolean
+  placeholder? : string
+  autocomplete?: string
+}>()
+const model = defineModel<string>()
+</script>
+
+<template>
+  <label class="block text-sm font-medium leading-6 text-gray-900">{{ label }}
+    <div class="mt-2">
+      <input
+        v-model="model"
+        :name="name"
+        :placeholder="placeholder"
+        :required="required ?? true"
+        :type="type ?? 'text'"
+        :autocomplete="autocomplete ?? 'off'"
+        :class="{'ring-red focus:ring-red': error}"
+        class="duration-200 ring-inset outline-none focus:ring focus:ring-primary bg-white/30 rounded-lg w-full p-3 text-gray-900 ring-2 ring-primary/30 placeholder:text-gray-400"
+      >
+      <div v-if="error" class="text-red">{{ error }}</div>
+    </div>
+  </label>
+</template>

From 1eb64e6166f56d3b4eba05c7674a25d7444e0575 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 12:09:04 +0200
Subject: [PATCH 03/14] feat: added foooter

---
 resources/js/Pages/Auth/ForgotPassword.vue    | 20 ++++++++++---------
 .../js/components/Common/CustomInput.vue      |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 037fabf4..776e4d6b 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -3,7 +3,7 @@ import { router } from '@inertiajs/vue3'
 import CustomInput from '@/components/Common/CustomInput.vue'
 import { ref } from 'vue'
 import Banner from '@/components/Common/Banner.vue'
-import BackgroundEffect from '@/components/Home/BackgroundEffect.vue'
+import Footer from '@/components/Home/Footer.vue'
 
 defineProps<{
   errors: Record<string, string>
@@ -18,12 +18,14 @@ function submit() {
 </script>
 
 <template>
-  <BackgroundEffect />
-  <Banner :content="status" />
-  <form class="mt-8 p-5 gap-5 flex flex-col" @submit.prevent="submit">
-    <CustomInput v-model="email" label="E-mail" :error="errors.email" name="email" type="email" />
-    <button type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg">
-      Zmień hasło
-    </button>
-  </form>
+  <div class="flex flex-col items-center h-screen w-full">
+    <Banner :content="status" />
+    <form class="mt-8 p-5 gap-5 flex flex-col w-full" @submit.prevent="submit">
+      <CustomInput v-model="email" label="E-mail" :error="errors.email" name="email" type="email" />
+      <button type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg">
+        Zmień hasło
+      </button>
+    </form>
+    <Footer />
+  </div>
 </template>
diff --git a/resources/js/components/Common/CustomInput.vue b/resources/js/components/Common/CustomInput.vue
index 27880517..4c777c50 100644
--- a/resources/js/components/Common/CustomInput.vue
+++ b/resources/js/components/Common/CustomInput.vue
@@ -12,7 +12,7 @@ const model = defineModel<string>()
 </script>
 
 <template>
-  <label class="block text-sm font-medium leading-6 text-gray-900">{{ label }}
+  <label :class="{'text-red': error}" lass="block text-sm font-medium leading-6 text-gray-900">{{ label }}
     <div class="mt-2">
       <input
         v-model="model"

From ad7bd31a8cec8358645e75803803cd4912f259a1 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 12:26:07 +0200
Subject: [PATCH 04/14] feat: added background

---
 resources/js/Pages/Auth/ForgotPassword.vue       | 16 ++++++++++------
 .../js/components/Common/BackgroundEffect2.vue   | 10 ++++++++++
 .../js/components/Home/BackgroundEffect.vue      |  3 +--
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 resources/js/components/Common/BackgroundEffect2.vue

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 776e4d6b..f29217ba 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -4,6 +4,7 @@ import CustomInput from '@/components/Common/CustomInput.vue'
 import { ref } from 'vue'
 import Banner from '@/components/Common/Banner.vue'
 import Footer from '@/components/Home/Footer.vue'
+import BackgroundEffect2 from '@/components/Common/BackgroundEffect2.vue'
 
 defineProps<{
   errors: Record<string, string>
@@ -18,14 +19,17 @@ function submit() {
 </script>
 
 <template>
+  <BackgroundEffect2 />
   <div class="flex flex-col items-center h-screen w-full">
     <Banner :content="status" />
-    <form class="mt-8 p-5 gap-5 flex flex-col w-full" @submit.prevent="submit">
-      <CustomInput v-model="email" label="E-mail" :error="errors.email" name="email" type="email" />
-      <button type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg">
-        Zmień hasło
-      </button>
-    </form>
+    <div class="p-5 w-full">
+      <form class="p-5 gap-5 flex flex-col w-full bg-white/70 rounded-lg " @submit.prevent="submit">
+        <CustomInput v-model="email" label="E-mail" :error="errors.email" name="email" type="email" />
+        <button type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg">
+          Zmień hasło
+        </button>
+      </form>
+    </div>
     <Footer />
   </div>
 </template>
diff --git a/resources/js/components/Common/BackgroundEffect2.vue b/resources/js/components/Common/BackgroundEffect2.vue
new file mode 100644
index 00000000..1b1c024a
--- /dev/null
+++ b/resources/js/components/Common/BackgroundEffect2.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import BackgroundEffect from '../Home/BackgroundEffect.vue'
+</script>
+
+<template>
+  <div class="absolute opacity-50 -z-50">
+    <BackgroundEffect />
+  </div>
+  <div class="bg-primary-600/10 size-full fixed top-0 left-0 -z-40" />
+</template>
diff --git a/resources/js/components/Home/BackgroundEffect.vue b/resources/js/components/Home/BackgroundEffect.vue
index 2dd58871..bedbbf27 100644
--- a/resources/js/components/Home/BackgroundEffect.vue
+++ b/resources/js/components/Home/BackgroundEffect.vue
@@ -10,7 +10,7 @@ onUnmounted(() => window.removeEventListener('scroll', setBannerVisibility))
 </script>
 
 <template>
-  <div :style="{marginTop: `${margin}rem`}" class="fixed blur-2xl size-7/12 -z-10">
+  <div :style="{marginTop: `${margin}rem`}" class="fixed blur-2xl size-7/12 -z-50">
     <div class="
       size-full
       bg-gradient-to-r
@@ -23,5 +23,4 @@ onUnmounted(() => window.removeEventListener('scroll', setBannerVisibility))
       );"
     />
   </div>
-  <div class="inset-0 top-16  h-[22rem] lg:h-screen lg:top-0 bg-white/30 absolute -z-10" />
 </template>

From 08d2df79da64aa551aee588bce0a2aeb26010a65 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 12:37:24 +0200
Subject: [PATCH 05/14] feat: header added

---
 resources/js/Pages/Auth/ForgotPassword.vue | 2 ++
 resources/js/components/Common/Header.vue  | 9 +++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 resources/js/components/Common/Header.vue

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index f29217ba..b0110410 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { router } from '@inertiajs/vue3'
 import CustomInput from '@/components/Common/CustomInput.vue'
+import Header from '@/components/Common/Header.vue'
 import { ref } from 'vue'
 import Banner from '@/components/Common/Banner.vue'
 import Footer from '@/components/Home/Footer.vue'
@@ -21,6 +22,7 @@ function submit() {
 <template>
   <BackgroundEffect2 />
   <div class="flex flex-col items-center h-screen w-full">
+    <Header title="Zmień hasło" />
     <Banner :content="status" />
     <div class="p-5 w-full">
       <form class="p-5 gap-5 flex flex-col w-full bg-white/70 rounded-lg " @submit.prevent="submit">
diff --git a/resources/js/components/Common/Header.vue b/resources/js/components/Common/Header.vue
new file mode 100644
index 00000000..e1142b73
--- /dev/null
+++ b/resources/js/components/Common/Header.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{title:string}>()
+</script>
+
+<template>
+  <header class="w-full font-bold p-5 bg-white/50">
+    {{ title }}
+  </header>
+</template>

From d44c0d0ee2fb1502400789c21d34f691b65e3161 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 13:01:46 +0200
Subject: [PATCH 06/14] feat: added title

---
 resources/js/Pages/Auth/ForgotPassword.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index b0110410..ba91f6e8 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -6,6 +6,8 @@ import { ref } from 'vue'
 import Banner from '@/components/Common/Banner.vue'
 import Footer from '@/components/Home/Footer.vue'
 import BackgroundEffect2 from '@/components/Common/BackgroundEffect2.vue'
+import { Head } from '@inertiajs/vue3'
+
 
 defineProps<{
   errors: Record<string, string>
@@ -20,6 +22,10 @@ function submit() {
 </script>
 
 <template>
+  <Head>
+    <title>Profile</title>
+    <meta name="Zmień hasło" content="User profile">
+  </Head>
   <BackgroundEffect2 />
   <div class="flex flex-col items-center h-screen w-full">
     <Header title="Zmień hasło" />

From 257709522c316f7e91802a1ce2bf1144c9ee819c Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 14:52:40 +0200
Subject: [PATCH 07/14] style, fix

---
 resources/js/Pages/Auth/ForgotPassword.vue | 14 +++++++----
 resources/js/components/Common/Banner.vue  | 28 +++++++++-------------
 resources/js/components/Common/Footer.vue  |  2 +-
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index ba91f6e8..68bb84eb 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -4,7 +4,7 @@ import CustomInput from '@/components/Common/CustomInput.vue'
 import Header from '@/components/Common/Header.vue'
 import { ref } from 'vue'
 import Banner from '@/components/Common/Banner.vue'
-import Footer from '@/components/Home/Footer.vue'
+import Footer from '@/components/Common/Footer.vue'
 import BackgroundEffect2 from '@/components/Common/BackgroundEffect2.vue'
 import { Head } from '@inertiajs/vue3'
 
@@ -14,10 +14,12 @@ defineProps<{
   status?: string
 }>()
 
-const email = ref<string>()
+const email = ref<string>('')
+const isVisible = ref<boolean>(false)
 
 function submit() {
   router.post('/auth/forgot-password', {email:email.value})
+  isVisible.value = true
 }
 </script>
 
@@ -29,9 +31,11 @@ function submit() {
   <BackgroundEffect2 />
   <div class="flex flex-col items-center h-screen w-full">
     <Header title="Zmień hasło" />
-    <Banner :content="status" />
-    <div class="p-5 w-full">
-      <form class="p-5 gap-5 flex flex-col w-full bg-white/70 rounded-lg " @submit.prevent="submit">
+    <Transition>
+      <Banner v-if="status && isVisible" :text="status" @click="isVisible = false" />
+    </Transition>
+    <div class="p-5 w-full flex justify-center">
+      <form class="p-5 gap-5 flex flex-col w-full bg-white/50 rounded-lg max-w-lg" @submit.prevent="submit">
         <CustomInput v-model="email" label="E-mail" :error="errors.email" name="email" type="email" />
         <button type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg">
           Zmień hasło
diff --git a/resources/js/components/Common/Banner.vue b/resources/js/components/Common/Banner.vue
index ab349a5e..dca09f1d 100644
--- a/resources/js/components/Common/Banner.vue
+++ b/resources/js/components/Common/Banner.vue
@@ -1,24 +1,18 @@
 <script setup lang="ts">
 import { XMarkIcon } from '@heroicons/vue/20/solid'
-import { ref } from 'vue'
-defineProps<{
-  content?:string
-}>()
-
-const isVisible = ref<boolean>(true)
+defineProps<{text:string}>()
+defineEmits<{ click: [] }>()
 </script>
 
 <template>
-  <Transition>
-    <div v-if="isVisible && !!content" class="flex absolute top-0 w-full items-center gap-x-6 bg-primary px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
-      <b class="text-white">
-        {{ content }}
-      </b>
-      <div class="flex flex-1 justify-end">
-        <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
-          <XMarkIcon class="size-5 text-white" aria-hidden="true" @click="isVisible=false" />
-        </button>
-      </div>
+  <div class="flex absolute top-0 w-full items-center gap-x-6 bg-primary px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+    <b class="text-white">
+      {{ text }}
+    </b>
+    <div class="flex flex-1 justify-end">
+      <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
+        <XMarkIcon class="size-5 text-white" aria-hidden="true" @click="$emit('click')" />
+      </button>
     </div>
-  </Transition>
+  </div>
 </template>
diff --git a/resources/js/components/Common/Footer.vue b/resources/js/components/Common/Footer.vue
index 88d0f515..2d3b422a 100644
--- a/resources/js/components/Common/Footer.vue
+++ b/resources/js/components/Common/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="bg-white shadow w-full mt-auto">
+  <footer class="bg-white/50 shadow w-full mt-auto">
     <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
       <span class="text-sm text-gray-500 sm:text-center">© Collegium Witelona Uczelnia Państwowa</span>
       <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 sm:mt-0">

From 2622520553123d320884550c3d784bcc297529fe Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 14:55:38 +0200
Subject: [PATCH 08/14] fix: translatoins

---
 resources/js/Pages/Auth/ForgotPassword.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 68bb84eb..5351a557 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -25,8 +25,8 @@ function submit() {
 
 <template>
   <Head>
-    <title>Profile</title>
-    <meta name="Zmień hasło" content="User profile">
+    <title>Zmiana hasła"</title>
+    <meta name="Zmiana hasła" content="Zmiana hasła">
   </Head>
   <BackgroundEffect2 />
   <div class="flex flex-col items-center h-screen w-full">

From cc1be914f6e64825260b0deff94dec784e075f36 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Thu, 29 Aug 2024 15:02:30 +0200
Subject: [PATCH 09/14] feat: disable button on click

---
 resources/js/Pages/Auth/ForgotPassword.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 5351a557..32cbc9e3 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { router } from '@inertiajs/vue3'
+import { useForm } from '@inertiajs/vue3'
 import CustomInput from '@/components/Common/CustomInput.vue'
 import Header from '@/components/Common/Header.vue'
-import { ref } from 'vue'
 import Banner from '@/components/Common/Banner.vue'
 import Footer from '@/components/Common/Footer.vue'
 import BackgroundEffect2 from '@/components/Common/BackgroundEffect2.vue'
 import { Head } from '@inertiajs/vue3'
+import { ref } from 'vue'
 
 
 defineProps<{
@@ -14,18 +14,22 @@ defineProps<{
   status?: string
 }>()
 
-const email = ref<string>('')
+const form = useForm({ email: '' })
+
 const isVisible = ref<boolean>(false)
 
 function submit() {
-  router.post('/auth/forgot-password', {email:email.value})
-  isVisible.value = true
+  form.post('/auth/forgot-password', {
+    onSuccess: () => {
+      isVisible.value = true
+    },
+  })
 }
 </script>
 
 <template>
   <Head>
-    <title>Zmiana hasła"</title>
+    <title>Zmiana hasła</title>
     <meta name="Zmiana hasła" content="Zmiana hasła">
   </Head>
   <BackgroundEffect2 />
@@ -36,8 +40,8 @@ function submit() {
     </Transition>
     <div class="p-5 w-full flex justify-center">
       <form class="p-5 gap-5 flex flex-col w-full bg-white/50 rounded-lg max-w-lg" @submit.prevent="submit">
-        <CustomInput v-model="email" label="E-mail" :error="errors.email" name="email" type="email" />
-        <button type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg">
+        <CustomInput v-model="form.email" label="E-mail" :error="form.errors.email" name="email" type="email" />
+        <button :disabled="form.processing" type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70">
           Zmień hasło
         </button>
       </form>

From b59ae7d09b1c4843ba9512e82f31f32c9353aa99 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Fri, 30 Aug 2024 08:45:00 +0200
Subject: [PATCH 10/14] fix: revert background z-index

---
 resources/js/components/Home/BackgroundEffect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Home/BackgroundEffect.vue b/resources/js/components/Home/BackgroundEffect.vue
index bedbbf27..bb66e356 100644
--- a/resources/js/components/Home/BackgroundEffect.vue
+++ b/resources/js/components/Home/BackgroundEffect.vue
@@ -10,7 +10,7 @@ onUnmounted(() => window.removeEventListener('scroll', setBannerVisibility))
 </script>
 
 <template>
-  <div :style="{marginTop: `${margin}rem`}" class="fixed blur-2xl size-7/12 -z-50">
+  <div :style="{marginTop: `${margin}rem`}" class="fixed blur-2xl size-7/12 -z-10">
     <div class="
       size-full
       bg-gradient-to-r

From 734e5f3c538e56bedfac89b59d73c2720dec8ccd Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Fri, 30 Aug 2024 09:05:05 +0200
Subject: [PATCH 11/14] fix: padding

---
 resources/js/Pages/Auth/ForgotPassword.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 32cbc9e3..a358a644 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -38,7 +38,7 @@ function submit() {
     <Transition>
       <Banner v-if="status && isVisible" :text="status" @click="isVisible = false" />
     </Transition>
-    <div class="p-5 w-full flex justify-center">
+    <div class="p-5 pt-12 w-full flex justify-center">
       <form class="p-5 gap-5 flex flex-col w-full bg-white/50 rounded-lg max-w-lg" @submit.prevent="submit">
         <CustomInput v-model="form.email" label="E-mail" :error="form.errors.email" name="email" type="email" />
         <button :disabled="form.processing" type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70">

From df6b135343aaab225484d4c7687979f0cbbadec1 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Fri, 30 Aug 2024 09:48:41 +0200
Subject: [PATCH 12/14] feat:  reset password page added

---
 resources/js/Pages/Auth/ForgotPassword.vue |  2 +-
 resources/js/Pages/Auth/ResetPassword.vue  | 61 ++++++++++++----------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index a358a644..48ccb8aa 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -39,7 +39,7 @@ function submit() {
       <Banner v-if="status && isVisible" :text="status" @click="isVisible = false" />
     </Transition>
     <div class="p-5 pt-12 w-full flex justify-center">
-      <form class="p-5 gap-5 flex flex-col w-full bg-white/50 rounded-lg max-w-lg" @submit.prevent="submit">
+      <form class="p-6 gap-4 flex flex-col w-full bg-white/50 rounded-lg max-w-lg" @submit.prevent="submit">
         <CustomInput v-model="form.email" label="E-mail" :error="form.errors.email" name="email" type="email" />
         <button :disabled="form.processing" type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70">
           Zmień hasło
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index dcb4072b..05907112 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,44 +1,47 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { router } from '@inertiajs/vue3'
+import { useForm } from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
+import Header from '@/components/Common/Header.vue'
+import Footer from '@/components/Common/Footer.vue'
+import CustomInput from '@/components/Common/CustomInput.vue'
+import BackgroundEffect2 from '@/components/Common/BackgroundEffect2.vue'
 
-const props = defineProps<
-{
+
+const props = defineProps<{
   token: string
-  errors: Record<string, string[]>
+  errors: Record<string, string>
 }>()
 
-const form = reactive({
-  email: null,
-  password: null,
-  password_confirmation: null,
+const form = useForm({
+  email: '',
+  password: '',
+  password_confirmation: '',
   token: props.token,
 })
 
 function submit() {
-  router.post('/auth/password/reset', form)
+  form.post('/auth/password/reset')
 }
 </script>
 
 <template>
-  <form @submit.prevent="submit">
-    <div>
-      <label for="email">Email:</label>
-      <input v-model="form.email" name="email" type="email"><br>
-      <div v-if="errors.email">{{ errors.email }}</div>
-    </div>
-    <div>
-      <label for="password">Password:</label>
-      <input v-model="form.password" name="password" type="password" required><br>
-      <label for="password_confirmation">Password Confirmation:</label>
-      <input v-model="form.password_confirmation" name="password_confirmation" type="password"><br>
-      <div v-if="errors.password">{{ errors.password }}</div>
-    </div>
-
-    <div>
-      <input v-model="form.token" name="token" type="hidden">
-      <div v-if="errors.token">{{ errors.token }}</div>
+  <Head>
+    <title>Zmiana hasła</title>
+    <meta name="Zmiana hasła" content="Zmiana hasła">
+  </Head>
+  <BackgroundEffect2 />
+  <div class="flex flex-col items-center h-screen w-full">
+    <Header title="Zmień hasło" />
+    <div class="p-5 pt-12 w-full flex justify-center">
+      <form class="p-6 gap-4 flex flex-col w-full bg-white/50 rounded-lg max-w-lg" @submit.prevent="submit">
+        <CustomInput v-model="form.email" label="E-mail" :error="errors.email" name="email" type="email" />
+        <CustomInput v-model="form.password" label="Nowe hasło" :error="errors.password" name="password" type="password" />
+        <CustomInput v-model="form.password_confirmation" label="Powtórz hasło" :error="errors.password_confirmation" name="password_confirmation" type="password" />
+        <button :disabled="form.processing" type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70">
+          Zmień hasło
+        </button>
+      </form>
     </div>
-    <button type="submit">Change Password?</button>
-  </form>
+    <Footer />
+  </div>
 </template>

From 6f6f2fa4d4b9d2253b0443e356474c1fffd3c634 Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <anonymous@email.com>
Date: Fri, 30 Aug 2024 10:36:03 +0200
Subject: [PATCH 13/14] responsiveness, changed titles, refactored custom input

---
 resources/js/Pages/Auth/ForgotPassword.vue     | 10 +++++-----
 resources/js/Pages/Auth/ResetPassword.vue      |  4 ++--
 resources/js/components/Common/CustomInput.vue |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 48ccb8aa..a532ca93 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -29,8 +29,8 @@ function submit() {
 
 <template>
   <Head>
-    <title>Zmiana hasła</title>
-    <meta name="Zmiana hasła" content="Zmiana hasła">
+    <title>Przypomnij hasło</title>
+    <meta name="Przypomnij hasło" content="Przypomnij hasło">
   </Head>
   <BackgroundEffect2 />
   <div class="flex flex-col items-center h-screen w-full">
@@ -38,11 +38,11 @@ function submit() {
     <Transition>
       <Banner v-if="status && isVisible" :text="status" @click="isVisible = false" />
     </Transition>
-    <div class="p-5 pt-12 w-full flex justify-center">
-      <form class="p-6 gap-4 flex flex-col w-full bg-white/50 rounded-lg max-w-lg" @submit.prevent="submit">
+    <div class="sm:p-6 sm:pt-12 size-full flex justify-center sm:h-fit">
+      <form class="p-6 gap-4 flex flex-col size-full bg-white/50 sm:rounded-lg sm:max-w-lg sm:h-fit" @submit.prevent="submit">
         <CustomInput v-model="form.email" label="E-mail" :error="form.errors.email" name="email" type="email" />
         <button :disabled="form.processing" type="submit" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70">
-          Zmień hasło
+          Przypomnij hasło
         </button>
       </form>
     </div>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index 05907112..c3030e71 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -32,8 +32,8 @@ function submit() {
   <BackgroundEffect2 />
   <div class="flex flex-col items-center h-screen w-full">
     <Header title="Zmień hasło" />
-    <div class="p-5 pt-12 w-full flex justify-center">
-      <form class="p-6 gap-4 flex flex-col w-full bg-white/50 rounded-lg max-w-lg" @submit.prevent="submit">
+    <div class="sm:p-6 sm:pt-12 size-full flex justify-center sm:h-fit">
+      <form class="p-6 gap-4 flex flex-col size-full bg-white/50 sm:rounded-lg sm:max-w-lg sm:h-fit" @submit.prevent="submit">
         <CustomInput v-model="form.email" label="E-mail" :error="errors.email" name="email" type="email" />
         <CustomInput v-model="form.password" label="Nowe hasło" :error="errors.password" name="password" type="password" />
         <CustomInput v-model="form.password_confirmation" label="Powtórz hasło" :error="errors.password_confirmation" name="password_confirmation" type="password" />
diff --git a/resources/js/components/Common/CustomInput.vue b/resources/js/components/Common/CustomInput.vue
index 4c777c50..b001173c 100644
--- a/resources/js/components/Common/CustomInput.vue
+++ b/resources/js/components/Common/CustomInput.vue
@@ -12,7 +12,7 @@ const model = defineModel<string>()
 </script>
 
 <template>
-  <label :class="{'text-red': error}" lass="block text-sm font-medium leading-6 text-gray-900">{{ label }}
+  <label :class="{'text-red': error}">{{ label }}
     <div class="mt-2">
       <input
         v-model="model"

From 9a4f3ffed88b27a076208e3b561cd2363854e7dd Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <81817136+JokeUrSelf@users.noreply.github.com>
Date: Fri, 30 Aug 2024 10:52:26 +0200
Subject: [PATCH 14/14] refactor: remove empty lines

Co-authored-by: Kamil Piech <kamil.piech@blumilk.pl>
---
 resources/js/Pages/Auth/ForgotPassword.vue | 1 -
 resources/js/Pages/Auth/ResetPassword.vue  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index a532ca93..e549f5c4 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -8,7 +8,6 @@ import BackgroundEffect2 from '@/components/Common/BackgroundEffect2.vue'
 import { Head } from '@inertiajs/vue3'
 import { ref } from 'vue'
 
-
 defineProps<{
   errors: Record<string, string>
   status?: string
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index c3030e71..49094dd3 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -6,7 +6,6 @@ import Footer from '@/components/Common/Footer.vue'
 import CustomInput from '@/components/Common/CustomInput.vue'
 import BackgroundEffect2 from '@/components/Common/BackgroundEffect2.vue'
 
-
 const props = defineProps<{
   token: string
   errors: Record<string, string>