unify store login/logout behavior across built-in UIs

ServiceStack · Apr 30, 2023 · 0f352fa · 0f352fa
1 parent 4d60980
commit 0f352fa
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 211 deletions.
diff --git a/ServiceStack/src/ServiceStack/modules/admin-ui/index.html b/ServiceStack/src/ServiceStack/modules/admin-ui/index.html
@@ -78,7 +78,7 @@ <h1 class="text-2xl font-semibold text-gray-900">{{store.link.label}}</h1>
             </div>
         </div>
     </div>
-    <sign-in v-else-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="login"></sign-in>
+    <sign-in v-else-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="store.login($event)"></sign-in>
 </div>
 </template>
 <script>
@@ -117,9 +117,6 @@ <h1 class="text-2xl font-semibold text-gray-900">{{store.link.label}}</h1>
         const routes = inject('routes')
         const server = inject('server')
         const showSidebar = ref(true)
-        function login(auth) {
-            globalThis.AUTH = store.auth = auth
-        }
         let sub = null
         let lastOp = null
         onMounted(() => {
@@ -131,7 +128,7 @@ <h1 class="text-2xl font-semibold text-gray-900">{{store.link.label}}</h1>
                 lastOp = args.op
             })
         })
-        return { store, routes, server, showSidebar, login }
+        return { store, routes, server, showSidebar }
     }
 }
 app.build(App).mount('#app')

diff --git a/ServiceStack/src/ServiceStack/modules/admin-ui/lib/app.mjs b/ServiceStack/src/ServiceStack/modules/admin-ui/lib/app.mjs
@@ -246,40 +246,20 @@ let store = {
             }
         })
     },
-    /** @param {any} args */
-    login(args) {
-        let provider = routes.provider || 'credentials'
-        let authProvider = server.plugins.auth.authProviders.find(x => x.name === provider)
-            || server.plugins.auth.authProviders[0]
-        if (!authProvider)
-            throw new Error("!authProvider")
-        let auth = new Authenticate()
+    /** @param {AuthenticateResponse} auth */
+    login(auth) {
+        globalThis.AUTH = this.auth = auth
         AppData.bearerToken = AppData.authsecret = null
-        if (authProvider.type === 'Bearer') {
-            AppData.bearerToken = client.bearerToken = (args['BearerToken'] || '').trim()
-        } else if (authProvider.type === 'authsecret') {
-            AppData.authsecret = (args['authsecret'] || '').trim()
-            client.headers.set('authsecret',AppData.authsecret)
-        } else {
-            auth = new Authenticate({ provider, ...args })
+        if (auth.bearerToken) {
+            AppData.bearerToken = client.bearerToken = auth.bearerToken
         }
-        client.api(auth, { jsconfig: 'eccn' })
-            .then(r => {
-                this.api = r
-                if (r.error && !r.error.message)
-                    r.error.message = Meta.HttpErrors[r.errorCode] || r.errorCode
-                if (this.api.succeeded) {
-                    this.auth = this.api.response
-                    setBodyClass({ auth: this.auth })
-                }
-            })
+        setBodyClass({ auth: this.auth })
     },
     logout() {
-        setBodyClass({ auth: this.auth })
+        globalThis.AUTH = this.auth = AppData.authsecret = AppData.bearerToken = client.bearerToken = null
+        setBodyClass({ auth: null })
         client.api(new Authenticate({ provider: 'logout' }))
-        AppData.authsecret = AppData.bearerToken = client.bearerToken = null
         client.headers.delete('authsecret')
-        this.auth = null
         routes.to({ $page:null })
     },
     get authRoles() { return this.auth && this.auth.roles || [] },

diff --git a/ServiceStack/src/ServiceStack/modules/locode/components/Welcome.mjs b/ServiceStack/src/ServiceStack/modules/locode/components/Welcome.mjs
@@ -17,7 +17,7 @@ export const Welcome = {
             </div>
         </div>
         <div v-if="!store.auth">
-          <SignIn v-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="login" />
+          <SignIn v-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="store.login($event)" />
           <h1 v-else class="text-2xl mb-3">Welcome to {{store.serviceName}}</h1>
         </div>
         <div v-else>
@@ -74,10 +74,6 @@ export const Welcome = {
         /** @type {AppMetadata} */
         const server = inject('server')
 
-        function login(auth) {
-            globalThis.AUTH = store.auth = auth 
-        }
-
-        return { store, routes, server, login }
+        return { store, routes, server }
     }
 }
diff --git a/ServiceStack/src/ServiceStack/modules/locode/lib/app.mjs b/ServiceStack/src/ServiceStack/modules/locode/lib/app.mjs
@@ -292,42 +292,20 @@ let store = {
             }
         })
     },
