-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
New login page #12
New login page #12
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,7 +4,6 @@ import { ProtectedRoutes } from "./utils/ProtectedRoutes.jsx"; | |
import { AuthProvider } from "./contexts/AuthContext.jsx"; | ||
import App from "./App.jsx"; | ||
import Login from "./pages/login/Login.jsx"; | ||
import SignUp from "./pages/sign_up/SignUp.jsx"; | ||
import NotFound from "./pages/not_found/NotFound.jsx"; | ||
import Home from "./pages/Homepage.jsx"; | ||
import Dashboard from "./pages/Dashboard.jsx"; | ||
|
@@ -13,14 +12,15 @@ import LogHistory from "./pages/LogHistory.jsx"; | |
import UploadPhotos from "./pages/UploadPhoto.jsx"; | ||
import ManualEdit from "./pages/ManualEdit.jsx"; | ||
import "./index.css"; | ||
import LogCode from "./pages/LogCode.jsx"; | ||
|
||
createRoot(document.getElementById("root")).render( | ||
<AuthProvider> | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="/login" element={<Login />} /> | ||
<Route path="/homepage" element={<Home />} /> | ||
<Route path="/signup" element={<SignUp />} /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We need the signup page to redirect to the login page. Currently, all signup buttons do not work with the route changes. Alternatively could change signup button to redirect to login page. |
||
<Route path="/logcode" element={<LogCode />} /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. logCode should be in protected routes (the full flow for going from signin to accessing the logcode page will be implemented later, but the idea is that the logCode page will only be accessible for accounts that have been registered with email and password) Could you also rename "homepage" to "home"? Currently if I try to access a protected route without logging in, it will direct the user back to home, and it will say page not found |
||
<Route element={<ProtectedRoutes />}> | ||
<Route index element={<App />} /> | ||
<Route path="/dashboard" element={<Dashboard />} /> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import { useState } from "react"; | ||
import { useNavigate } from "react-router-dom"; | ||
import { TextField, InputAdornment } from "@mui/material"; | ||
import { Article } from "@mui/icons-material"; | ||
import Logo from "../assets/images/logo.png"; | ||
import "./styles/LogCode.css"; | ||
|
||
const LogCode = () => { | ||
const [setLogbookCode] = useState(""); | ||
const [termsAccepted, setTermsAccepted] = useState(false); | ||
const [loading, setLoading] = useState(false); | ||
const navigate = useNavigate(); | ||
|
||
const handleSubmit = async (e) => { | ||
e.preventDefault(); | ||
if (!termsAccepted) { | ||
return alert("Please accept the terms and conditions"); | ||
} | ||
try { | ||
setLoading(true); | ||
await new Promise((resolve) => setTimeout(resolve, 1000)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. do we need the loading here? |
||
navigate("/"); | ||
} catch { | ||
alert("Something went wrong. Please try again."); | ||
} finally { | ||
setLoading(false); | ||
} | ||
}; | ||
|
||
return ( | ||
<div className="logcode-page"> | ||
<div className="container"> | ||
<div className="form-container"> | ||
<form onSubmit={handleSubmit}> | ||
<h1>Logbook code entry</h1> | ||
<h2 className="form-description"> | ||
Please enter in your logbook code in order to finish registering | ||
your account. | ||
</h2> | ||
|
||
<div className="code-group"> | ||
<label htmlFor="logbook-code">Logbook code</label> | ||
<TextField | ||
id="logbook-code" | ||
type="text" | ||
variant="outlined" | ||
fullWidth | ||
placeholder="Enter logbook code" | ||
onChange={(e) => setLogbookCode(e.target.value)} | ||
InputProps={{ | ||
startAdornment: ( | ||
<InputAdornment position="start"> | ||
<Article /> | ||
</InputAdornment> | ||
), | ||
}} | ||
required | ||
/> | ||
</div> | ||
|
||
<div className="help-text"> | ||
<a | ||
href="#" | ||
onClick={(e) => { | ||
e.preventDefault(); | ||
alert("Located inside your logbook."); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
}} | ||
> | ||
Where is my code? | ||
</a> | ||
</div> | ||
|
||
<div className="terms-group"> | ||
<label className="custom-checkbox-container"> | ||
<input | ||
type="checkbox" | ||
className="custom-checkbox" | ||
checked={termsAccepted} | ||
onChange={(e) => setTermsAccepted(e.target.checked)} | ||
/> | ||
<span className="terms-text"> | ||
I have read and agree to{" "} | ||
<a href="#" onClick={(e) => e.preventDefault()}> | ||
FlowLeaflet's Terms and Conditions | ||
</a>{" "} | ||
and{" "} | ||
<a href="#" onClick={(e) => e.preventDefault()}> | ||
Privacy Policy | ||
</a> | ||
</span> | ||
</label> | ||
</div> | ||
|
||
<button type="submit" disabled={loading}> | ||
Continue | ||
</button> | ||
</form> | ||
</div> | ||
|
||
<div className="overlay-container"> | ||
<div className="overlay"> | ||
<div className="overlay-panel"> | ||
<img src={Logo} alt="Logo" /> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default LogCode; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this is the logo for now this is okay, but in the future we should avoid committing Flowleaflets images on our repo (there should already be a .gitignore file in assets if you pull from the latest main)