Skip to content

Commit cf44596

Browse files
thecodeholicthecodeholic
committed
Create guest layout component and use it in Login.vue, ResetPassword.vue and RequestPassword.vue
1 parent edbb6b4 commit cf44596

File tree

4 files changed

+119
-95
lines changed

4 files changed

+119
-95
lines changed

‎backend/src/components/GuestLayout.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
3+
<div class="max-w-md w-full space-y-8">
4+
<div>
5+
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
6+
{{ title }}
7+
</h2>
8+
</div>
9+
<slot></slot>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script setup>
15+
const {title} = defineProps({
16+
title: String
17+
})
18+
</script>
19+
20+
<style scoped>
21+
22+
</style>

‎backend/src/views/Login.vue

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,51 @@
11
<template>
2-
<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
3-
<div class="max-w-md w-full space-y-8">
4-
<div>
5-
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
6-
</div>
7-
<form class="mt-8 space-y-6" action="#" method="POST">
8-
<input type="hidden" name="remember" value="true" />
9-
<div class="rounded-md shadow-sm -space-y-px">
10-
<div>
11-
<label for="email-address" class="sr-only">Email address</label>
12-
<input id="email-address" name="email" type="email" autocomplete="email" required="" class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address" />
13-
</div>
14-
<div>
15-
<label for="password" class="sr-only">Password</label>
16-
<input id="password" name="password" type="password" autocomplete="current-password" required="" class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password" />
17-
</div>
2+
<GuestLayout title="Sign in to your account">
3+
<form class="mt-8 space-y-6" action="#" method="POST">
4+
<input type="hidden" name="remember" value="true"/>
5+
<div class="rounded-md shadow-sm -space-y-px">
6+
<div>
7+
<label for="email-address" class="sr-only">Email address</label>
8+
<input id="email-address" name="email" type="email" autocomplete="email" required=""
9+
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
10+
placeholder="Email address"/>
1811
</div>
12+
<div>
13+
<label for="password" class="sr-only">Password</label>
14+
<input id="password" name="password" type="password" autocomplete="current-password" required=""
15+
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
16+
placeholder="Password"/>
17+
</div>
18+
</div>
1919

20-
<div class="flex items-center justify-between">
21-
<div class="flex items-center">
22-
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
23-
<label for="remember-me" class="ml-2 block text-sm text-gray-900"> Remember me </label>
24-
</div>
20+
<div class="flex items-center justify-between">
21+
<div class="flex items-center">
22+
<input id="remember-me" name="remember-me" type="checkbox"
23+
class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"/>
24+
<label for="remember-me" class="ml-2 block text-sm text-gray-900"> Remember me </label>
25+
</div>
2526

26-
<div class="text-sm">
27-
<router-link :to="{name: 'requestPassword'}" class="font-medium text-indigo-600 hover:text-indigo-500"> Forgot your password? </router-link>
28-
</div>
27+
<div class="text-sm">
28+
<router-link :to="{name: 'requestPassword'}" class="font-medium text-indigo-600 hover:text-indigo-500"> Forgot
29+
your password?
30+
</router-link>
2931
</div>
32+
</div>
3033

31-
<div>
32-
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
34+
<div>
35+
<button type="submit"
36+
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
3337
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
34-
<LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
38+
<LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true"/>
3539
</span>
36-
Sign in
37-
</button>
38-
</div>
39-
</form>
40-
</div>
41-
</div>
40+
Sign in
41+
</button>
42+
</div>
43+
</form>
44+
</GuestLayout>
4245
</template>
4346

4447
<script setup>
45-
import { LockClosedIcon } from '@heroicons/vue/solid'
48+
import {LockClosedIcon} from '@heroicons/vue/solid'
49+
import GuestLayout from "../components/GuestLayout.vue";
50+
4651
</script>

‎backend/src/views/RequestPassword.vue

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
11
<template>
2-
<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
3-
<div class="max-w-md w-full space-y-8">
4-
<div>
5-
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Request new password</h2>
6-
</div>
7-
<form class="mt-8 space-y-6" action="#" method="POST">
8-
<input type="hidden" name="remember" value="true" />
9-
<div class="rounded-md shadow-sm -space-y-px">
10-
<div>
11-
<label for="email-address" class="sr-only">Email address</label>
12-
<input id="email-address" name="email" type="email" autocomplete="email" required="" class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address" />
13-
</div>
2+
<GuestLayout title="Request new password">
3+
<form class="mt-8 space-y-6" action="#" method="POST">
4+
<input type="hidden" name="remember" value="true"/>
5+
<div class="rounded-md shadow-sm -space-y-px">
6+
<div>
7+
<label for="email-address" class="sr-only">Email address</label>
8+
<input id="email-address" name="email" type="email" autocomplete="email" required=""
9+
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
10+
placeholder="Email address"/>
1411
</div>
12+
</div>
1513

