Skip to content

Commit

Permalink
Reset Password Api Solve
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anuj3553
Anuj3553 committed Oct 28, 2024
1 parent 7ce0c11 commit 08c1234
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 125 deletions.
157 changes: 80 additions & 77 deletions client/src/component/ForgotPassword.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,87 +39,90 @@ const ForgotPassword = ({ showAlert, mode }) => {
};

return (
<div
className='wrapper'
style={{
backgroundColor: mode === "dark" ? "black" : "white",
color: mode === "dark" ? "white" : "black",
}}
>
<div className='form'>
<h1 className='title'>Reset Password</h1>
<span className='title-line'></span>
<div className='inp'>
<Input
type='email'
placeholder='Enter your email'
value={forgotEmail}
onChange={(e) => setForgotEmail(e.target.value)}
required
<div className="flex justify-center h-[85vh] items-center mt-[7rem]">
<div
className='wrapper'
style={{
backgroundColor: mode === "dark" ? "black" : "white",
color: mode === "dark" ? "white" : "black",
}}
>
<div className='form'>
<h1 className='title'>Reset Password</h1>
<span className='title-line'></span>
<div className='inp'>
<Input
type='email'
placeholder='Enter your email'
value={forgotEmail}
onChange={(e) => setForgotEmail(e.target.value)}
required
style={{
backgroundColor: mode === "dark" ? "black" : "white",
color: mode === "dark" ? "white" : "black",
}}
autoComplete="true"
/>
</div>
<Button
className='submit'
type='primary'
onClick={handleForgotPassword}
loading={loading}
style={{ backgroundColor: "#6366f1", color: "#FFFFFF" }}
>
Submit
</Button>
<Button
className='back-to-login'
type='default'
onClick={() => navigate("/login")}
style={{
backgroundColor: mode === "dark" ? "black" : "white",
color: mode === "dark" ? "white" : "black",
marginTop: "10px",
transition: "background-color 0.3s ease, color 0.3s ease",
}}
/>
onMouseEnter={(e) => {
e.target.style.backgroundColor = "#6366f1";
e.target.style.color = "#ffffff";
}}
onMouseLeave={(e) => {
e.target.style.backgroundColor = "";
e.target.style.color = "";
}}
onMouseDown={(e) => {
e.target.style.backgroundColor = "#4f46e5";
e.target.style.color = "#ffffff";
}}
onMouseUp={(e) => {
e.target.style.backgroundColor = "#6366f1";
e.target.style.color = "#ffffff";
}}
>
Back to Login
</Button>
</div>
<Button
className='submit'
type='primary'
onClick={handleForgotPassword}
loading={loading}
style={{ backgroundColor: "#6366f1", color: "#FFFFFF" }}
>
Submit
</Button>
<Button
className='back-to-login'
type='default'
onClick={() => navigate("/login")}
style={{
marginTop: "10px",
transition: "background-color 0.3s ease, color 0.3s ease",
}}
onMouseEnter={(e) => {
e.target.style.backgroundColor = "#6366f1";
e.target.style.color = "#ffffff";
}}
onMouseLeave={(e) => {
e.target.style.backgroundColor = "";
e.target.style.color = "";
}}
onMouseDown={(e) => {
e.target.style.backgroundColor = "#4f46e5";
e.target.style.color = "#ffffff";
}}
onMouseUp={(e) => {
e.target.style.backgroundColor = "#6366f1";
e.target.style.color = "#ffffff";
}}
>
Back to Login
</Button>
</div>

<div className='banner'>
<h1
className='wel_text'
style={{
color: mode === "dark" ? "black" : "white",
}}
>
FORGOT
<br />
PASSWORD?
</h1>
<p
className='para'
style={{
color: mode === "dark" ? "black" : "white",
marginLeft: "200px",
}}
>
No worries, we&apos;ve got you covered!&quot;
</p>
<div className='banner'>
<h1
className='wel_text'
style={{
color: mode === "dark" ? "black" : "white",
}}
>
FORGOT
<br />
PASSWORD?
</h1>
<p
className='para'
style={{
color: mode === "dark" ? "black" : "white",
marginLeft: "200px",
}}
>
No worries, we&apos;ve got you covered!&quot;
</p>
</div>
</div>
</div>
);
Expand Down
83 changes: 41 additions & 42 deletions client/src/component/forgotpass.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,30 @@ import './css/Auth.css';
const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com';

