Skip to content

Commit 98deeba

Browse files
bleriotnoguiableriotnoguia
committed
Enhance Navbar with user authentication state
1 parent 118d33d commit 98deeba

2 files changed

Lines changed: 207 additions & 195 deletions

File tree

‎inertia/pages/auth/login.tsx‎

Lines changed: 93 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Link, useForm } from '@inertiajs/react'
22
import { FormEvent } from 'react'
33
import { router } from '@inertiajs/react'
4+
import Navbar from '../../components/navbar'
5+
import Footer from '../../components/footer'
46

57
export default function Login() {
68
const { data, setData, processing, errors } = useForm({
@@ -15,101 +17,105 @@ export default function Login() {
1517
}
1618

1719
return (
18-
<div className="min-h-screen flex items-center justify-center bg-gray-50">
19-
<div className="max-w-md w-full space-y-8">
20-
<div>
21-
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
22-
Sign in to your account
23-
</h2>
24-
</div>
25-
{/* Social Login */}
26-
<div className="space-y-3">
27-
<Link
28-
href="/auth/github"
29-
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
30-
>
31-
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
32-
<path
33-
fillRule="evenodd"
34-
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
35-
clipRule="evenodd"
36-
/>
37-
</svg>
38-
Continue with GitHub
39-
</Link>
40-
</div>
41-
42-
<div className="relative">
43-
<div className="absolute inset-0 flex items-center">
44-
<div className="w-full border-t border-gray-300" />
20+
<>
21+
<Navbar />
22+
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12">
23+
<div className="max-w-md w-full space-y-8">
24+
<div>
25+
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
26+
Sign in to your account
27+
</h2>
4528
</div>
46-
<div className="relative flex justify-center text-sm">
47-
<span className="px-2 bg-gray-50 text-gray-500">Or continue with</span>
29+
{/* Social Login */}
30+
<div className="space-y-3">
31+
<Link
32+
href="/auth/github"
33+
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
34+
>
35+
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
36+
<path
37+
fillRule="evenodd"
38+
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
39+
clipRule="evenodd"
40+
/>
41+
</svg>
42+
Continue with GitHub
43+
</Link>
4844
</div>
49-
</div>
50-
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
51-
<div className="rounded-md shadow-sm -space-y-px">
52-
<div>
53-
<label htmlFor="email" className="sr-only">
54-
Email address
55-
</label>
56-
<input
57-
id="email"
58-
name="email"
59-
type="email"
60-
required
61-
className="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"
62-
placeholder="Email address"
63-
value={data.email}
64-
onChange={(e) => setData('email', e.target.value)}
65-
/>
66-
{errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
45+
46+
<div className="relative">
47+
<div className="absolute inset-0 flex items-center">
48+
<div className="w-full border-t border-gray-300" />
6749
</div>
68-
<div>
69-
<label htmlFor="password" className="sr-only">
70-
Password
71-
</label>
72-
<input
73-
id="password"
74-
name="password"
75-
type="password"
76-
required
77-
className="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"
78-
placeholder="Password"
79-
value={data.password}
80-
onChange={(e) => setData('password', e.target.value)}
81-
/>
82-
{errors.password && <p className="text-red-500 text-xs mt-1">{errors.password}</p>}
50+
<div className="relative flex justify-center text-sm">
51+
<span className="px-2 bg-gray-50 text-gray-500">Or continue with</span>
8352
</div>
8453
</div>
54+
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
55+
<div className="rounded-md shadow-sm -space-y-px">
56+
<div>
57+
<label htmlFor="email" className="sr-only">
58+
Email address
59+
</label>
60+
<input
61+
id="email"
62+
name="email"
63+
type="email"
64+
required
65+
className="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"
66+
placeholder="Email address"
67+
value={data.email}
68+
onChange={(e) => setData('email', e.target.value)}
69+
/>
70+
{errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
71+
</div>
72+
<div>
73+
<label htmlFor="password" className="sr-only">
74+
Password
75+
</label>
76+
<input
77+
id="password"
78+
name="password"
79+
type="password"
80+
required
81+
className="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"
82+
placeholder="Password"
83+
value={data.password}
84+
onChange={(e) => setData('password', e.target.value)}
85+
/>
86+
{errors.password && <p className="text-red-500 text-xs mt-1">{errors.password}</p>}
87+
</div>
88+
</div>
8589

86-
<div className="flex items-center justify-between">
87-
<div className="flex items-center">
88-
<input
89-
id="remember"
90-
name="remember"
91-
type="checkbox"
92-
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
93-
checked={data.remember}
94-
onChange={(e) => setData('remember', e.target.checked)}
95-
/>
96-
<label htmlFor="remember" className="ml-2 block text-sm text-gray-900">
97-
Remember me
98-
</label>
90+
<div className="flex items-center justify-between">
91+
<div className="flex items-center">
92+
<input
93+
id="remember"
94+
name="remember"
95+
type="checkbox"
96+
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
97+
checked={data.remember}
98+
onChange={(e) => setData('remember', e.target.checked)}
99+
/>
100+
<label htmlFor="remember" className="ml-2 block text-sm text-gray-900">
101+
Remember me
102+
</label>
103+
</div>
99104
</div>
100-
</div>
101105

102-
<div>
103-
<button
104-
type="submit"
105-
disabled={processing}
106-
className="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"
107-
>
108-
Sign in
109-
</button>
110-
</div>
111-
</form>
106+
<div>
107+
<button
108+
type="submit"
109+
disabled={processing}
110+
className="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"
111+
>
112+
Sign in
113+
</button>
114+
</div>
115+
</form>
116+
</div>
112117
</div>
113-
</div>
118+
<Footer />
119+
</>
114120
)
115121
}

0 commit comments

Comments
 (0)