feat(auth, learning): password toggle (#591) and return-to-video from quiz (#561) with e2e test by Kishore-16 · Pull Request #941 · vicharanashala/vibe

Kishore-16 · 2026-04-14T06:01:34Z

Summary

Implements two user experience improvements:

Password visibility toggle in authentication screens (Feature Request: Ability to see password with toggle button #591)
Return-to-video navigation from quiz screens (Option to go back to video from quiz (feature request) #561)

Also includes a mocked Playwright E2E test to validate the quiz-to-video flow.

What Changed

Added reusable password visibility toggle component
Integrated toggle in login, signup, and confirm password fields
Implemented “Rewatch Previous Video” navigation from quiz screen
Added mocked Playwright test for quiz → video return flow

Why

Feature Request: Ability to see password with toggle button #591: Helps users verify passwords and reduces input errors
Option to go back to video from quiz (feature request) #561: Allows learners to revisit video content before answering quiz questions
Improves overall usability and learning flexibility

Scope

Frontend authentication UI updates
Learning navigation enhancement (quiz → video)
E2E test coverage using mocks
No backend API changes

Files Included

password-visibility-toggle.tsx
AuthPage.tsx
auth-page.tsx
mock-return-to-video.spec.ts

Validation

pnpm --dir frontend compile
pnpm --dir e2e exec playwright test tests/mock-return-to-video.spec.ts

Copilot

Pull request overview

This PR improves UX in the frontend auth flows by adding a reusable password visibility toggle and wiring it into login/signup/confirm-password fields, and adds a Playwright E2E test that validates the quiz → “rewatch previous video” navigation flow using full request mocks.

Changes:

Added PasswordVisibilityToggle UI component and integrated it into auth password inputs.
Adjusted Google login role resolution (new users default to student) and some redirect/error handling.
Added a mocked Playwright E2E test for quiz → video “rewatch” navigation.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
`frontend/src/components/ui/password-visibility-toggle.tsx`	New reusable toggle button component for password visibility.
`frontend/src/components/Auth/AuthPage.tsx`	Integrates the toggle into auth UI; tweaks Google login role + error handling; disables Google button based on Firebase config.
`frontend/src/app/pages/auth-page.tsx`	Integrates the toggle into the app auth page; adjusts Google login redirect + error parsing; switches image references to public paths.
`e2e/tests/mock-return-to-video.spec.ts`	New Playwright test with full network mocking for quiz → video navigation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-14T06:06:18Z

@@ -1,4 +1,4 @@
-import { loginWithGoogle, loginWithEmail } from "@/lib/firebase";
+import { loginWithGoogle, loginWithEmail, isFirebaseConfigured } from "@/lib/firebase";


isFirebaseConfigured is imported from @/lib/firebase but that module doesn't export it, so this file will fail to compile. Either export an isFirebaseConfigured boolean/function from frontend/src/lib/firebase.ts (and call it here if it's a function), or remove this import and adjust the disabled logic accordingly.

Copilot · 2026-04-14T06:06:18Z

      console.error("Google Login Failed", error);
+      const message = error instanceof Error ? error.message : "Failed to sign in with Google. Please try again.";
      setFormErrors({
        ...formErrors,
-        auth: "Failed to sign in with Google. Please try again."
+        auth: message
      });


This uses error.message directly for the user-facing auth error. For Firebase errors this is typically a technical string (e.g. Firebase: Error (auth/...)) and can regress UX compared to a friendly message. Consider mapping known Firebase error codes/messages to user-friendly copy (similar to sendPasswordResetEmail), and falling back to the generic message.

Copilot · 2026-04-14T06:06:18Z

+      size="icon"
+      onClick={onToggle}
+      data-state={visible ? "visible" : "hidden"}
+      aria-label={visible ? `Hide ${label}` : `Show ${label}`}


This toggle button controls a binary state (show/hide). For better screen-reader support, add aria-pressed={visible} (and optionally aria-controls pointing at the associated password input) so assistive tech can announce the current toggle state.

Suggested change

aria-label={visible ? `Hide ${label}` : `Show ${label}`}

aria-label={visible ? `Hide ${label}` : `Show ${label}`}

aria-pressed={visible}

Copilot · 2026-04-14T06:06:19Z

    } catch (error) {
      console.error("Google Login Failed", error);
      setFormErrors({
        ...formErrors,
-        auth: "Failed to sign in with Google. Please try again."
+        auth: error instanceof Error ? error.message : "Failed to sign in with Google. Please try again."
      });


This sets the auth error to error.message directly, which for Firebase errors is usually a technical string (e.g. Firebase: Error (auth/...)) and may not be appropriate for end users. Consider translating known Firebase error codes/messages into friendly copy and falling back to the generic message.

Copilot · 2026-04-14T06:06:19Z

+  if (fallbackApiCalls.length > 0) {
+    console.log('Unhandled mock API calls:', fallbackApiCalls.join(', '));
+  }


The test tracks fallbackApiCalls (unhandled API requests) but only logs them; it still passes even if the UI makes unexpected backend calls, which reduces the value of a “full mocks only” test. Consider asserting fallbackApiCalls is empty (or fulfilling unhandled API calls with a failing status) so the test fails when mocks are incomplete.

Suggested change

if (fallbackApiCalls.length > 0) {

console.log('Unhandled mock API calls:', fallbackApiCalls.join(', '));

}

expect(

fallbackApiCalls,

`Unhandled mock API calls: ${fallbackApiCalls.join(', ')}`

).toEqual([]);

feat(auth): add password toggle and mocked e2e return-to-video test

ebca97a

Copilot AI review requested due to automatic review settings April 14, 2026 06:01

github-actions Bot added the frontend Changes to the frontend of the project label Apr 14, 2026

Copilot started reviewing on behalf of Kishore-16 April 14, 2026 06:02 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

MeenakshiArunsankar force-pushed the main branch from 75927d6 to d3b3e7f Compare April 27, 2026 04:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(auth, learning): password toggle (#591) and return-to-video from quiz (#561) with e2e test#941

feat(auth, learning): password toggle (#591) and return-to-video from quiz (#561) with e2e test#941
Kishore-16 wants to merge 1 commit into
vicharanashala:mainfrom
Kishore-16:feat/password-toggle-and-test-script

Kishore-16 commented Apr 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -1,4 +1,4 @@
		import { loginWithGoogle, loginWithEmail } from "@/lib/firebase";
		import { loginWithGoogle, loginWithEmail, isFirebaseConfigured } from "@/lib/firebase";

	aria-label={visible ? `Hide ${label}` : `Show ${label}`}
	aria-label={visible ? `Hide ${label}` : `Show ${label}`}
	aria-pressed={visible}

-  if (fallbackApiCalls.length > 0) {
-    console.log('Unhandled mock API calls:', fallbackApiCalls.join(', '));
-  }
+  expect(
+    fallbackApiCalls,
+    `Unhandled mock API calls: ${fallbackApiCalls.join(', ')}`
+  ).toEqual([]);

Uh oh!

Conversation

Kishore-16 commented Apr 14, 2026

Summary

What Changed

Why

Scope

Files Included

Validation

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants