@tencentcloud/roomkit-web-vue3/lib/components/PreRoom/PasswordDialog.vue2.js

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const pinia = require("pinia");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
require("../../services/main.js");
const roomService = require("../../services/roomService.js");
const types = require("../../services/types.js");
const index = require("../../locales/index.js");
require("@tencentcloud/tuiroom-engine-js");
require("../../utils/environment.js");
require("mitt");
require("../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const index$1 = require("../common/base/Dialog/index.js");
const index$2 = require("../common/base/Input/index.js");
const basic = require("../../stores/basic.js");
const common = require("../../utils/common.js");
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "PasswordDialog",
  props: {
    visible: { type: Boolean }
  },
  setup(__props) {
    const basicStore = basic.useBasicStore();
    const { roomId } = pinia.storeToRefs(basicStore);
    const { t } = index.useI18n();
    const inputPassword = Vue.ref("");
    const props = __props;
    const isShowPasswordContainer = Vue.ref(false);
    const isJoiningRoom = Vue.ref(false);
    const isJoinButtonDisable = Vue.computed(
      () => inputPassword.value.length === 0 || isJoiningRoom.value
    );
    Vue.watch(
      () => props.visible,
      (val) => {
        isShowPasswordContainer.value = val;
      },
      {
        immediate: true
      }
    );
    async function joinRoom() {
      try {
        isJoiningRoom.value = true;
        await roomService.roomService.join(roomId.value, {
          isOpenCamera: false,
          isOpenMicrophone: true,
          password: inputPassword.value
        });
        roomService.roomService.emit(types.EventType.ROOM_JOIN);
      } catch (error) {
        isJoiningRoom.value = false;
      }
    }
    function cancelInputPassword() {
      inputPassword.value = "";
      roomService.roomService.emit(types.EventType.ROOM_ERROR);
    }
    Vue.watch(
      () => inputPassword.value,
      async (val) => {
        if (val && common.invalidPasswordRegex.test(val)) {
          await Vue.nextTick();
          inputPassword.value = val.replace(common.invalidPasswordRegex, "");
        }
      }
    );
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createBlock(Vue.unref(index$1.default), {
        modelValue: isShowPasswordContainer.value,
        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isShowPasswordContainer.value = $event),
        title: Vue.unref(t)("The room is encrypted"),
        modal: true,
        "show-close": false,
        "close-on-click-modal": false,
        width: "420px",
        "append-to-body": true,
        "confirm-button": Vue.unref(t)("Join"),
        "cancel-button": Vue.unref(t)("Cancel"),
        onConfirm: joinRoom,
        onCancel: cancelInputPassword
      }, {
        footer: Vue.withCtx(() => [
          Vue.createElementVNode("span", null, [
            Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
              disabled: isJoinButtonDisable.value,
              onClick: joinRoom,
              type: "primary",
              style: { "min-width": "88px" }
            }, {
              default: Vue.withCtx(() => [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Join")), 1)
              ]),
              _: 1
            }, 8, ["disabled"]),
            Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
              onClick: cancelInputPassword,
              style: { "min-width": "88px" }
            }, {
              default: Vue.withCtx(() => [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
              ]),
              _: 1
            })
          ])
        ]),
        default: Vue.withCtx(() => [
          Vue.createVNode(Vue.unref(index$2.default), {
            "model-value": inputPassword.value,
            onInput: _cache[1] || (_cache[1] = ($event) => inputPassword.value = $event),
            placeholder: Vue.unref(t)("Please enter the password"),
            type: "password",
            maxlength: "32"
          }, {
            suffixIcon: Vue.withCtx(() => [
              Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconCloseInput), {
                onClick: _cache[0] || (_cache[0] = ($event) => inputPassword.value = ""),
                class: "svg-icon"
              })
            ]),
            _: 1
          }, 8, ["model-value", "placeholder"])
        ]),
        _: 1
      }, 8, ["modelValue", "title", "confirm-button", "cancel-button"]);
    };
  }
});
exports.default = _sfc_main;