Skip to content

window unfocused modal#279

Merged
LOTaher merged 2 commits into
mainfrom
272/alt-tab-detection-modal
Apr 9, 2026
Merged

window unfocused modal#279
LOTaher merged 2 commits into
mainfrom
272/alt-tab-detection-modal

Conversation

@mshvartsberg
Copy link
Copy Markdown
Collaborator

@mshvartsberg mshvartsberg commented Apr 7, 2026

window unfocused modal

Changes

  • WindowUnfocusedModal - modal that comes up when cheating is detected via useWindowUnfocused hook
  • OA assessment page applies this modal and hook
    • When you hit I understand, modal goes away and it returns back to the OA.

Screenshots

Screenshot 2026-04-07 at 7 08 53 PM

Checklist

Please go through all items before requesting reviewers:

  • All commits are tagged with the ticket number
  • No linting errors / newline warnings
  • All code follows repository-configured formatting
  • No merge conflicts
  • All checks passing
  • Screenshots included for UI changes
  • Remove non-applicable sections of this template
  • PR assigned to yourself
  • Reviewers requested & Slack ping sent
  • PR linked to the issue (fill in 'Closes #')
  • If design-related, notify the designer in Slack

Closes

Closes #272

@mshvartsberg mshvartsberg self-assigned this Apr 7, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
sarge Ready Ready Preview, Comment Apr 9, 2026 0:35am

Request Review

const { isConnected } = useHeartbeat(assessment.token ?? null);
const isWindowUnfocused = useWindowUnfocused();
const [isUnfocusedModalOpen, setIsUnfocusedModalOpen] = useState(false);
const isExamActive =
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

can you add another condition making sure isConnected is true too? Don't want modals to overlap.

>
<div className="space-y-3">
<h2
id="window-unfocused-title"
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Any reason why there is an id for this header tag? We can just use tailwind styling?

</h2>
<p className="text-sarge-gray-600 text-sm">The admin has been notified.</p>
</div>
<Button className="h-9 min-w-28 px-5" type="button" onClick={onAcknowledge}>
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Is type="button" necessary here?

return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-white/25 p-4 backdrop-blur-md">
<div
aria-labelledby="window-unfocused-title"
Copy link
Copy Markdown
Collaborator

@LOTaher LOTaher Apr 8, 2026

Choose a reason for hiding this comment

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

I don't think we need these aria fields and role properties on this div?

Copy link
Copy Markdown
Collaborator

@LOTaher LOTaher left a comment

Choose a reason for hiding this comment

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

BANG

@LOTaher LOTaher merged commit e271f70 into main Apr 9, 2026
4 checks passed
cherman23 pushed a commit that referenced this pull request Apr 12, 2026
assessment outro

update outro

update intro

make prettier

[OA][Fullstack] - OA Websockets (#278)

* progress

* modal + handling skeleton and stateful code editor

* prettier

* update tokenschema name

[OA][Fullstack] - OA Websockets - follow up (#278)

window unfocused modal (#279)

* window unfocused modal

* PR fixes

update button
cherman23 pushed a commit that referenced this pull request Apr 12, 2026
assessment outro

update outro

update intro

make prettier

[OA][Fullstack] - OA Websockets (#278)

* progress

* modal + handling skeleton and stateful code editor

* prettier

* update tokenschema name

[OA][Fullstack] - OA Websockets - follow up (#278)

window unfocused modal (#279)

* window unfocused modal

* PR fixes

update button
Anzhuo-W added a commit that referenced this pull request Apr 12, 2026
assessment outro

update outro

update intro

make prettier

[OA][Fullstack] - OA Websockets (#278)

* progress

* modal + handling skeleton and stateful code editor

* prettier

* update tokenschema name

[OA][Fullstack] - OA Websockets - follow up (#278)

window unfocused modal (#279)

* window unfocused modal

* PR fixes

update button
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.

[OA][Frontend] - Adding Cheat Detection Components to OA

2 participants