import { b as buildAssetsURL } from './renderer.mjs';
import { reactive, resolveComponent, ref, computed, h, defineComponent } from 'vue';
import { d as defineNuxtComponent, f as useAuthStore, g as useNuxtApp, R as REALM_MASTER_NAME, j as useAPIClient, e as useRoute, n as navigateTo, a as useToast } from './server.mjs';
import { buildFormInput, buildFormSubmit, PresetsBuildIn, SlotName } from '@vue-layout/hyperscript';
import useVuelidate from '@vuelidate/core';
import { required, minLength, maxLength } from '@vuelidate/validators';
import 'vue-bundle-renderer/runtime';
import 'h3';
import 'vue/server-renderer';
import './node-server.mjs';
import 'node-fetch-native/polyfill';
import 'node:http';
import 'node:https';
import 'destr';
import 'ofetch';
import 'unenv/runtime/fetch/index';
import 'hookable';
import 'scule';
import 'defu';
import 'ohash';
import 'ufo';
import 'unstorage';
import 'radix3';
import 'node:fs';
import 'node:url';
import 'pathe';
import 'unctx';
import '@unhead/ssr';
import 'unhead';
import '@unhead/shared';
import 'vue-router';
import '@ebec/http';
import 'hapic';
import '@hapic/oauth2';
import 'rapiq';
import '@vue-layout/basic';
import 'change-case';
import '@ucast/mongo2js';
import 'ilingo';
import 'nanoid';
import 'smob';
import 'browser-storage-adapter';
import 'cookie-es';

const Login$1 = "" + buildAssetsURL("Login.bb43092d.svg");
const Login = /* @__PURE__ */ defineComponent({
  props: {
    width: {
      type: [Number, String],
      default: 750
    },
    height: {
      type: [Number, String],
      default: 500
    }
  },
  setup(props) {
    return () => h("img", {
      src: Login$1,
      width: props.width,
      height: props.height,
      style: {
        maxWidth: "100%"
      }
    });
  }
});
const useIlingo = () => {
  const nuxtApp = useNuxtApp();
  return nuxtApp.$ilingo;
};
const translateValidationMessage = (validator, parameters) => useIlingo().getSync(`validation.${validator}`, parameters, "en");
const login = /* @__PURE__ */ defineNuxtComponent({
  setup() {
    const form = reactive({
      name: "",
      password: "",
      realm_id: ""
    });
    const realmList = resolveComponent("RealmList");
    const identityProviderList = resolveComponent("IdentityProviderList");
    const vuelidate = useVuelidate({
      name: {
        required,
        minLength: minLength(3),
        maxLength: maxLength(255)
      },
      password: {
        required,
        minLength: minLength(3),
        maxLength: maxLength(255)
      },
      realm_id: {}
    }, form);
    const store = useAuthStore();
    const busy = ref(false);
    const identityProviderQuery = computed(() => {
      if (!form.realm_id) {
        return {};
      }
      return {
        filters: {
          realm_id: form.realm_id
        }
      };
    });
    const identityProviderRef = ref(null);
    const submit = async () => {
      try {
        console.log(form);
        await store.login({
          name: form.name,
          password: form.password,
          realmId: form.realm_id
        });
        const route = useRoute();
        const { redirect, ...query } = route.query;
        navigateTo({
          path: redirect || "/",
          query
        });
      } catch (e) {
        if (e instanceof Error) {
          const toast = useToast();
          toast.warning(e.message);
        }
      }
    };
    const app = useNuxtApp();
    Promise.resolve().then(store.logout);
    const render = () => {
      const name = buildFormInput({
        validationResult: vuelidate.value.name,
        validationTranslator: translateValidationMessage,
        labelContent: "Name",
        value: form.name,
        onChange(value) {
          form.name = value;
        }
      });
      const password = buildFormInput({
        validationResult: vuelidate.value.password,
        validationTranslator: translateValidationMessage,
        labelContent: "Password",
        value: form.password,
        onChange(value) {
          form.password = value;
        },
        props: {
          type: "password"
        }
      });
      const submitButton = buildFormSubmit({
        validationResult: vuelidate.value,
        createText: "Login",
        createButtonClass: {
          value: "btn btn-sm btn-dark btn-block",
          presets: {
            [PresetsBuildIn.BOOTSTRAP_V5]: false
          }
        },
        createIconClass: "fa-solid fa-right-to-bracket",
        submit,
        busy
      });
      const realmPicker = [
        h(realmList, { withHeader: true }, {
          [SlotName.HEADER]: () => h("h6", [
            "Realms"
          ]),
          [SlotName.ITEM_ACTIONS]: (props) => {
            const isMaster = props.data.name === REALM_MASTER_NAME;
            const canCheck = !(isMaster && !form.realm_id) && form.realm_id !== props.data.id;
            if (canCheck) {
              return h("button", {
                class: {
                  "btn btn-xs btn-primary": canCheck,
                  "btn btn-xs btn-danger": !canCheck
                },
                onClick($event) {
                  $event.preventDefault();
                  form.realm_id = props.data.id;
                  if (identityProviderRef.value && typeof identityProviderRef.value.load === "function") {
                    identityProviderRef.value.load();
                  }
                }
              }, [
                h("i", {
                  class: {
                    "fa fa-check": canCheck,
                    "fa fa-times": !canCheck
                  }
                })
              ]);
            }
            return h("span", { class: "badge bg-success" }, [
              "active"
            ]);
          }
        })
      ];
      const identityProviderPicker = [
        h(identityProviderList, {
          withHeader: true,
          withSearch: false,
          query: identityProviderQuery,
          ref: identityProviderRef
        }, {
          [SlotName.HEADER]: () => h("h6", [
            "Identity Providers"
          ]),
          [SlotName.ITEMS]: (props) => {
            const elements = [];
            const apiClient = useAPIClient();
            for (let i = 0; i < props.data.length; i++) {
              const element = [
                h("div", [
                  h("a", {
                    href: apiClient.identityProvider.getAuthorizeUri(
                      app.$config.public.apiUrl,
                      props.data[i].id
                    ),
                    class: "btn btn-primary btn-xs"
                  }, [
                    props.data[i].name
                  ])
                ])
              ];
              elements.push(element);
            }
            return h("div", {
              class: "d-flex flex-row"
            }, elements);
          }
        })
      ];
      return h("div", { class: "container" }, [
        h("h4", [
          h("i", { class: "fa-solid fa-arrow-right-to-bracket pe-2" }),
          "Login"
        ]),
        h("div", {
          class: "text-center"
        }, [
          h(Login, {
            height: 320
          })
        ]),
        h("form", {
          onSubmit($event) {
            $event.preventDefault();
            return submit.call(null);
          }
        }, [
          h("div", { class: "row" }, [
            h("div", { class: "col-8" }, [
              name,
              password,
              submitButton,
              h("hr"),
              identityProviderPicker
            ]),
            h("div", { class: "col-4" }, [
              realmPicker
            ])
          ])
        ])
      ]);
    };
    return () => render();
  }
});

export { login as default };
//# sourceMappingURL=login-c34fa258.mjs.map
