Skip to content

Commit 5bff581

Browse files
nsbradfordnsbradford
committed
fake new page, prettier
1 parent 9a348f3 commit 5bff581

25 files changed

+580
-439
lines changed

‎next.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
33
reactStrictMode: false, // creates problems for chat
4-
}
4+
};
55

6-
module.exports = nextConfig
6+
module.exports = nextConfig;

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@
2929
"react": "18.2.0",
3030
"react-dom": "18.2.0",
3131
"tailwindcss": "3.3.3",
32-
"typescript": "5.2.2"
32+
"typescript": "5.2.2",
33+
"uuid": "^9.0.0"
34+
},
35+
"devDependencies": {
36+
"@types/uuid": "^9.0.2"
3337
}
3438
}

‎postcss.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ module.exports = {
33
tailwindcss: {},
44
autoprefixer: {},
55
},
6-
}
6+
};

‎src/components/auth/ErrorAlert.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
import { AuthError } from "@supabase/supabase-js";
1+
import { AuthError } from '@supabase/supabase-js';
22

33
interface ErrorAlertProps {
4-
error: AuthError
4+
error: AuthError;
55
}
66

77
export default function ErrorAlert(props: ErrorAlertProps) {
8-
return (
9-
<p>
10-
{props.error.message}
11-
</p>
12-
)
8+
return <p>{props.error.message}</p>;
139
}

‎src/components/auth/SignInForm.tsx

+97-85
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,109 @@
1-
'use client'
2-
import { Database } from '../../../types/supabase'
3-
import React, { useState } from 'react'
1+
'use client';
2+
import { Database } from '../../../types/supabase';
3+
import React, { useState } from 'react';
44
import { AuthError } from '@supabase/supabase-js';
5-
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
5+
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
66
import ErrorAlert from './ErrorAlert';
77
import { useRouter } from 'next/router';
88

9-
109
export default function SignInForm() {
11-
const supabase = createClientComponentClient<Database>()
12-
const [error, setError] = useState<AuthError | null>(null);
13-
const [isMainButtonDisabled, setIsMainButtonDisabled] = useState<boolean>(false);
14-
const { push } = useRouter();
15-
16-
async function signInWithPassword(email: string, password: string) {
17-
setIsMainButtonDisabled(true);
18-
const { data, error } = await supabase.auth.signInWithPassword({
19-
email,
20-
password,
21-
})
22-
setIsMainButtonDisabled(false);
23-
if (error) {
24-
setError(error)
25-
} else {
26-
push('/home');
27-
}
28-
}
29-
30-
async function onFormSubmit(event: React.FormEvent<HTMLFormElement>) {
31-
event.preventDefault()
32-
const target = event.target as typeof event.target & {
33-
email: { value: string }
34-
password: { value: string }
35-
}
36-
const email = target.email.value
37-
const password = target.password.value
38-
await signInWithPassword(email, password)
10+
const supabase = createClientComponentClient<Database>();
11+
const [error, setError] = useState<AuthError | null>(null);
12+
const [isMainButtonDisabled, setIsMainButtonDisabled] =
13+
useState<boolean>(false);
14+
const { push } = useRouter();
15+
16+
async function signInWithPassword(email: string, password: string) {
17+
setIsMainButtonDisabled(true);
18+
const { data, error } = await supabase.auth.signInWithPassword({
19+
email,
20+
password,
21+
});
22+
setIsMainButtonDisabled(false);
23+
if (error) {
24+
setError(error);
25+
} else {
26+
push('/home');
3927
}
28+
}
4029

41-
return (
42-
<>
43-
{error && <ErrorAlert error={error} />}
44-
<form className="space-y-6" action="#" method="POST" onSubmit={onFormSubmit}>
45-
<div>
46-
<label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
47-
Email address
48-
</label>
49-
<div className="mt-2">
50-
<input
51-
id="email"
52-
name="email"
53-
type="email"
54-
autoComplete="email"
55-
required
56-
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
57-
/>
58-
</div>
30+
async function onFormSubmit(event: React.FormEvent<HTMLFormElement>) {
31+
event.preventDefault();
32+
const target = event.target as typeof event.target & {
33+
email: { value: string };
34+
password: { value: string };
35+
};
36+
const email = target.email.value;
37+
const password = target.password.value;
38+
await signInWithPassword(email, password);
39+
}
40+
41+
return (
42+
<>
43+
{error && <ErrorAlert error={error} />}
44+
<form
45+
className="space-y-6"
46+
action="#"
47+
method="POST"
48+
onSubmit={onFormSubmit}
49+
>
50+
<div>
51+
<label
52+
htmlFor="email"
53+
className="block text-sm font-medium leading-6 text-gray-900"
54+
>
55+
Email address
56+
</label>
57+
<div className="mt-2">
58+
<input
59+
id="email"
60+
name="email"
61+
type="email"
62+
autoComplete="email"
63+
required
64+
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
65+
/>
5966
</div>
67+
</div>
6068

61-
<div>
62-
<div className="flex items-center justify-between">
63-
<label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
64-
Password
65-
</label>
66-
<div className="text-sm">
67-
<a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500">
68-
Forgot password?
69-
</a>
70-
</div>
71-
</div>
72-
<div className="mt-2">
73-
<input
74-
id="password"
75-
name="password"
76-
type="password"
77-
autoComplete="current-password"
78-
required
79-
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
80-
/>
69+
<div>
70+
<div className="flex items-center justify-between">
71+
<label
72+
htmlFor="password"
73+
className="block text-sm font-medium leading-6 text-gray-900"
74+
>
75+
Password
76+
</label>
77+
<div className="text-sm">
78+
<a
79+
href="#"
80+
className="font-semibold text-indigo-600 hover:text-indigo-500"
81+
>
82+
Forgot password?
83+
</a>
8184
</div>
8285
</div>
83-
<div>
84-
<button
85-
disabled={isMainButtonDisabled}
86-
type="submit"
87-
className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
88-
>
89-
Sign in
90-
</button>
86+
<div className="mt-2">
87+
<input
88+
id="password"
89+
name="password"
90+
type="password"
91+
autoComplete="current-password"
92+
required
93+
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
94+
/>
9195
</div>
92-
</form>
93-
</>
94-
95-
)
96-
}
97-
96+
</div>
97+
<div>
98+
<button
99+
disabled={isMainButtonDisabled}
100+
type="submit"
101+
className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
102+
>
103+
Sign in
104+
</button>
105+
</div>
106+
</form>
107+
</>
108+
);
109+
}

0 commit comments

Comments
 (0)