Skip to content

Commit

Permalink
Fix Sign Ins
Browse files Browse the repository at this point in the history
  • Loading branch information
@mythz
mythz committed Oct 16, 2024
1 parent 4fdf7b1 commit 3aae10a
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 199 deletions.
31 changes: 14 additions & 17 deletions AiServer/wwwroot/Ui.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ref, computed, inject, onMounted, shallowRef, watch, nextTick } from "vue"
import { humanify } from "@servicestack/client"
import { useClient, useAuth } from "@servicestack/vue"
import { Authenticate } from "dtos"

import SignIn from "/mjs/components/SignIn.mjs"
import Chat from "/mjs/components/Chat.mjs"
import TextToImage from "/mjs/components/TextToImage.mjs"
import ImageToText from "/mjs/components/ImageToText.mjs"
Expand All @@ -12,6 +12,7 @@ import SpeechToText from "/mjs/components/SpeechToText.mjs"
import TextToSpeech from "/mjs/components/TextToSpeech.mjs"
import Transform from "/mjs/components/Transform.mjs"
import UiHome from "/mjs/components/UiHome.mjs"
import SignInForm from "/mjs/components/SignInForm.mjs"
import { prefixes, icons, uiLabel } from "/mjs/utils.mjs"

const HomeSection = {
Expand All @@ -33,6 +34,8 @@ const components = {

export default {
components: {
SignIn,
SignInForm,
...components,
},
template: `
Expand All @@ -59,29 +62,21 @@ export default {
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<!-- Profile dropdown -->
<div class="relative ml-3">
<div v-if="user" class="relative ml-3">
<div>
<button @click="showUserMenu=!showUserMenu" type="button" class="relative flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" :src="profileUrl" alt="">
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-200"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div v-if="showUserMenu" class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="/auth/logout?redirect=/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
<div v-else>
<SecondaryButton @click="routes.to({ admin:'SignIn' })">Sign In</SecondaryButton>
</div>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<!-- Mobile menu button -->
Expand All @@ -102,7 +97,7 @@ export default {
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden" id="mobile-menu">
<div v-if="user" class="sm:hidden" id="mobile-menu">
<div class="space-y-1 pb-3 pt-2">
<!-- Current: "border-indigo-500 bg-indigo-50 text-indigo-700", Default: "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800" -->
<a v-href="{admin:section.id,id:undefined}" v-for="section in sections"
Expand All @@ -113,7 +108,7 @@ export default {
</a>
<a href="/auth/logout?redirect=/" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800" tabindex="-1">Sign out</a>
</div>
<div class="border-t border-gray-200 pb-3 pt-4">
<div v-if="user" class="border-t border-gray-200 pb-3 pt-4">
<div class="flex items-center px-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" :src="profileUrl" alt="">
Expand All @@ -133,7 +128,9 @@ export default {
<div class="pb-10">
<main>
<div class="mx-auto max-w-7xl pb-8 lg:px-6 lg:px-8">
<component :key="refreshKey" :is="activeSection.component"></component>
<SignIn v-if="routes.admin=='SignIn'" />
<SignInForm v-else-if="routes.admin && !user" />
<component v-else :key="refreshKey" :is="activeSection.component"></component>
</div>
</main>
</div>
Expand Down Expand Up @@ -192,7 +189,7 @@ export default {
signIn(api.response)
} else if (api.error) {
signOut()
location.reload()
// location.reload()
}

console.log('routes.admin', routes.admin)
Expand Down
2 changes: 1 addition & 1 deletion AiServer/wwwroot/img/overview.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
177 changes: 4 additions & 173 deletions AiServer/wwwroot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,181 +26,13 @@
</head>
<body class="h-full">
<div id="app">
<ui v-if="user"></ui>
<div v-else-if="loaded" v-cloak class="relative isolate px-6 pt-14 lg:px-8">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>

<div>

<div class="relative mb-8 mt-8 sm:mt-16 lg:mt-32">
<div class="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-base font-semibold uppercase tracking-wider text-indigo-600">AI Server</h2>
<p class="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
Managed AI Features Server
</p>
<p class="mx-auto mt-5 max-w-prose text-xl text-gray-500">
Enable AI Features in your Systems and Apps
</p>
<div class="">

<div class="py-12">
<h3 class="my-8 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
Sign In
</h3>
<p class="mx-auto mt-5 max-w-prose text-xl text-gray-500">
Sign In to use AI Server features
</p>
<sign-in-form></sign-in-form>
</div>

<h3 class="mt-12 mb-3 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
Explore
</h3>
<p class="mx-auto mb-5 max-w-prose text-xl text-gray-500">
Learn about available APIs and Features
</p>

<div class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-gray-200 shadow sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0">
<div class="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500">
<div>
<span class="inline-flex rounded-lg bg-sky-50 p-3 text-sky-700 ring-4 ring-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
<path d="M11 14h1v4h1" />
<path d="M12 11h.01" />
</svg>
</span>
</div>
<div class="mt-8">
<h3 class="text-base font-semibold leading-6 text-gray-900">
<a href="https://docs.servicestack.net/ai-server" class="focus:outline-none">
<span class="absolute inset-0" aria-hidden="true"></span>
AI Server Documentation
</a>
</h3>
<p class="mt-2 text-sm text-gray-500">Read details about how to configure and use AI Server.</p>
</div>
<span class="pointer-events-none absolute right-6 top-6 text-gray-300 group-hover:text-gray-400" aria-hidden="true">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"/>
</svg>
</span>
</div>

<div class="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 sm:rounded-tr-lg">
<div>
<span class="inline-flex rounded-lg bg-purple-50 p-3 text-purple-700 ring-4 ring-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"/>
</svg>
</span>
</div>
<div class="mt-8">
<h3 class="text-base font-semibold leading-6 text-gray-900">
<a href="/ui" class="focus:outline-none">
<span class="absolute inset-0" aria-hidden="true"></span>
API Explorer
</a>
</h3>
<p class="mt-2 text-sm text-gray-500">Explore available APIs via the API Explorer</p>
</div>
<span class="pointer-events-none absolute right-6 top-6 text-gray-300 group-hover:text-gray-400" aria-hidden="true">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"/>
</svg>
</span>
</div>
</div>

<h3 class="mt-12 mb-3 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
Admin
</h3>
<p class="mx-auto mb-5 max-w-prose text-xl text-gray-500">
Manage AI and Media Providers and other Admin Tasks
</p>

<div class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-gray-200 shadow sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0">

<div class="group relative rounded-tl-lg rounded-tr-lg bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 sm:rounded-tr-none">
<div>
<span class="inline-flex rounded-lg bg-teal-50 p-3 text-teal-700 ring-4 ring-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</span>
</div>
<div class="mt-8">
<h3 class="text-base font-semibold leading-6 text-gray-900">
<a href="/admin/" class="focus:outline-none">
<span class="absolute inset-0" aria-hidden="true"></span>
Admin Portal
</a>
</h3>
<p class="mt-2 text-sm text-gray-500">
Admin Users can manage this AI Server instance via the Admin Portal
</p>
</div>
<span class="pointer-events-none absolute right-6 top-6 text-gray-300 group-hover:text-gray-400" aria-hidden="true">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"/>
</svg>
</span>
</div>

<div class="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500">
<div>
<span class="inline-flex rounded-lg bg-yellow-50 p-3 text-yellow-700 ring-4 ring-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/>
</svg>
</span>
</div>
<div class="mt-8">
<h3 class="text-base font-semibold leading-6 text-gray-900">
<a href="/admin-ui" class="focus:outline-none">
<span class="absolute inset-0" aria-hidden="true"></span>
Admin UI
</a>
</h3>
<p class="mt-2 text-sm text-gray-500">
Manage API Keys, View Databases, Executed Commands and more with the Admin UI
</p>
</div>
<span class="pointer-events-none absolute right-6 top-6 text-gray-300 group-hover:text-gray-400" aria-hidden="true">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"/>
</svg>
</span>
</div>
</div>

</div>
</div>
</div>

</div>

<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true">
<div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
</div>
<ui></ui>
</div>


<script type="module">
import { ref, computed, inject, onMounted, shallowRef, watch, reactive } from "vue"
import { App, usePageRoutes, useBreakpoints, setBodyClass, sortOps } from "core"
import { JsonServiceClient, leftPart, humanize, humanify } from "@servicestack/client"
import { ref, onMounted, reactive } from "vue"
import { App, usePageRoutes } from "core"
import { JsonServiceClient } from "@servicestack/client"
import ServiceStackVue, { useClient, useAuth } from "@servicestack/vue"
import { Authenticate } from "dtos"
import Ui from "./Ui.mjs"
Expand Down Expand Up @@ -250,7 +82,6 @@ <h3 class="text-base font-semibold leading-6 text-gray-900">

app.provides({ client, events, routes, store, })


app.build(AppComponent).mount('#app')
app.start()
</script>
Expand Down
16 changes: 16 additions & 0 deletions AiServer/wwwroot/mjs/components/SignIn.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { inject } from "vue"
import SignInForm from "./SignInForm.mjs"

export default {
components: {
SignInForm,
},
template:`
<sign-in-form @done="routes.to({ admin:undefined })"></sign-in-form>
`,
setup() {
const routes = inject('routes')

return { routes }
}
}
4 changes: 3 additions & 1 deletion AiServer/wwwroot/mjs/components/SignInForm.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ export default {
</div>
</div>
`,
setup() {
emits:['done'],
setup(props, { emit }) {
const client = useClient()
const { user, signIn } = useAuth()

Expand All @@ -45,6 +46,7 @@ export default {
// api = await client.api(new Authenticate())
if (api.response) {
signIn(api.response)
emit('done')
}
}
}
Expand Down
Loading

0 comments on commit 3aae10a

Please sign in to comment.