@luizleon/sf.prefeiturasp.vuecomponents 0.0.26 → 0.0.28

package/dist/services/authService.d.ts

@@ -1,4 +1,4 @@
-import Keycloak from "./../keycloak";
+import Keycloak, { KeycloakConfig } from "./../keycloak";
 interface User {
     name: string;
     email: string;
@@ -11,13 +11,10 @@ interface User {
     sub: string;
     IsInRole: (role: string) => boolean;
 }
-declare const AuthService: {
+declare const UseAuthService: (config: KeycloakConfig) => {
     Instance: Keycloak;
     User: User;
-    SetUrl: (url: string) => void;
-    SetRealm: (realm: string) => void;
-    SetClientId: (clientId: string) => void;
     CallLogin: (onSuccess: () => void, onError: (error: any) => void) => void;
     CallLogout: () => void;
 };
-export { AuthService };
+export { UseAuthService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luizleon/sf.prefeiturasp.vuecomponents",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "main": "dist/lib.umd.js",
   "module": "dist/lib.es.js",

package/src/components/internal/HeaderAvatar.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
-import { AuthService } from "../../services/authService";
+import { computed, onMounted, ref } from "vue";
 import { UseDialogService } from "../../services/dialogService";
 
 const dialogService = UseDialogService();
 
-const letters = Letters();
+const letters = ref("");
+
+const emit = defineEmits<{
+  (event: "logout"): void;
+}>();
 
 async function Logout() {
   const confirm = await dialogService.ConfirmAsync({
-    text: `${AuthService.User.username} - ${AuthService.User.name}.<br /><br />Você deseja sair da conta?`,
+    text: `Você deseja sair da conta?`,
     confirmLabel: "sair",
   });
   if (!confirm) return;
-  AuthService.CallLogout();
+  emit("logout");
 }
 
 function Letters() {
-  const name = AuthService.User.name;
+  const name = sessionStorage.getItem("name");
   let letters = "?";
   if (!name) return letters;
 
@@ -32,18 +36,22 @@ function Letters() {
   return letters.length > 0 ? letters : "?";
 }
 
-function Color() {
-  const primeiraLetra = letters[0];
+const color = computed(() => {
+  const primeiraLetra = letters.value[0];
   const cor =
     primeiraLetra === "?"
       ? 0
       : (primeiraLetra.charCodeAt(0) - 64) % 19;
   return Math.max(cor, 0);
-}
+});
+
+onMounted(() => {
+  letters.value = Letters();
+});
 </script>
 
 <template>
-  <div id="sf-header-avatar" :data-cor="Color()" @click="Logout">
+  <div id="sf-header-avatar" :data-cor="color" @click="Logout">
     {{ letters }}
   </div>
 </template>

package/src/components/layout/Layout.vue

@@ -6,6 +6,10 @@ import MenuIcon from "../internal/MenuIcon.vue";
 import ThemeToggle from "../internal/ThemeToggle.vue";
 
 const navService = UseNavMenuService();
+
+const emit = defineEmits<{
+  (event: "logout"): void;
+}>();
 </script>
 
 <template>
@@ -26,7 +30,7 @@ const navService = UseNavMenuService();
       </div>
       <slot name="action"> </slot>
       <ThemeToggle />
-      <HeaderAvatar />
+      <HeaderAvatar @logout="" />
     </header>
     <nav :class="{ visible: navService.IsVisible }">
       <div class="sf-layout-nav-header">

package/src/index.ts

@@ -7,7 +7,8 @@ import SfButton from "./components/button/Button.vue";
 
 import { UseNavMenuService } from "./services/navMenuService";
 import { UseDialogService } from "./services/dialogService";
-import { AuthService } from "./services/authService";
+import { ThemeToggleBase } from "./components/internal/ThemeToggle";
+import { UseAuthService } from "./services/authService";
 import { AppResult } from "./common/appResult";
 
 import { Cor, Tamanho } from "./enum";
@@ -24,8 +25,8 @@ export {
   SfContent,
   SfTabNavigation,
   SfButton,
-  AuthService,
   AppResult,
+  UseAuthService,
   UseNavMenuService,
   UseDialogService,
   Cor,
@@ -52,8 +53,6 @@ export {
   window.addEventListener("resize", Ajusta);
 })();
 
-import { ThemeToggleBase } from "./components/internal/ThemeToggle";
-
 /**
  * Tema inicial
  */

package/src/keycloak.js

@@ -23,7 +23,7 @@
  * 
  * Adaptado para expor setToken.
  * 
- * Adpatado parausar URL absoluta em configUrl (linha 829).
+ * Adpatado para usar URL absoluta em configUrl (linha 829). * 
  */
 
 import base64 from 'base64-js';

package/src/services/authService.ts

@@ -1,4 +1,4 @@
-import Keycloak from "./../keycloak";
+import Keycloak, { KeycloakConfig } from "./../keycloak";
 
 interface User {
   name: string;
@@ -13,65 +13,64 @@ interface User {
   IsInRole: (role: string) => boolean;
 }
 
-const keycloakInstance = new Keycloak();
+function AuthService(config: KeycloakConfig) {
+  const keycloakInstance = new Keycloak(config);
 
-const Login = (
-  onSuccess: () => void,
-  onError: (error: any) => void
-) => {
-  keycloakInstance
-    .init({ onLoad: "login-required" })
-    .then(async (authenticated) => {
-      if (authenticated) {
-        await FetchUserInfo();
-      }
-      onSuccess();
-    })
-    .catch((e: any) => {
-      onError(e);
-    });
-};
+  const User: User = {} as User;
 
-const FetchUserInfo = async () => {
-  const info: any = await keycloakInstance.loadUserInfo();
-  AuthService.User.email = info.email ?? "";
-  AuthService.User.emailVerified = info.email_verified === true;
-  AuthService.User.firstName = info.given_name ?? "";
-  AuthService.User.lastName = info.family_name ?? "";
-  AuthService.User.name = info.name ?? "";
-  AuthService.User.sub = info.sub ?? "";
-  AuthService.User.username = info.preferred_username ?? "";
-  AuthService.User.roles = [...(info.role ?? [])];
-  AuthService.User.groups = [...(info.group ?? [])];
-  AuthService.User.IsInRole = (role: string) => {
-    return AuthService.User.roles.includes(role);
+  const Login = (
+    onSuccess: () => void,
+    onError: (error: any) => void
+  ) => {
+    keycloakInstance
+      .init({ onLoad: "login-required" })
+      .then(async (authenticated) => {
+        if (authenticated) {
+          await FetchUserInfo();
+        }
+        onSuccess();
+      })
+      .catch((e: any) => {
+        onError(e);
+      });
   };
-};
 
-const Logout = () => {
-  keycloakInstance
-    .logout({
-      redirectUri: location.origin,
-    })
-    .then(() => {
-      sessionStorage.removeItem("user-info");
-    });
-};
+  const FetchUserInfo = async () => {
+    const info: any = await keycloakInstance.loadUserInfo();
+    User.email = info.email ?? "";
+    User.emailVerified = info.email_verified === true;
+    User.firstName = info.given_name ?? "";
+    User.lastName = info.family_name ?? "";
+    User.name = info.name ?? "";
+    User.sub = info.sub ?? "";
+    User.username = info.preferred_username ?? "";
+    User.roles = [...(info.role ?? [])];
+    User.groups = [...(info.group ?? [])];
+    User.IsInRole = (role: string) => {
+      return User.roles.includes(role);
+    };
+    sessionStorage.setItem("name", User.name);
+  };
+
+  const Logout = () => {
+    keycloakInstance
+      .logout({
+        redirectUri: location.origin,
+      })
+      .then(() => {
+        sessionStorage.removeItem("name");
+      });
+  };
+
+  return {
+    Instance: keycloakInstance,
+    User,
+    CallLogin: Login,
+    CallLogout: Logout,
+  };
+}
 
-const AuthService = {
-  Instance: keycloakInstance,
-  User: {} as User,
-  SetUrl: (url: string) => {
-    keycloakInstance.authServerUrl = url;
-  },
-  SetRealm: (realm: string) => {
-    keycloakInstance.realm = realm;
-  },
-  SetClientId: (clientId: string) => {
-    keycloakInstance.clientId = clientId;
-  },
-  CallLogin: Login,
-  CallLogout: Logout,
-};
+const UseAuthService = (config: KeycloakConfig) =>
+  AuthService(config);
 
-export { AuthService };
+export { UseAuthService };