Skip to content

Commit

Permalink
Login In page done
Browse files Browse the repository at this point in the history
  • Loading branch information
@NitinTheGreat
NitinTheGreat committed Aug 16, 2024
1 parent cf699cf commit 13fad4f
Show file tree
Hide file tree
Showing 6 changed files with 505 additions and 295 deletions.
217 changes: 192 additions & 25 deletions ao3 webpages/components/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,199 @@
import React from 'react';
import React, { useState } from 'react';
import "../css/Login.css";

const Login = () => {
export default function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const [messageType, setMessageType] = useState('');
const [showPassword, setShowPassword] = useState(false);

const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
};

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

try {
const response = await fetch('https://ao3-chrome-extension-backend.onrender.com/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
email,
password,
}),
});

const data = await response.json();

if (response.ok) {
localStorage.setItem('isLoggedIn', 'true');

if (data.username) {
localStorage.setItem('username', data.username);
}

setMessage('Login successful');
setMessageType('success');
// Redirect to dashboard after a short delay
setTimeout(() => {
window.location.href = '/dashboard';
}, 1500);
} else {
setMessage(data.message || 'Login failed');
setMessageType('error');
}
} catch (error) {
console.error('Error details:', error);
setMessage('An error occurred. Please try again.');
setMessageType('error');
}
};

return (
<div className="signup-container">
<div className="signup-box">
<h1>SIGN UP</h1>
<p>Sign up now to unlock exclusive tools that will enhance your AO3 experience & keep your fanfiction journey organized and enjoyable.</p>
<form>
<input type="text" placeholder="Username" className="input-field" />
<input type="email" placeholder="Email" className="input-field" />
<input type="password" placeholder="Password" className="input-field" />
<input type="password" placeholder="Confirm Password" className="input-field" />
<div className="or-divider">
<hr className="divider" />
<span>OR</span>
<hr className="divider" />
<div className="login-container">
<div className="login-left">
{/* Logo placeholder */}
{/* <div style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '100px',
height: '100px',
background: 'white',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<div style={{
width: '60px',
height: '60px',
borderRadius: '50%',
border: '20px solid #1e3a8a',
borderTopColor: 'white',
transform: 'rotate(45deg)'
}}></div>
</div> */}
<img src="../images/login1.png" alt="" />
</div>
<div className="login-right">
<div className="login-form-container">
<div className="login-form">
<h1 style={{ color: '#1e3a8a', fontSize: '24px', marginBottom: '8px' }}>Welcome back!</h1>
<p style={{ color: '#4b5563', fontSize: '14px', marginBottom: '24px' }}>
Log in to access your personalized AO3 tools. Continue your fanfiction journey right where you left off.
</p>

<h2 style={{ color: '#1e3a8a', fontSize: '18px', marginBottom: '16px' }}>LOGIN</h2>

{message && (
<div className={`message ${messageType}`}>
{message}
</div>
)}

<form onSubmit={handleSubmit}>
<div style={{ marginBottom: '16px' }}>

<input

type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
style={{
width: '100%',
padding: '10px',
border: '1px solid #d1d5db',
borderRadius: '4px',
fontSize: '14px'
}}
/>
</div>
<div style={{ marginBottom: '16px', position: 'relative' }}>
<input
type={showPassword ? "text" : "password"}
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
style={{
width: '100%',
padding: '10px',
paddingRight: '40px',
border: '1px solid #d1d5db',
borderRadius: '4px',
fontSize: '14px'
}}
/>
<button
type="button"
onClick={togglePasswordVisibility}
style={{
position: 'absolute',
right: '10px',
top: '50%',
transform: 'translateY(-50%)',
background: 'none',
border: 'none',
cursor: 'pointer',
padding: '0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
{showPassword ? (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ width: '20px', height: '20px' }}>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ width: '20px', height: '20px' }}>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
)}
</button>
</div>
<div className="remember-forgot">
<label className="remember-me">
<input type="checkbox" />
Remember me
</label>
<a href="#" style={{ color: '#1e3a8a', fontSize: '14px', textDecoration: 'none' }}>Forgot Password?</a>
</div>
<button
type="submit"
onClick={handleSubmit}
style={{
width: '100%',
padding: '10px',
backgroundColor: '#1e3a8a',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '50px'

}}
>
Log In
</button>
</form>

<p style={{ textAlign: 'center', marginTop: '16px', fontSize: '14px', color: '#4b5563' }}>
Don't have an account? <a href="#" style={{ color: '#1e3a8a', textDecoration: 'none' }}>Signup</a>
</p>
</div>
<button className="google-signup">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" alt="Google Logo" />
Sign up with Google
</button>
<button className="signup-button">SIGNUP</button>
</form>
<p className="login-link">Already have an account? <a href="#">Login</a></p>
</div>
</div>
</div>
);
};