const ForgotPassword = (props) => {
const [formData, setFormData] = useState({ email: "", newPassword: "", confirmPassword: "" });
const [errors, setErrors] = useState({});
let navigate = useNavigate();
const [formData, setFormData] = useState({ email: "", newPassword: "", confirmPassword: "" });
const [errors, setErrors] = useState({});
let navigate = useNavigate();

// Handle input changes
const onChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const onChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};

// Validate inputs
const validateForm = () => {
let formErrors = {};
// Email validation (simple regex)
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(formData.email)) {
formErrors.email = "Invalid email format.";
}
const validateForm = () => {
let formErrors = {};

// Email validation (simple regex)
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(formData.email)) {
formErrors.email = "Invalid email format.";
}

// Password matching validation
if (formData.newPassword !== formData.confirmPassword) {
formErrors.password = "Passwords do not match.";
}
if (formData.newPassword !== formData.confirmPassword) {
formErrors.password = "Passwords do not match.";
}

// Password length validation
if (formData.newPassword.length < 6) {
formErrors.newPassword = "Password must be at least 6 characters long.";
Expand All @@ -40,38 +40,37 @@ const validateForm = () => {
};

// Handle form submission
// Handle form submission
const handleSubmit = async (e) => {
// Handle form submission
const handleSubmit = async (e) => {
e.preventDefault();

if (validateForm()) {
console.log("inforgot")
const response = await fetch(`${VITE_SERVER_PORT}/api/auth/forget`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email: formData.email, password: formData.newPassword }),
});
const json = await response.json();
console.log(json);
console.log("inforgot")
const response = await fetch(`${VITE_SERVER_PORT}/api/auth/forget`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email: formData.email, password: formData.newPassword }),
});

const json = await response.json();
console.log(json);

if (json.success) {
props.showAlert("Password reset successfully", "success");
navigate("/");
} else {
props.showAlert(json.message || "Failed to reset password. Please try again.", "danger");
}
if (json.success) {
props.showAlert("Password reset successfully", "success");
navigate("/");
} else {
props.showAlert(json.message || "Failed to reset password. Please try again.", "danger");
}
} else {
props.showAlert("Please correct the errors in the form", "danger");
props.showAlert("Please correct the errors in the form", "danger");
}
};

};

return (
<div className="ForgotPassword">
<div className="container main-bx" style={{ marginTop: '200px', marginBottom: '100px' }} >
<div className="container h-screen w-full justify-center items-center main-bx" >
<div className="heading">Forgot Password</div>
<div className="p-3">
<form className="form" onSubmit={handleSubmit}>
Expand Down
17 changes: 11 additions & 6 deletions server/Controllers/auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ const verifyToken = async (req, res) => {
const { token } = req.params;

try {
const VITE_CLIENT_PORT = process.env.VITE_CLIENT_PORT || "https://bitbox-in.netlify.app";

const user = await User.findOne({ verificationToken: token });
if (!user) {
return res.status(400).json({
Expand All @@ -84,7 +86,6 @@ const verifyToken = async (req, res) => {
message: "Signup successfully",
});

const VITE_CLIENT_PORT = process.env.VITE_CLIENT_PORT || "https://bitbox-in.netlify.app";
// Redirect to the frontend's home page after verification
return res.redirect(`${VITE_CLIENT_PORT}/login`);
} catch (err) {
Expand Down Expand Up @@ -128,23 +129,27 @@ const forgetpassword = async (req, res) => {
.json({ success: false, message: "Internal server error" });
}
};

async function ResetPasswordByEmail(req, resp) {
const VITE_CLIENT_PORT = process.env.VITE_CLIENT_PORT || "https://bitbox-in.netlify.app";

const { email } = req.body;
const transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: EMAIL_USER,
pass: EMAIL_PASS,
user: process.env.EMAIL_USER,
pass: process.env.EMAIL_PASS,
},
});

const mailOptions = {
from: EMAIL_USER,
from: process.env.EMAIL_USER,
to: email,
subject: "Reset Your password on BitBox",
html: `
<p>Reset your password from the link .</p>
<a href="https://bitbox-in.netlify.app/forgotpassword"><button>Click here</button></a> to reset password`,
<p>Reset your password using the link below:</p>
<a href="${VITE_CLIENT_PORT}/forgotpassword"><button>Click here</button></a> to reset your password
`,
};

transporter.sendMail(mailOptions, (error, info) => {
Expand Down

0 comments on commit 08c1234

Please sign in to comment.