Skip to content

feat(ux): loading state, accessible status badges#476

Open
CooLHecker wants to merge 3 commits into
Eswaramuthu:mainfrom
CooLHecker:feature/ui-enhancement
Open

feat(ux): loading state, accessible status badges#476
CooLHecker wants to merge 3 commits into
Eswaramuthu:mainfrom
CooLHecker:feature/ui-enhancement

Conversation

@CooLHecker
Copy link
Copy Markdown

Which issue does this PR close?

Closes #442

Rationale for this change

The achievement form had no loading state,
and status badges failed WCAG contrast requirements in dark mode.

What changes are included in this PR?

  • teacher_achievements_2.html: JS validation for 6 required fields,
    spinner + disabled state on submit button, bfcache restore
  • styles.css: global .badge-pending / .badge-approved / .badge-rejected
    with WCAG AA contrast ratios for light and dark themes

Are these changes tested?

Tested manually:

  • Empty form submit → all 6 errors shown, request blocked
  • Future date → date error shown
  • Valid form → spinner appears, button disabled, submits correctly
  • Dark/light mode badge contrast verified via Chrome DevTools

Are there any user-facing changes?

Yes , teachers see inline validation errors and a loading spinner.
Admins see improved badge readability in dark mode.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 24, 2026

@CooLHecker is attempting to deploy a commit to the 007's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

Comment on lines +301 to +318

{% if error %}
<!-- Server-side error (e.g. invalid student ID, duplicate cert) -->
<div class="error-box"
style="background:rgba(229,62,62,0.12);color:#fc8181;padding:14px 16px;border-radius:10px;border:1px solid rgba(229,62,62,0.3);margin-bottom:20px;font-weight:500;"
role="alert">
⚠️ {{ error }}
</div>
{% endif %}

{% if success %}
<div class="welcome-text">
<p style="color:#38a169;font-weight:bold;">Congratulations! <br> {{ success }}</p>
</div>
<div class="button">
<a href="{{ url_for('teacher-dashboard') }}" class="btn-primary">Back to Dashboard</a>
</div>
{% else %}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MAJOR BUG Error and success Jinja blocks are dead code — route never renders this template with those variables

submit_achievements() always renders submit_achievements.html for all POST responses (success and every error path); teacher_achievements_2.html is only served on GET without any template variables. The {% if error %} and {% if success %} blocks added here will never execute.

Prompt to fix with AI

Copy this prompt into your AI coding assistant to fix this issue.

In `app.py`, the `submit_achievements()` route (lines 405–533) renders `submit_achievements.html` for every POST response (success at line 525, all error returns). The `{% if error %}` and `{% if success %}` Jinja blocks added to `templates/teacher_achievements_2.html` at lines 301–318 will never be reached. Fix: update the POST handler in `app.py` to render `teacher_achievements_2.html` (instead of `submit_achievements.html`) when returning error/success responses, so the inline feedback UI in this template is actually shown to users.

Comment thread static/styles.css
Comment on lines +1143 to +1166
.badge-pending {
background: #fef3c7;
color: #78350f;
border-color: #f59e0b;
font-weight: 600;
}

/* --- Approved / Verified --- */
/* Light: #064e3b on #d1fae5 → 5.9:1 ✓ */
.badge-approved {
background: #d1fae5;
color: #064e3b;
border-color: #10b981;
font-weight: 600;
}

/* --- Rejected --- */
/* Light: #7f1d1d on #fee2e2 → 6.1:1 ✓ */
.badge-rejected {
background: #fee2e2;
color: #7f1d1d;
border-color: #f87171;
font-weight: 600;
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIT MAINTAINABILITY Global light-mode badge colors silently overridden by template inline styles

admin_users.html and admin_dashboard.html each contain inline .badge-pending/.badge-approved <style> blocks at the same specificity (0,1,0); they win by cascade source order and render the old colors instead of these new WCAG-audited values in light mode.

Prompt to fix with AI

Copy this prompt into your AI coding assistant to fix this issue.

In static/styles.css, the new light-mode rules for `.badge-pending` (line 1143) and `.badge-approved` (line 1152) are silently overridden by duplicate inline `<style>` blocks in templates/admin_users.html (lines 95–103) and templates/admin_dashboard.html (lines 138–146). To make the global WCAG-compliant colors take effect, remove the duplicate `.badge-pending` and `.badge-approved` rules from both template `<style>` blocks. No changes to styles.css are needed.

@entelligence-ai-pr-reviews
Copy link
Copy Markdown
Contributor


Confidence Score: 3/5 - Review Recommended

Likely safe but review recommended — the PR introduces useful UX improvements (loading states and accessible status badges), but contains a substantive bug in teacher_achievements_2.html where the error and success Jinja blocks are dead code because submit_achievements() never renders that template with those context variables, meaning users will silently receive no feedback on form submission outcomes. Additionally, the new badge color rules in styles.css are architecturally fragile since inline styles in admin_users.html and admin_dashboard.html will silently override them, creating a maintenance hazard as the codebase grows.

Key Findings:

  • The error/success conditional blocks in teacher_achievements_2.html are unreachable dead code — the submit_achievements() route always renders submit_achievements.html for those states, so any error or success feedback logic placed here will never execute, misleading future developers and leaving users without proper form submission feedback.
  • The global .badge-* color definitions added to styles.css are silently shadowed by existing inline styles in admin_users.html and admin_dashboard.html, meaning the intended accessible badge colors won't actually apply consistently across the admin UI — the accessibility goal of the PR may be partially defeated.
  • The PR's stated goals (loading state and accessible status badges) are well-intentioned UX improvements, but the implementation has a correctness gap in template routing and a specificity conflict in CSS that both need resolution before the changes work as intended.
Files requiring special attention
  • templates/teacher_achievements_2.html
  • static/styles.css

@entelligence-ai-pr-reviews
Copy link
Copy Markdown
Contributor

entelligence-ai-pr-reviews Bot commented May 24, 2026

EntelligenceAI PR Summary

This PR consolidates the template used in the submit_achievements route by replacing submit_achievements.html with teacher_achievements_2.html for all rendering paths.

  • Modified the GET request fallback render target in the submit_achievements route in app.py
  • Both error and default rendering paths now use teacher_achievements_2.html
  • Removes dependency on the submit_achievements.html template for this route

Confidence Score: 5/5 - Safe to Merge

Safe to merge — this PR makes a straightforward template consolidation in the submit_achievements route within app.py, replacing submit_achievements.html with teacher_achievements_2.html for both the error and default GET rendering paths. The change is minimal and well-scoped, reducing template sprawl and eliminating a dependency on the now-unused submit_achievements.html. No review comments were generated, no logic is altered, and no security or runtime concerns were identified.

Key Findings:

  • The change in app.py is purely a render target substitution — both the error fallback and the default GET path now consistently use teacher_achievements_2.html, which reduces inconsistency and the risk of rendering different UI states from the same route.
  • No new logic, validation paths, or data handling is introduced; the PR's scope is intentionally narrow and the risk surface is essentially zero.
  • The removal of the dependency on submit_achievements.html is a clean reduction in template debt, assuming the template is either deleted or no longer referenced elsewhere in the codebase.
  • 2 previous unresolved comment(s) likely resolved in latest diff (score-only signal; thread status unchanged)
Files requiring special attention
  • app.py

Comment thread app.py
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement] Improve accessibility and UI feedback for Achievement uploads

1 participant