export default Login;
}
166 changes: 83 additions & 83 deletions ao3 webpages/components/Sidebar/Sidebar.css
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,84 @@
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 66px; /* Width for collapsed state */
height: 100%;
fill: #FFF;
filter: drop-shadow(2px 0px 4px rgba(43, 42, 42, 0.2));
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
transition: width 0.3s;
overflow: hidden;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
}
.logo{
margin-top: 48px;
width: 55%;
}
.sidebar.open {
width: 280px; /* Width when the sidebar is expanded */
fill: #FFF;
background-color: #FFF;
filter: drop-shadow(2px 0px 4px rgba(0, 0, 0, 0.20));
}
.icon-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 48px;
margin-top: 106px; /* Adjust margin to create a gap between logo and icons */
align-items: center; /* Center align icons when sidebar is collapsed */
justify-content: flex-start;
}
.bottom-icons {
display: flex;
flex-direction: column;
align-items: center; /* Center align icons when sidebar is collapsed */
gap: 48px;
padding-bottom: 40px; /* Adds padding to ensure bottom icons don't touch screen edge */
/* width: 100%; */
width: 55%;
}
.icon-wrapper {
display: flex;
align-items: center;
width: 100%;
padding-left: 0;
cursor: pointer;
}
.sidebar.open .icon-wrapper {
padding-left: 20px; /* Add padding when the sidebar is expanded */
}
.icon-wrapper svg {
min-width: 24px; /* Fixed minimum width for icons */
height: 24px; /* Fixed height for icons */
flex-shrink: 0; /* Prevent icons from shrinking */
}
.icon-wrapper span {
opacity: 0;
white-space: nowrap; /* Prevents text from wrapping */
transition: opacity 0.3s;
margin-left: 10px; /* Margin between icon and text */
overflow: hidden; /* Hide text overflow */
text-overflow: ellipsis; /* Add ellipsis to overflowing text */
max-width: 0; /* Initially hide the text */
}
.sidebar.open .icon-wrapper span {
opacity: 1;
max-width: 180px; /* Adjust this width as needed for the expanded state */
}
.sidebar.open .icon-wrapper {
justify-content: flex-start; /* Align icons and text to the start */
}
position: fixed;
top: 0;
left: 0;
width: 66px; /* Width for collapsed state */
height: 100%;
fill: #FFF;
filter: drop-shadow(2px 0px 4px rgba(43, 42, 42, 0.2));
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
transition: all 0.3s;
overflow: hidden;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
}
.logo{
margin-top: 48px;
width: 55%;
}
.sidebar.open {
width: 280px; /* Width when the sidebar is expanded */
fill: #FFF;
background-color: #FFF;
filter: drop-shadow(2px 0px 4px rgba(0, 0, 0, 0.20));
}

.icon-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 48px;
margin-top: 106px; /* Adjust margin to create a gap between logo and icons */
align-items: center; /* Center align icons when sidebar is collapsed */
justify-content: flex-start;
}

.bottom-icons {
display: flex;
flex-direction: column;
align-items: center; /* Center align icons when sidebar is collapsed */
gap: 48px;
padding-bottom: 40px; /* Adds padding to ensure bottom icons don't touch screen edge */
/* width: 100%; */
width: 55%;
}

.icon-wrapper {
display: flex;
align-items: center;
width: 100%;
padding-left: 0;
cursor: pointer;
}

.sidebar.open .icon-wrapper {
padding-left: 20px; /* Add padding when the sidebar is expanded */
}

.icon-wrapper svg {
min-width: 24px; /* Fixed minimum width for icons */
height: 24px; /* Fixed height for icons */
flex-shrink: 0; /* Prevent icons from shrinking */
}

.icon-wrapper span {
opacity: 0;
white-space: nowrap; /* Prevents text from wrapping */
transition: opacity 0.3s;
margin-left: 10px; /* Margin between icon and text */
overflow: hidden; /* Hide text overflow */
text-overflow: ellipsis; /* Add ellipsis to overflowing text */
max-width: 0; /* Initially hide the text */
}

.sidebar.open .icon-wrapper span {
opacity: 1;
max-width: 180px; /* Adjust this width as needed for the expanded state */
}

.sidebar.open .icon-wrapper {
justify-content: flex-start; /* Align icons and text to the start */
}
Loading

0 comments on commit 13fad4f

Please sign in to comment.