Skip to content

Commit

Permalink
got rid of inline styling for page components, refactored App.css and…
Browse files Browse the repository at this point in the history 
… index.css for /grant-info
  • Loading branch information
@Ryaken-Nakamoto
Ryaken-Nakamoto committed Nov 19, 2024
1 parent 7a5e8c9 commit 918f095
Show file tree
Hide file tree
Showing 11 changed files with 343 additions and 300 deletions.
33 changes: 0 additions & 33 deletions frontend/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,13 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}

.app-container {
display: flex;
justify-content: center; /* Centers horizontally */
Expand Down
26 changes: 10 additions & 16 deletions frontend/src/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
import { getStore } from './external/bcanSatchel/store';
import { logout } from './external/bcanSatchel/actions';
import Profile from './Profile';
import './styles/Dashboard.css';

const Dashboard = observer(() => {
const store = getStore();
Expand All @@ -13,22 +14,15 @@ const Dashboard = observer(() => {
};

return (
<div style={{ padding: '20px', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
<button onClick={handleLogout} style={{
padding: '10px',
fontSize: '16px',
marginBottom: '10px', // Add space below the button
backgroundColor: 'black',
color: 'white'
}}>
Logout
</button>

<h1>Welcome, {store.user?.userId}</h1>

<Profile />
</div>
<div className="dashboard-container">
<button className="dashboard-button" onClick={handleLogout}>
Logout
</button>
<h1 className="dashboard-heading">Welcome, {store.user?.userId}</h1>
<Profile/>
</div>
);
});

export default Dashboard;
export default Dashboard;

135 changes: 59 additions & 76 deletions frontend/src/Login.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,74 @@
// src/Login.tsx

import React, { useState } from 'react';
import { setAuthentication } from './external/bcanSatchel/actions'; // Corrected import path
import { observer } from 'mobx-react-lite';
import { useNavigate } from 'react-router-dom';
import './styles/Login.css';

const Login = observer(() => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();

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

try {
const response = await fetch('http://localhost:3001/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});
try {
const response = await fetch('http://localhost:3001/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});

if (!response.ok) {
const errorData = await response.json();
alert(errorData.message || 'Login failed. Please check your credentials.');
return;
}
if (!response.ok) {
const errorData = await response.json();
alert(errorData.message || 'Login failed. Please check your credentials.');
return;
}

const data = await response.json();
console.log('Login response data:', data);
const data = await response.json();
console.log('Login response data:', data);

if (data.access_token) {
setAuthentication(true, data.user, data.access_token);
navigate('/dashboard');
alert(data.message); // Alert wit message from backend indicating success
} else {
alert('Login failed. Please check your credentials.');
}
} catch (error) {
console.error('Error during login:', error);
alert('An error occurred while logging in. Please try again later.');
}
};
if (data.access_token) {
setAuthentication(true, data.user, data.access_token);
navigate('/dashboard');
alert(data.message); // Alert with message from backend indicating success
} else {
alert('Login failed. Please check your credentials.');
}
} catch (error) {
console.error('Error during login:', error);
alert('An error occurred while logging in. Please try again later.');
}
};

return (
<form onSubmit={handleSubmit} style={{ maxWidth: '400px',
margin: '0 auto',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ccc',
borderRadius: '8px',
padding: '20px 30px'}}>
<h2>Login</h2>
<div>
<label style={{ display: 'block', textAlign: 'left' }}>Username</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
style={{width: '90%',
padding: '8px',
margin: '8px 0'}}
/>
</div>
<div>
<label style={{ display: 'block', textAlign: 'left' }} >Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
style={{ width: '90%', padding: '8px', margin: '8px 0'}}
/>

</div>
<button
type="submit"
style={{ padding: '8px', width :'100%', margin: '8px 0', backgroundColor: 'black', color: 'white'}}>
Login
</button>
<button
type="submit"
style={{ padding: '8px', width :'100%', margin: '8px 0', backgroundColor: 'white', color: 'black'}}>
Forgot Password?
</button>
</form>
);
return (
<form onSubmit={handleSubmit} className="login-form">
<h2 className="login-heading">Login</h2>
<div>
<label className="login-label">Username</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
className="login-input"
/>
</div>
<div>
<label className="login-label">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="login-input"
/>
</div>
<button type="submit" className="login-button">Login</button>
<button type="button" className="login-button-forgot">Forgot Password?</button>
</form>
);
});

export default Login;
export default Login;
121 changes: 57 additions & 64 deletions frontend/src/Profile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,72 @@
// src/Profile.tsx

import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { getStore } from './external/bcanSatchel/store';
import { updateUserProfile } from './external/bcanSatchel/actions';
import './styles/Profile.css';

const Profile = observer(() => {
const store = getStore();
const [email, setEmail] = useState(store.user?.email || '');
const [biography, setBiography] = useState(store.user?.biography || '');
const store = getStore();
const [email, setEmail] = useState(store.user?.email || '');
const [biography, setBiography] = useState(store.user?.biography || '');

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

try {
const response = await fetch('http://localhost:3001/user/me', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${store.accessToken}`,
},
body: JSON.stringify({ email, biography }),
});
try {
const response = await fetch('http://localhost:3001/user/me', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${store.accessToken}`,
},
body: JSON.stringify({ email, biography }),
});

if (!response.ok) {
const errorData = await response.json();
alert(errorData.message || 'Failed to update profile.');
return;
}
if (!response.ok) {
const errorData = await response.json();
alert(errorData.message || 'Failed to update profile.');
return;
}

const data = await response.json();
const data = await response.json();

updateUserProfile(data);
alert('Profile updated successfully.');
} catch (error) {
console.error('Error updating profile:', error);
alert('An error occurred while updating your profile.');
}
};
updateUserProfile(data);
alert('Profile updated successfully.');
} catch (error) {
console.error('Error updating profile:', error);
alert('An error occurred while updating your profile.');
}
};

return (
<form onSubmit={handleSubmit} style={{maxWidth: '600px',
margin: '0 auto',
border: '1px solid #ccc',
borderRadius: '8px',
padding: '20px 30px' }}>
<h2>Profile</h2>
<div style = {{padding: '5px'}} >

<label >Username: </label>
<span>{store.user?.userId}</span>
</div>
<div>
<label>Email:</label>
<input
type="email"
style={{ width: '100%', padding: '8px', margin: '8px 0' }}
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div>
<label>Biography:</label>
<textarea
style={{ width: '100%', padding: '8px', margin: '8px 0' }}
value={biography}
onChange={(e) => setBiography(e.target.value)}
></textarea>
</div>
<button type="submit" style={{ padding: '10px', fontSize: '16px' }}>
Save Changes
</button>
</form>
);
return (
<form onSubmit={handleSubmit} className="profile-form">
<h2 className="profile-heading">Profile</h2>
<div className="profile-section">
<label className="profile-label">Username:</label>
<span>{store.user?.userId}</span>
</div>
<div className="profile-section">
<label className="profile-label">Email:</label>
<input
type="email"
className="profile-input"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="profile-section">
<label className="profile-label">Biography:</label>
<textarea
className="profile-input"
value={biography}
onChange={(e) => setBiography(e.target.value)}
></textarea>
</div>
<button type="submit" className="profile-button">Save Changes</button>
</form>
);
});

export default Profile;
export default Profile;
Loading

0 comments on commit 918f095

Please sign in to comment.