start adding showcase screen

MusicPlayerV2-GUI/src/views/HomeView.vue

@@ -1,19 +1,70 @@
 <template>
     <div class="home-view">
         <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
-        <button @click="login()" class="fancy-button">Log in / Sign up</button>
+        <button :class="'fancy-button' + ( isTryingToSignIn ? ' fancy-button-inactive' : '' )" @click="login()" 
+            style="margin-top: 5vh;" title="Sign in or sign up with janishutz.com ID" v-if="status"
+            >{{ isTryingToSignIn ? 'Signing you in...' : 'Login / Sign up' }}</button>
+        <p v-else>We are sorry, but we were unable to initialize the login services. Please reload the page if you wish to retry!</p>
         <p>MusicPlayer is a browser based Music Player, that allows you to connect other devices, simply with another web-browser, where you can see the current playlist with sleek animations. You can log in using your Apple Music account or load a playlist from your local disk, simply by selecting the songs using a file picker.</p>
+        <notificationsModule ref="notifications" location="bottomleft" size="bigger"></notificationsModule>
     </div>
 </template>
 
 <script setup lang="ts">
-import router from '@/router';
+    import router from '@/router';
+    import { useUserStore } from '@/stores/userStore';
+    import notificationsModule from '@/components/notificationsModule.vue';
+    import { ref } from 'vue';
+
+    const notifications = ref( notificationsModule );
+    const isTryingToSignIn = ref( true );
+
+    interface JanishutzIDSDK {
+        setLoginSDKURL: ( url: string ) => undefined;
+        createSession: () => undefined;
+        verifySession: () => Promise<JHIDSessionStatus>
+    }
+
+    interface JHIDSessionStatus {
+        status: boolean;
+        username: string;
+    }
+
+    let sdk: JanishutzIDSDK;
+    const status = ref( true );
+
+    if ( typeof( JanishutzID ) !== 'undefined' ) {   
+        sdk = JanishutzID();
+        sdk.setLoginSDKURL( localStorage.getItem( 'url' ) ?? '' );
+    } else {
+        setTimeout( () => {
+            notifications.value.createNotification( 'Unable to initialize account services!', 5, 'error' );
+        }, 1000 );
+        status.value = false;
+    }
 
     const login = () => {
-        alert( 'Logging in...' );
-        // TODO: Actually implement with sdk, then check if user has subscription for product, if so, have them proceed to /app
-        // else: proceed to /purchase where they get linked to https://store.janishutz.com/product/com.janishutz.MusicPlayer
-        router.push( '/app' );
+        sdk.createSession();
+    }
+
+    const store = useUserStore();
+
+    if ( store.isUserAuth ) {
+        router.push( localStorage.getItem( 'redirect' ) ?? '/app' );
+        localStorage.removeItem( 'redirect' );
+    } else {
+        if ( typeof( sdk ) !== 'undefined' ) {
+            sdk.verifySession().then( res => {
+                if ( res.status ) {
+                    store.isUserAuth = true;
+                    store.username = res.username;
+                    router.push( localStorage.getItem( 'redirect' ) ?? '/app' );
+                    localStorage.removeItem( 'redirect' );
+                } else {
+                    isTryingToSignIn.value = false;
+                }
+            } );
+        }
     }
 </script>