Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into auth-print-2

Browse source
This commit is contained in:
JBB0807 2025-04-21 18:32:13 -07:00
commit 1d615b8257
15 changed files with 411 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/pages/AssignmentPage.jsx Normal file
View file

@ -0,0 +1,107 @@
// Page - Assignment
import { useEffect, useState } from 'react';
import '../scss/styles.scss';
const AssignmentPage = () => {
const [files, setFiles] = useState([]);
useEffect(() => {
document.title = 'Assignment';
}, []);
const handleFileChange = (e) => {
if (e.target.files) {
const newFiles = Array.from(e.target.files);
setFiles(prevFiles => [...prevFiles, ...newFiles]);
}
};
const handleRemoveFile = (index) => {
setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
};
const handleSubmit = (e) => {
e.preventDefault();
// Here you would typically send the files to a server
console.log('Files to submit:', files);
alert('Assignment submitted successfully!');
};
return (
<main className="assignment-page">
<section>
<div className="assignment-header">
<h2>Assignment Submission</h2>
<div className="due-date">
<p>Due on Jan 16, 2025 11:59 PM</p>
</div>
</div>
<div className="assignment-container">
<div className="assignment-info">
<h3>Submit Assignment</h3>
<p className="files-count">({files.length}) file(s) to submit</p>
<p className="submission-note">After uploading, you must click Submit to complete the submission.</p>
</div>
<div className="file-upload-section">
<div className="upload-buttons">
<label className="file-upload-btn">
<input
type="file"
multiple
onChange={handleFileChange}
style={{ display: 'none' }}
/>
Add a File
</label>
<button className="record-audio-btn">Record Audio</button>
<button className="record-video-btn">Record Video</button>
</div>
{files.length > 0 && (
<div className="files-list">
<h4>Selected Files:</h4>
<ul>
{files.map((file, index) => (
<li key={index} className="file-item">
<span className="file-name">{file.name}</span>
<span className="file-size">({(file.size / 1024).toFixed(2)} KB)</span>
<button
className="remove-file-btn"
onClick={() => handleRemoveFile(index)}
>
Remove
</button>
</li>
))}
</ul>
</div>
)}
</div>
<div className="comments-section">
<h4>Comments</h4>
<textarea
placeholder="Add a comment (optional)"
rows="4"
></textarea>
</div>
<div className="submission-buttons">
<button
className="submit-btn"
onClick={handleSubmit}
disabled={files.length === 0}
>
Submit
</button>
<button className="cancel-btn">Cancel</button>
</div>
</div>
</section>
</main>
);
};
export default AssignmentPage;

16
src/pages/LoginPage.jsx
View file

@ -8,7 +8,7 @@ const LoginPage = () => {
const [type, setType] = useState("signIn");
useEffect(() => {
document.title = "Login / Sign Up";
document.title = "Login / Instructor";
}, []);
const handleOnClick = (text) => {
@ -23,7 +23,7 @@ const LoginPage = () => {
return (
<main className="login-page">
<section>
<h2>Sign In/Sign Up</h2>
<h2>Student/Instructor</h2>
<div className={containerClass} id="container">
<SignUpForm />
<SignInForm />
@ -31,26 +31,24 @@ const LoginPage = () => {
<div className="overlay">
<div className="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>
To keep connected with us please login with your personal info
</p>
<p>Please login with your personal info</p>
<button
className="ghost"
id="signIn"
onClick={() => handleOnClick("signIn")}
>
Sign In
Student
</button>
</div>
<div className="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<h1>Hello, Instructor!</h1>
<p>Please enter your personal details here</p>
<button
className="ghost"
id="signUp"
onClick={() => handleOnClick("signUp")}
>
Sign Up
Instructor
</button>
</div>
</div>

20
src/pages/SignIn.jsx
View file

@ -35,22 +35,16 @@ function SignInForm() {
return (
<div className="form-container sign-in-container">
<form onSubmit={handleOnSubmit}>
<h1>Sign in</h1>
<div className="social-container">
<a className="social" onClick={googleAuth}>
<h1>Student</h1>
{/* <div className="social-container">
<a href="#" className="social">
<i className="fab fa-google-plus-g" />
</a>
<a href="#" className="social">
<i className="fab fa-facebook-f" />
</a>
<a href="#" className="social">
<i className="fab fa-linkedin-in" />
</a>
</div>
<span>or use your account</span>
</div> */}
<input
type="email"
placeholder="Email"
placeholder="Student Name"
name="email"
value={state.email}
onChange={handleChange}
@ -62,7 +56,7 @@ function SignInForm() {
value={state.password}
onChange={handleChange}
/>
<a href="#">Forgot your password?</a>
<button>Sign In</button>
</form>
</div>

18
src/pages/SignUp.jsx
View file

@ -18,7 +18,7 @@ function SignUpForm() {
const { name, email, password } = state;
alert(
`You are sign up with name: ${name} email: ${email} and password: ${password}`
`You are signed in with name: ${name} email: ${email} and password: ${password}`
);
for (const key in state) {
@ -29,20 +29,18 @@ function SignUpForm() {
}
};
const googleAuth = () => {
window.open("https://byte-camp-auth-service.fly.dev/auth/google", "_self");
};
return (
<div className="form-container sign-up-container">
<form onSubmit={handleOnSubmit}>
<h1>Create Account</h1>
<h1>Instructor</h1>
<div className="social-container">
<a href="#" className="social">
<i className="fab fa-facebook-f" />
</a>
<a href="#" className="social">
<a href="#" className="social" onClick={googleAuth}>
<i className="fab fa-google-plus-g" />
</a>
<a href="#" className="social">
<i className="fab fa-linkedin-in" />
</a>
</div>
<span>or use your email for registration</span>
<input
@ -66,7 +64,7 @@ function SignUpForm() {
onChange={handleChange}
placeholder="Password"
/>
<button>Sign Up</button>
<button>Sign in</button>
</form>
</div>
);