#53 - forgot password page frontend (#55)

* fix: scoped scrollbar homepage-specific styling to the homepage * feat: added underdeveloped ui * feat: added foooter * feat: added background * feat: header added * feat: added title * style, fix * fix: translatoins * feat: disable button on click * fix: revert background z-index * fix: padding * feat: reset password page added * responsiveness, changed titles, refactored custom input * refactor: remove empty lines Co-authored-by: Kamil Piech <[email protected]> --------- Co-authored-by: Mykyta Mykulskyi <[email protected]> Co-authored-by: Kamil Piech <[email protected]>
blumilksoftware · Aug 30, 2024 · d600a31 · d600a31
1 parent 47bff12
commit d600a31
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 52 deletions.
diff --git 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/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,31 +1,50 @@
 <script setup lang="ts">
+import { useForm } from '@inertiajs/vue3'
+import CustomInput from '@/components/Common/CustomInput.vue'
+import Header from '@/components/Common/Header.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'
 
-import { reactive } from 'vue'
-import { router } from '@inertiajs/vue3'
-
-const { errors, status } = defineProps<{
-  errors: Record<string, string[]>
+defineProps<{
+  errors: Record<string, string>
   status?: string
 }>()
 
-const form = reactive({
-  email: null,
+const form = useForm({ email: '' })
 
-})
+const isVisible = ref<boolean>(false)
 
 function submit() {
-  router.post('/auth/forgot-password', form)
+  form.post('/auth/forgot-password', {
+    onSuccess: () => {
+      isVisible.value = true
+    },
+  })
 }
 </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>
+  <Head>
+    <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">
+    <Header title="Zmień hasło" />
+    <Transition>
+      <Banner v-if="status && isVisible" :text="status" @click="isVisible = false" />
+    </Transition>
+    <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">
+          Przypomnij hasło
+        </button>
+      </form>
     </div>
-    <div v-if="status" class="alert alert-success">{{ status }}</div>
-  </form>
+    <Footer />
+  </div>
 </template>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,45 +1,46 @@
 <script setup lang="ts">
+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'
 
-import { reactive } from 'vue'
-import { router } from '@inertiajs/vue3'
-
-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="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" />
+        <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>
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -29,3 +29,9 @@ provide('isLoginRef', isLogin)
     <Footer />
   </div>
 </template>
+
+<style scoped>
+html {
+  overflow-y: scroll;
+}
+</style>
diff --git a/resources/js/components/Common/BackgroundEffect2.vue 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/Common/Banner.vue b/resources/js/components/Common/Banner.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+defineProps<{text:string}>()
+defineEmits<{ click: [] }>()
+</script>
+
+<template>
+  <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>
+  </div>
+</template>
diff --git a/resources/js/components/Common/CustomInput.vue b/resources/js/components/Common/CustomInput.vue
@@ -20,7 +20,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}">{{ label }}
     <div class="mt-2">
       <input
         v-model="model"

diff --git 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">