add login refresh flow

ParadoxZero · Aug 13, 2024 · c459f56 · c459f56
1 parent b927c23
commit c459f56
Showing 1 changed file with 48 additions and 15 deletions.
diff --git a/ui/login.tsx b/ui/login.tsx
@@ -22,30 +22,63 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import './main.css'
-import { Button, Card, Flex, Typography } from 'antd'
-import { GithubOutlined, GoogleOutlined } from '@ant-design/icons'
+import { Button, Card, Flex, Spin, Typography } from 'antd'
+import { GithubOutlined, GoogleOutlined, Loading3QuartersOutlined, LoadingOutlined } from '@ant-design/icons'
 
 
-class App extends React.Component {
+interface AppState {
+    is_loading: boolean;
+}
+class App extends React.Component<{}, AppState> {
+    constructor(props: {}) {
+        super(props)
+        this.state = {
+            is_loading: true
+        }
+    }
+
+    componentDidMount(): void {
+        fetch('/.auth/refresh').then((response) => {
+            if (response.ok) {
+                window.location.href = '/index.html'
+            }
+        }).finally(() => {
+            this.setState({ is_loading: false })
+        });
+    }
+
+    renderCallToAction() {
+        if (this.state.is_loading) {
+            return (
+                <Spin size='large' indicator={<LoadingOutlined />} />
+            )
+        } else {
+            (
+                <>
+                    <Button type='primary'
+                        style={{ backgroundColor: '#f5222d' }}
+                        href='.auth/login/google?post_login_redirect_uri=/index.html&access_type=offline'
+                        size='large' block icon={<GoogleOutlined />}>
+                        Login With Google
+                    </Button>
+                    <Button type='primary'
+                        style={{ backgroundColor: '#262626' }}
+                        href='.auth/login/github?post_login_redirect_uri=/index.html'
+                        size='large' block icon={<GithubOutlined />}>
+                        Login With Github
+                    </Button>
+                </>
+            )
+        }
+    }
     render(): React.ReactNode {
         return (
             <>
                 <Flex vertical style={{ height: '100vh', width: '100vw', backgroundColor: '#fafafa' }} align='center' justify='center'>
                     <Card bordered style={{ width: 300 }} hoverable>
                         <Flex justify='center' align='center' vertical gap={20}>
                             <Typography.Title level={1}>BudgetBud</Typography.Title>
-                            <Button type='primary'
-                                style={{ backgroundColor: '#f5222d' }}
-                                href='.auth/login/google?post_login_redirect_uri=/index.html'
-                                size='large' block icon={<GoogleOutlined />}>
-                                Login With Google
-                            </Button>
-                            <Button type='primary'
-                                style={{ backgroundColor: '#262626' }}
-                                href='.auth/login/github?post_login_redirect_uri=/index.html'
-                                size='large' block icon={<GithubOutlined />}>
-                                Login With Github
-                            </Button>
+                            {this.renderCallToAction()}
                         </Flex>
                     </Card >
                 </Flex>