diff --git a/recipes/vue-vite/src/App.vue b/recipes/vue-vite/src/App.vue index 47d86f9e..85e026b8 100644 --- a/recipes/vue-vite/src/App.vue +++ b/recipes/vue-vite/src/App.vue @@ -23,67 +23,3 @@ import { RouterView } from 'vue-router' - - diff --git a/recipes/vue-vite/src/assets/asgardeo.svg b/recipes/vue-vite/src/assets/asgardeo.svg new file mode 100644 index 00000000..0ddce269 --- /dev/null +++ b/recipes/vue-vite/src/assets/asgardeo.svg @@ -0,0 +1,32 @@ + + + + + + + + + diff --git a/recipes/vue-vite/src/assets/base.css b/recipes/vue-vite/src/assets/base.css deleted file mode 100644 index 9699aec2..00000000 --- a/recipes/vue-vite/src/assets/base.css +++ /dev/null @@ -1,104 +0,0 @@ -/** - * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com). - * - * WSO2 LLC. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/recipes/vue-vite/src/assets/logo.svg b/recipes/vue-vite/src/assets/logo.svg index 4b65f2b7..75656603 100644 --- a/recipes/vue-vite/src/assets/logo.svg +++ b/recipes/vue-vite/src/assets/logo.svg @@ -1,33 +1 @@ -<<<<<<< HEAD - - - - - - - - - - - - - - - -======= ->>>>>>> sdkcode diff --git a/recipes/vue-vite/src/assets/main.css b/recipes/vue-vite/src/assets/main.css index 36fb845b..fbf6c254 100644 --- a/recipes/vue-vite/src/assets/main.css +++ b/recipes/vue-vite/src/assets/main.css @@ -1,35 +1,48 @@ -@import './base.css'; +/* General Styles */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; +/* Logo Styles */ +.logo { + width: 100px; + margin: 10px; } -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; +/* Button Styles */ +button { + padding: 10px 15px; + font-size: 16px; + cursor: pointer; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + transition: background-color 0.3s; } -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } +button:hover { + background-color: #0056b3; } -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } +/* Container Styles */ +.button-container { + margin-top: 20px; +} - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } +/* Center Content */ +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } diff --git a/recipes/vue-vite/src/components/SignInBtn.vue b/recipes/vue-vite/src/components/SignInBtn.vue new file mode 100644 index 00000000..90c08db6 --- /dev/null +++ b/recipes/vue-vite/src/components/SignInBtn.vue @@ -0,0 +1,11 @@ + + + diff --git a/recipes/vue-vite/src/main.ts b/recipes/vue-vite/src/main.ts index d64415f9..063a802b 100644 --- a/recipes/vue-vite/src/main.ts +++ b/recipes/vue-vite/src/main.ts @@ -28,7 +28,6 @@ const app: VueApp = createApp(App) const config: AuthVueConfig = { baseUrl: import.meta.env.VITE_ASGARDEO_BASE_URL, clientID: import.meta.env.VITE_ASGARDEO_CLIENT_ID, - disableTrySignInSilently: false, scope: ['openid', 'profile', 'email'], signInRedirectURL: import.meta.env.VITE_ASGARDEO_SIGN_IN_REDIRECT_URL, signOutRedirectURL: import.meta.env.VITE_ASGARDEO_SIGN_OUT_REDIRECT_URL, diff --git a/recipes/vue-vite/src/router/index.ts b/recipes/vue-vite/src/router/index.ts index 99120df4..22e5bed1 100644 --- a/recipes/vue-vite/src/router/index.ts +++ b/recipes/vue-vite/src/router/index.ts @@ -16,50 +16,69 @@ * under the License. */ -import { useAsgardeo } from '@asgardeo/vue' -import { - createRouter, - createWebHistory, - type RouteLocationNormalized, - type NavigationGuardNext, - type Router, -} from 'vue-router' +import { useAsgardeo, type AuthStateInterface } from '@asgardeo/vue' +import { watch } from 'vue' +import { createRouter, createWebHistory, type Router } from 'vue-router' import HomeView from '../views/HomeView.vue' +import LandingView from '@/views/LandingView.vue' -const AboutView = (): Promise => - import('../views/AboutView.vue') +/** + * Wait for Asgardeo loading state to complete before proceeding + * @param state - The Asgardeo state containing isLoading property + * @returns A promise that resolves when loading is complete + */ +async function waitForAsgardeoLoaded(state: AuthStateInterface): Promise { + return new Promise((resolve: () => void) => { + // If already not loading, resolve immediately + if (!state.isLoading) { + resolve() + return + } + + // Watch for changes in loading state + const unwatch: () => void = watch( + () => state.isLoading, + (isLoading: boolean) => { + if (!isLoading) { + unwatch() + resolve() + } + }, + ) + }) +} const router: Router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { - component: HomeView, - name: 'home', + component: LandingView, + name: 'landing', path: '/', }, { - beforeEnter: ( - to: RouteLocationNormalized, - from: RouteLocationNormalized, - next: NavigationGuardNext, - ): void => { - const { isAuthenticated } = useAsgardeo() + beforeEnter: async (): Promise => { + const { state, isAuthenticated, signIn } = useAsgardeo() + + // Wait for loading to complete if still in progress + if (state.isLoading) { + await waitForAsgardeoLoaded(state) + } - isAuthenticated() - .then((auth: boolean) => { - if (auth) { - next() - } else { - next('/') - } - }) - .catch(() => { - next('/') - }) + try { + const auth: boolean = await isAuthenticated() + if (!auth) { + await signIn() + return false // Prevent navigation until sign-in completes + } + return true + } catch { + return false // Prevent navigation on error + } }, - component: AboutView, - name: 'about', - path: '/about', + component: HomeView, + name: 'home', + path: '/home', }, ], }) diff --git a/recipes/vue-vite/src/views/AboutView.vue b/recipes/vue-vite/src/shims-vue.d.ts similarity index 74% rename from recipes/vue-vite/src/views/AboutView.vue rename to recipes/vue-vite/src/shims-vue.d.ts index 092be08a..6fd65757 100644 --- a/recipes/vue-vite/src/views/AboutView.vue +++ b/recipes/vue-vite/src/shims-vue.d.ts @@ -1,4 +1,4 @@ - + */ - +declare module '*.vue' { + import { DefineComponent } from 'vue' - diff --git a/recipes/vue-vite/src/views/HomeView.vue b/recipes/vue-vite/src/views/HomeView.vue index 493c9907..c16764fb 100644 --- a/recipes/vue-vite/src/views/HomeView.vue +++ b/recipes/vue-vite/src/views/HomeView.vue @@ -1,7 +1,40 @@ - diff --git a/recipes/vue-vite/src/views/LandingView.vue b/recipes/vue-vite/src/views/LandingView.vue new file mode 100644 index 00000000..800dbe2e --- /dev/null +++ b/recipes/vue-vite/src/views/LandingView.vue @@ -0,0 +1,83 @@ + + + + + + +