@luizleon/sf.prefeiturasp.vuecomponents 0.0.35 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luizleon/sf.prefeiturasp.vuecomponents",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "type": "module",
   "main": "dist/lib.umd.js",
   "module": "dist/lib.es.js",
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "air-datepicker": "3.3.1",
+    "axios": "1.6.5",
     "date-fns": "2.29.3",
     "sweetalert2": "11.4.8",
     "vue-currency-input": "3.0.2"

package/src/axios/axiosClient.ts

@@ -0,0 +1,207 @@
+import _axios, { AxiosInstance, AxiosResponse } from "axios";
+import { AppResult } from "../common/appResult";
+import Keycloak from "../keycloak";
+
+class AxiosClient {
+  constructor(keycloak: Keycloak) {
+    this.keycloak = keycloak;
+    this.axios = _axios.create();
+    this.axios.defaults.baseURL = "https://localhost:5001/api";
+    this.axios.defaults.headers.common["content-type"] =
+      "application/json";
+    this.axios.defaults.timeout = 1000 * 60 * 5;
+    this.axios.interceptors.request.use(async (config) => {
+      await this.SilentLogin();
+      const token = this.keycloak.token;
+      config.headers.Authorization = `Bearer ${token}`;
+      return config;
+    });
+  }
+  keycloak: Keycloak;
+  axios: AxiosInstance;
+  private fileName: string = "silent-login.html";
+
+  private ParseAppResult(data: any): AppResult<any> | null {
+    try {
+      const check1 = typeof data.hasSuccess === "boolean";
+      const check2 = typeof data.hasError === "boolean";
+      const check3 = typeof data.httpStatusCode === "number";
+      const check4 = Array.isArray(data.errors);
+      if (check1 && check2 && check3 && check4) return data;
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Usar após 'then' (httpStatusCode 2xx) para obter o resultado da requisição.
+   * @param r
+   */
+  HandleThen<T>(r: AxiosResponse<any, any>): AppResult<T> {
+    const result = new AppResult<T>();
+    const parsed = this.ParseAppResult(r.data);
+    if (parsed === null) {
+      // Foi recebido um httpStatusCode 2xx, mas não é um AppResult.
+      // Então, o resultado é o próprio 'data'.
+      // Por padrão, httpStatusCode é 200.
+      result.value = r.data;
+      return result;
+    }
+    if (parsed.hasError) {
+      // Foi recebido um httpStatusCode 2xx e é um AppResult.
+      // Porém, o resultado é um erro.
+      // Então, adiciona os erros e o httpStatusCode.
+      parsed.errors.forEach((e) => result.WithError(e));
+      result.httpStatusCode = parsed.httpStatusCode;
+      return result;
+    }
+    // Foi recebido um httpStatusCode 2xx e é um AppResult.
+    // O resultado é um sucesso.
+    // Então, adiciona o valor.
+    // Por padrão, httpStatusCode é 200.
+    result.value = r.data.value;
+    return result;
+  }
+
+  /**
+   * Usar após 'catch' (httpStatusCode 4xx ou 5xx) para obter o resultado da requisição.
+   * @param r
+   * @returns
+   */
+  HandleCatch<T>(r: any): AppResult<T> {
+    const result = new AppResult<T>();
+    const parsed = this.ParseAppResult(r.response?.data);
+    if (parsed === null) {
+      // Foi recebido um httpStatusCode 4xx ou 5xx, mas não é um AppResult.
+      // Então só adiciona o erro.
+      result.WithError(r.message);
+    } else {
+      // Foi recebido um httpStatusCode 4xx ou 5xx e é um AppResult.
+      // Então, adiciona os erros e o httpStatusCode.
+      result.WithErrors(parsed.errors);
+      result.httpStatusCode = parsed.httpStatusCode;
+    }
+
+    return result;
+  }
+
+  private async SilentLogin() {
+    return new Promise<boolean>(async (res) => {
+      if (!this.isTokenExpired) {
+        res(true);
+        return;
+      }
+      const iframe = this.GenerateIframe();
+      const fn = (e: MessageEvent) => {
+        document.body.removeChild(iframe);
+        window.removeEventListener("message", fn);
+        if (e.origin !== location.origin) {
+          res(false);
+          return;
+        }
+        const action = e.data.action;
+        const code = e.data.code;
+        const state = e.data.state;
+        const error = e.data.error;
+        if (
+          action !== "silent-login-iframe-result" ||
+          error === "login_required" ||
+          !code
+        ) {
+          res(false);
+          return;
+        }
+        const req = new XMLHttpRequest();
+        req.open("POST", this.tokenExchangeUrl, true);
+        req.setRequestHeader(
+          "Content-type",
+          "application/x-www-form-urlencoded"
+        );
+        req.onreadystatechange = () => {
+          if (req.readyState === 4) {
+            if (req.status === 200) {
+              const tokenResponse = JSON.parse(req.responseText);
+              this.keycloak.setToken(
+                tokenResponse.access_token,
+                null,
+                tokenResponse.id_token,
+                new Date().getTime()
+              );
+              res(true);
+              return;
+            }
+            res(false);
+          }
+        };
+        req.send(this.TokenExchangeParams(code, state));
+      };
+      window.addEventListener("message", fn);
+    }).then((r) => {
+      if (!r) {
+        this.keycloak.clearToken();
+        this.keycloak.login();
+      }
+      return r;
+    });
+  }
+
+  private GetCodeVerifierFromState(state: string) {
+    const key = `kc-callback-${state}`;
+    const stored = localStorage.getItem(key);
+    if (stored) {
+      localStorage.removeItem(key);
+      return JSON.parse(stored).pkceCodeVerifier;
+    }
+  }
+
+  private TokenExchangeParams(code: string, state: string) {
+    let params = `code=${code}&grant_type=authorization_code`;
+    params += `&client_id=${encodeURIComponent(
+      this.keycloak.clientId!
+    )}`;
+    params += `&redirect_uri=${this.silentLoginRedirectUrl}`;
+    params += `&code_verifier=${this.GetCodeVerifierFromState(
+      state
+    )}`;
+    return params;
+  }
+
+  private GenerateIframe() {
+    const iframe = document.createElement("iframe");
+    iframe.src =
+      this.keycloak.createLoginUrl({
+        prompt: "none",
+        redirectUri: this.silentLoginRedirectUrl,
+      }) ?? "";
+    document.body.appendChild(iframe);
+    return iframe;
+  }
+
+  private get silentLoginRedirectUrl() {
+    return `${location.origin}/${this.fileName}`;
+  }
+
+  private get tokenExchangeUrl() {
+    return `${this.keycloak.authServerUrl}/realms/${this.keycloak.realm}/protocol/openid-connect/token`;
+  }
+
+  private get isTokenExpired() {
+    const token = this.keycloak.tokenParsed;
+    const exp = token ? token["exp"] : null;
+
+    if (!token || !exp) return true;
+
+    const expiresIn =
+      exp -
+      Math.ceil(new Date().getTime() / 1000) +
+      (this.keycloak.timeSkew ?? 0);
+
+    return expiresIn < 10;
+  }
+}
+
+const UseAxiosClient = (keycloak: Keycloak) =>
+  new AxiosClient(keycloak);
+
+export { AxiosClient, UseAxiosClient };

package/src/index.ts

@@ -13,10 +13,9 @@ import { AppResult } from "./common/appResult";
 
 import { Cor, Tamanho } from "./enum";
 
-import { nextTick } from "vue";
-
 import "./style/tema.scss";
 import "./style/componentes.scss";
+import { AxiosClient, UseAxiosClient } from "./axios/axiosClient";
 
 export {
   SfLayout,
@@ -25,33 +24,15 @@ export {
   SfContent,
   SfTabNavigation,
   SfButton,
-  AppResult,
   UseAuthService,
   UseNavMenuService,
   UseDialogService,
+  UseAxiosClient,
+  AppResult,
   Cor,
   Tamanho,
+  AxiosClient,
 };
-/**
- * https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
- */
-(() => {
-  function Ajusta() {
-    nextTick(() => {
-      setTimeout(() => {
-        const root = document.querySelector(":root");
-        root &&
-          // @ts-ignore
-          root.style.setProperty(
-            "--window-height",
-            `${window.visualViewport?.height ?? window.innerHeight}px`
-          );
-      }, 1);
-    });
-  }
-  Ajusta();
-  window.addEventListener("resize", Ajusta);
-})();
 
 /**
  * Tema inicial

package/src/services/authService.ts

@@ -47,6 +47,12 @@ function AuthService(config: KeycloakConfig) {
   ) => {
     const check = await CheckSilentLoginFile();
     if (!check) return;
+    if (initOptions.onLoad === "login-required") {
+      document.documentElement.setAttribute(
+        "data-app-message",
+        "Autorizando..."
+      );
+    }
     return keycloakInstance
       .init(initOptions)
       .then(async (authenticated) => {
@@ -54,10 +60,14 @@ function AuthService(config: KeycloakConfig) {
           await FetchUserInfo();
         }
         if (callback && typeof callback === "function") callback();
+        document.documentElement.classList.add("app-mounted");
       })
       .catch((e: any) => {
         console.error(e);
-        document.body.innerHTML = `<div style="padding: 3rem; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; font-size: 1.5rem;">Não foi possível conectar no servidor de autenticação.</div>`;
+        document.documentElement.setAttribute(
+          "data-app-message",
+          "Não foi possível conectar no servidor de autenticação."
+        );
       });
   };
 

package/src/style/tema.scss

@@ -6,13 +6,15 @@
 @import "./src/normalize";
 
 :root {
-  --window-height: 100%;
+  --window-height: 100svh;
   --font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   --font-size: 1rem;
   --font-weight: 400;
   --line-height: 1.15;
   --header-height: 60px;
-  --main-height: calc(var(--window-height) - var(--header-height));
+  --main-height: calc(
+    var(--window-height, 100vh) - var(--header-height)
+  );
 }
 
 html,