Skip to content

Commit 2a7d257

Browse files
adrianthedevadrianthedev
authored
chore: new auth pages (#316)
1 parent 0f213e1 commit 2a7d257

File tree

8 files changed

+717
-219
lines changed

8 files changed

+717
-219
lines changed

‎components/AuthLayout.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import HeadSection from "./HeadSection";
2+
import Image from "next/image";
3+
import React, { ReactNode } from "react";
4+
5+
function AuthLayout({ children }: { children: ReactNode }) {
6+
return (
7+
<>
8+
<HeadSection />
9+
10+
<div className="min-h-screen bg-white flex flex-1 overflow-y-auto">
11+
<div className="w-full flex flex-col sm:flex-row">
12+
<div className="sm:w-1/2 flex flex-col justify-center py-8">
13+
{children}
14+
</div>
15+
<div className="relative sm:w-1/2 bg-squares flex py-24 sm:py-0">
16+
<div className="flex flex-col justify-center flex-1 max-w-3xl px-12">
17+
<div className="relative flex max-w-full mx-auto">
18+
<Image
19+
src="/img/heading.png"
20+
// layout="fill"
21+
width="565"
22+
height="156"
23+
alt="View and manage all your data in one place"
24+
/>
25+
</div>
26+
<div className="relative flex max-w-full mx-auto mt-24">
27+
<Image
28+
src="/img/illustration.svg"
29+
// layout="fill"
30+
width="674"
31+
height="547"
32+
alt="View and manage all your data in one place"
33+
/>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
39+
{/* <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
40+
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"></div>
41+
</div> */}
42+
</div>
43+
</>
44+
);
45+
}
46+
47+
export default AuthLayout;

‎components/Sidebar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const Sidebar = () => {
4141
)}
4242
</div>
4343
<hr className="-mt-px mb-2" />
44-
<DashboardSidebarSection />
44+
{false && <DashboardSidebarSection />}
4545
{dataSourceInfo?.supports?.views && <ViewsSidebarSection />}
4646
{isOwner && <TablesSidebarSection />}
4747
</div>

‎lib/globals.css

+22
Original file line numberDiff line numberDiff line change
@@ -294,4 +294,26 @@ progress[value]::-moz-progress-bar {
294294
}
295295
}
296296

297+
.text-stroke-white {
298+
--text-stroke-color: #ffffff;
299+
}
300+
301+
.text-stroke-black {
302+
--text-stroke-color: #000000;
303+
}
304+
305+
/* Real outline for modern browsers */
306+
@supports ((text-stroke: 2px white) or (-webkit-text-stroke: 2px white)) {
307+
.text-stroked {
308+
color: transparent;
309+
-webkit-text-stroke: 2px var(--text-stroke-color);
310+
text-stroke: 2px var(--text-stroke-color);
311+
text-shadow: none;
312+
}
313+
}
314+
315+
.bg-squares {
316+
background: url('/img/bg.svg');
317+
}
318+
297319
@tailwind utilities;

‎pages/auth/login.tsx

+88-83
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { signIn, useSession } from "next-auth/client";
1010
import { toast } from "react-toastify";
1111
import { useRouter } from "next/router";
1212
import { useToggle } from "react-use";
13-
import HeadSection from "@/components/HeadSection";
13+
import AuthLayout from "@/components/AuthLayout";
1414
import Image from "next/image";
1515
import Link from "next/link";
1616
import React, { useEffect, useState } from "react";
@@ -54,100 +54,105 @@ export default function SignIn() {
5454
};
5555

5656
useEffect(() => {
57-
if(router.query.email) setEmail(router.query.email as string);
58-
}, [router])
57+
if (router.query.email) setEmail(router.query.email as string);
58+
}, [router]);
5959