-    /** @param {any} args
-     *  @param {Function} [$on] */
-    login(args, $on) {
-        let provider = routes.provider || 'credentials'
-        let authProvider = globalThis.Server.plugins.auth.authProviders.find(x => x.name === provider)
-            || globalThis.Server.plugins.auth.authProviders[0]
-        if (!authProvider)
-            throw new Error("!authProvider")
-        let auth = new Authenticate()
+    /** @param {AuthenticateResponse} auth */
+    login(auth) {
+        globalThis.AUTH = this.auth = auth
         AppData.bearerToken = AppData.authsecret = null
-        if (authProvider.type === 'Bearer') {
-            AppData.bearerToken = client.bearerToken = (args['BearerToken'] || '').trim()
-        } else if (authProvider.type === 'authsecret') {
-            AppData.authsecret = (args['authsecret'] || '').trim()
-            client.headers.set('authsecret',AppData.authsecret)
-        } else {
-            auth = new Authenticate({ provider, ...args })
+        if (auth.bearerToken) {
+            AppData.bearerToken = client.bearerToken = auth.bearerToken
         }
-        client.api(auth, { jsconfig: 'eccn' })
-            .then(r => {
-                this.api = r
-                if (r.error && !r.error.message)
-                    r.error.message = AppData.HttpErrors[r.errorCode] || r.errorCode
-                if (this.api.succeeded) {
-                    this.auth = this.api.response
-                    setBodyClass({ auth: this.auth })
-                    if ($on) $on()
-                }
-            })
+        setBodyClass({ auth: this.auth })
     },
     logout() {
-        setBodyClass({ auth: this.auth })
+        globalThis.AUTH = this.auth = AppData.authsecret = AppData.bearerToken = client.bearerToken = null
+        setBodyClass({ auth: null })
         client.api(new Authenticate({ provider: 'logout' }))
-        AppData.authsecret = AppData.bearerToken = client.bearerToken = null
         client.headers.delete('authsecret')
-        this.auth = null
         routes.to({ $page:null })
     },
     /** @return {string[]} */

diff --git a/ServiceStack/src/ServiceStack/modules/ui/components/Welcome.mjs b/ServiceStack/src/ServiceStack/modules/ui/components/Welcome.mjs
@@ -17,7 +17,7 @@ export const Welcome = {
             </div>
         </div>
         <div v-if="!store.auth">
-          <SignIn v-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="login" />
+          <SignIn v-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="store.login($event)" />
           <h1 v-else class="text-2xl mb-3">Welcome to {{store.serviceName}}</h1>
         </div>
         <div v-else>
@@ -74,10 +74,6 @@ export const Welcome = {
         /** @type {AppMetadata} */
         const server = inject('server')
 
-        function login(auth) {
-            globalThis.AUTH = store.auth = auth 
-        }
-
-        return { store, routes, server, login }
+        return { store, routes, server }
     }
 }
diff --git a/ServiceStack/src/ServiceStack/modules/ui/lib/app.mjs b/ServiceStack/src/ServiceStack/modules/ui/lib/app.mjs
@@ -291,42 +291,20 @@ let store = {
             }
         })
     },
