Skip to content

Commit 870f2c5

Browse files
aysahooaysahoo
authored
Fix:Minor fixes in auth-page (#131)
* Minor fixes in auth-page * fix * fix * sorry-fix
1 parent 3ffcbe8 commit 870f2c5

File tree

4 files changed

+186
-714
lines changed

4 files changed

+186
-714
lines changed

‎apps/dashboard/app/(auth)/layout.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { auth } from '@databuddy/auth';
2-
import { ChevronLeft, Loader2 } from 'lucide-react';
2+
import { CaretLeftIcon, SpinnerIcon } from '@phosphor-icons/react';
33
import { headers } from 'next/headers';
44
import Link from 'next/link';
55
import { redirect } from 'next/navigation';
@@ -30,7 +30,7 @@ export default async function AuthLayout({
3030
className="group scale-100 cursor-pointer border-white/10 bg-white/20 text-white transition-all duration-200 hover:scale-105 hover:bg-white/20"
3131
variant="outline"
3232
>
33-
<ChevronLeft className="h-4 w-4 transition-all duration-200 group-hover:translate-x-[-4px]" />
33+
<CaretLeftIcon className="h-4 w-4 transition-all duration-200 group-hover:translate-x-[-4px]" />
3434
Back
3535
</Button>
3636
</Link>
@@ -47,16 +47,16 @@ export default async function AuthLayout({
4747
</div>
4848
</div>
4949
<div className="flex w-full flex-col overflow-auto bg-background md:w-1/2">
50-
<div className="flex justify-center p-6 pt-8 md:justify-start md:p-8 md:pt-12">
50+
<div className="flex justify-center p-6 pt-8 md:p-8 md:pt-20">
5151
<Logo />
5252
</div>
5353

54-
<div className="flex flex-1 items-center justify-center p-6 pt-0 md:p-8">
54+
<div className="flex flex-1 items-center justify-center md:p-8 md:pt-0">
5555
<div className="w-full max-w-md">
5656
<Suspense
5757
fallback={
5858
<div className="flex h-40 items-center justify-center">
59-
<Loader2 className="h-8 w-8 animate-spin text-primary" />
59+
<SpinnerIcon className="h-8 w-8 animate-spin text-primary" />
6060
</div>
6161
}
6262
>

‎apps/dashboard/app/(auth)/login/page.tsx‎

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { signIn } from '@databuddy/auth/client';
4-
import { Eye, EyeOff, GithubIcon, Loader2, Mail, Sparkles } from 'lucide-react';
4+
import { EyeIcon, EyeSlashIcon, GithubLogoIcon, SpinnerIcon, SparkleIcon, GoogleLogoIcon } from '@phosphor-icons/react';
55
import Link from 'next/link';
66
import { useRouter } from 'next/navigation';
77
import { Suspense, useEffect, useState } from 'react';
@@ -100,34 +100,32 @@ function LoginPage() {
100100

101101
return (
102102
<>
103-
<div className="mb-8 text-center">
103+
<div className="mb-8 text-center -mt-8">
104104
<h1 className="font-bold text-2xl text-foreground">Welcome back</h1>
105105
<p className="mt-2 text-muted-foreground">
106106
Sign in to your account to continue your journey with Databuddy
107107
</p>
108108
</div>
109-
<div className="relative overflow-hidden rounded-xl border border-border bg-card p-6 shadow">
110-
<div className="-top-40 -right-40 pointer-events-none absolute h-80 w-80 rounded-full bg-primary/5 blur-3xl" />
111-
<div className="-bottom-40 -left-40 pointer-events-none absolute h-80 w-80 rounded-full bg-primary/5 blur-3xl" />
109+
<div className="relative overflow-hidden p-6">
110+
<div className="-top-40 -right-40 pointer-events-none absolute h-80 w-80 rounded-full blur-3xl" />
111+
<div className="-bottom-40 -left-40 pointer-events-none absolute h-80 w-80 rounded-full blur-3xl" />
112112
<div className="relative z-10">
113113
<div className="space-y-6">
114-
<div className="space-y-3">
114+
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 -mt-2">
115115
<Button
116116
className="relative flex h-11 w-full cursor-pointer items-center justify-center transition-all duration-200 hover:bg-primary/5"
117117
disabled={isLoading}
118118
onClick={handleGithubLogin}
119119
type="button"
120120
variant="outline"
121121
>
122-
<GithubIcon className="mr-2 h-5 w-5" />
123-
<span className="flex items-center gap-2">
124-
Sign in with GitHub
125-
{lastUsed === 'github' && (
126-
<span className="ml-2 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 font-medium text-primary text-xs">
127-
Last used
128-
</span>
129-
)}
130-
</span>
122+
<GithubLogoIcon className="mr-2 h-5 w-5" />
123+
<span>Sign in with GitHub</span>
124+
{lastUsed === 'github' && (
125+
<span className="absolute -top-4 -right-0.5 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-1.5 py-0.5 font-medium text-primary text-xs">
126+
Last used
127+
</span>
128+
)}
131129
</Button>
132130
<Button
133131
className="relative flex h-11 w-full cursor-pointer items-center justify-center transition-all duration-200 hover:bg-primary/5"
@@ -136,15 +134,13 @@ function LoginPage() {
136134
type="button"
137135
variant="outline"
138136
>
139-
<Mail className="mr-2 h-5 w-5" />
140-
<span className="flex items-center gap-2">
141-
Sign in with Google
142-
{lastUsed === 'google' && (
143-
<span className="ml-2 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 font-medium text-primary text-xs">
144-
Last used
145-
</span>
146-
)}
147-
</span>
137+
<GoogleLogoIcon className="mr-2 h-5 w-5" />
138+
<span>Sign in with Google</span>
139+
{lastUsed === 'google' && (
140+
<span className="absolute -top-4 -right-0.5 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-1.5 py-0.5 font-medium text-primary text-xs">
141+
Last used
142+
</span>
143+
)}
148144
</Button>
149145
</div>
150146
<div className="relative">
@@ -160,23 +156,24 @@ function LoginPage() {
160156
<form className="space-y-4" onSubmit={handleEmailPasswordLogin}>
161157
<div className="space-y-2">
162158
<Label className="font-medium text-foreground" htmlFor="email">
163-
Email
159+
Email<span className="text-blue-700">*</span>
164160
</Label>
165161
<div className="relative">
166162
<Input
167163
autoComplete="email"
168-
className="h-11 transition-all duration-200 focus:ring-2 focus:ring-primary/20"
164+
className="h-11 border-none text-foreground bg-input transition-all duration-200 focus:ring-2 focus:ring-primary/20 placeholder:text-muted-foreground/50"
169165
id="email"
170166
name="email"
171167
onChange={(e) => setEmail(e.target.value)}
172-
placeholder="[email protected]"
168+
placeholder="Enter your email"
173169
required
174170
type="email"
175171
value={email}
176172
/>
177173
{lastUsed === 'email' && (
178-
<span className="-translate-y-1/2 absolute top-1/2 right-2 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 font-medium text-primary text-xs">
179-
Last used
174+
<span className="-translate-y-1/2 absolute top-1/2 right-2 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-1.5 py-0.5 font-medium text-primary text-xs sm:px-2">
175+
<span className="hidden sm:inline">Last used</span>
176+
<span className="sm:hidden">★</span>
180177
</span>
181178
)}
182179
</div>
@@ -187,19 +184,20 @@ function LoginPage() {
187184
className="font-medium text-foreground"
188185
htmlFor="password"
189186
>
190-
Password
187+
Password<span className="text-blue-700">*</span>
191188
</Label>
192189
<Link
193-
className="h-auto cursor-pointer p-0 text-primary text-xs"
190+
className="h-auto cursor-pointer p-0 text-primary text-xs sm:text-sm"
194191
href="/login/forgot"
195192
>
196-
Forgot password?
193+
<span className="hidden sm:inline">Forgot password?</span>
194+
<span className="sm:hidden">Forgot?</span>
197195
</Link>
198196
</div>
199197
<div className="relative">
200198
<Input
201199
autoComplete="current-password"
202-
className="h-11 pr-10 transition-all duration-200 focus:ring-2 focus:ring-primary/20"
200+
className="h-11 pr-10 bg-input border-none transition-all duration-200 focus:ring-2 focus:ring-primary/20 placeholder:text-muted-foreground/50"
203201
id="password"
204202
name="password"
205203
onChange={(e) => setPassword(e.target.value)}
@@ -209,16 +207,17 @@ function LoginPage() {
209207
value={password}
210208
/>
211209
<Button
210+
aria-label={showPassword ? 'Hide password' : 'Show password'}
212211
className="absolute top-0 right-0 h-full px-3 text-muted-foreground hover:text-foreground"
213212
onClick={() => setShowPassword(!showPassword)}
214213
size="sm"
215214
type="button"
216-
variant="ghost"
215+
variant="link"
217216
>
218217
{showPassword ? (
219-
<EyeOff className="h-4 w-4" />
218+
<EyeSlashIcon className="h-4 w-4" />
220219
) : (
221-
<Eye className="h-4 w-4" />
220+
<EyeIcon className="h-4 w-4" />
222221
)}
223222
</Button>
224223
</div>
@@ -230,7 +229,7 @@ function LoginPage() {
230229
>
231230
{isLoading ? (
232231
<>
233-
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
232+
<SpinnerIcon className="mr-2 h-4 w-4 animate-spin" />
234233
Signing in...
235234
</>
236235
) : (
@@ -239,19 +238,19 @@ function LoginPage() {
239238
</Button>
240239
<Link href="/login/magic" passHref>
241240
<Button
242-
className="flex w-full cursor-pointer items-center justify-center font-medium text-primary hover:text-primary/80"
241+
className="flex w-full cursor-pointer items-center justify-center font-medium text-primary hover:text-primary/80 hover:no-underline"
243242
type="button"
244243
variant="link"
245244
>
246-
<Sparkles className="mr-2 h-4 w-4" />
245+
<SparkleIcon className="mr-2 h-4 w-4" />
247246
Sign in with magic link
248247
</Button>
249248
</Link>
250249
</form>
251250
</div>
252251
</div>
253252
</div>
254-
<div className="mt-6 text-center">
253+
<div className="mt-2 text-center">
255254
<p className="text-muted-foreground text-sm">
256255
Don&apos;t have an account?{' '}
257256
<Link
@@ -273,7 +272,7 @@ export default function Page() {
273272
<div className="flex h-screen items-center justify-center bg-background">
274273
<div className="relative">
275274
<div className="absolute inset-0 animate-ping rounded-full bg-primary/20 blur-xl" />
276-
<Loader2 className="relative h-8 w-8 animate-spin text-primary" />
275+
<SpinnerIcon className="relative h-8 w-8 animate-spin text-primary" />
277276
</div>
278277
</div>
279278
}

0 commit comments

Comments
 (0)