Skip to content

Commit 4b78d29

Browse files
connorabbasconnorabbas
committed
Guest auth cards, revert flash message
1 parent 875d8b4 commit 4b78d29

File tree

10 files changed

+165
-62
lines changed

10 files changed

+165
-62
lines changed

‎app/Http/Controllers/Auth/EmailVerificationNotificationController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@ public function store(Request $request): RedirectResponse
2121

2222
$user?->sendEmailVerificationNotification();
2323

24-
return back()->with('flash_success', 'A new verification link has been sent to your email address.');
24+
return back()->with('status', 'verification-link-sent');
2525
}
2626
}

‎bootstrap/app.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
->setStatusCode($response->getStatusCode());
4343
} elseif ($response->getStatusCode() === 419) {
4444
return back()->with([
45-
'message' => 'The page expired, please try again.',
45+
'flash_message' => 'The page expired, please try again.',
4646
]);
4747
}
4848

‎resources/js/layouts/GuestAuthLayout.vue‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,47 @@ import ApplicationLogo from '@/components/ApplicationLogo.vue';
77
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
88
<div>
99
<InertiaLink href="/">
10-
<ApplicationLogo class="w-15 h-15 fill-current text-surface-900 dark:text-surface-0" />
10+
<ApplicationLogo class="w-12 h-12 fill-current text-surface-900 dark:text-surface-0" />
1111
</InertiaLink>
1212
</div>
1313
<div
1414
v-if="$slots.message"
15-
class="w-full sm:max-w-md mt-6 px-4 sm:px-0"
15+
class="w-full sm:max-w-lg mt-6 px-4 sm:px-0"
1616
>
1717
<slot name="message" />
1818
</div>
19-
<div class="w-full sm:max-w-md mt-6">
20-
<Card>
19+
<div class="w-full sm:max-w-lg mt-6">
20+
<Card
21+
pt:caption:class="space-y-2"
22+
pt:body:class="p-6 sm:p-8 space-y-6"
23+
>
24+
<template
25+
v-if="$slots.header"
26+
#header
27+
>
28+
<slot name="header" />
29+
</template>
30+
<template
31+
v-if="$slots.title"
32+
#title
33+
>
34+
<slot name="title" />
35+
</template>
36+
<template
37+
v-if="$slots.subtitle"
38+
#subtitle
39+
>
40+
<slot name="subtitle" />
41+
</template>
2142
<template #content>
2243
<slot />
2344
</template>
45+
<template
46+
v-if="$slots.footer"
47+
#footer
48+
>
49+
<slot name="footer" />
50+
</template>
2451
</Card>
2552
</div>
2653
</div>

