Skip to content

added pages for forgot password, reset password and updated login page #33

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added pages for forgot password, reset password and updated login page #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import NewFeature from './pages/NewFeature.jsx';
import BlogList from './components/ui/BlogSection.jsx';
import BlogDetail from './components/ui/BlogDetail.jsx';
import AddBlog from './components/ui/AddBlog.jsx';
import ForgotPassword from './pages/ForgotPassword.jsx';
import ResetPassword from './pages/ResetPassword.jsx';
const App = () => {
return (
<>
Expand All @@ -30,6 +32,8 @@ const App = () => {
<Route index element={<Index/>} />
<Route path ="signup" element={<Signup/>} />
<Route path ="login" element={<Login/>} />
<Route path ="forgot-password" element={<ForgotPassword/>} />
<Route path ="reset-password/:token" element={<ResetPassword/>} />
<Route path ="feed" element={<Feed/>} />
<Route path ="connections" element={<Connections/>} />
<Route path ="requests" element={<Requests/>} />
Expand Down
185 changes: 185 additions & 0 deletions src/pages/ForgotPassword.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
import React, { useState } from 'react';
import { Mail, ArrowLeft, KeyRound } from 'lucide-react';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
import { createApiUrl, API_ENDPOINTS } from '../utils/apiConfig';
import {
AuthLayout,
AuthLogo,
AuthHeader,
InputField,
SubmitButton
} from '../components';

const ForgotPassword = () => {
const [emailId, setEmail] = useState('');
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState('');
const [error, setError] = useState('');
const [otp, setOtp] = useState('');
const [otpSent, setOtpSent] = useState(false);
const [verifying, setVerifying] = useState(false);
const navigate = useNavigate();

const handleSubmit = async (e) => {
e.preventDefault();

if (!emailId.trim()) {
setError('Please enter your email address');
return;
}

setLoading(true);
setError('');
setMessage('');

try {
const response = await axios.post(
createApiUrl(API_ENDPOINTS.FORGOT_PASSWORD),
{ emailId: emailId.trim() }
);
setMessage(response.data.message);
setOtpSent(true);
} catch (err) {
console.error('Forgot password error:', err);
setError(err.response?.data?.message || 'Something went wrong. Please try again.');
} finally {
setLoading(false);
}
};

const handleVerifyOtp = async (e) => {
e.preventDefault();
if (!otp.trim()) {
setError('Please enter the OTP sent to your email');
return;
}
setError('');
setVerifying(true);
try {
const response = await axios.post(
createApiUrl(API_ENDPOINTS.VERIFY_OTP),
{ emailId: emailId.trim(), otp: otp.trim() }
);
const token = response.data?.resetToken;
if (token) {
navigate(`/reset-password/${token}`);
} else {
setError('Verification failed. Please try again.');
}
} catch (err) {
console.error('Verify OTP error:', err);
setError(err.response?.data?.message || 'Invalid OTP. Please try again.');
} finally {
setVerifying(false);
}
};

return (
<AuthLayout>
<AuthLogo />

<div className="text-center mb-6">
<Link
to="/login"
className="inline-flex items-center text-gray-400 hover:text-white transition-colors"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Login
</Link>
</div>

<AuthHeader
title={otpSent ? 'Enter Verification Code' : 'Forgot Password?'}
subtitle={
otpSent
? `We sent a 6-digit code to ${emailId}. Enter it below to continue.`
: "Enter your email and we'll send you a verification code"
}
/>

{!otpSent ? (
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg text-center">
{error}
</div>
)}

{message && (
<div className="bg-green-500/10 border border-green-500/20 text-green-400 px-4 py-3 rounded-lg text-center">
{message}
</div>
)}

<InputField
value={emailId}
onChange={(e) => setEmail(e.target.value)}
type="email"
placeholder="Enter your email address"
icon={Mail}
required
/>

<SubmitButton
type="submit"
text={loading ? "Sending..." : "Send Code"}
disabled={loading}
/>
</form>
) : (
<form onSubmit={handleVerifyOtp} className="space-y-4">
{error && (
<div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg text-center">
{error}
</div>
)}

{message && (
<div className="bg-green-500/10 border border-green-500/20 text-green-400 px-4 py-3 rounded-lg text-center">
{message}
</div>
)}

<InputField
value={otp}
onChange={(e) => setOtp(e.target.value)}
type="text"
placeholder="Enter 6-digit code"
icon={KeyRound}
required
/>

<SubmitButton
type="submit"
text={verifying ? "Verifying..." : "Verify Code"}
disabled={verifying}
/>
</form>
)}

<div className="text-center text-gray-400 text-sm mt-6">
Remember your password?{' '}
<Link to="/login" className="text-[#ff512f] hover:underline">
Log in
</Link>
</div>

<div className="text-center text-gray-500 text-xs mt-4">
{otpSent ? (
<>
<p>Enter the code we sent to your email. It expires in 10 minutes.</p>
<p>Didn't receive it? Check spam or request a new code.</p>
</>
) : (
<>
<p>We will send a 6-digit verification code to your email.</p>
<p>The code expires in 10 minutes for security.</p>
</>
)}
</div>
</AuthLayout>
);
};

export default ForgotPassword;
9 changes: 5 additions & 4 deletions src/pages/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { Mail, Lock } from 'lucide-react';
import { FaEye, FaEyeSlash } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import {
AuthLayout,
AuthLogo,
Expand Down Expand Up @@ -93,19 +94,19 @@ const Login = () => {
<input type="checkbox" className="w-4 h-4 accent-[#ff512f]" />
<span>Remember me</span>
</div>
<a href="/forgot-password" className="text-[#ff512f] hover:underline">
<Link to="/forgot-password" className="text-[#ff512f] hover:underline">
Forgot password?
</a>
</Link>
</div>

<SubmitButton type="submit" text="Log In" />
</form>

<div className="text-center text-gray-400 text-sm">
Don't have an account?{' '}
<a href="/signup" className="text-[#ff512f] hover:underline">
<Link to="/signup" className="text-[#ff512f] hover:underline">
Sign up
</a>
</Link>
</div>
</AuthLayout>
);
Expand Down
Loading