-    /** @param {any} args
-     *  @param {Function} [$on] */
-    login(args, $on) {
-        let provider = routes.provider || 'credentials'
-        let authProvider = globalThis.Server.plugins.auth.authProviders.find(x => x.name === provider)
-            || globalThis.Server.plugins.auth.authProviders[0]
-        if (!authProvider)
-            throw new Error("!authProvider")
-        let auth = new Authenticate()
+    /** @param {AuthenticateResponse} auth */
+    login(auth) {
+        globalThis.AUTH = this.auth = auth
         AppData.bearerToken = AppData.authsecret = null
-        if (authProvider.type === 'Bearer') {
-            AppData.bearerToken = client.bearerToken = (args['BearerToken'] || '').trim()
-        } else if (authProvider.type === 'authsecret') {
-            AppData.authsecret = (args['authsecret'] || '').trim()
-            client.headers.set('authsecret',AppData.authsecret)
-        } else {
-            auth = new Authenticate({ provider, ...args })
+        if (auth.bearerToken) {
+            AppData.bearerToken = client.bearerToken = auth.bearerToken
         }
-        client.api(auth, { jsconfig: 'eccn' })
-            .then(r => {
-                this.api = r
-                if (r.error && !r.error.message)
-                    r.error.message = AppData.HttpErrors[r.errorCode] || r.errorCode
-                if (this.api.succeeded) {
-                    this.auth = this.api.response
-                    setBodyClass({ auth: this.auth })
-                    if ($on) $on()
-                }
-            })
+        setBodyClass({ auth: this.auth })
     },
     logout() {
-        setBodyClass({ auth: this.auth })
+        globalThis.AUTH = this.auth = AppData.authsecret = AppData.bearerToken = client.bearerToken = null
+        setBodyClass({ auth: null })
         client.api(new Authenticate({ provider: 'logout' }))
-        AppData.authsecret = AppData.bearerToken = client.bearerToken = null
         client.headers.delete('authsecret')
-        this.auth = null
         routes.to({ $page:null })
     },
     /** @return {string[]} */

diff --git a/ServiceStack/tests/NorthwindAuto/admin-ui/index.html b/ServiceStack/tests/NorthwindAuto/admin-ui/index.html
@@ -82,7 +82,7 @@ <h1 class="text-2xl font-semibold text-gray-900">{{store.link.label}}</h1>
             </div>
         </div>
     </div>
-    <sign-in v-else-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="login"></sign-in>
+    <sign-in v-else-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="store.login($event)"></sign-in>
 </div>
 </template>
 
@@ -131,10 +131,6 @@ <h1 class="text-2xl font-semibold text-gray-900">{{store.link.label}}</h1>
 
         const showSidebar = ref(true)
 
-        function login(auth) {
-            globalThis.AUTH = store.auth = auth
-        }
-
         let sub = null
         let lastOp = null
 
@@ -148,7 +144,7 @@ <h1 class="text-2xl font-semibold text-gray-900">{{store.link.label}}</h1>
             })
         })
 
-        return { store, routes, server, showSidebar, login }
+        return { store, routes, server, showSidebar }
     }
 }
 

diff --git a/ServiceStack/tests/NorthwindAuto/admin-ui/lib/app.mjs b/ServiceStack/tests/NorthwindAuto/admin-ui/lib/app.mjs
@@ -267,41 +267,21 @@ let store = {
         })
     },
 
-    /** @param {any} args */
-    login(args) {
-        let provider = routes.provider || 'credentials'
-        let authProvider = server.plugins.auth.authProviders.find(x => x.name === provider)
-            || server.plugins.auth.authProviders[0]
-        if (!authProvider)
-            throw new Error("!authProvider")
-        let auth = new Authenticate()
+    /** @param {AuthenticateResponse} auth */
+    login(auth) {
+        globalThis.AUTH = this.auth = auth
         AppData.bearerToken = AppData.authsecret = null
-        if (authProvider.type === 'Bearer') {
-            AppData.bearerToken = client.bearerToken = (args['BearerToken'] || '').trim()
-        } else if (authProvider.type === 'authsecret') {
-            AppData.authsecret = (args['authsecret'] || '').trim()
-            client.headers.set('authsecret',AppData.authsecret)
-        } else {
-            auth = new Authenticate({ provider, ...args })
+        if (auth.bearerToken) {
+            AppData.bearerToken = client.bearerToken = auth.bearerToken
         }
-        client.api(auth, { jsconfig: 'eccn' })
-            .then(r => {
-                this.api = r
-                if (r.error && !r.error.message)
-                    r.error.message = Meta.HttpErrors[r.errorCode] || r.errorCode
-                if (this.api.succeeded) {
-                    this.auth = this.api.response
-                    setBodyClass({ auth: this.auth })
-                }
-            })
+        setBodyClass({ auth: this.auth })
     },
 
     logout() {
-        setBodyClass({ auth: this.auth })
+        globalThis.AUTH = this.auth = AppData.authsecret = AppData.bearerToken = client.bearerToken = null
+        setBodyClass({ auth: null })
         client.api(new Authenticate({ provider: 'logout' }))
-        AppData.authsecret = AppData.bearerToken = client.bearerToken = null
         client.headers.delete('authsecret')
-        this.auth = null
         routes.to({ $page:null })
     },
 

diff --git a/ServiceStack/tests/NorthwindAuto/locode/components/Welcome.mjs b/ServiceStack/tests/NorthwindAuto/locode/components/Welcome.mjs
@@ -18,7 +18,7 @@ export const Welcome = {
             </div>
         </div>
         <div v-if="!store.auth">
-          <SignIn v-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="login" />
+          <SignIn v-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="store.login($event)" />
           <h1 v-else class="text-2xl mb-3">Welcome to {{store.serviceName}}</h1>
         </div>
         <div v-else>
@@ -75,10 +75,6 @@ export const Welcome = {
         /** @type {AppMetadata} */
         const server = inject('server')
 
-        function login(auth) {
-            globalThis.AUTH = store.auth = auth 
-        }
-
-        return { store, routes, server, login }
+        return { store, routes, server }
     }
 }
diff --git a/ServiceStack/tests/NorthwindAuto/locode/lib/app.mjs b/ServiceStack/tests/NorthwindAuto/locode/lib/app.mjs
@@ -322,43 +322,21 @@ let store = {
         })
     },
 
