Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

full otp feat added frontend and backend both #1434

Merged
merged 2 commits into from
Jul 22, 2024
Merged

full otp feat added frontend and backend both #1434

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9cf263
full otp feat added frontend and backend both
Ansh101112 Jul 21, 2024
79c58a3
carousel added
Ansh101112 Jul 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions account/login-signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#2874F0" id="themeColor" />
<title>
Expand All @@ -15,7 +13,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/login-signup.css" />
</head>

<body>
<header id="header-login" class="text-center text-secondary fs-4">
This is Header
</header>
Expand All @@ -25,23 +23,22 @@
<div class="signupin">
<div class="leftpanal">
<h4 class="login-display">Login</h4>
<p> Get access to your Orders,
Wishlist and Recommendations</p>
<p> Get access to your Orders, Wishlist and Recommendations</p>
</div>
<div class="rightSignuppanal">
<form autocomplete="on">
<div class="I-qZ4MvLRlQb">
<input autocomplete="off" id="inputsin" type="text" class="r4vIwl BV+Dqf input-field" placeholder=" Enter Email/Mobile number" value="" required />
<input autocomplete="off" id="inputsin" type="text" class="r4vIwl BV+Dqf input-field" placeholder="Enter Email/Mobile number" required />
<label class="Gq-80aa label" id="inputsin"></label>
<div class="underline"></div>
</div>
<div class="EpHS0A">By continuing, you agree to Flipkart's
<a class="c9RDXR" target="_blank" href="../pages/terms/">Terms of Use</a>
and
and
<a class="c9RDXR" target="_blank" href="../pages/privacypolicy/">Privacy Policy</a>.
</div>
<div class="LSOAQH mt-2">
<button class="QqFHMw twnTnD _7Pd1Fp">Request OTP</button>
<button id="requestOtpButton" class="QqFHMw twnTnD _7Pd1Fp">Request OTP</button>
</div>
<div class="ZJ3AS1 d-flex justify-content-center mt-4">
<a class="azBkHf" href="#" id="buttonA">New to Flipkart? Create an account</a>
Expand All @@ -50,19 +47,24 @@ <h4 class="login-display">Login</h4>
</div>
</div>
</div>

<!-- signup page -->
<div id="divB">
<div class="signupin container-fluid">
<div class="signupin container-fluid">
<div class="leftpanal">
<h4>Looks like you're new here!</h4>
<p>Sign up with your mobile number to get started</p>
</div>

<div class="rightSignuppanal">
<form autocomplete="on">
<div class="I-qZ4MvLRlQb">
<input autocomplete="off" id="inputi" type="text" class="r4vIwl BV+Dqf" value="" required="" />
<label class="Gq-80aa label" id="inputi">Enter Email/Mobile number</label>
<input autocomplete="off" id="inputi" type="text" class="r4vIwl BV+Dqf" placeholder="Enter Email/Mobile number" required />
<label class="Gq-80aa label" id="inputi"></label>
<div class="underlineii"></div>
</div>
<div class="I-qZ4MvLRlQb">
<input autocomplete="off" id="otpInput" type="text" class="r4vIwl BV+Dqf" placeholder="Enter OTP" required />
<label class="Gq-80aa label" id="otpInput"></label>
<div class="underlineii"></div>
</div>
<div class="EpHS0A">By continuing, you agree to Flipkart's
Expand All @@ -71,7 +73,7 @@ <h4>Looks like you're new here!</h4>
<a class="c9RDXR" target="_blank" href="../pages/privacypolicy/">Privacy Policy</a>.
</div>
<div class="LSOAQH mt-2">
<button class="QqFHMw twnTnD _7Pd1Fp">Continue</button>
<button id="verifyOtpButton" class="QqFHMw twnTnD _7Pd1Fp">Verify OTP</button>
</div>
<div class="ZJ3AS1 d-flex justify-content-center mt-4">
<a class="azBkHf" href="#" id="buttonB">Existing User? Log in</a>
Expand All @@ -84,7 +86,5 @@ <h4>Looks like you're new here!</h4>
<footer id="footer-login" style="background-color: #293649 !important"></footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/login-signup.js"></script>

<body></body>

