Skip to content

Commit d597266

Browse files
fhmiibrhimdevfhmiibrhimdev
committed
Added: Some components
1 parent 0c87244 commit d597266

File tree

12 files changed

+394
-673
lines changed

12 files changed

+394
-673
lines changed

‎frontend/src/pages/Auth/Login.jsx‎

Lines changed: 19 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Link, useNavigate } from "react-router-dom";
55
import withReactContent from "sweetalert2-react-content";
66
import appConfig from "../../config/appConfig";
77
import { setTokenWithExpiration, getTokenWithExpiration } from "./Session";
8+
import InputValidation from "../Layout/Components/InputValidation";
89

910
export default function Login() {
1011
const navigate = useNavigate();
@@ -96,54 +97,30 @@ export default function Login() {
9697
return (
9798
<div className="row">
9899
<div className="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4 tw-mt-10">
99-
<div className="card card-primary">
100+
<div className="card">
100101
<div className="card-header">
101102
<h4>Login</h4>
102103
</div>
103104
<div className="card-body">
104105
<form onSubmit={loginHandler}>
106+
<InputValidation
107+
label="Email"
108+
name="email"
109+
type="email"
110+
value={formData.email}
111+
onChange={handleInputChange}
112+
error={formErrors.email}
113+
/>
114+
<InputValidation
115+
label="Password"
116+
name="password"
117+
type="password"
118+
value={formData.password}
119+
onChange={handleInputChange}
120+
error={formErrors.password}
121+
/>
105122
<div className="form-group">
106-
<label htmlFor="email">Email</label>
107-
<input
108-
type="email"
109-
name="email"
110-
id="email"
111-
className={`form-control ${
112-
formErrors.email ? "is-invalid" : ""
113-
}`}
114-
value={formData.email || ""}
115-
onChange={handleInputChange}
116-
/>
117-
{formErrors.email && (
118-
<div className="invalid-feedback">
119-
{formErrors.email}
120-
</div>
121-
)}
122-
</div>
123-
124-
<div className="form-group">
125-
<label htmlFor="password">Password</label>
126-
<input
127-
type="password"
128-
name="password"
129-
id="password"
130-
className={`form-control ${
131-
formErrors.password ? "is-invalid" : ""
132-
}`}
133-
value={formData.password || ""}
134-
onChange={handleInputChange}
135-
/>
136-
{formErrors.password && (
137-
<div className="invalid-feedback">
138-
{formErrors.password}
139-
</div>
140-
)}
141-
</div>
142-
<div className="form-group">
143-
<button
144-
type="submit"
145-
className="btn btn-lg btn-block tw-bg-blue-500 tw-text-white"
146-
>
123+
<button className="btn btn-lg btn-block btn-primary tw-text-white">
147124
Login
148125
</button>
149126
</div>

‎frontend/src/pages/Auth/Register.jsx‎

Lines changed: 39 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export default function Register() {
126126
return (
127127
<div className="row">
128128
<div className="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4 tw-mt-10">
129-
<div className="card card-primary">
129+
<div className="card">
130130
<div className="card-header">
131131
<h4>Register</h4>
132132
</div>
@@ -169,61 +169,45 @@ export default function Register() {
169169
</div>
170170
)}
171171
</div>
172-
173-
<div className="row">
174-
<div className="col-lg-6">
175-
<div className="form-group">
176-
<label htmlFor="password">
177-
Password
178-
</label>
179-
<input
180-
type="password"
181-
name="password"
182-
id="password"
183-
className={`form-control ${
184-
formErrors.password
185-
? "is-invalid"
186-
: ""
187-
}`}
188-
value={formData.password || ""}
189-
onChange={handleInputChange}
190-
/>
191-
{formErrors.password && (
192-
<div className="invalid-feedback">
193-
{formErrors.password}
194-
</div>
195-
)}
172+
<div className="form-group">
173+
<label htmlFor="password">Password</label>
174+
<input
175+
type="password"
176+
name="password"
177+
id="password"
178+
className={`form-control ${
179+
formErrors.password ? "is-invalid" : ""
180+
}`}
181+
value={formData.password || ""}
182+
onChange={handleInputChange}
183+
/>
184+
{formErrors.password && (
185+
<div className="invalid-feedback">
186+
{formErrors.password}
196187
</div>
197-
</div>
198-
<div className="col-lg-6">
199-
<div className="form-group">
200-
<label htmlFor="password_confirmation">
201-
Confirm Password
202-
</label>
203-
<input
204-
type="password"
205-
name="password_confirmation"
206-
id="password_confirmation"
207-
className={`form-control ${
208-
formErrors.password_confirmation
209-
? "is-invalid"
210-
: ""
211-
}`}
212-
value={
213-
formData.password_confirmation ||
214-
""
215-
}
216-
onChange={handleInputChange}
217-
/>
218-
{formErrors.password_confirmation && (
219-
<div className="invalid-feedback">
220-
{
221-
formErrors.password_confirmation
222-
}
223-
</div>
224-
)}
188+
)}
189+
</div>
190+
<div className="form-group">
191+
<label htmlFor="password_confirmation">
192+
Confirm Password
193+
</label>
194+
<input
195+
type="password"
196+
name="password_confirmation"
197+
id="password_confirmation"
198+
className={`form-control ${
199+
formErrors.password_confirmation
200+
? "is-invalid"
201+
: ""
202+
}`}
203+
value={formData.password_confirmation || ""}
204+
onChange={handleInputChange}
205+
/>
206+
{formErrors.password_confirmation && (
207+
<div className="invalid-feedback">
208+
{formErrors.password_confirmation}
225209
</div>
226-
</div>
210+
)}
227211
</div>
228212

229213
<div className="form-group">
@@ -251,10 +235,7 @@ export default function Register() {
251235
</div>
252236

253237
<div className="form-group">
254-
<button
255-
type="submit"
256-
className="btn btn-lg btn-block tw-bg-blue-500 tw-text-white"
257-
>
238+
<button className="btn btn-lg btn-block btn-primary tw-text-white">
258239
Register
259240
</button>
260241
</div>

0 commit comments

Comments
 (0)