Add login page

2025-12-06 15:15:37 +01:00 · 2025-01-11 23:19:49 +01:00
parent 6327aa4c0f
commit 72b8b39eb0
8 changed files with 142 additions and 7 deletions
--- a/src/modules/web_app/frontend/index.css
+++ b/src/modules/web_app/frontend/index.css
@@ -0,0 +1,16 @@
+.authorize__container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+a.authorize__twitch_btn {
+    display: inline-block;
+    background-color: #6441a5;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-size: 1.5rem;
+}
--- a/src/modules/web_app/frontend/index.html
+++ b/src/modules/web_app/frontend/index.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+    <title>Web App</title>
+    <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+    <script type="importmap">
+        {
+          "imports": {
+            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js",
+            "vue-router": "https://unpkg.com/vue-router@4.5.0/dist/vue-router.esm-browser.prod.js"
+          }
+        }
+    </script>
+
+    <div id="app"></div>
+
+    <script type="module" src="/index.js"></script>
+</body>
+</html>
--- a/src/modules/web_app/frontend/index.js
+++ b/src/modules/web_app/frontend/index.js
@@ -0,0 +1,97 @@
+import { createApp, ref, onMounted } from 'vue';
+import { createRouter, createWebHistory, RouterView } from 'vue-router';
+
+
+const Authorize = {
+    setup() {
+        const loginLink = ref(null);
+
+        onMounted(() => {
+            fetch('/api/auth/get_authorization_url/twitch/')
+                .then(response => response.json())
+                .then(data => {
+                    loginLink.value = data.authorization_url;
+                })
+        });
+
+        return {
+            loginLink
+        }
+    },
+    template: `
+        <div class="authorize__container">
+            <a v-if="loginLink" :href="loginLink" class="authorize__twitch_btn">Login with Twitch</a>
+            <div v-else>Loading...</div>
+        </div>
+    `
+}
+
+
+const Settings = {
+    template: `
+        <div>Settings</div>
+    `
+}
+
+
+const Main = {
+    components: {
+        Authorize,
+        Settings
+    },
+    setup() {
+        const authorized = localStorage.getItem('token') !== null;
+
+        return {
+            authorized
+        };
+    },
+    template: `
+        <div>
+            <Settings v-if="authorized" />
+            <Authorize v-else />
+        </div>
+    `
+};
+
+
+const AuthCallbackTwitch = {
+    setup() {
+        onMounted(() => {
+            fetch('/api/auth/callback/twitch/' + urlParams.search)
+                .then(response => response.json())
+                .then(data => {
+                    localStorage.setItem('token', data.token);
+
+                    this.$router.push('/');
+                });
+        });
+    },
+    template: `
+        <div>AuthCallbackTwitch</div>
+    `
+};
+
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        { path: '', component: Main },
+        { path: '/auth/callback/twitch/', component: AuthCallbackTwitch },
+    ]
+});
+
+
+const App = {
+    components: {
+        RouterView,
+    },
+    template: `
+        <RouterView />
+    `,
+};
+
+
+createApp(App)
+    .use(router)
+    .mount('#app');
--- a/src/modules/web_app/views/auth.py
+++ b/src/modules/web_app/views/auth.py
@@ -9,7 +9,7 @@ from modules.web_app.auth.authx import auth
 from repositories.users import UserRepository


-auth_router = APIRouter(prefix="/auth", tags=["auth"])
+auth_router = APIRouter(prefix="/api/auth", tags=["auth"])


@auth_router.get("/get_authorization_url/{provider}/")
--- a/src/modules/web_app/views/streamer.py
+++ b/src/modules/web_app/views/streamer.py
@@ -8,7 +8,7 @@ from repositories.users import UserRepository
 from domain.auth import OAuthProvider


-streamer_router = APIRouter(prefix="/streamers")
+streamer_router = APIRouter(prefix="/api/streamers")


@streamer_router.get("/")