Skip to content

Commit e13d49a

Browse files
tsaxena4ktsaxena4k
committed
Added preloaders
1 parent 48b4047 commit e13d49a

File tree

2 files changed

+138
-122
lines changed

2 files changed

+138
-122
lines changed

‎components/Login.jsx‎

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function Login() {
99
const router = useRouter();
1010
const [errorMsg, setErrorMsg] = useState("");
1111
const [user, { mutate }] = useUser();
12-
const [loading,isLoading]=useState(user?true:false);
12+
const [loading, isLoading] = useState(false);
1313
useEffect(() => {
1414
// redirect to home if user is authenticated
1515
if (user) router.replace("/");
@@ -39,60 +39,64 @@ export default function Login() {
3939

4040
return (
4141
<>
42-
{loading?<div class="progress">
43-
<div class="indeterminate"></div>
44-
</div>:null}
45-
<div className="row">
46-
<div className="col s12 m12">
47-
<div className="card z-depth-0">
48-
<h4 style={{ fontWeight: 'bolder' }} id="title">Login</h4>
49-
<div className="container">
50-
<div className="card-container">
51-
<div className="row">
52-
<div className="card-content"></div>
53-
<form onSubmit={onSubmit}>
54-
{errorMsg ? <p style={{ color: "red" }}>{errorMsg}</p> : null}
55-
<div className="input-field col s12">
56-
<i className="prefix">
57-
<MdEmail />
58-
</i>
59-
<input id="email" type="text" className="validate" required />
60-
<label htmlFor="email">Email</label>
61-
</div>
62-
<div class="input-field col s12">
63-
<i className="prefix">
64-
<RiLockPasswordFill />
65-
</i>
66-
<input id="password" type="password" className="validate" required />
67-
<label htmlFor="password">Password</label>
68-
</div>
69-
<div className="col s12" style={{ marginBottom: '2rem' }}>
70-
<p className="left">
71-
<label>
72-
<input type="checkbox" className="filled-in" />
73-
<span>Remember me</span>
74-
</label>
75-
</p>
76-
<a onClick={() => M.toast({ html: 'Coming soon', classes: 'toast' })} className="right und">Forgot password?</a>
77-
</div>
78-
<div className="col s12">
79-
<button
80-
className="waves-effect waves-light btn col s12"
81-
type="submit"
82-
>
83-
Login
42+
<div className="card-stacked center-align">
43+
{loading ? <div class="progress" style={{ margin: 0 }}>
44+
<div class="indeterminate"></div>
45+
</div> : null}
46+
<div className="card-content">
47+
<div className="row">
48+
<div className="col s12 m12">
49+
<div className="card z-depth-0">
50+
<h4 style={{ fontWeight: 'bolder' }} id="title">Login</h4>
51+
<div className="container">
52+
<div className="card-container">
53+
<div className="row">
54+
<div className="card-content"></div>
55+
<form onSubmit={onSubmit}>
56+
{errorMsg ? <p style={{ color: "red" }}>{errorMsg}</p> : null}
57+
<div className="input-field col s12">
58+
<i className="prefix">
59+
<MdEmail />
60+
</i>
61+
<input id="email" type="text" className="validate" required />
62+
<label htmlFor="email">Email</label>
63+
</div>
64+
<div class="input-field col s12">
65+
<i className="prefix">
66+
<RiLockPasswordFill />
67+
</i>
68+
<input id="password" type="password" className="validate" required />
69+
<label htmlFor="password">Password</label>
70+
</div>
71+
<div className="col s12" style={{ marginBottom: '2rem' }}>
72+
<p className="left">
73+
<label>
74+
<input type="checkbox" className="filled-in" />
75+
<span>Remember me</span>
76+
</label>
77+
</p>
78+
<a onClick={() => M.toast({ html: 'Coming soon', classes: 'toast' })} className="right und">Forgot password?</a>
79+
</div>
80+
<div className="col s12">
81+
<button
82+
className="waves-effect waves-light btn col s12"
83+
type="submit"
84+
>
85+
Login
8486
</button>
87+
</div>
88+
</form>
8589
</div>
86-
</form>
87-
</div>
88-
<div className="card-action col s12">
89-
<p>New here? <Link href="/signup">Sign up</Link></p>
90+
<div className="card-action col s12">
91+
<p>New here? <Link href="/signup">Sign up</Link></p>
92+
</div>
93+
</div>
9094
</div>
9195
</div>
9296
</div>
93-
</div>
97+
</div >
9498
</div>
95-
</div >
99+
</div>
96100
</>
97101
);
98102
}

‎components/Signup.jsx‎

Lines changed: 85 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Link from "next/link";
99
export default function Login() {
1010
const [user, { mutate }] = useUser();
1111
const [errorMsg, setErrorMsg] = useState("");
12+
const [loading, isLoading] = useState(false);
1213

1314
useEffect(() => {
1415
// redirect to home if user is authenticated
@@ -20,6 +21,7 @@ export default function Login() {
2021
if (e.currentTarget.password.value !== e.currentTarget.cpassword.value) {
2122
setErrorMsg("Passwords does not match")
2223
} else {
24+
isLoading(true);
2325
const body = {
2426
email: e.currentTarget.email.value,
2527
name: e.currentTarget.name.value,
@@ -34,92 +36,102 @@ export default function Login() {
3436
const userObj = await res.json();
3537
// writing our user object to the state
3638
mutate(userObj);
37-
M.toast({html: 'Signed up',classes:'blue'})
39+
M.toast({ html: 'Signed up', classes: 'blue' })
3840
} else {
41+
isLoading(false);
3942
setErrorMsg(await res.text());
4043
}
4144
}
4245
};
4346
return (
44-
<div className="row">
45-
<div className="col s12 m12">
46-
<div className="card z-depth-0">
47-
<h4 style={{fontWeight:'bolder'}}>Create account</h4>
48-
<div className="container">
49-
<div className="card-container">
50-
<div className="row">
51-
<div className="card-content">
52-
<form onSubmit={handleSubmit}>
53-
{errorMsg ? (
54-
<p style={{ color: "red" }}>{errorMsg}</p>
55-
) : null}
56-
<div className="input-field col s12">
57-
<i className="prefix">
58-
<FaUserCircle />
59-
</i>
60-
<input
61-
id="name"
62-
type="text"
63-
className="validate"
64-
name="name"
65-
required
66-
/>
67-
<label htmlFor="name">Name</label>
68-
</div>
69-
<div className="input-field col s12">
70-
<i className="prefix">
71-
<MdEmail />
72-
</i>
73-
<input
74-
id="email"
75-
type="text"
76-
className="validate "
77-
name="email"
78-
required
79-
/>
80-
<label htmlFor="email">Email</label>
81-
</div>
82-
<div class="input-field col s12">
83-
<i className="prefix">
84-
<RiLockPasswordFill />
85-
</i>
86-
<input
87-
id="password"
88-
type="password"
89-
class="validate"
90-
name="password"
91-
required
92-
/>
93-
<label htmlFor="password">Password</label>
94-
</div>
95-
<div class="input-field col s12">
96-
<i className="prefix">
97-
<RiLockPasswordLine />
98-
</i>
99-
<input
100-
id="cpassword"
101-
type="password"
102-
class="validate"
103-
name="cpassword"
104-
required
105-
/>
106-
<label htmlFor="cpassword">Confirm Password</label>
107-
</div>
108-
<div className="col s12" style={{ marginBottom: '1rem' }}>
109-
<button class="waves-effect waves-light btn col s12" type="submit">
110-
sign up
47+
<>
48+
<div className="card-stacked center-align">
49+
{loading ? <div class="progress" style={{ margin: 0 }}>
50+
<div class="indeterminate"></div>
51+
</div> : null}
52+
<div className="card-content">
53+
<div className="row">
54+
<div className="col s12 m12">
55+
<div className="card z-depth-0">
56+
<h4 style={{ fontWeight: 'bolder' }}>Create account</h4>
57+
<div className="container">
58+
<div className="card-container">
59+
<div className="row">
60+
<div className="card-content">
61+
<form onSubmit={handleSubmit}>
62+
{errorMsg ? (
63+
<p style={{ color: "red" }}>{errorMsg}</p>
64+
) : null}
65+
<div className="input-field col s12">
66+
<i className="prefix">
67+
<FaUserCircle />
68+
</i>
69+
<input
70+
id="name"
71+
type="text"
72+
className="validate"
73+
name="name"
74+
required
75+
/>
76+
<label htmlFor="name">Name</label>
77+
</div>
78+
<div className="input-field col s12">
79+
<i className="prefix">
80+
<MdEmail />
81+
</i>
82+
<input
83+
id="email"
84+
type="text"
85+
className="validate "
86+
name="email"
87+
required
88+
/>
89+
<label htmlFor="email">Email</label>
90+
</div>
91+
<div class="input-field col s12">
92+
<i className="prefix">
93+
<RiLockPasswordFill />
94+
</i>
95+
<input
96+
id="password"
97+
type="password"
98+
class="validate"
99+
name="password"
100+
required
101+
/>
102+
<label htmlFor="password">Password</label>
103+
</div>
104+
<div class="input-field col s12">
105+
<i className="prefix">
106+
<RiLockPasswordLine />
107+
</i>
108+
<input
109+
id="cpassword"
110+
type="password"
111+
class="validate"
112+
name="cpassword"
113+
required
114+
/>
115+
<label htmlFor="cpassword">Confirm Password</label>
116+
</div>
117+
<div className="col s12" style={{ marginBottom: '1rem' }}>
118+
<button class="waves-effect waves-light btn col s12" type="submit">
119+
sign up
111120
</button>
121+
</div>
122+
</form>
123+
</div>
124+
<div className="card-action col s12">
125+
<p>Already have an account<Link href="/login"> Login here.</Link></p>
126+
</div>
112127
</div>
113-
</form>
114-
</div>
115-
<div className="card-action col s12">
116-
<p>Already have an account<Link href="/login"> Login here.</Link></p>
128+
</div>
117129
</div>
118130
</div>
119131
</div>
120132
</div>
121133
</div>
122134
</div>
123-
</div>
135+
</>
124136
);
125137
}

0 commit comments

Comments
 (0)