Skip to content

feat: create Modal component #27

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.

Sign up for GitHub

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

Merged
atyrode merged 4 commits into from
Apr 25, 2025
Merged

feat: create Modal component #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b24656b
refactor: restructure AuthModal and introduce Modal component
atyrode Apr 25, 2025
476d46d
refactor: simplify popup-close.html by removing unnecessary styles an…
atyrode Apr 25, 2025
24cb84b
feat: enhance AuthModal with exit animations and state management
atyrode Apr 25, 2025
35e5759
fix: update Docker build workflow to conditionally set platforms base…
atyrode Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/docker-build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ jobs:
with:
context: .
push: ${{ github.event_name != 'pull_request' }}
platforms: linux/amd64,linux/arm64
platforms: ${{ github.ref == 'refs/heads/main' && 'linux/amd64,linux/arm64' || 'linux/amd64' }}
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
cache-from: type=gha
Expand Down
23 changes: 1 addition & 22 deletions src/frontend/public/auth/popup-close.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,11 @@
<head>
<meta charset="UTF-8" />
<title>Authentication Complete</title>
<style>
body {
background: #18181b;
color: #fff;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.message {
margin-bottom: 2rem;
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="message">Authentication complete! You may close this window.</div>
<script>
localStorage.setItem('auth_completed', Date.now().toString());
// Close the window after a short delay to ensure message is sent
setTimeout(() => {
window.close();
}, 100);
window.close()
</script>
</body>
</html>
28 changes: 27 additions & 1 deletion src/frontend/src/AuthGate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,37 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuthenticated, coderAuthDone]);

// State to control modal visibility and exit animation
const [showAuthModal, setShowAuthModal] = useState(false);
const [isExiting, setIsExiting] = useState(false);

// Update showAuthModal when authentication status changes
useEffect(() => {
if (isAuthenticated === false) {
setShowAuthModal(true);
setIsExiting(false);
} else if (isAuthenticated === true && showAuthModal) {
// Start exit animation when user becomes authenticated
setIsExiting(true);
// Modal will be removed after animation completes via onExitComplete
}
}, [isAuthenticated, showAuthModal]);

// Handle exit animation completion
const handleExitComplete = () => {
setShowAuthModal(false);
};

// Always render children; overlay AuthModal if not authenticated
return (
<>
{children}
{isAuthenticated === false && <AuthModal />}
{showAuthModal && (
<AuthModal
isExiting={isExiting}
onExitComplete={handleExitComplete}
/>
)}
</>
);
}
Loading