Skip to content

Commit a6bd877

Browse files
reva2024reva2024
authored
Merge pull request #35 from oslabs-beta/vicky/fix-signup-user-data
vicky/fix signup user data
2 parents 8e9abfc + e71e051 commit a6bd877

File tree

4 files changed

+119
-71
lines changed

4 files changed

+119
-71
lines changed

‎server/controllers/user.controller.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ export const userRegistration: RequestHandler = async (
142142
.then(() => {
143143
log.info(`${email} successfully registered`);
144144
res.locals.userInfo = { name: full_name, email: email };
145-
res.locals.user = full_name;
145+
res.locals.user = { email: email };
146146
return next();
147147
})
148148
.catch((err: ErrorEvent) => next(err));

‎src/App.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,16 @@ const App: React.FC = () => {
3232
<BrowserRouter>
3333
<Routes>
3434
<Route path="/" element={<Shared />}>
35-
{/* index is default page | visitng `/` loads Home page */}
35+
{/* index is default page | visiting `/` loads Home page */}
3636
<Route index element={<Home />} />
3737
<Route path="login" element={user ? <DBDisplay /> : <Login />} />
3838
<Route path="signup" element={user ? <DBDisplay /> : <Signup />} />
39-
<Route path="display" element={<DBDisplay />} />
40-
<Route path="test-new-query" element={<TestNewQuery />} />
41-
<Route path="view-saved-queries" element={<ViewSavedQueries />} />
39+
<Route path="display" element={user ? <DBDisplay /> : <Login />} />
40+
<Route path="test-new-query" element={user ? <TestNewQuery /> : <Login />} />
41+
<Route
42+
path="view-saved-queries"
43+
element={user ? <ViewSavedQueries /> : <Login />}
44+
/>
4245
</Route>
4346
{/* main dashboard? route does not live inside the Shared layout */}
4447
</Routes>

‎src/pages/Login.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,11 @@ export default function Login() {
150150
Continue with email
151151
</button>
152152
</div>
153+
<div className="flex w-full justify-center text-center">
154+
{!loginStatus ? (
155+
<div className="text-xs text-red-500">Failed to log in. Try again.</div>
156+
) : null}
157+
</div>
153158
</form>
154159
<div className="ContentDivider inline-flex h-5 items-center justify-start gap-2 self-stretch">
155160
<div className="Divider h-px shrink grow basis-0 bg-gray-200" />

‎src/pages/Signup.tsx

Lines changed: 106 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,38 @@
11
// React & React Router Modules
22
import axios from 'axios';
33
import React, { useState } from 'react';
4+
import useCredentialsStore from '../store/credentialsStore';
45
import { handleOAuthLogin } from '../utils/getGoogleUrl';
56
import googleImg from '../../src/assets/GoogleImage.png';
67
import gitHubImage from '../../src/assets/GithubImage.png';
78
import { NavLink, useNavigate } from 'react-router-dom';
89

910
/* "Signup" Component - signup page for user creation */
1011
export default function Signup() {
12+
const { setUser } = useCredentialsStore();
1113
const [emailErr, setEmailErr] = useState(false);
1214
const navigate = useNavigate();
15+
16+
const LoginUser = async (regInfo: { email: string; password: string }) => {
17+
const { email, password } = regInfo;
18+
await axios
19+
.post(
20+
'/api/verifyUser',
21+
{ email, password },
22+
{
23+
withCredentials: true,
24+
}
25+
)
26+
.then((res) => {
27+
setUser(res.data);
28+
navigate('/display');
29+
})
30+
.catch((err) => {
31+
// if somehow there's an error that wasn't caught when registering?
32+
console.log('Error logging user in after registering.');
33+
});
34+
};
35+
1336
//Regular login using JWTs without OAuth
1437
const registerAccount = async (e: React.FormEvent) => {
1538
e.preventDefault();
@@ -20,7 +43,10 @@ export default function Signup() {
2043
const password = formValues[2].value;
2144
await axios
2245
.post('/api/userRegistration', { full_name, email, password })
23-
.then(() => navigate('/'))
46+
.then((res) => {
47+
const registerData = { email: res.data.email, password: password };
48+
LoginUser(registerData);
49+
})
2450
.catch((err) => {
2551
const emailInput = document.querySelector('#email') as HTMLElement;
2652
setEmailErr(true);
@@ -29,89 +55,103 @@ export default function Signup() {
2955
};
3056

3157
return (
32-
<div className="Content mx-auto mt-20 w-96 h-96 grid max-w-screen-md place-items-center gap-8">
33-
<div className="Header self-stretch h-9 flex-col justify-start items-center gap-6 flex">
34-
<div className="TextAndSupportingText self-stretch h-9 flex-col justify-start items-start gap-3 flex">
35-
<div className="Text self-stretch text-center text-white text-3xl font-semibold leading-9">
36-
Create an account
58+
<div className="Content mx-auto mt-20 grid h-96 w-96 max-w-screen-md place-items-center gap-8">
59+
<div className="Header flex h-9 flex-col items-center justify-start gap-6 self-stretch">
60+
<div className="TextAndSupportingText flex h-9 flex-col items-start justify-start gap-3 self-stretch">
61+
<div className="Text self-stretch text-center text-3xl font-semibold leading-9 text-white">
62+
Create an account
3763
</div>
3864
<div className="SupportingText self-stretch text-center text-base font-normal leading-normal dark:text-white">
3965
Welcome! Please register to continue.
4066
</div>
67+
</div>
4168
</div>
42-
</div>
43-
<div className="Content self-stretch h-70 rounded-xl flex-col justify-start items-center gap-6 flex">
44-
<form className="Form self-stretch h-50 flex-col justify-start items-start gap-4 flex"
45-
onSubmit={(e) => registerAccount(e)}
46-
>
47-
<div className="InputField self-stretch h-11 flex-col justify-start items-start flex">
48-
<div className="InputFieldBase self-stretch h-11 flex-col justify-start items-start gap-1.5 flex">
49-
<div className="InputWithLabel self-stretch h-11 flex-col justify-start items-start gap-1.5 flex">
50-
<div className="Input self-stretch px-3.5 py-2.5 bg-white rounded-lg shadow border border-gray-300 justify-start items-center gap-2 inline-flex">
51-
<div className="Content grow shrink basis-0 h-6 justify-start items-center gap-2 flex">
52-
<input
53-
placeholder="Enter your full name"
54-
className="Text grow shrink basis-0 text-gray-500 text-base font-normal leading-normal"
55-
name="full_name"
56-
required
57-
/>
69+
<div className="Content h-70 flex flex-col items-center justify-start gap-6 self-stretch rounded-xl">
70+
<form
71+
className="Form h-50 flex flex-col items-start justify-start gap-4 self-stretch"
72+
onSubmit={(e) => registerAccount(e)}
73+
>
74+
<div className="InputField flex h-11 flex-col items-start justify-start self-stretch">
75+
<div className="InputFieldBase flex h-11 flex-col items-start justify-start gap-1.5 self-stretch">
76+
<div className="InputWithLabel flex h-11 flex-col items-start justify-start gap-1.5 self-stretch">
77+
<div className="Input inline-flex items-center justify-start gap-2 self-stretch rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 shadow">
78+
<div className="Content flex h-6 shrink grow basis-0 items-center justify-start gap-2">
79+
<input
80+
placeholder="Enter your full name"
81+
className="Text shrink grow basis-0 text-base font-normal leading-normal text-gray-500"
82+
name="full_name"
83+
required
84+
/>
85+
</div>
5886
</div>
5987
</div>
6088
</div>
6189
</div>
62-
</div>
63-
<div className="InputWithLabel self-stretch h-11 flex-col justify-start items-start gap-1.5 flex">
64-
<div className={`Input self-stretch px-3.5 py-2.5 bg-white rounded-lg shadow border ${!emailErr ? 'border-gray-300' : 'border-red-500'} justify-start items-center gap-2 inline-flex`}>
65-
<div className="Content grow shrink basis-0 h-6 justify-start items-center gap-2 flex">
66-
<input
67-
placeholder="Enter your email"
68-
className="Text grow shrink basis-0 focus:border-indigo-500 text-gray-500 text-base font-normal leading-normal"
69-
type="email"
70-
name="email"
71-
required
72-
/>
90+
<div className="InputWithLabel flex h-11 flex-col items-start justify-start gap-1.5 self-stretch">
91+
<div
92+
className={`Input self-stretch rounded-lg border bg-white px-3.5 py-2.5 shadow ${
93+
!emailErr ? 'border-gray-300' : 'border-red-500'
94+
} inline-flex items-center justify-start gap-2`}
95+
>
96+
<div className="Content flex h-6 shrink grow basis-0 items-center justify-start gap-2">
97+
<input
98+
placeholder="Enter your email"
99+
className="Text shrink grow basis-0 text-base font-normal leading-normal text-gray-500 focus:border-indigo-500"
100+
type="email"
101+
name="email"
102+
required
103+
/>
104+
</div>
73105
</div>
74106
</div>
75-
</div>
76-
<div className="InputWithLabel self-stretch h-11 flex-col justify-start items-start gap-1.5 flex">
77-
<div className={`Input self-stretch px-3.5 py-2.5 bg-white rounded-lg shadow border ${!emailErr ? 'border-gray-300' : 'border-red-500'} justify-start items-center gap-2 inline-flex`}>
78-
<div className="Content grow shrink basis-0 h-6 justify-start items-center gap-2 flex">
79-
<input
80-
placeholder="Enter your password"
81-
className="Text grow shrink basis-0 text-gray-500 text-base font-normal leading-normal"
82-
type="password"
83-
name="password"
84-
required
85-
/>
107+
<div className="InputWithLabel flex h-11 flex-col items-start justify-start gap-1.5 self-stretch">
108+
<div
109+
className={`Input self-stretch rounded-lg border bg-white px-3.5 py-2.5 shadow ${
110+
!emailErr ? 'border-gray-300' : 'border-red-500'
111+
} inline-flex items-center justify-start gap-2`}
112+
>
113+
<div className="Content flex h-6 shrink grow basis-0 items-center justify-start gap-2">
114+
<input
115+
placeholder="Enter your password"
116+
className="Text shrink grow basis-0 text-base font-normal leading-normal text-gray-500"
117+
type="password"
118+
name="password"
119+
required
120+
/>
121+
</div>
86122
</div>
87123
</div>
88-
</div>
89-
<div className="Button self-stretch rounded-lg justify-start items-start inline-flex">
90-
<button className="ButtonBase grow shrink basis-0 h-11 px-4 py-2.5 bg-sky-800 rounded-lg shadow border-gray-400 justify-center items-center gap-2 flex" type="submit">
91-
<div >
92-
<div className="Text text-white text-base font-semibold leading-normal">
93-
Sign Up
124+
<div className="Button inline-flex items-start justify-start self-stretch rounded-lg">
125+
<button
126+
className="ButtonBase flex h-11 shrink grow basis-0 items-center justify-center gap-2 rounded-lg border-gray-400 bg-sky-800 px-4 py-2.5 shadow"
127+
type="submit"
128+
>
129+
<div>
130+
<div className="Text text-base font-semibold leading-normal text-white">
131+
Sign Up
132+
</div>
133+
</div>
134+
</button>
135+
</div>
136+
{emailErr ? (
137+
<div className="text-xs text-red-500 md:text-right">
138+
Error registering. A user account already exists.
94139
</div>
140+
) : null}
141+
</form>
142+
<div className="Row inline-flex items-start justify-center gap-1 self-stretch">
143+
<div className="Text text-sm font-normal leading-tight text-white">
144+
Already have an account?
145+
</div>
146+
<div className="Button flex items-start justify-start">
147+
<div className="ButtonBase flex items-center justify-center gap-2">
148+
<div className="Text text-sm font-semibold leading-tight text-sky-500">
149+
<NavLink to="/login">Login</NavLink>
95150
</div>
96-
</button>
97-
</div>
98-
{emailErr ? (
99-
<div className="text-xs text-red-500 md:text-right">
100-
Error signing up, please check email/password and try again.
101-
</div>
102-
) : null}
103-
</form>
104-
<div className="Row self-stretch justify-center items-start gap-1 inline-flex">
105-
<div className="Text text-white text-sm font-normal leading-tight">Already have an account?</div>
106-
<div className="Button justify-start items-start flex">
107-
<div className="ButtonBase justify-center items-center gap-2 flex">
108-
<div className="Text text-sky-500 text-sm font-semibold leading-tight">
109-
<NavLink to="/login">Login</NavLink>
110151
</div>
152+
</div>
111153
</div>
112154
</div>
113155
</div>
114-
</div>
115-
</div>
116156
);
117157
}

0 commit comments

Comments
 (0)