@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/adm/login/RandomImages.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="random-nixloc-cover">
+        <img :src="currentImage" alt="Nixloc - Capa aleatória" class="random-nixloc-cover__img" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: "RandomImages",
+
+    data() {
+        return {
+            images: [
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Personalizar-Docs.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Modulo-de-Auditoria.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Redes-Sociais.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Versionar-Contratos.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Google-Calendar.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Arquivar-Loc.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Instagram.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Modulo-de-Boletos.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Modulo-de-Manutencao.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Assinatura-Digital.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Modo-Escuro.png",
+                "https://conteudo.nixloc.com.br/wp-content/uploads/2025/11/Capa-Novos-Usuarios.png"
+            ],
+            currentImage: null
+        };
+    },
+
+    mounted() {
+        this.pickRandomImage();
+    },
+
+    methods: {
+        pickRandomImage() {
+            if (!this.images.length) return;
+
+            const index = Math.floor(Math.random() * this.images.length);
+            this.currentImage = this.images[index];
+        }
+    }
+};
+</script>
+
+<style scoped>
+.random-nixloc-cover {
+    width: 700px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.random-nixloc-cover__img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+    border-radius: 14px;
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.08),
+        0 2px 4px rgba(0, 0, 0, 0.05);
+}
+</style>

package/src/components/modules/adm/login/RefreshUserLogged.vue

@@ -0,0 +1,59 @@
+<template></template>
+
+<script>
+
+import Menu from "@/components/modules/adm/login/Menu.js";
+
+import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
+
+export default {
+    name: "RefreshUserLogged",
+    data() {
+        return {
+            urlGet: "/api/v1/adm/auth/renovate-userlogged-parameter",
+            menu: new Menu(),
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+        ...mapState("user", ["userLogged"]),
+    },
+    methods: {
+        ...mapActions("generic", ["getApi"]),
+        ...mapMutations("user", ["addUserLogged", "addItemMenu", "removeItemMenu"]),
+        renovate() {
+            let params = {
+                url: this.urlGet,
+                obj: {},
+            };
+            this.getApi(params).then((response) => {
+                this.addUserLogged(response.content);
+                this.loadMenu();
+            });
+        },
+        loadMenu() {
+            this.removeItemMenu();
+            let self = this;
+            this.userLogged.user.rules.forEach(function (rule) {
+                self.hasRule(rule);
+            });
+        },
+        hasRule(rule) {
+            let self = this;
+            this.menu.itens.forEach(function (item) {
+                if (rule.name === item.rule) self.addItemMenu([item]);
+            });
+        },
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "renovateUserLogged")
+                    this.renovate();
+            },
+            deep: true,
+        },
+    }
+}
+
+</script>