6060
return (
6161
<>
62-
<HeadSection />
63-
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
64-
<div className="sm:mx-auto sm:w-full sm:max-w-md">
65-
<div className="relative mx-auto w-[200px] h-[54px] my-2">
66-
<Image src="/img/logo_text_black.png" layout="fill" alt="Basetool Logo" />
62+
<AuthLayout>
63+
<div className="min-h-screen bg-white flex flex-col justify-center py-12 sm:px-6 lg:px-8">
64+
<div className="sm:mx-auto sm:w-full sm:max-w-md">
65+
<div className="relative mx-auto w-[200px] h-[54px] my-2">
66+
<Image
67+
src="/img/logo_text_black.png"
68+
layout="fill"
69+
alt="Basetool Logo"
70+
/>
71+
</div>
72+
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
73+
Sign in to your account
74+
</h2>
6775
</div>
68-
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
69-
Sign in to your account
70-
</h2>
71-
</div>
72-
73-
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
74-
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
75-
<form
76-
className="space-y-6"
77-
onSubmit={(e) => {
78-
e.preventDefault();
79-
handleSubmit();
80-
}}
81-
>
82-
<FormControl id="email">
83-
<FormLabel>Email address</FormLabel>
84-
<Input
85-
type="email"
86-
name="email"
87-
placeholder="[email protected]"
88-
required={true}
89-
value={email}
90-
onChange={(e) => setEmail(e.currentTarget.value)}
91-
autoFocus
92-
/>
93-
<FormHelperText>We'll never share your email.</FormHelperText>
94-
</FormControl>
9576

96-
<FormControl id="password">
97-
<FormLabel>Password</FormLabel>
98-
<Input
99-
type="password"
100-
name="password"
101-
placeholder="your strong password"
102-
required={true}
103-
value={password}
104-
onChange={(e) => setPassword(e.currentTarget.value)}
105-
/>
106-
<FormHelperText>Something strong.</FormHelperText>
107-
</FormControl>
77+
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
78+
<div className="py-8 px-4 sm:rounded-lg sm:px-10">
79+
<form
80+
className="space-y-6"
81+
onSubmit={(e) => {
82+
e.preventDefault();
83+
handleSubmit();
84+
}}
85+
>
86+
<FormControl id="email">
87+
<FormLabel>Email address</FormLabel>
88+
<Input
89+
type="email"
90+
name="email"
91+
placeholder="[email protected]"
92+
required={true}
93+
value={email}
94+
onChange={(e) => setEmail(e.currentTarget.value)}
95+
autoFocus
96+
/>
97+
<FormHelperText>We'll never share your email.</FormHelperText>
98+
</FormControl>
10899

109-
<div className="flex items-center justify-between">
110-
<div className="flex items-center">
111-
<input
112-
id="rememberMe"
113-
name="rememberMe"
114-
type="checkbox"
115-
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
100+
<FormControl id="password">
101+
<FormLabel>Password</FormLabel>
102+
<Input
103+
type="password"
104+
name="password"
105+
placeholder="your strong password"
106+
required={true}
107+
value={password}
108+
onChange={(e) => setPassword(e.currentTarget.value)}
116109
/>
117-
<label
118-
htmlFor="rememberMe"
119-
className="ml-2 block text-sm text-gray-900"
120-
>
121-
Remember me
122-
</label>
123-
</div>
110+
<FormHelperText>Something strong.</FormHelperText>
111+
</FormControl>
112+
113+
<div className="flex items-center justify-between">
114+
<div className="flex items-center">
115+
<input
116+
id="rememberMe"
117+
name="rememberMe"
118+
type="checkbox"
119+
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
120+
/>
121+
<label
122+
htmlFor="rememberMe"
123+
className="ml-2 block text-sm text-gray-900"
124+
>
125+
Remember me
126+
</label>
127+
</div>
124128

125-
<div className="text-sm">
126-
No account?{" "}
127-
<Link href="/auth/register">
128-
<a className="font-medium text-indigo-600 hover:text-indigo-500">
129-
Register
130-
</a>
131-
</Link>
129+
<div className="text-sm">
130+
No account?{" "}
131+
<Link href="/auth/register">
132+
<a className="font-medium text-indigo-600 hover:text-indigo-500">
133+
Register
134+
</a>
135+
</Link>
136+
</div>
132137
</div>
133-
</div>
134138

135-
<div>
136-
<Button
137-
type="submit"
138-
disabled={isDisabled}
139-
isLoading={isDisabled}
140-
colorScheme="blue"
141-
width="100%"
142-
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
143-
>
144-
Sign in
145-
</Button>
146-
</div>
147-
</form>
139+
<div>
140+
<Button
141+
type="submit"
142+
disabled={isDisabled}
143+
isLoading={isDisabled}
144+
colorScheme="blue"
145+
width="100%"
146+
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
147+
>
148+
Sign in
149+
</Button>
150+
</div>
151+
</form>
152+
</div>
148153
</div>
149154
</div>
150-
</div>
155+
</AuthLayout>
151156
</>
152157
);
153158
}

0 commit comments

Comments
 (0)