</html>
</body>
</html>
75 changes: 75 additions & 0 deletions js/login-signup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,78 @@
// code added for otp:
document.addEventListener('DOMContentLoaded', () => {
const requestOtpButton = document.getElementById('requestOtpButton');
const verifyOtpButton = document.getElementById('verifyOtpButton');

// Request OTP
requestOtpButton.addEventListener('click', async (event) => {
event.preventDefault(); // Prevent form submission

const email = document.getElementById('inputsin').value;

if (!email) {
alert('Please enter your email');
return;
}

try {
const response = await fetch('http://localhost:5000/send-otp', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email }),
});

const result = await response.json();
if (response.ok) {
alert('OTP sent to your email');
// Show OTP verification fields here
} else {
alert(result.msg || 'Failed to send OTP');
}
} catch (error) {
console.error('Error:', error);
alert('Server will be publically available soon to send otp. ThankYou for visiting.');
}
});

// Verify OTP
verifyOtpButton.addEventListener('click', async (event) => {
event.preventDefault(); // Prevent form submission

const email = document.getElementById('inputi').value;
const otp = document.getElementById('otpInput').value; // Add an OTP input field with id `otpInput`

if (!email || !otp) {
alert('Please enter your email and OTP');
return;
}

try {
const response = await fetch('http://localhost:5000/verify-otp', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, otp }),
});

const result = await response.json();
if (response.ok) {
alert('OTP verified successfully');
// Proceed with the next steps (e.g., redirect to a different page)
} else {
alert(result.msg || 'Failed to verify OTP');
}
} catch (error) {
console.error('Error:', error);
alert('An error occurred while verifying OTP');
}
});
});



document.addEventListener('DOMContentLoaded', () => {
const components = [
{ id: 'footer-login', url: '../footer/footer.html' },
Expand Down
4 changes: 3 additions & 1 deletion server_backend/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
MONGOURI = mongodb+srv://tanshuman145:Ansh%[email protected]/ecommerce
JWTSECRET = uyteuweuuihu$677773hjkj
JWTSECRET = uyteuweuuihu$677773hjkj
[email protected]
EMAIL_PASS=uruq rcii ebcv roms
13 changes: 11 additions & 2 deletions server_backend/models/User.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
email: { type: String, required: true, unique: true },
password: { type: String, required: true },
email: {
type: String,
required: true,
unique: true,
},
password: {
type: String,
required: true,
},
otp: String,
otpExpires: Date,
});

module.exports = mongoose.model('User', UserSchema);
2 changes: 2 additions & 0 deletions server_backend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@
"bcryptjs": "^2.4.3",
"body-parser": "^1.20.2",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"dotenv": "^16.4.5",
"express": "^4.19.2",
"jsonwebtoken": "^9.0.2",
"mongodb": "^6.8.0",
"mongoose": "^8.5.1",
"nodemailer": "^6.9.14",
"nodemon": "^3.1.4"
}
}
51 changes: 51 additions & 0 deletions server_backend/routes/auth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,20 @@ const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');
const dotenv = require('dotenv');
const crypto = require('crypto');
const nodemailer = require('nodemailer');

dotenv.config();

const transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: process.env.EMAIL_USER,
pass: process.env.EMAIL_PASS,
},
});


// Register route
router.post('/register', async (req, res) => {
const { email, password } = req.body;
Expand Down Expand Up @@ -87,4 +98,44 @@ router.post('/login', async (req, res) => {
}
});


// Generate OTP and send email
router.post('/send-otp', async (req, res) => {
const { email } = req.body;

try {
// Check if user exists
const user = await User.findOne({ email });
if (!user) {
return res.status(400).json({ msg: 'Email not registered' });
}

const otp = crypto.randomInt(100000, 999999).toString();

user.otp = otp;
user.otpExpires = Date.now() + 15 * 60 * 1000;
await user.save();

const mailOptions = {
from: process.env.EMAIL_USER,
to: email,
subject: 'Your OTP Code',
text: `Your OTP code is ${otp}. It is valid for 15 minutes.`,
};

transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.error('Error sending email:', error);
return res.status(500).json({ msg: 'Error sending OTP email' });
}
res.json({ msg: 'OTP sent' });
});
} catch (err) {
console.error(err.message);
res.status(500).send('Server Error');
}
});



module.exports = router;
Loading