Skip to content

Commit e09b559

Browse files
atyrodeatyrode
authored
feat: create Modal component (#27)
* refactor: restructure AuthModal and introduce Modal component - Refactored AuthModal to utilize a new Modal component for improved code organization and reusability. - Consolidated styles by importing Modal.scss into AuthModal.scss, reducing redundancy. - Updated class names in AuthModal to follow BEM methodology for better clarity and maintainability. * refactor: simplify popup-close.html by removing unnecessary styles and timeout - Removed inline styles and the message div for a cleaner HTML structure. - Streamlined the window closing logic by directly calling window.close() without a delay. * feat: enhance AuthModal with exit animations and state management - Introduced state management for modal visibility and exit animations in AuthGate. - Updated AuthModal to accept new props for exit animation handling. - Refactored Modal component to apply animations via inline styles, improving flexibility. - Added new keyframes for fade-out and zoom-out animations to enhance user experience. * fix: update Docker build workflow to conditionally set platforms based on branch - Modified the platforms setting in the Docker build workflow to conditionally include ARM64 support only when on the main branch, enhancing build efficiency and flexibility.
1 parent d3db9aa commit e09b559

File tree

7 files changed

+403
-288
lines changed

7 files changed

+403
-288
lines changed

‎.github/workflows/docker-build.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ jobs:
5353
with:
5454
context: .
5555
push: ${{ github.event_name != 'pull_request' }}
56-
platforms: linux/amd64,linux/arm64
56+
platforms: ${{ github.ref == 'refs/heads/main' && 'linux/amd64,linux/arm64' || 'linux/amd64' }}
5757
tags: ${{ steps.meta.outputs.tags }}
5858
labels: ${{ steps.meta.outputs.labels }}
5959
cache-from: type=gha

‎src/frontend/public/auth/popup-close.html‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,11 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Authentication Complete</title>
6-
<style>
7-
body {
8-
background: #18181b;
9-
color: #fff;
10-
font-family: sans-serif;
11-
display: flex;
12-
flex-direction: column;
13-
align-items: center;
14-
justify-content: center;
15-
height: 100vh;
16-
margin: 0;
17-
}
18-
.message {
19-
margin-bottom: 2rem;
20-
font-size: 1.2rem;
21-
}
22-
</style>
236
</head>
247
<body>
25-
<div class="message">Authentication complete! You may close this window.</div>
268
<script>
279
localStorage.setItem('auth_completed', Date.now().toString());
28-
// Close the window after a short delay to ensure message is sent
29-
setTimeout(() => {
30-
window.close();
31-
}, 100);
10+
window.close()
3211
</script>
3312
</body>
3413
</html>

‎src/frontend/src/AuthGate.tsx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,37 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
5050
// eslint-disable-next-line react-hooks/exhaustive-deps
5151
}, [isAuthenticated, coderAuthDone]);
5252

53+
// State to control modal visibility and exit animation
54+
const [showAuthModal, setShowAuthModal] = useState(false);
55+
const [isExiting, setIsExiting] = useState(false);
56+
57+
// Update showAuthModal when authentication status changes
58+
useEffect(() => {
59+
if (isAuthenticated === false) {
60+
setShowAuthModal(true);
61+
setIsExiting(false);
62+
} else if (isAuthenticated === true && showAuthModal) {
63+
// Start exit animation when user becomes authenticated
64+
setIsExiting(true);
65+
// Modal will be removed after animation completes via onExitComplete
66+
}
67+
}, [isAuthenticated, showAuthModal]);
68+
69+
// Handle exit animation completion
70+
const handleExitComplete = () => {
71+
setShowAuthModal(false);
72+
};
73+
5374
// Always render children; overlay AuthModal if not authenticated
5475
return (
5576
<>
5677
{children}
57-
{isAuthenticated === false && <AuthModal />}
78+
{showAuthModal && (
79+
<AuthModal
80+
isExiting={isExiting}
81+
onExitComplete={handleExitComplete}
82+
/>
83+
)}
5884
</>
5985
);
6086
}

0 commit comments

Comments
 (0)