package/src/components/modules/adm/login/ResetPassword.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="div-form">
+      <Messages />
+      <div v-if="!showSuccess">
+        <div class="div-title">
+          <span class="title-forgot">Redefinir Senha</span>
+        </div>
+        <b-row>
+          <b-col sm="12">
+            <InputPassword title="Nova Senha" field="password" :formName="formName" :required="true" :maxLength="50"
+              v-model="forgot.password">
+              <div class="glyphicon">
+                <i class="fas fa-lock"></i>
+              </div>
+            </InputPassword>
+          </b-col>
+          <b-col sm="12">
+            <InputPassword title="Confirme Nova Senha" field="password" :formName="formName" :required="true"
+              :maxLength="50" v-model="forgot.confirmPassword">
+              <div class="glyphicon">
+                <i class="fas fa-lock"></i>
+              </div>
+            </InputPassword>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col md="6">
+            <div class="div-btn">
+              <Button _key="save" type="success" title="Salvar" :disabled="disabled" classIcon="fa-solid fa-floppy-disk"
+                size="medium" :clicked="save" />
+            </div>
+          </b-col>
+        </b-row>
+      </div>
+      <div v-if="!showSuccess" @click="navegateToLogin()" class="text-center div-forgot-password">
+        Voltar para o login
+      </div>
+      <div class="text-center" v-if="showSuccess">
+        <div class="reset-success-subtitle title">
+          Senha redefinida com sucesso!
+        </div>
+        <div class="reset-success-icon">
+          <i class="fa-light fa-circle-check"></i>
+        </div>
+        <Timer :title="'Redirecionando para o Login em'" :initialTimer="5" :endTime="navegateToLogin" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import InputPassword from "@nixweb/nixloc-ui/src/component/forms/InputPassword";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Messages from "@nixweb/nixloc-ui/src/component/shared/Messages.vue";
+import Timer from "@nixweb/nixloc-ui/src/component/shared/Timer";
+
+import ForgotPassword from "@/components/modules/adm/login/ForgotPassword.js";
+
+import { mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ResetPassword",
+  components: { InputPassword, Button, Messages, Timer },
+  data() {
+    return {
+      formName: "forgot",
+      forgot: new ForgotPassword(),
+      urlReset: "api/v1/adm/auth/reset-password",
+      showSuccess: false,
+    };
+  },
+  computed: {
+    disabled() {
+      if (
+        this.forgot.password == this.forgot.confirmPassword &&
+        this.forgot.password
+      )
+        return false;
+
+      return true;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["postApi"]),
+    ...mapMutations("generic", ["removeLoading"]),
+    save() {
+      let obj = {
+        codeResetPassword: this.$route.params.code,
+        password: this.forgot.password,
+      };
+      let params = { url: this.urlReset, obj: obj };
+      this.postApi(params).then((response) => {
+        setTimeout(() => {
+          if (response.success) {
+            this.showSuccess = true;
+          }
+          this.removeLoading(["save"]);
+        }, 2000);
+      });
+    },
+    navegateToLogin() {
+      this.$router.replace(this.$route.query.redirect || "/login");
+    }
+  },
+};
+</script>
+<style scoped>
+.div-form {
+  padding-top: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 30px;
+}
+
+.div-title {
+  margin-bottom: 30px;
+}
+
+.div-btn {
+  margin-top: 20px;
+}
+
+.title-forgot {
+  font-size: 25px;
+}
+
+.title-rodape {
+  font-size: 13px;
+}
+
+.icon-whatsapp {
+  color: green;
+}
+
+.reset-success-icon i {
+  font-size: 50px;
+  color: #16a34a;
+  margin-bottom: 15px;
+}
+
+.reset-success-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.reset-success-subtitle {
+  font-size: 18px;
+  margin-bottom: 25px;
+}
+
+.div-forgot-password {
+  margin-top: 15px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  color: #4680a5;
+}
+</style>

package/src/components/modules/adm/login/SendConfirmMailMobile.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="main" v-if="!stopSend">
+    <div class="text-center">
+      <Timer :title="'Enviando confirmação para ' + email + mobile + ' em'" :initialTimer="10" :endTime="sendConfirm" />
+      <div class="div-btn">
+        <Button _key="cancel" type="danger" title="Cancelar" classIcon="fa-solid fa-ban" size="small" :clicked="cancel" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Timer from "@nixweb/nixloc-ui/src/component/shared/Timer";
+
+import { mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "SendConfirmMailMobile",
+  components: {
+    Button,
+    Timer,
+  },
+  props: {
+    typeConfirm: String,
+    email: {
+      type: String,
+      default: "",
+    },
+    mobile: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      urlConfirm: "/api/v1/adm/auth/sendconfirm-mail-mobile",
+      stopSend: false,
+    };
+  },
+  methods: {
+    ...mapActions("generic", ["postApi"]),
+    ...mapMutations("generic", ["addEvent", "removeLoading"]),
+    sendConfirm() {
+      if (this.stopSend) return;
+      let params = {
+        url: this.urlConfirm,
+        obj: {
+          typeConfirm: this.typeConfirm,
+          email: this.email,
+          mobile: this.mobile,
+        },
+      };
+      this.cancel();
+      this.postApi(params).then((response) => { });
+    },
+    cancel() {
+      this.stopSend = true;
+      this.addEvent({ name: "stopSendConfirmEmailMobile" });
+      this.removeLoading(["cancel"]);
+    },
+  },
+};
+</script>
+<style scoped>
+.main {
+  margin: 20px;
+}
+
+.div-btn {
+  margin-top: 10px;
+}
+</style>