-    /** @param {any} args
-     *  @param {Function} [$on] */
-    login(args, $on) {
-        let provider = routes.provider || 'credentials'
-        let authProvider = globalThis.Server.plugins.auth.authProviders.find(x => x.name === provider)
-            || globalThis.Server.plugins.auth.authProviders[0]
-        if (!authProvider)
-            throw new Error("!authProvider")
-        let auth = new Authenticate()
+    /** @param {AuthenticateResponse} auth */
+    login(auth) {
+        globalThis.AUTH = this.auth = auth
         AppData.bearerToken = AppData.authsecret = null
-        if (authProvider.type === 'Bearer') {
-            AppData.bearerToken = client.bearerToken = (args['BearerToken'] || '').trim()
-        } else if (authProvider.type === 'authsecret') {
-            AppData.authsecret = (args['authsecret'] || '').trim()
-            client.headers.set('authsecret',AppData.authsecret)
-        } else {
-            auth = new Authenticate({ provider, ...args })
+        if (auth.bearerToken) {
+            AppData.bearerToken = client.bearerToken = auth.bearerToken
         }
-        client.api(auth, { jsconfig: 'eccn' })
-            .then(r => {
-                this.api = r
-                if (r.error && !r.error.message)
-                    r.error.message = AppData.HttpErrors[r.errorCode] || r.errorCode
-                if (this.api.succeeded) {
-                    this.auth = this.api.response
-                    setBodyClass({ auth: this.auth })
-                    if ($on) $on()
-                }
-            })
+        setBodyClass({ auth: this.auth })
     },
 
     logout() {
-        setBodyClass({ auth: this.auth })
+        globalThis.AUTH = this.auth = AppData.authsecret = AppData.bearerToken = client.bearerToken = null
+        setBodyClass({ auth: null })
         client.api(new Authenticate({ provider: 'logout' }))
-        AppData.authsecret = AppData.bearerToken = client.bearerToken = null
         client.headers.delete('authsecret')
-        this.auth = null
         routes.to({ $page:null })
     },
 

diff --git a/ServiceStack/tests/NorthwindAuto/ui/components/Welcome.mjs b/ServiceStack/tests/NorthwindAuto/ui/components/Welcome.mjs
@@ -18,7 +18,7 @@ export const Welcome = {
             </div>
         </div>
         <div v-if="!store.auth">
-          <SignIn v-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="login" />
+          <SignIn v-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="store.login($event)" />
           <h1 v-else class="text-2xl mb-3">Welcome to {{store.serviceName}}</h1>
         </div>
         <div v-else>
@@ -75,10 +75,6 @@ export const Welcome = {
         /** @type {AppMetadata} */
         const server = inject('server')
 
-        function login(auth) {
-            globalThis.AUTH = store.auth = auth 
-        }
-
-        return { store, routes, server, login }
+        return { store, routes, server }
     }
 }