Add support for auto signing in custom Admin UI

Author: mythz

MyApp/Components/Pages/Home.razor

@@ -11,17 +11,23 @@
         <p class="mx-auto mt-3 max-w-md text-base text-gray-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
             Welcome to your new Blazor Vue App, checkout links below to get started:
         </p>
-        <div class="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
+        <div class="mx-auto mt-5 sm:flex sm:justify-center md:mt-8">
             <div class="rounded-md shadow">
-                <a href="https://blazor-gallery.servicestack.net/" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 md:py-4 md:px-10 md:text-lg">
+                <a href="/admin/?user=admin@email.com&pass=p@55wOrd" class="flex w-full items-center justify-center rounded-md border border-transparent bg-white dark:bg-gray-800 dark:border-gray-600 px-8 py-3 text-base font-medium text-indigo-600 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 md:py-4 md:px-10 md:text-lg">
+                    Admin UI
+                </a>
+            </div>
+            <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+                <a href="https://blazor-gallery.servicestack.net/" class="flex w-full items-center justify-center rounded-md border border-transparent bg-purple-600 px-8 py-3 text-base font-medium text-white hover:bg-purple-700 md:py-4 md:px-10 md:text-lg">
                     Blazor Gallery
                 </a>
             </div>
             <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-                <a href="https://docs.servicestack.net/vue/" class="flex w-full items-center justify-center rounded-md border border-transparent bg-white dark:bg-gray-800 dark:border-gray-600 px-8 py-3 text-base font-medium text-indigo-600 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 md:py-4 md:px-10 md:text-lg">
+                <a href="https://docs.servicestack.net/vue/" class="flex w-full items-center justify-center rounded-md border border-transparent bg-green-600 px-8 py-3 text-base font-medium text-white hover:bg-green-700 md:py-4 md:px-10 md:text-lg">
                     Vue Gallery
                 </a>
             </div>
+            
         </div>
     </div>
 </div>

MyApp/wwwroot/admin/index.html

@@ -58,7 +58,9 @@
     </sidebar-layout>
     <main class="lg:pl-72">
         <div v-if="init" class="px-4 sm:px-6 lg:px-8">
-            <sign-in v-if="!user"></sign-in>
+            <div v-if="!user">
+                <sign-in></sign-in>
+            </div>
             <div v-else>
                 <h1 class="hidden lg:block pt-4 mb-2 text-3xl font-bold leading-tight tracking-tight text-gray-900">{{ activeSection.title }}</h1>
                 <component :key="refreshKey" :is="activeSection.component" @nav="navTo" :type="activeSection.type"></component>
@@ -69,7 +71,7 @@ <h1 class="hidden lg:block pt-4 mb-2 text-3xl font-bold leading-tight tracking-t
 
 <script type="module">
 import { createApp, ref, onMounted, shallowRef } from "vue"
-import { JsonApiClient, leftPart, rightPart, appendQueryString, humanize } from "@servicestack/client"
+import { JsonApiClient, leftPart, rightPart, appendQueryString, humanize, queryString } from "@servicestack/client"
 import ServiceStackVue, { useClient, useAuth, useMetadata } from "@servicestack/vue"
 import { Authenticate, AdminData } from "dtos.mjs"
 import * as Sections from "./sections/index.mjs"
@@ -167,10 +169,28 @@ <h2 class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tigh
             window.addEventListener('popstate', event => {
                 navTo(event.state?.section || getSection(), {}, false)
             })
+            
+            // Auto Sign In ?user=...&pass=...
+            if (location.search) {
+                const q = queryString(location.search)
+                if (q.user && q.pass) {
+                    const api = await client.api(new Authenticate({
+                        provider: 'credentials',
+                        userName: q.user,
+                        password: q.pass,
+                    }))
+                    if (api.succeeded) {
+                        signIn(api.response)
+                        history.replaceState({}, null, leftPart(location.href, '?'))
+                    }
+                }
+            }
 
-            const api = await client.api(new Authenticate())
-            if (api.succeeded) {
-                signIn(api.response)
+            if (!user.value) {
+                const api = await client.api(new Authenticate())
+                if (api.succeeded) {
+                    signIn(api.response)
+                }
             }
             init.value = true
         })