initial commit
This commit is contained in:
Harikrishnan Gopal
23
client/.gitignore
vendored
Normal file
23
client/.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
18869
client/package-lock.json
generated
Normal file
18869
client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
46
client/package.json
Normal file
46
client/package.json
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"name": "client",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
|
"@testing-library/react": "^13.4.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"axios": "^1.6.8",
|
||||||
|
"bootstrap": "^5.3.3",
|
||||||
|
"md5": "^2.3.0",
|
||||||
|
"mongoose": "^8.3.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-bootstrap": "^2.10.2",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-icons": "^5.0.1",
|
||||||
|
"react-router-dom": "^6.22.3",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"react-toastify": "^10.0.5",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
client/public/favicon.png
Normal file
BIN
client/public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
18
client/public/index.html
Normal file
18
client/public/index.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
|
||||||
|
<title>appointment_to_examiner</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
client/public/manifest.json
Normal file
15
client/public/manifest.json
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.svg",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
3
client/public/robots.txt
Normal file
3
client/public/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
488
client/src/App.css
Normal file
488
client/src/App.css
Normal file
@@ -0,0 +1,488 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide scrollbar for vertical */
|
||||||
|
::-webkit-scrollbar-vertical {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide scrollbar for horizontal */
|
||||||
|
::-webkit-scrollbar-horizontal {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Montserrat', sans-serif !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #96aefb;
|
||||||
|
background: linear-gradient(to right, #dab8fc, #afc2ff);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
body h1{
|
||||||
|
font-size: 2rem ;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer,
|
||||||
|
.HomePageContainer{
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 35px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 768px !important;
|
||||||
|
min-height: 480px;
|
||||||
|
}
|
||||||
|
.LoginPageContainer p{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer span{
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer a{
|
||||||
|
color: #333;
|
||||||
|
font-size: 13px;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 15px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer button,
|
||||||
|
.HomePageContainer button
|
||||||
|
{
|
||||||
|
background-color:rgb(122, 50, 199);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 10px 45px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer button:hover,
|
||||||
|
.HomePageContainer button:hover
|
||||||
|
{
|
||||||
|
|
||||||
|
background-color: #00a1ff;
|
||||||
|
}
|
||||||
|
.LoginPageContainer button:active,
|
||||||
|
.HomePageContainer button:active
|
||||||
|
{
|
||||||
|
|
||||||
|
background-color: #045d90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer button.hidden{
|
||||||
|
background-color: transparent;
|
||||||
|
transition: all 0.2sec ease !important;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
.LoginPageContainer button.hidden:hover{
|
||||||
|
box-shadow: 0 0 5px 1px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.LoginPageContainer form{
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 40px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer input{
|
||||||
|
background-color: #eee;
|
||||||
|
border: none;
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
transition: all 0.6s ease-in-out;
|
||||||
|
}
|
||||||
|
.SmallScreenBtn{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.sign-in{
|
||||||
|
left: 0;
|
||||||
|
width: 50%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer.active .sign-in{
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-up{
|
||||||
|
left: 0;
|
||||||
|
width: 50%;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.OverlayAnimation{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer.active .sign-up{
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 5;
|
||||||
|
animation: move 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move{
|
||||||
|
0%, 49.99%{
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
50%, 100%{
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons{
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons a{
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 20%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 3px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-container{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.6s ease-in-out;
|
||||||
|
border-radius: 150px 0 0 100px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer.active .toggle-container{
|
||||||
|
transform: translateX(-100%);
|
||||||
|
border-radius: 0 150px 100px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle{
|
||||||
|
background-color: linear-gradient(to left, #00a1ff, #00ff8f);
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, #C33764 , #1D2671);
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
left: -100%;
|
||||||
|
height: 100%;
|
||||||
|
width: 200%;
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: all 0.6s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer.active .toggle{
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-panel{
|
||||||
|
position: absolute;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 30px;
|
||||||
|
text-align: center;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: all 0.6s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-left{
|
||||||
|
transform: translateX(-200%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer.active .toggle-left{
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-right{
|
||||||
|
right: 0;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer.active .toggle-right{
|
||||||
|
transform: translateX(200%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.GoogleBtn{
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 450 !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
padding: 10px 20px !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
border: 1px solid #ccc !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition: background-color 0.3s ease !important;
|
||||||
|
color: black !important;
|
||||||
|
font-family: 'Roboto', sans-serif !important;
|
||||||
|
text-transform:none !important;
|
||||||
|
margin: 20px auto !important;
|
||||||
|
}
|
||||||
|
.GoogleBtn:hover {
|
||||||
|
background-color: #f0f0f0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GoogleBtn .icon {
|
||||||
|
font-size:20px !important;
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.ProfileContainer,
|
||||||
|
.profile{
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
gap:35px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.profile-image img{
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
.ResponseDiv{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.form-pw{
|
||||||
|
|
||||||
|
height:auto !important;
|
||||||
|
}
|
||||||
|
.ResponseDivButton{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.PwPage{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.PwPage p{
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
.PwPageContainer{
|
||||||
|
min-height: 480px !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PwPage input{
|
||||||
|
width: 350px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:475px) {
|
||||||
|
.PwPage input{
|
||||||
|
width: 250px !important;
|
||||||
|
}
|
||||||
|
.profile-image img{
|
||||||
|
height: 70px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ProfileContainer,
|
||||||
|
.profile{
|
||||||
|
gap:25px;
|
||||||
|
}
|
||||||
|
.profile p{
|
||||||
|
font-size: 12px ;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.toggle-container{
|
||||||
|
display:none !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer,
|
||||||
|
.HomePageContainer{
|
||||||
|
max-width: 320px !important;
|
||||||
|
min-height: 450px !important;
|
||||||
|
border-radius: 19px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer button,
|
||||||
|
.HomePageContainer button
|
||||||
|
{
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 8px 30px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-top: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.LoginPageContainer p{
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer span{
|
||||||
|
font-size: 12px !important;
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
}
|
||||||
|
.form-container{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 1.5rem !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer a{
|
||||||
|
font-size: 12px;}
|
||||||
|
.LoginPageContainer form{
|
||||||
|
padding: 0 27px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GoogleBtn{
|
||||||
|
font-size: 11px !important;
|
||||||
|
padding: 5px 10px !important;
|
||||||
|
}
|
||||||
|
.GoogleBtn .icon {
|
||||||
|
font-size:15px !important;
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer input{
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 10px;
|
||||||
|
width:85%;
|
||||||
|
}
|
||||||
|
.LoginPageContainer.active .sign-up{
|
||||||
|
transform: translateY(6%) !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer .sign-up{
|
||||||
|
transform: translateY(-5%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer.active .sign-in{
|
||||||
|
transform: translateY(40%) !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer .sign-in{
|
||||||
|
transform: translateY(-5%) !important;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.OverlayAnimation{
|
||||||
|
transform: translateY(127%) !important;
|
||||||
|
transition: all 1s ease !important;
|
||||||
|
display: block !important;
|
||||||
|
content: " ";
|
||||||
|
overflow: hidden !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
height: 300px !important;
|
||||||
|
width:100% !important;
|
||||||
|
z-index: 200 !important;
|
||||||
|
color: white !important;
|
||||||
|
background: linear-gradient(to right, #C33764 , #1D2671);
|
||||||
|
}
|
||||||
|
.LoginPageContainer.active .OverlayAnimation{
|
||||||
|
transform: translateY(-65%) !important;
|
||||||
|
display: flex !important;
|
||||||
|
content: " ";
|
||||||
|
height: 200px !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
width:100% !important;
|
||||||
|
z-index: 999 !important;
|
||||||
|
background: linear-gradient(to right, #dd678c , #6370e7);
|
||||||
|
}
|
||||||
|
.OverlayAnimation{
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
margin-bottom: auto !important;
|
||||||
|
margin-top: auto !important;
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
.OverlayAnimation button{
|
||||||
|
margin-top: -7px !important;
|
||||||
|
}
|
||||||
|
.togglebtnlogin{
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
position: absolute !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
top:1% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LoginPageContainer.active .OverlayAnimation .togglebtnlogin{
|
||||||
|
top:auto !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.LoginPageContainer.active .OverlayAnimation button{
|
||||||
|
/* padding: 6px 20px !important; */
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
.LoginPageContainer.active .OverlayAnimation span{
|
||||||
|
/* padding: 6px 20px !important; */
|
||||||
|
margin-top: 4px !important;
|
||||||
|
margin-bottom: 5px !important;
|
||||||
|
}
|
||||||
|
.form-pw{
|
||||||
|
|
||||||
|
height:auto !important;
|
||||||
|
}
|
||||||
|
.PwPage p{
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
24
client/src/App.js
Normal file
24
client/src/App.js
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import {BrowserRouter as Router , Route , Routes } from "react-router-dom";
|
||||||
|
import './App.css';
|
||||||
|
import Welcome from "./Pages/Welcome"
|
||||||
|
import AuthPage from "./Pages/Login";
|
||||||
|
import HomePage from "./Pages/HomePage";
|
||||||
|
import ForgetPwPage from "./Pages/ForgetPw";
|
||||||
|
import ResetPwPage from "./Pages/ResetPw";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Welcome />}></Route>
|
||||||
|
<Route path="/AuthpPage" element={<AuthPage />}></Route>
|
||||||
|
<Route path="/Home" element={<HomePage />}></Route>
|
||||||
|
<Route path="/ForgetPw" element={<ForgetPwPage />}></Route>
|
||||||
|
<Route path="/ResetPw/:token" element={<ResetPwPage />}></Route>
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
101
client/src/Pages/ForgetPw.jsx
Normal file
101
client/src/Pages/ForgetPw.jsx
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Container, Col, Row } from "react-bootstrap";
|
||||||
|
import axios from "axios";
|
||||||
|
import { ToastContainer, toast } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
|
||||||
|
|
||||||
|
function ForgetPwPage() {
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [message, setMessage] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const notifySuccess = (message) => {
|
||||||
|
toast.success(message);
|
||||||
|
};
|
||||||
|
|
||||||
|
const notifyError = (error) => {
|
||||||
|
toast.error(error.message || "An error occurred");
|
||||||
|
};
|
||||||
|
|
||||||
|
const notifyLoading = () => {
|
||||||
|
toast.info("Sending verification link...");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||||
|
if (!emailRegex.test(email)) {
|
||||||
|
notifyError("Please enter a valid email address");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
notifyLoading();
|
||||||
|
try {
|
||||||
|
const response = await axios.post(
|
||||||
|
"http://localhost:8080/password/forgot-password",
|
||||||
|
{ email }
|
||||||
|
);
|
||||||
|
setMessage(response.data.message);
|
||||||
|
notifySuccess(response.data.message);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Forgot password error:", error);
|
||||||
|
notifyError(error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenInbox = () => {
|
||||||
|
const emailProviderUrl = "https://gmail.com/";
|
||||||
|
window.open(emailProviderUrl, "_blank");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGoToLogin = () => {
|
||||||
|
window.location.href = "/";
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ToastContainer />
|
||||||
|
<div className="LoginPage">
|
||||||
|
<Container className="LoginPageContainer">
|
||||||
|
<Row className="PwPageContainer">
|
||||||
|
<Col md={12}>
|
||||||
|
<div className="PwPage">
|
||||||
|
<h1>Forgot Password</h1>
|
||||||
|
<p>
|
||||||
|
Enter your email address and we'll send you instructions on
|
||||||
|
how to reset your password
|
||||||
|
</p>
|
||||||
|
<form className="form-pw" onSubmit={handleSubmit}>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="Email"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button type="submit" disabled={loading}>
|
||||||
|
{loading ? "Sending..." : "Send Verification Link"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
{message && (
|
||||||
|
<div className="ResponseDiv">
|
||||||
|
<p>{message}</p>
|
||||||
|
<div className="ResponseDivButton">
|
||||||
|
<button onClick={handleOpenInbox}>Open Gmail</button>
|
||||||
|
<button onClick={handleGoToLogin}>Back to Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ForgetPwPage;
|
||||||
107
client/src/Pages/HomePage.jsx
Normal file
107
client/src/Pages/HomePage.jsx
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Container, Col, Row, Button, Spinner } from "react-bootstrap";
|
||||||
|
import axios from "axios";
|
||||||
|
import { ToastContainer, toast } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
|
||||||
|
function HomePage(props) {
|
||||||
|
|
||||||
|
const notifyLoading = () => {
|
||||||
|
toast.info("Logging Out Successfull..");
|
||||||
|
};
|
||||||
|
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
axios
|
||||||
|
.get("http://localhost:8080/auth/logout", {
|
||||||
|
withCredentials: true,
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
window.location.href = "/";
|
||||||
|
setUser(null);
|
||||||
|
localStorage.removeItem("user");
|
||||||
|
notifyLoading();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error logging out:", error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchUser = async () => {
|
||||||
|
const loggedInUser = localStorage.getItem("user");
|
||||||
|
if (loggedInUser) {
|
||||||
|
setUser(JSON.parse(loggedInUser));
|
||||||
|
setLoading(false);
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(
|
||||||
|
`http://localhost:8080/api/user/profile/`,
|
||||||
|
{
|
||||||
|
withCredentials: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
setUser(response.data.user);
|
||||||
|
setLoading(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching user data:", error);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUser();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ToastContainer />
|
||||||
|
<div className="LoginPage">
|
||||||
|
<Container className="HomePageContainer ProfileContainer">
|
||||||
|
{loading ? (
|
||||||
|
<div className="loader">
|
||||||
|
<Spinner animation="border" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</Spinner>
|
||||||
|
</div>
|
||||||
|
) : user ? (
|
||||||
|
<>
|
||||||
|
<Row>
|
||||||
|
<Col md={12}>
|
||||||
|
<h1>Welcome to MERN Auth App</h1>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col md={12}>
|
||||||
|
<h1>Profile</h1>
|
||||||
|
<div className="profile-info">
|
||||||
|
<div className="profile-image">
|
||||||
|
<img src={user.profilePicture} alt="Profile" />
|
||||||
|
</div>
|
||||||
|
<div className="profile-details">
|
||||||
|
<p>Username: {user.username}</p>
|
||||||
|
<p>Email: {user.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleLogout}>Logout</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Row>
|
||||||
|
<Col md={12}>
|
||||||
|
<h1>Logging out...</h1>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
)}
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
|
|
||||||
248
client/src/Pages/Login.jsx
Normal file
248
client/src/Pages/Login.jsx
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
import React, { useEffect , useState } from "react";
|
||||||
|
import { Container, Col, Row } from "react-bootstrap";
|
||||||
|
import { FcGoogle } from "react-icons/fc";
|
||||||
|
import axios from "axios";
|
||||||
|
import md5 from "md5";
|
||||||
|
import { ToastContainer, toast } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
|
||||||
|
function AuthPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
username: "",
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
});
|
||||||
|
const [signin, setSignin] = useState(false);
|
||||||
|
|
||||||
|
const notifyError = (message) => {
|
||||||
|
toast.error(message);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function ToggleSign(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
setSignin(!signin);
|
||||||
|
setFormData({
|
||||||
|
username: "",
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleInputChange(event) {
|
||||||
|
const { name, value } = event.target;
|
||||||
|
setFormData((prevData) => ({
|
||||||
|
...prevData,
|
||||||
|
[name]: value,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (!formData.username.trim() && signin) {
|
||||||
|
notifyError("Username cannot be empty");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||||
|
if (!emailRegex.test(formData.email)) {
|
||||||
|
notifyError("Enter a valid email address");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check password length
|
||||||
|
if (formData.password.length < 8) {
|
||||||
|
notifyError("Password must be at least 8 characters long");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await axios.post(
|
||||||
|
`http://localhost:8080/api/${
|
||||||
|
!signin ? "login" : "register"
|
||||||
|
}`,
|
||||||
|
formData
|
||||||
|
);
|
||||||
|
const { user } = response.data;
|
||||||
|
delete user.password;
|
||||||
|
const gravatarUrl = `https://www.gravatar.com/avatar/${md5(
|
||||||
|
user.email
|
||||||
|
)}?d=identicon`;
|
||||||
|
user.profilePicture = gravatarUrl;
|
||||||
|
|
||||||
|
localStorage.setItem("user", JSON.stringify(user));
|
||||||
|
window.location.href = "/Home";
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Authentication error:", error);
|
||||||
|
if (
|
||||||
|
error.response &&
|
||||||
|
error.response.status === 400 &&
|
||||||
|
error.response.data.message === "User already exists"
|
||||||
|
) {
|
||||||
|
notifyError("User already exists");
|
||||||
|
} else {
|
||||||
|
notifyError(error.response?.data.message || "An error occurred");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGoogleLogin = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
window.location.href =
|
||||||
|
"http://localhost:8080/auth/google";
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ToastContainer />
|
||||||
|
<div className="LoginPage">
|
||||||
|
<Container className={`LoginPageContainer ${signin ? "active" : ""}`}>
|
||||||
|
<Row>
|
||||||
|
<Col xs={12} md={6}>
|
||||||
|
<div className="form-container sign-up">
|
||||||
|
<SignUpForm
|
||||||
|
formData={formData}
|
||||||
|
handleInputChange={handleInputChange}
|
||||||
|
handleGoogleLogin={handleGoogleLogin}
|
||||||
|
handleSubmit={handleSubmit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-container sign-in">
|
||||||
|
<SignInForm
|
||||||
|
formData={formData}
|
||||||
|
handleInputChange={handleInputChange}
|
||||||
|
handleGoogleLogin={handleGoogleLogin}
|
||||||
|
handleSubmit={handleSubmit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col md={6}>
|
||||||
|
<TogglerContainer signin={signin} ToggleSign={ToggleSign} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<div className="OverlayAnimation">
|
||||||
|
{signin ? (
|
||||||
|
<div className="togglebtnlogin">
|
||||||
|
<button className="hidden" onClick={ToggleSign}>
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
<span>Already Have an Account?</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="togglebtnlogin">
|
||||||
|
<span>Don't have an account? Create one</span>
|
||||||
|
<button className="hidden" onClick={ToggleSign}>
|
||||||
|
Sign Up
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TogglerContainer(props) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="toggle-container">
|
||||||
|
<div className="toggle">
|
||||||
|
<div className="toggle-panel toggle-left">
|
||||||
|
<h1>Welcome to MERN Auth App</h1>
|
||||||
|
<p>Already Have an Account?</p>
|
||||||
|
<button className="hidden" onClick={props.ToggleSign}>
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="toggle-panel toggle-right">
|
||||||
|
<h1>Welcome to MERN Auth App</h1>
|
||||||
|
<p>Don't have an account? Create one</p>
|
||||||
|
<button className="hidden" onClick={props.ToggleSign}>
|
||||||
|
Sign Up
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SignUpForm(props) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<form>
|
||||||
|
<h1>Create Account</h1>
|
||||||
|
<div className="Googlediv">
|
||||||
|
<button className="GoogleBtn" onClick={props.handleGoogleLogin}>
|
||||||
|
<FcGoogle className="icon" /> Sign up with Google
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span>or use your email for registration</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="username"
|
||||||
|
value={props.formData.username}
|
||||||
|
onChange={props.handleInputChange}
|
||||||
|
placeholder="Name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={props.formData.email}
|
||||||
|
onChange={props.handleInputChange}
|
||||||
|
placeholder="Email"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
value={props.formData.password}
|
||||||
|
onChange={props.handleInputChange}
|
||||||
|
placeholder="Password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button onClick={props.handleSubmit}>Sign Up</button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SignInForm(props) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<form>
|
||||||
|
<h1>Sign In</h1>
|
||||||
|
<div>
|
||||||
|
<button className="GoogleBtn" onClick={props.handleGoogleLogin}>
|
||||||
|
<FcGoogle className="icon" /> Sign in with Google
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span>or use your email password</span>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={props.formData.email}
|
||||||
|
onChange={props.handleInputChange}
|
||||||
|
placeholder="Email"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
value={props.formData.password}
|
||||||
|
onChange={props.handleInputChange}
|
||||||
|
placeholder="Password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<a href="/ForgetPw">Forget Your Password?</a>
|
||||||
|
<button onClick={props.handleSubmit}>Sign In</button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthPage;
|
||||||
87
client/src/Pages/ResetPw.jsx
Normal file
87
client/src/Pages/ResetPw.jsx
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Container, Col, Row } from "react-bootstrap";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import axios from "axios";
|
||||||
|
import { ToastContainer, toast } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
|
||||||
|
function ResetPwPage() {
|
||||||
|
const { token } = useParams();
|
||||||
|
const [newPassword, setNewPassword] = useState("");
|
||||||
|
const [message, setMessage] = useState("");
|
||||||
|
|
||||||
|
const notifySuccess = (message) => {
|
||||||
|
toast.success(message);
|
||||||
|
};
|
||||||
|
|
||||||
|
const notifyError = (error) => {
|
||||||
|
toast.error(error.message || "An error occurred");
|
||||||
|
};
|
||||||
|
|
||||||
|
const notifyLoading = () => {
|
||||||
|
toast.info("Sending Reset Request...");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (newPassword.length < 8) {
|
||||||
|
toast.error("Password must be at least 8 characters long");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
notifyLoading();
|
||||||
|
try {
|
||||||
|
const response = await axios.post(
|
||||||
|
"http://:8080/password/reset-password",
|
||||||
|
{ resetToken: token, newPassword }
|
||||||
|
);
|
||||||
|
setMessage(response.data.message);
|
||||||
|
notifySuccess(response.data.message);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"Reset password error:",
|
||||||
|
error.response ? error.response.data : error
|
||||||
|
);
|
||||||
|
notifyError(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGoToLogin = () => {
|
||||||
|
window.location.href = "/";
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ToastContainer />
|
||||||
|
<div className="LoginPage">
|
||||||
|
<Container className="LoginPageContainer">
|
||||||
|
<Row className="PwPageContainer">
|
||||||
|
<Col md={12}>
|
||||||
|
<div className="PwPage">
|
||||||
|
<h1>Reset Password</h1>
|
||||||
|
<p>Enter your new password below</p>
|
||||||
|
<form className="form-pw" onSubmit={handleSubmit}>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.target.value)}
|
||||||
|
placeholder="New Password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button type="submit">Reset Password</button>
|
||||||
|
</form>
|
||||||
|
{message && (
|
||||||
|
<div className="ResponseDiv">
|
||||||
|
<p>{message}</p>
|
||||||
|
<button onClick={handleGoToLogin}>Back to Login</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ResetPwPage;
|
||||||
28
client/src/Pages/Welcome.jsx
Normal file
28
client/src/Pages/Welcome.jsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
const Welcome = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleRedirect = () => {
|
||||||
|
navigate("/AuthpPage");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container text-center mt-5">
|
||||||
|
<div className="row justify-content-center">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h1 className="mb-4">Welcome Page</h1>
|
||||||
|
<button
|
||||||
|
onClick={handleRedirect}
|
||||||
|
className="btn btn-primary btn-lg"
|
||||||
|
>
|
||||||
|
SIGN IN / SIGN UP
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Welcome;
|
||||||
13
client/src/index.css
Normal file
13
client/src/index.css
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
15
client/src/index.js
Normal file
15
client/src/index.js
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
|
|
||||||
|
reportWebVitals();
|
||||||
13
client/src/reportWebVitals.js
Normal file
13
client/src/reportWebVitals.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
const reportWebVitals = onPerfEntry => {
|
||||||
|
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||||
|
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||||
|
getCLS(onPerfEntry);
|
||||||
|
getFID(onPerfEntry);
|
||||||
|
getFCP(onPerfEntry);
|
||||||
|
getLCP(onPerfEntry);
|
||||||
|
getTTFB(onPerfEntry);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default reportWebVitals;
|
||||||
5
client/src/setupTests.js
Normal file
5
client/src/setupTests.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||||
|
// allows you to do things like:
|
||||||
|
// expect(element).toHaveTextContent(/react/i)
|
||||||
|
// learn more: https://github.com/testing-library/jest-dom
|
||||||
|
import '@testing-library/jest-dom';
|
||||||
2
server/.gitignore
vendored
Normal file
2
server/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
.env
|
||||||
12
server/ConnectionDb.js
Normal file
12
server/ConnectionDb.js
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
const mongoose = require("mongoose");
|
||||||
|
require("dotenv").config();
|
||||||
|
exports.connectdb = () => {
|
||||||
|
mongoose.connect(process.env.mongoURI);
|
||||||
|
};
|
||||||
|
|
||||||
|
const db = mongoose.connection;
|
||||||
|
|
||||||
|
db.on("error", console.error.bind("Connection Error!"));
|
||||||
|
db.once("open", function () {
|
||||||
|
console.log("Connection Established!!!");
|
||||||
|
});
|
||||||
56
server/config/passport.js
Normal file
56
server/config/passport.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
const passport = require("passport");
|
||||||
|
const User = require("../models/User");
|
||||||
|
require("dotenv").config();
|
||||||
|
const GoogleStrategy = require("passport-google-oauth20").Strategy;
|
||||||
|
|
||||||
|
passport.use(
|
||||||
|
new GoogleStrategy(
|
||||||
|
{
|
||||||
|
clientID: process.env.GOOGLE_CLIENT_ID,
|
||||||
|
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
|
||||||
|
callbackURL: "http://localhost:8080/auth/google/callback",
|
||||||
|
scope: ["profile", "email", "displayName"],
|
||||||
|
},
|
||||||
|
async (accessToken, refreshToken, profile, done) => {
|
||||||
|
try {
|
||||||
|
// Check if a user with the same email already exists
|
||||||
|
let user = await User.findOne({ email: profile.emails[0].value });
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
// If the user exists, update their Google ID and profile information
|
||||||
|
user.googleId = profile.id;
|
||||||
|
user.username = profile.displayName;
|
||||||
|
user.profilePicture = profile.photos[0].value;
|
||||||
|
await user.save();
|
||||||
|
return done(null, user);
|
||||||
|
} else {
|
||||||
|
// If the user doesn't exist, create a new user
|
||||||
|
const newUser = new User({
|
||||||
|
googleId: profile.id,
|
||||||
|
username: profile.displayName,
|
||||||
|
email: profile.emails[0].value,
|
||||||
|
profilePicture: profile.photos[0].value,
|
||||||
|
});
|
||||||
|
|
||||||
|
user = await newUser.save();
|
||||||
|
return done(null, user);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return done(error, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
passport.serializeUser((user, done) => {
|
||||||
|
done(null, user.id); // Use user id for serialization
|
||||||
|
});
|
||||||
|
|
||||||
|
passport.deserializeUser(async (id, done) => {
|
||||||
|
try {
|
||||||
|
const user = await User.findById(id); // Fetch user by id from MongoDB
|
||||||
|
done(null, user); // Pass the user object to the next middleware
|
||||||
|
} catch (error) {
|
||||||
|
done(error, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
27
server/models/User.js
Normal file
27
server/models/User.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
const mongoose = require("mongoose");
|
||||||
|
const passportLocalMongoose = require("passport-local-mongoose");
|
||||||
|
|
||||||
|
const UserSchema = new mongoose.Schema(
|
||||||
|
{
|
||||||
|
googleId: String,
|
||||||
|
username: String,
|
||||||
|
email: String,
|
||||||
|
password: String,
|
||||||
|
profilePicture: String,
|
||||||
|
resetPasswordToken: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
resetPasswordExpires: {
|
||||||
|
type: Date,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamps: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
UserSchema.plugin(passportLocalMongoose);
|
||||||
|
|
||||||
|
module.exports = mongoose.model("User", UserSchema);
|
||||||
2266
server/package-lock.json
generated
Normal file
2266
server/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
server/package.json
Normal file
42
server/package.json
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "server",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "appointment_to_examiner",
|
||||||
|
"main": "sever.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"build" : "npm install --prefix ../client && npm run build --prefix ../client && npm install",
|
||||||
|
"start": "nodemon server.js"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/hk151109/appointment_to_examiner.git"
|
||||||
|
},
|
||||||
|
"author": "Harikrishnan",
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/hk151109/appointment_to_examiner/issues"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bcryptjs": "^2.4.3",
|
||||||
|
"body-parser": "^1.20.2",
|
||||||
|
"connect-mongo": "^5.1.0",
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"crypto": "^1.0.1",
|
||||||
|
"dotenv": "^16.4.5",
|
||||||
|
"express": "^4.19.2",
|
||||||
|
"express-session": "^1.18.0",
|
||||||
|
"googleapis": "^134.0.0",
|
||||||
|
"jsonwebtoken": "^9.0.2",
|
||||||
|
"mongoose": "^8.3.1",
|
||||||
|
"mongoose-findorcreate": "^4.0.0",
|
||||||
|
"nodemailer": "^6.9.13",
|
||||||
|
"passport": "^0.7.0",
|
||||||
|
"passport-google-oauth20": "^2.0.0",
|
||||||
|
"passport-local": "^1.0.0",
|
||||||
|
"passport-local-mongoose": "^8.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"nodemon": "^3.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
124
server/routes/authRoutes.js
Normal file
124
server/routes/authRoutes.js
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
const express = require("express");
|
||||||
|
const router = express.Router();
|
||||||
|
const bcrypt = require("bcryptjs");
|
||||||
|
const User = require("../models/User");
|
||||||
|
const crypto = require("crypto");
|
||||||
|
const nodemailer = require("nodemailer");
|
||||||
|
const { google } = require("googleapis");
|
||||||
|
require("dotenv").config();
|
||||||
|
|
||||||
|
// Set up Google OAuth2 credentials
|
||||||
|
const oauth2Client = new google.auth.OAuth2(
|
||||||
|
process.env.GOOGLE_CLIENT_ID,
|
||||||
|
process.env.GOOGLE_CLIENT_SECRET,
|
||||||
|
"https://developers.google.com/oauthplayground" // Redirect URI
|
||||||
|
);
|
||||||
|
|
||||||
|
oauth2Client.setCredentials({
|
||||||
|
refresh_token: process.env.GOOGLE_REFRESH_TOKEN,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Nodemailer transporter using Google OAuth2
|
||||||
|
const transporter = nodemailer.createTransport({
|
||||||
|
service: "gmail",
|
||||||
|
auth: {
|
||||||
|
type: "OAuth2",
|
||||||
|
user: process.env.EMAIL_USERNAME,
|
||||||
|
clientId: process.env.GOOGLE_CLIENT_ID,
|
||||||
|
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
|
||||||
|
refreshToken: process.env.GOOGLE_REFRESH_TOKEN,
|
||||||
|
accessToken: async () => {
|
||||||
|
const accessToken = await getAccessToken();
|
||||||
|
return accessToken;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to refresh OAuth2 token
|
||||||
|
async function getAccessToken() {
|
||||||
|
try {
|
||||||
|
const { token } = await oauth2Client.getAccessToken();
|
||||||
|
return token;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error refreshing access token:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Forgot Password
|
||||||
|
router.post("/forgot-password", async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { email } = req.body;
|
||||||
|
const user = await User.findOne({ email });
|
||||||
|
if (!user) {
|
||||||
|
return res.status(404).json({ message: "User not found" });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate reset token
|
||||||
|
const resetToken = crypto.randomBytes(20).toString("hex");
|
||||||
|
user.resetPasswordToken = resetToken;
|
||||||
|
user.resetPasswordExpires = Date.now() + 3600000; // 1 hour
|
||||||
|
await user.save();
|
||||||
|
|
||||||
|
// Send reset email
|
||||||
|
const mailOptions = {
|
||||||
|
from: `"MERN Auth App" <${process.env.EMAIL_USERNAME}>`,
|
||||||
|
to: email,
|
||||||
|
subject: "Password Reset Verification",
|
||||||
|
html: `
|
||||||
|
<p>Hi there,</p>
|
||||||
|
<br>
|
||||||
|
<p>We received a request to reset the password for your account. To proceed with the password reset, please click on the link below:</p>
|
||||||
|
<p>Click here : <a href="http://localhost:3000/ResetPw/${resetToken}">Reset Password</a></p>
|
||||||
|
<br>
|
||||||
|
<p>Please ensure you use this link within the next 1 hour as it will expire after that for security reasons.</p>
|
||||||
|
<p>If you didn't request a password reset, please ignore this email.</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<p>Best regards,</p>
|
||||||
|
<p>MERN Auth App Team</p>
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
|
||||||
|
transporter.sendMail(mailOptions, (error, info) => {
|
||||||
|
if (error) {
|
||||||
|
console.error("Error sending email:", error);
|
||||||
|
return res.status(500).json({ message: "Error sending email" });
|
||||||
|
}
|
||||||
|
console.log("Email sent:", info.response);
|
||||||
|
res.status(200).json({ message: "Reset password email sent" });
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Forgot password error:", error);
|
||||||
|
res.status(500).json({ message: "Internal server error" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset Password
|
||||||
|
router.post("/reset-password", async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { resetToken, newPassword } = req.body;
|
||||||
|
const user = await User.findOne({
|
||||||
|
resetPasswordToken: resetToken,
|
||||||
|
resetPasswordExpires: { $gt: Date.now() },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return res.status(400).json({ message: "Invalid or expired token" });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset password
|
||||||
|
const hashedPassword = await bcrypt.hash(newPassword, 10);
|
||||||
|
user.password = hashedPassword;
|
||||||
|
user.resetPasswordToken = undefined;
|
||||||
|
user.resetPasswordExpires = undefined;
|
||||||
|
await user.save();
|
||||||
|
|
||||||
|
res.status(200).json({ message: "Password reset successful" });
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Reset password error:", error);
|
||||||
|
res.status(500).json({ message: "Internal server error" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
188
server/server.js
Normal file
188
server/server.js
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
const express = require("express");
|
||||||
|
const User = require("./models/User");
|
||||||
|
const cors = require("cors");
|
||||||
|
const passport = require("passport");
|
||||||
|
const session = require("express-session");
|
||||||
|
const bodyParser = require("body-parser");
|
||||||
|
const bcrypt = require("bcryptjs");
|
||||||
|
const LocalStrategy = require("passport-local").Strategy;
|
||||||
|
const PasswordRouter = require("./routes/authRoutes");
|
||||||
|
const crypto = require("crypto");
|
||||||
|
const jwt = require("jsonwebtoken");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
const { connectdb } = require("./ConnectionDb");
|
||||||
|
connectdb();
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
|
||||||
|
// Middleware
|
||||||
|
app.use(express.json());
|
||||||
|
app.use(bodyParser.urlencoded({ extended: true }));
|
||||||
|
|
||||||
|
app.use(
|
||||||
|
session({
|
||||||
|
secret: "secret",
|
||||||
|
resave: false,
|
||||||
|
saveUninitialized: false,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
app.use(passport.initialize());
|
||||||
|
app.use(passport.session());
|
||||||
|
|
||||||
|
// CORS configuration
|
||||||
|
app.use(
|
||||||
|
cors({
|
||||||
|
origin: "http://localhost:3000",
|
||||||
|
credentials: true,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Passport configuration
|
||||||
|
require("./config/passport");
|
||||||
|
|
||||||
|
passport.use(
|
||||||
|
new LocalStrategy(
|
||||||
|
{ usernameField: "email" },
|
||||||
|
async (email, password, done) => {
|
||||||
|
try {
|
||||||
|
const user = await User.findOne({ email });
|
||||||
|
if (!user) {
|
||||||
|
return done(null, false, { message: "Incorrect email" });
|
||||||
|
}
|
||||||
|
const isMatch = await bcrypt.compare(password, user.password);
|
||||||
|
if (isMatch) {
|
||||||
|
return done(null, user);
|
||||||
|
} else {
|
||||||
|
return done(null, false, { message: "Incorrect password" });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return done(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
passport.serializeUser((user, done) => {
|
||||||
|
done(null, user.id); // Store user ID in the session
|
||||||
|
});
|
||||||
|
|
||||||
|
passport.deserializeUser((id, done) => {
|
||||||
|
User.findById(id, (err, user) => {
|
||||||
|
done(err, user);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Routes
|
||||||
|
app.use("/password", PasswordRouter);
|
||||||
|
|
||||||
|
app.get(
|
||||||
|
"/auth/google",
|
||||||
|
passport.authenticate("google", { scope: ["profile", "email"] })
|
||||||
|
);
|
||||||
|
|
||||||
|
app.get(
|
||||||
|
"/auth/google/callback",
|
||||||
|
passport.authenticate("google", { failureRedirect: "/" }),
|
||||||
|
function (req, res) {
|
||||||
|
res.redirect("http://localhost:3000/Home");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
app.post("/api/register", async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { username, email, password } = req.body;
|
||||||
|
const hashedPassword = await bcrypt.hash(password, 10);
|
||||||
|
let user = await User.findOne({ email });
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
if (user.googleId && user.password) {
|
||||||
|
return res.status(400).json({ message: "User already exists" });
|
||||||
|
}
|
||||||
|
if (!user.googleId && user.password) {
|
||||||
|
return res.status(400).json({ message: "User already exists" });
|
||||||
|
}
|
||||||
|
if (user.googleId && !user.password) {
|
||||||
|
user.password = hashedPassword;
|
||||||
|
await user.save();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
user = new User({ username, email, password: hashedPassword });
|
||||||
|
await user.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
req.login(user, (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.error("Error logging in user after registration:", err);
|
||||||
|
return res.status(500).send("Internal server error");
|
||||||
|
}
|
||||||
|
return res.status(200).json({
|
||||||
|
message: "Registered and logged in successfully",
|
||||||
|
user,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error registering user:", error);
|
||||||
|
res.status(400).send("Registration failed");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post("/api/login", (req, res, next) => {
|
||||||
|
passport.authenticate("local", (err, user, info) => {
|
||||||
|
if (err) {
|
||||||
|
return res.status(500).json({ message: "Internal server error" });
|
||||||
|
}
|
||||||
|
if (!user) {
|
||||||
|
return res.status(401).json({ message: "Incorrect email or password" });
|
||||||
|
}
|
||||||
|
req.logIn(user, (err) => {
|
||||||
|
if (err) {
|
||||||
|
return res.status(500).json({ message: "Internal server error" });
|
||||||
|
}
|
||||||
|
return res.status(200).json({ message: "Login successful", user });
|
||||||
|
});
|
||||||
|
})(req, res, next);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get("/auth/logout", function (req, res) {
|
||||||
|
req.logout((err) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
return res.status(500).json({ message: "Error logging out" });
|
||||||
|
}
|
||||||
|
req.session.destroy(function (err) {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
return res.status(500).json({ message: "Error destroying session" });
|
||||||
|
}
|
||||||
|
res.json({ message: "Logout successful" });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get("/api/user/profile", async (req, res) => {
|
||||||
|
try {
|
||||||
|
if (req.user) {
|
||||||
|
return res.json({ user: req.user });
|
||||||
|
} else {
|
||||||
|
return res.status(401).json({ error: "Unauthorized" });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching user data:", error);
|
||||||
|
res.status(500).json({ message: "Internal server error" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Serve static files
|
||||||
|
app.use(express.static(path.join(__dirname, "../client/build")));
|
||||||
|
|
||||||
|
// Catch-all route to serve React app
|
||||||
|
app.get("*", (req, res) =>
|
||||||
|
res.sendFile(path.join(__dirname, "../client/build/index.html"))
|
||||||
|
);
|
||||||
|
|
||||||
|
const Port = 8080;
|
||||||
|
app.listen(Port, () => {
|
||||||
|
console.log(`Server is Running at port ${Port}`);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user