Skip to content

Commit cafe2e4

Browse files
tsaxena4ktsaxena4k
committed
Version 1.0
1 parent 027007d commit cafe2e4

File tree

19 files changed

+386
-512
lines changed

19 files changed

+386
-512
lines changed

‎components/AfterLogin.jsx‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { useState } from 'react';
22
import { useUser } from '../lib/hooks';
3+
import { IoMdSend } from 'react-icons/io'
34

45
export default function afterLogin() {
56
const [errorMsg, setErrorMsg] = useState("");
67
const [user] = useUser();
7-
const [Loader,updateLoad]=useState(false);
8+
const [Loader, updateLoad] = useState(false);
9+
const [msgAck, setMsgAck] = useState(false);
810
const handleSubmit = async (e) => {
911
e.preventDefault();
1012
updateLoad(true);
@@ -18,43 +20,59 @@ export default function afterLogin() {
1820
body: JSON.stringify(body)
1921
});
2022
if (res.status === 201) {
21-
M.toast({ html: 'Message sent', classes: 'green' })
23+
setMsgAck(true);
24+
setTimeout(() => setMsgAck(false), 2500)
2225
} else {
2326
setErrorMsg(await res.text());
2427
}
2528
updateLoad(false);
29+
var msgForm = document.getElementById("msgForm");
30+
msgForm.reset();
2631
};
27-
return (<div className="row">
28-
<div className="col s12 m12">
29-
<div className="card-panel horizontal blue ">
30-
<span className="white-text">Hey you made it here {user ? user.name : 'Stranger'}, we all were waiting for you.<br />I hope you like this Authentication module, Its simple yet important to know.
31-
I'll be updating it with many new stuff frequently.<br /><br />Till then you can look around.<strong> Don't forget to drop a message for me.</strong></span>
32-
</div>
33-
</div>
34-
{errorMsg ? (
35-
<p style={{ color: "teal" }}>{errorMsg}</p>
36-
) : null}
37-
<form className="col s12" onSubmit={handleSubmit}>
38-
<div className="input-field col s12 m9">
39-
<i className="material-icons prefix">mode_edit</i>
40-
<textarea id="message" className="materialize-textarea" name="message" required></textarea>
41-
<label htmlFor="message">Message for developer</label>
42-
</div>
43-
<button className="btn-small waves-effect waves-light blue" type="submit" style={{ marginTop: '1.7rem' }}>Send
44-
{!Loader?<i className="material-icons right">send</i>:
45-
<div class="preloader-wrapper small active">
46-
<div class="spinner-layer spinner-green-only">
47-
<div class="circle-clipper left">
48-
<div class="circle"></div>
49-
</div><div class="gap-patch">
50-
<div class="circle"></div>
51-
</div><div class="circle-clipper right">
52-
<div class="circle"></div>
32+
return (
33+
<>
34+
{/* <div class="card mb-3" style="max-width: 540px;">
35+
<div class="row g-0">
36+
<div class="col-md-5">
37+
<img src="..." class="img-fluid rounded-start" alt="..." />
38+
</div>
39+
<div class="col-md-7">
40+
<div class="card-body">
41+
<h5 class="card-title">Card title</h5>
42+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
43+
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
5344
</div>
5445
</div>
5546
</div>
56-
}
57-
</button>
58-
</form>
59-
</div>)
47+
</div> */}
48+
<div className="row">
49+
<div className="col-sm-12">
50+
<div className="card-text">
51+
Hey you made it here {user ? user.name : 'Stranger'}, we all were waiting for you.<br />I hope you like this Authentication module, Its simple yet important to know.
52+
I'll be updating it with many new stuff frequently.<br /><br />Till then you can look around.<strong> Don't forget to drop a message for me.</strong>
53+
</div>
54+
</div>
55+
<div className="col-sm-12 my-3">
56+
<div className="card">
57+
<div className="card-body">
58+
<div className="card-form">
59+
<div className='err-msg text-danger'> {errorMsg && <p>{errorMsg}</p>}</div>
60+
{msgAck && <div class="alert alert-success" role="alert">
61+
Message Sent
62+
</div>}
63+
<form onSubmit={handleSubmit} id="msgForm">
64+
<div class="form-floating mb-3">
65+
<textarea class="form-control" placeholder="Leave a comment here" id="message" name="message"></textarea>
66+
<label for="floatingTextarea">Send Message</label>
67+
</div>
68+
<button type='submit' className='btn btn-primary'>{Loader ? <div class="spinner-border" role="status" style={{ width: '1.5rem', height: '1.5rem' }}>
69+
<span class="visually-hidden">Loading...</span>
70+
</div> : <>Send <IoMdSend /></>}</button>
71+
</form>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
</>)
6078
}

‎components/Home.jsx‎

Lines changed: 55 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Link from 'next/link';
22
import { useUser } from '../lib/hooks';
33
import AfterLogin from '../components/AfterLogin';
4-
import {useState} from 'react'
4+
import { useState } from 'react';
55

66
export default function Home() {
77
const [user, { mutate }] = useUser();
@@ -13,68 +13,67 @@ export default function Home() {
1313
});
1414
// set the user state to null
1515
mutate(null);
16-
M.toast({ html: 'Logged out' ,classes:'toast'})
1716
isLoading(false);
1817
};
1918
return (
2019
<>
21-
<div className="card horizontal z-depth-5">
22-
<div
23-
className="card-image hide-on-small-only"
24-
style={{ display: "flex" }}
25-
>
26-
{!user ? (<>
27-
<img
28-
src="https://cdn.dribbble.com/users/2251626/screenshots/6831464/welcome_dribbble.png"
29-
className="responsive-img" alt=""
30-
/>
31-
</>) : (<img
32-
src="https://cdn.dribbble.com/users/1090020/screenshots/10535970/media/766c2d3d6101fca5d441420a6412abf1.png"
33-
className="responsive-img" alt=""
34-
/>)}
35-
36-
</div>
37-
<div className="card-stacked center-align">
38-
{loading ? <div className="progress white" style={{margin:0}}>
39-
<div className="indeterminate blue"></div>
40-
</div> : null}
41-
<div className="card-content">
42-
<h2 style={{ marginTop: '0' }}><span style={{ fontWeight: 'bolder', color: `${user ? '#2196f3' : '#7ed'}`, textShadow: '2px 2px black' }}>Hello </span>{!user ? 'Stranger' : user.name}</h2>
43-
{!user ? <div className="card-title und">Welcome to <strong><a onClick={() => M.toast({ html: 'Coming soon', classes: 'toast' })}>Tushar.dev</a></strong></div> : null}
44-
<div className="col s12 m12">
45-
{!user ? (<>
46-
<div className="card-panel #80cbc4 teal lighten-2">
47-
<span className="white-text" style={{ fontSize: '1.2rem' }}>This is an Authentication build in <a href="https://nextjs.org/" target="_blank" style={{ textDecoration: 'underline', color: "white" }}>Next.js</a> using <a href="http://www.passportjs.org/" target="_blank" style={{ textDecoration: 'underline', color: "white" }}>Passport.js</a> and <a href="https://www.mongodb.com/" target="_blank" style={{ textDecoration: 'underline', color: "white" }}>Mongodb </a>
48-
. It is a fully functional & ready to use module build for your next web application.This is template 0.0 I will be pushing more new personalized templates soon.<br /><br />-Till then go on try it around, I hope you like it-</span>
49-
</div>
50-
</>) : (<AfterLogin />)}
51-
</div>
20+
<div class="card mb-3">
21+
<div class="row g-0">
22+
<div class="col-md-5">
23+
{!user ? (<>
24+
<img
25+
src='/Images/Home.png'
26+
className="img-fluid" alt=""
27+
/>
28+
</>) : (<img
29+
src="/Images/Home2.png"
30+
className="img-fluid" alt=""
31+
/>)}
5232
</div>
53-
54-
<div className="card-action">
55-
{!user ? (
56-
<>
57-
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
58-
<Link href="/login">
59-
<a className="waves-effect waves-light btn">Log in</a>
60-
</Link>
61-
<Link href="/signup">
62-
<a className="waves-effect waves-light btn">Sign up</a>
63-
</Link>
33+
<div class="col-md-7">
34+
<div class="card-body h-100 text-center">
35+
<div className='row h-100' style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
36+
<div className='col-sm-12'>
37+
<h2 style={{ marginTop: '0' }}><span style={{ fontWeight: 'bolder', color: `${user ? '#5c9eff' : '#5c9eff'}`, textShadow: '2px 2px black' }}>Hello </span>{!user ? 'Stranger' : user.name}</h2>
38+
<p>Welcome to <strong>Nextjs Auth</strong></p>
39+
</div>
40+
<div className='col-sm-12'>
41+
{!user ? (<>
42+
<div className="card-text">
43+
This is an Authentication build in <a href="https://nextjs.org/" target="_blank" style={{ textDecoration: 'underline', color: "" }}>Next.js</a> using <a href="http://www.passportjs.org/" target="_blank" style={{ textDecoration: 'underline', color: "" }}>Passport.js</a> and <a href="https://www.mongodb.com/" target="_blank" style={{ textDecoration: 'underline', color: "" }}>Mongodb </a>
44+
. It is a fully functional & ready to use module build for your next web application.This is template 0.0 I will be pushing more new personalized templates soon.
45+
</div>
46+
<div class="alert alert-primary my-2" role="alert">
47+
Till then go on try it around, I hope you like it
48+
</div>
49+
</>) : (<AfterLogin />)}
6450
</div>
65-
</>
66-
) : (
67-
<>
51+
<div className='col-sm-12' style={{ alignSelf: 'end' }}>
52+
{!user ? (
53+
<>
54+
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
55+
<Link href="/login">
56+
<a className="btn btn-primary">Log in</a>
57+
</Link>
58+
<Link href="/signup">
59+
<a className="btn btn-primary">Sign up</a>
60+
</Link>
61+
</div>
62+
</>
63+
) : (
64+
<>
6865

69-
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
70-
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
71-
<Link href="/user/[userId]" as={`/user/${user._id}`}>
72-
<a className="waves-effect waves-light btn blue">Profile</a>
73-
</Link>
74-
<a role="button" onClick={handleLogout} className="waves-effect waves-light btn blue">Logout</a>
75-
</div>
76-
</>
77-
)}
66+
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
67+
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
68+
<Link href="/user/[userId]" as={`/user/${user._id}`}>
69+
<a className="btn btn-primary">Profile</a>
70+
</Link>
71+
</div>
72+
</>
73+
)}
74+
</div>
75+
</div>
76+
</div>
7877
</div>
7978
</div>
8079
</div>

0 commit comments

Comments
 (0)