‎resources/js/pages/auth/ConfirmPassword.vue‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,18 @@ const submit = () => {
1919
<GuestAuthLayout>
2020
<InertiaHead title="Confirm password" />
2121

22-
<form @submit.prevent="submit">
23-
<div class="space-y-6">
24-
<PageTitleSection class="text-center">
25-
<template #title>
26-
Confirm your password
27-
</template>
28-
<template #subTitle>
29-
<div class="text-sm">
30-
This is a secure area of the application. Please confirm your password before continuing.
31-
</div>
32-
</template>
33-
</PageTitleSection>
22+
<template #title>
23+
<div class="text-center">Confirm your password</div>
24+
</template>
25+
26+
<template #subtitle>
27+
<div class="text-center">
28+
This is a secure area of the application. Please confirm your password before continuing.
29+
</div>
30+
</template>
3431

32+
<form @submit.prevent="submit">
33+
<div class="space-y-6 sm:space-y-8">
3534
<div class="flex flex-col gap-2">
3635
<label for="password">Password</label>
3736
<Password
@@ -58,7 +57,7 @@ const submit = () => {
5857
<Button
5958
:loading="form.processing"
6059
type="submit"
61-
label="Confirm Password"
60+
label="Confirm password"
6261
/>
6362
</div>
6463
</div>

‎resources/js/pages/auth/ForgotPassword.vue‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,16 @@ onMounted(() => {
4141
</Message>
4242
</template>
4343

44-
<div class="mb-6 text-sm text-muted-color">
45-
Forgot your password? No problem. Just let us know your email
46-
address and we will email you a password reset link that will allow
47-
you to choose a new one.
48-
</div>
44+
<template #title>
45+
<div class="text-center">Forgot password</div>
46+
</template>
47+
48+
<template #subtitle>
49+
<div class="text-center">Enter your email to receive a password reset link</div>
50+
</template>
4951

5052
<form
51-
class="space-y-6"
53+
class="space-y-6 sm:space-y-8"
5254
@submit.prevent="submit"
5355
>
5456
<div class="flex flex-col gap-2">
@@ -73,13 +75,25 @@ onMounted(() => {
7375
</Message>
7476
</div>
7577

76-
<div class="flex justify-end items-center">
78+
<div>
7779
<Button
7880
:loading="forgotPasswordForm.processing"
7981
type="submit"
80-
label="Email Password Reset Link"
82+
label="Email password reset link"
83+
fluid
8184
/>
8285
</div>
86+
87+
<div class="text-center">
88+
<span class="text-muted-color mr-1">Or, return to</span>
89+
<InertiaLink :href="route('login')">
90+
<Button
91+
class="p-0"
92+
variant="link"
93+
label="log in"
94+
/>
95+
</InertiaLink>
96+
</div>
8397
</form>
8498
</GuestAuthLayout>
8599
</template>

‎resources/js/pages/auth/Login.vue‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,16 @@ onMounted(() => {
4848
</Message>
4949
</template>
5050

51+
<template #title>
52+
<div class="text-center">Log in to your account</div>
53+
</template>
54+
55+
<template #subtitle>
56+
<div class="text-center">Enter your email and password below to log in</div>
57+
</template>
58+
5159
<form
52-
class="space-y-6"
60+
class="space-y-6 sm:space-y-8"
5361
@submit.prevent="submit"
5462
>
5563
<div class="flex flex-col gap-2">
@@ -75,7 +83,19 @@ onMounted(() => {
7583
</div>
7684

7785
<div class="flex flex-col gap-2">
78-
<label for="password">Password</label>
86+
<div class="flex items-center justify-between">
87+
<label for="password">Password</label>
88+
<InertiaLink
89+
v-if="canResetPassword"
90+
:href="route('password.request')"
91+
>
92+
<Button
93+
class="p-0"
94+
variant="link"
95+
label="Forgot your password?"
96+
/>
97+
</InertiaLink>
98+
</div>
7999
<Password
80100
v-model="loginForm.password"
81101
:invalid="Boolean(loginForm.errors?.password)"
@@ -110,22 +130,27 @@ onMounted(() => {
110130
</div>
111131
</div>
112132

113-
<div class="flex justify-end items-center gap-4 pt-2">
133+
<div>
134+
<Button
135+
:loading="loginForm.processing"
136+
type="submit"
137+
label="Log in"
138+
fluid
139+
/>
140+
</div>
141+
142+
<div class="text-center">
143+
<span class="text-muted-color mr-1">Don't have an account?</span>
114144
<InertiaLink
115145
v-if="canResetPassword"
116-
:href="route('password.request')"
146+
:href="route('register')"
117147
>
118148
<Button
119149
class="p-0"
120150
variant="link"
121-
label="Forgot your password?"
151+
label="Sign up"
122152
/>
123153
</InertiaLink>
124-
<Button
125-
:loading="loginForm.processing"
126-
type="submit"
127-
label="Log In"
128-
/>
129154
</div>
130155
</form>
131156
</GuestAuthLayout>

‎resources/js/pages/auth/Register.vue‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,16 @@ onMounted(() => {
2727
<GuestAuthLayout>
2828
<InertiaHead title="Register" />
2929

30+
<template #title>
31+
<div class="text-center">Create an account</div>
32+
</template>
33+
34+
<template #subtitle>
35+
<div class="text-center">Enter your details below to create your account</div>
36+
</template>
37+
3038
<form
31-
class="space-y-6"
39+
class="space-y-6 sm:space-y-8"
3240
@submit.prevent="submit"
3341
>
3442
<div class="flex flex-col gap-2">
@@ -117,19 +125,24 @@ onMounted(() => {
117125
</Message>
118126
</div>
119127

120-
<div class="flex justify-end items-center gap-4 pt-2">
128+
<div>
129+
<Button
130+
type="submit"
131+
:loading="registerForm.processing"
132+
label="Create account"
133+
fluid
134+
/>
135+
</div>
136+
137+
<div class="text-center">
138+
<span class="text-muted-color mr-1">Already have an account?</span>
121139
<InertiaLink :href="route('login')">
122140
<Button
123141
class="p-0"
124142
variant="link"
125-
label="Already registered?"
143+
label="Log in"
126144
/>
127145
</InertiaLink>
128-
<Button
129-
type="submit"
130-
:loading="registerForm.processing"
131-
label="Register"
132-
/>
133146
</div>
134147
</form>
135148
</GuestAuthLayout>

‎resources/js/pages/auth/ResetPassword.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,16 @@ onMounted(() => {
3838
<GuestAuthLayout>
3939
<InertiaHead title="Reset Password" />
4040

41+
<template #title>
42+
<div class="text-center">Reset password</div>
43+
</template>
44+
45+
<template #subtitle>
46+
<div class="text-center">Please enter your new password below</div>
47+
</template>
48+
4149
<form
42-
class="space-y-6"
50+
class="space-y-6 sm:space-y-8"
4351
@submit.prevent="submit"
4452
>
4553
<div class="flex flex-col gap-2">
@@ -107,11 +115,12 @@ onMounted(() => {
107115
</Message>
108116
</div>
109117

110-
<div class="flex justify-end items-center pt-2">
118+
<div>
111119
<Button
112120
:loading="resetPwForm.processing"
113121
type="submit"
114-
label="Reset Password"
122+
label="Reset password"
123+
fluid
115124
/>
116125
</div>
117126
</form>

‎resources/js/pages/auth/VerifyEmail.vue‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,16 @@ const verificationLinkSent = computed(
2727
<GuestAuthLayout>
2828
<InertiaHead title="Email Verification" />
2929

30+
<template #title>
31+
<div class="text-center">Verify email</div>
32+
</template>
33+
34+
<template #subtitle>
35+
<div class="text-center">
36+
Please verify your email address by clicking on the link we just emailed to you.
37+
</div>
38+
</template>
39+
3040
<template
3141
v-if="verificationLinkSent"
3242
#message
@@ -41,26 +51,24 @@ const verificationLinkSent = computed(
4151
</Message>
4252
</template>
4353

44-
<div class="mb-6 text-sm text-muted-color">
45-
Thanks for signing up! Before getting started, could you verify your
46-
email address by clicking on the link we just emailed to you? If you
47-
didn't receive the email, we will gladly send you another.
48-
</div>
49-
50-
<div class="mt-6 flex justify-between items-center">
54+
<div class="space-y-6 sm:space-y-8">
5155
<form @submit.prevent="submit">
5256
<Button
5357
:loading="sendVerificationForm.processing"
5458
type="submit"
55-
label="Resend Verification Email"
59+
label="Resend verification email"
60+
fluid
5661
/>
5762
</form>
58-
<Button
59-
:loading="logoutForm.processing"
60-
variant="link"
61-
label="Log Out"
62-
@click="logout"
63-
/>
63+
<div class="text-center">
64+
<Button
65+
:loading="logoutForm.processing"
66+
class="p-0"
67+
variant="link"
68+
label="Log out"
69+
@click="logout"
70+
/>
71+
</div>
6472
</div>
6573
</GuestAuthLayout>
6674
</template>

‎resources/js/pages/settings/Profile.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,14 @@ const updateProfileInformation = () => {
118118
label="Click here to re-send the verification email."
119119
@click="sendEmailVerification"
120120
/>
121+
<Message
122+
v-if="status === 'verification-link-sent'"
123+
severity="success"
124+
:closable="false"
125+
class="shadow-sm mt-4"
126+
>
127+
A new verification link has been sent to your email address.
128+
</Message>
121129
</p>
122130
</div>
123131
<Button

0 commit comments

Comments
 (0)