package/src/components/modules/adm/login/SignalrUser.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <transition name="fade">
+      <div
+        class="full-page"
+        v-if="showDuplicity"
+      >
+        <div class="n-div-center">
+          <div class="text-center logo">
+            <img
+              src="https://nixloc.com.br/wp-content/themes/nixloc/shared/images/logo/nixloc.svg"
+              alt="Nixloc"
+            />
+          </div>
+          <br />
+          <div>
+            <div class="row">
+              <div class="col-12 text-center">
+                <div class="icon-siren">
+                  <i class="fa-solid fa-triangle-exclamation"></i>
+                </div>
+              </div>
+            </div>
+            <div class="text-center">
+              <Timer
+                :title="'Detectamos que o usuário (' + userName + ') teve acesso simultâneo e será desconectado em'"
+                :initialTimer="5"
+                :endTime="logout"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import * as signalR from "@microsoft/signalr";
+import Timer from "@nixweb/nixloc-ui/src/component/shared/Timer";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "SignalrUser",
+  components: {
+    Timer,
+  },
+  data() {
+    return {
+      signalConnection: null,
+      userName: "",
+      codeBrowser: "",
+      companyId: 0,
+      showDuplicity: false,
+    };
+  },
+  computed: {
+    ...mapState("user", ["userLogged"]),
+    ...mapGetters("generic", ["event"]),
+  },
+  mounted() {
+    this.codeBrowser = localStorage.codeBrowser;
+    this.connectionBuilder();
+  },
+  beforeDestroy() {
+    this.logout();
+  },
+  methods: {
+    ...mapMutations("user", ["addUserLogged"]),
+    ...mapMutations("generic", ["addEvent", "removeLoading"]),
+    ...mapMutations("rfid", ["addRfidData"]),
+    connectionBuilder() {
+      var url = process.env.VUE_APP_API_URL;
+
+      this.userId = this.userLogged.user.id;
+      this.userName = this.userLogged.user.userName;
+      this.companyId = this.userLogged.companyId;
+
+      this.connection = new signalR.HubConnectionBuilder()
+        .withUrl(`${url}signalr`)
+        .build();
+
+      this.connection.start().then(() => {
+        this.addUserLogged();
+
+        this.connection.on("NotifyDuplicityUser", (userName, codeBrowser) => {
+          if (this.userName == userName && this.codeBrowser == codeBrowser) {
+            this.showDuplicity = true;
+          }
+        });
+
+        this.connection.on("NotifyDisconnectUser", () => {
+          this.logout();
+        });
+
+        this.connection.on("ReceiveRfidTags", (data) => {
+          if (data && data.companyId == this.companyId) {
+            this.addRfidData(data);
+          }
+        });
+      });
+
+      this.connection.start().catch((err) => console.error(err));
+    },
+    addUserLogged() {
+      if (this.userLogged.user.userName != "UserTemp") {
+        this.connection.invoke(
+          "AddUserLogged",
+          this.companyId,
+          this.userId,
+          this.userName,
+          this.codeBrowser
+        );
+      }
+    },
+    logout() {
+      this.connection.stop();
+      this.addUserLogged({});
+      localStorage.setItem("codeBrowser", "");
+      window.location.replace("/login");
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "disconnectUsers") {
+          this.connection.invoke("DisconnectUser", event.data);
+          let self = this;
+          setTimeout(function () {
+            self.addEvent({ name: "getAllListViewWithDataHandler" });
+          }, 200);
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scopep>
+.full-page {
+  height: 100%;
+  width: 100%;
+  background-color: white;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  position: fixed;
+  z-index: 1500;
+}
+
+.n-div-center {
+  margin: auto;
+  width: 80%;
+  height: 50%;
+  padding: 50px;
+}
+
+.n-font-icone {
+  font-size: 15px;
+}
+
+.icon-siren {
+  font-size: 25px;
+  color: orange;
+}
+</style>