feat: song editor

web/src/views/StartPage.vue

@@ -1,36 +1,44 @@
 <script setup lang="ts">
-    import SortableList from '@/components/SortableList.vue';
     import {
+        onMounted,
         ref
     } from 'vue';
+    import router from '@/router';
+    import sdk from '@janishutz/login-sdk-browser';
+    import {
+        useAuthStore
+    } from '@/stores/authstore';
 
-    const items = ref( [
-        'test',
-        'test2',
-        'test3',
-        'test4',
-        'test5',
-        'test6',
-        'test7',
-        'test8',
-        'test9',
-        'test10'
-    ] );
+    const isLoggingIn = ref( true );
+    const store = useAuthStore();
+
+    sdk.setUp( 'jh-music', 'http://localhost:8080', '/app' );
+
+    onMounted( async () => {
+        store.isAuth = await sdk.verify();
+
+        if ( store.isAuth )
+            router.push( '/app' );
+
+        isLoggingIn.value = false;
+
+        // TODO: Logout button
+    } );
+
+    const login = () => {
+        if ( isLoggingIn.value ) return;
+
+        isLoggingIn.value = true;
+        sdk.login();
+        isLoggingIn.value = false;
+    };
 </script>
 
 <template>
     <div>
         <h1>MusicPlayer</h1>
-        <div class="test">
-            <SortableList v-slot="{ item, index }" v-model="items">
-                {{ item }} at {{ index }}
-            </SortableList>
-        </div>
+        <button :class="['fancy-button', isLoggingIn ? 'fancy-button-inactive' : undefined]" @click="login">
+            Log In
+        </button>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.test {
-    height: 150px;
-}
-</style>