16-
<div class="flex items-center justify-between">
17-
<div class="text-sm">
18-
<router-link :to="{name: 'login'}" class="font-medium text-indigo-600 hover:text-indigo-500"> Remember your password? </router-link>
19-
</div>
14+
<div class="flex items-center justify-between">
15+
<div class="text-sm">
16+
<router-link :to="{name: 'login'}" class="font-medium text-indigo-600 hover:text-indigo-500"> Remember your
17+
password?
18+
</router-link>
2019
</div>
20+
</div>
2121

22-
<div>
23-
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
22+
<div>
23+
<button type="submit"
24+
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
2425
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
25-
<LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
26+
<LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true"/>
2627
</span>
27-
Submit
28-
</button>
29-
</div>
30-
</form>
31-
</div>
32-
</div>
28+
Submit
29+
</button>
30+
</div>
31+
</form>
32+
</GuestLayout>
3333
</template>
3434

3535
<script setup>
36-
import { LockClosedIcon } from '@heroicons/vue/solid'
36+
import {LockClosedIcon} from '@heroicons/vue/solid'
37+
import GuestLayout from "../components/GuestLayout.vue";
3738
</script>

‎backend/src/views/ResetPassword.vue

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,44 @@
11
<template>
2-
<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
3-
<div class="max-w-md w-full space-y-8">
4-
<div>
5-
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Set new password</h2>
6-
</div>
7-
<form class="mt-8 space-y-6" action="#" method="POST">
8-
<input type="hidden" name="remember" value="true"/>
9-
<div class="rounded-md shadow-sm -space-y-px">
10-
<div>
11-
<label for="new-password" class="sr-only">New Password</label>
12-
<input id="new-password" name="password" type="password" required=""
13-
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
14-
placeholder="New Password"/>
15-
</div>
16-
<div>
17-
<label for="password-repeat" class="sr-only">Repeat Password</label>
18-
<input id="password-repeat" name="password_repeat" type="password" required=""
19-
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
20-
placeholder="Repeat Password"/>
21-
</div>
2+
<GuestLayout title="Set new password">
3+
<form class="mt-8 space-y-6" action="#" method="POST">
4+
<input type="hidden" name="remember" value="true"/>
5+
<div class="rounded-md shadow-sm -space-y-px">
6+
<div>
7+
<label for="new-password" class="sr-only">New Password</label>
8+
<input id="new-password" name="password" type="password" required=""
9+
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
10+
placeholder="New Password"/>
2211
</div>
12+
<div>
13+
<label for="password-repeat" class="sr-only">Repeat Password</label>
14+
<input id="password-repeat" name="password_repeat" type="password" required=""
15+
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
16+
placeholder="Repeat Password"/>
17+
</div>
18+
</div>
2319

24-
<div class="flex items-center justify-between">
25-
<div class="text-sm">
26-
<router-link :to="{name: 'login'}" class="font-medium text-indigo-600 hover:text-indigo-500">
27-
Go back to Login
28-
</router-link>
29-
</div>
20+
<div class="flex items-center justify-between">
21+
<div class="text-sm">
22+
<router-link :to="{name: 'login'}" class="font-medium text-indigo-600 hover:text-indigo-500">
23+
Go back to Login
24+
</router-link>
3025
</div>
26+
</div>
3127

32-
<div>
33-
<button type="submit"
34-
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
28+
<div>
29+
<button type="submit"
30+
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
3531
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
3632
<LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true"/>
3733
</span>
38-
Submit
39-
</button>
40-
</div>
41-
</form>
42-
</div>
43-
</div>
34+
Submit
35+
</button>
36+
</div>
37+
</form>
38+
</GuestLayout>
4439
</template>
4540

4641
<script setup>
4742
import {LockClosedIcon} from '@heroicons/vue/solid'
43+
import GuestLayout from "../components/GuestLayout.vue";
4844
</script>

0 commit comments

Comments
 (0)