kodama-ui/dist/login-47626685.mjs

Kodama UI is a Vue 3 component library that provides a set of components & funcionality to build your application.

import { defineComponent as v, inject as w, ref as k, reactive as x, computed as V, resolveComponent as i, openBlock as f, createBlock as $, withCtx as d, createElementVNode as t, createElementBlock as h, createTextVNode as u, createVNode as r, createCommentVNode as y, withModifiers as E } from "vue";
import { u as F, r as _ } from "./index-3aaa06c4.mjs";
import { f as B, _ as C } from "./main-ac44fa27.mjs";
const L = v({
  name: "Login",
  setup() {
    const e = w("$auth");
    B();
    const s = !1, l = k(!1), o = x({
      username: "",
      password: ""
    }), m = F({
      password: { required: _ },
      username: { required: _ }
    }, o), n = V(() => !m.value.$invalid);
    return {
      loading: l,
      submitLogin: async (p) => {
        n.value && (l.value = !0, e.login(o.username, o.password).then(() => {
          window.location.reload();
        }).finally(() => {
          l.value = !1;
        }));
      },
      // loginSchema,
      signupEnabled: s,
      state: o,
      v$: m,
      isValidForm: n
    };
  }
});
const N = { class: "p-1 sm:p-5 select-none" }, U = { class: "text-center mb-10" }, q = /* @__PURE__ */ t("h1", { class: "mb-3 sm:text-3xl text-2xl uppercase font-bold" }, " Iniciar Sesión ", -1), D = {
  key: 0,
  class: "text-gray-400 fw-bold fs-4"
}, R = { class: "mb-4" }, S = { class: "mb-10" }, j = { class: "text-center" };
function A(e, s, l, o, b, m) {
  const n = i("router-link"), c = i("k-input"), p = i("k-button"), g = i("k-card");
  return f(), $(g, { id: "k-login" }, {
    default: d(() => [
      t("div", N, [
        t("div", U, [
          q,
          e.signupEnabled ? (f(), h("div", D, [
            u(" ¿Nuevo aquí? "),
            r(n, {
              to: { name: "register" },
              class: "link-primary fw-bolder"
            }, {
              default: d(() => [
                u(" Regístrate ")
              ]),
              _: 1
            })
          ])) : y("", !0)
        ]),
        t("form", {
          onSubmit: s[2] || (s[2] = E((...a) => e.submitLogin && e.submitLogin(...a), ["prevent"]))
        }, [
          t("div", R, [
            r(c, {
              modelValue: e.state.username,
              "onUpdate:modelValue": s[0] || (s[0] = (a) => e.state.username = a),
              type: "text",
              placeholder: "",
              label: "Email / Usuario",
              tabindex: "1",
              errors: e.v$.username.$errors
            }, null, 8, ["modelValue", "errors"])
          ]),
          t("div", S, [
            r(c, {
              modelValue: e.state.password,
              "onUpdate:modelValue": s[1] || (s[1] = (a) => e.state.password = a),
              type: "password",
              name: "password",
              label: "Contraseña",
              tabindex: "2",
              errors: e.v$.password.$errors
            }, null, 8, ["modelValue", "errors"])
          ]),
          t("div", j, [
            r(p, {
              loading: e.loading,
              icon: "right-from-bracket",
              class: "w-full mb-4",
              disabled: !e.isValidForm,
              type: "submit"
            }, {
              default: d(() => [
                u(" Acceder ")
              ]),
              _: 1
            }, 8, ["loading", "disabled"]),
            r(n, {
              to: { name: "forgotPassword" },
              class: "text-sm",
              tabindex: "3"
            }, {
              default: d(() => [
                u(" ¿Olvidaste tu contraseña? ")
              ]),
              _: 1
            })
          ])
        ], 32)
      ])
    ]),
    _: 1
  });
}
const P = /* @__PURE__ */ C(L, [["render", A]]);
export {
  P as default
};