Group 3 - Brendan Geary - #174
Open
BrendanGeary2020 wants to merge 48 commits into
Open
Conversation
test commit merge
Add header component
BE schemas serialize camelCase (accessToken, dueDate, isCompleted, etc.) via CamelModel, but the FE trainee components were reading snake_case keys that never existed in the response, so tokens/dates/progress/ checkboxes silently showed as empty. Also fixes task card click-through, which was reading task.id/status/progress/description - none of which exist on the student task list response (only taskId, urgency, currentPercentage, subtaskSummary do). Also renames seeded emails off the *.test domain, which email-validator rejects as an IANA reserved special-use TLD (RFC 2606), causing login to 500 with "special-use or reserved name" even with correct credentials.
Work in progress
…ress
Adds the manager-side POV to close out the MVP dashboards:
- TrainerTasks.jsx: create-task form (title, description, due date,
urgency, cohort id, subtasks), task list with delete, task progress
panel (average % + per-trainee bars), and per-trainee drill-down
(subtask checklist + progress history) - wired to the existing
/manager/tasks and /manager/tasks/{id}/progress[/{trainee_id}]
endpoints.
- TrainerHeader.jsx: mirrors TraineeHeader for the manager view.
- App.jsx: routes to Trainer* vs Trainee* components based on the
logged-in user's role, and now calls GET /auth/me on login to
populate the header/sidebar with the real name instead of the
"Test Trainer"/"Test Trainee" placeholder.
- TraineeSidebar.jsx / TrainerSidebar.jsx: wire the logout button to
App's handleLogout (previously a no-op / console.log).
Verified end-to-end with a headless-browser run: manager login ->
create task -> task appears in list -> progress panel loads average +
per-trainee bars -> trainee drill-down loads subtasks/history ->
logout -> trainee login shows the new task with correct urgency/
progress/subtask-summary. Zero console or network errors across the
whole flow.
…kshops into connor-dev-branch
Connor dev branch
…ce rename
A teammate's merge renamed store/TraineeStore.js to store/TraineeSlice.js
and moved auth to a proper Redux flow (accessToken/role/userId persisted
under localStorage["trainee"], set via Login.jsx's setCredentials/logout
actions instead of flat access_token/role/user_id keys). Three things
were left broken by that transition:
- App.jsx still imported the deleted "./store/TraineeStore" path
(the reported Vite import-analysis error).
- store.js referenced TrainerSlice without importing it - a
ReferenceError as soon as the store module ran.
- TrainerTasks.jsx (manager dashboard) still read
localStorage.getItem("access_token"), which nothing writes anymore
since Login.jsx moved auth into Redux - every manager-side request
was silently unauthenticated.
App.jsx and TrainerTasks.jsx now read accessToken/tokenType from the
"trainee" Redux slice (the actual auth session for any logged-in user,
manager included - name is a holdover from before the role split, not
a scoping bug), matching the pattern already used in TraineeTasks.jsx.
Logout goes through the slice's logout() action.
Verified end-to-end in a headless browser against the shared Supabase
DB: manager login, task list/progress panel with authenticated
requests, logout, trainee login with task list - zero console or
network errors.
Add reusable development seed data
|
Good work! Let's keep up the good work and do more tomorrow |
Good version
Good version v2
Dark mode:
- New src/theme.css defines CSS custom-property tokens for both
themes, toggled via a data-theme attribute (src/hooks/useTheme.js,
persisted to localStorage). Login, both headers, both sidebars, and
both task-list views were tokenized directly (hex literals swapped
for var() references, zero visual change in light mode).
- TrainerCohorts/TrainerTrainees have ~150 one-off hex colors between
them with no shared palette - not worth hand-tokenizing. They opt
into a full CSS filter invert (invert(1) hue-rotate(180deg)) via a
"themeInvert" class instead, which mathematically preserves each
element's original contrast ratio.
- Fixed a real, previously-invisible bug found while building this:
App.css had a stale `.main-content p { color: ... }` rule left over
from early scaffolding. Because a class+tag selector beats a single
CSS-module class in specificity, it was silently overriding the
color of every <p> tag app-wide - harmless in light mode by
coincidence (similar dark grays), but broke text rendered on light
surfaces once dark mode's light text color took over. Removed it;
nothing needed it.
Profile settings:
- PUT /api/auth/me lets a user update full_name/email and optionally
change their password (current password required to set a new
one). No schema changes - fname/lname/email/password all map onto
the existing full_name/email/hashed_password columns; the modal
splits/joins full_name into first/last on the frontend rather than
migrating the column.
- ProfileModal.jsx is shared by both sidebars, portaled to
document.body (fixes a real stacking-context bug where a filtered
ancestor elsewhere in the tree could paint over a same-page fixed
overlay - portaling to body is the standard fix regardless).
- Both sidebars gained "Profile Settings" and light/dark toggle
buttons above Logout.
Verified end-to-end in a headless browser: toggle persists across the
whole app, profile edits round-trip through the real API and update
the sidebar name immediately, admin pages remain fully readable in
dark mode. Zero console/network errors.
…sidebar utility buttons - theme.css: replaced the neutral-gray/blue palette with warm beige/off-white/light-brown for light mode and navy/charcoal/ near-black for dark mode. Sidebar goes espresso-brown in light mode and near-black in dark mode either way, for a consistent anchor. Role accents (trainee green, trainer blue) shifted to warmer/muted tones that sit better against the new neutrals. - Profile Settings and the theme toggle were reusing the exact same .link style as primary nav items, so they visually blended in instead of reading as secondary utility actions. They now get a quieter treatment (muted by default, brightening on hover, smaller icon) via a new .utilityButton/.utility-link class, and Logout is visually separated below a divider with a distinct red-tinted hover instead of the neutral one shared by everything else. - Added --sidebar-danger/--sidebar-danger-bg tokens for that logout hover state, tuned separately from the general --danger tokens since they need to read against the sidebar's own background. Verified in a headless browser across manager/trainee and light/dark - palette and utility button treatment confirmed on both sidebars, zero console errors.
…fix trainee-side theme gaps - theme.css: sidebar goes light brown in light mode and neutral grey in dark mode, replacing the previous dark-espresso/near-black sidebar in both themes. Also dialed the Cohorts/Trainees admin pages' filter-based dark-mode fast path from invert(1) to invert(0.75), since a full invert mapped their white card backgrounds to pure black - darker and harsher than the new grey sidebar once you expand a cohort or trainee. - Sidebar hover text was hardcoded to literal white in both TraineeSidebar.css and TrainerSidebar.module.css, which assumed a dark sidebar background. Now that light mode's sidebar is actually light, that's swapped to var(--sidebar-text) so hover stays legible in both themes. - TraineeSidebar.css's .sidebar-link never reset native <button> chrome (border/background), unlike TrainerSidebar's .link. Only .logout-button had its own reset, so Profile Settings/Dark Mode fell through to the browser's default button box while Trainer's equivalent buttons blended in seamlessly. Added the same reset. - TraineeTasks.module.css had leftover literal colors my earlier hex-only grep missed: a #f8fbff background on the expanded task card (plus matching hover/completed subtask states) and a rgba(248, 250, 252, 0.7) hover overlay - both rendered as a pale/ white wash in dark mode. Replaced with var(--surface-alt), matching the trainer side. - Login.module.css now hardcodes the light-theme color values instead of referencing the shared var() tokens, so the login screen always renders light regardless of whichever theme was last toggled (theme choice persists in localStorage independent of auth state). Verified in a headless browser across manager/trainee and light/dark - sidebar button blending, accordion contrast, and login-page theme independence all confirmed, zero console errors.
Added bonus features like dark/light mode, and profile settings
Author
|
Thanks again everyone! |
Contributor
Member
|
Hi @BrendanGeary2020 — this PR currently has a merge conflict with the Please resolve the conflict from your fork: # from your fork, on your PR branch
git remote add upstream https://github.com/becloudready/workshops.git # if not already added
git fetch upstream
git merge upstream/master
# open the files Git marks as conflicted, keep your work inside your own
# projects/submission/<your-name>/ folder, remove the <<<<<<< ======= >>>>>>> markers
git add .
git commit
git pushTip: keep all your changes inside your own |
… the stray root-level lockfile This repo root has no package.json, so the package-lock.json that keeps appearing here has never corresponded to a real npm project - it's been recreated by accidental `npm install`s at the repo root over time (an earlier BankApplication mistake, and most recently one of our own). Removed it rather than merging its content; our actual frontend lockfile lives at workshops/fullstack-aws/projects/submission/Group3/frontend/task-board-frontend/package-lock.json and is untouched.
|
Hi @kchandan, sorry about that! We tracked it down — a package-lock.json had accidentally ended up at the repo root (no package.json there to match it, so it was never a real project — looks like it happened when someone on our team ran npm install from the repo root instead of inside our frontend folder). That stray file was colliding with a similar leftover from another submission's history. We've merged in upstream/master, removed the file, and pushed — the PR shows as mergeable and conflict-free now. Thanks for flagging it! We've also deployed our project — you can check it out here: http://noticeboardtracker-frontend-279249498881.s3-website-us-east-1.amazonaws.com/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Frontend authentication & logout: Implemented and connected logout functionality across the trainee and trainer interfaces, including clearing stored credentials on logout.
Project planning & structure: Helped plan the overall application structure, identify the features and components needed to complete the project, and organize the work between the Frontend and Backend.
Testing & backend support: Tested the project locally on my PC, helped troubleshoot the development environment, and provided some feedback on backend data where needed.