@vue-skuilder/common-ui 0.2.35 → 0.2.36

package/dist/components/auth/UserLoginAndRegistrationContainer.vue_vue_type_script_setup_true_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserLoginAndRegistrationContainer.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../src/components/auth/UserLoginAndRegistrationContainer.vue"],"sourcesContent":["<template>\n  <div v-if=\"userReady && display\">\n    <transition name=\"component-fade\" mode=\"out-in\">\n      <div v-if=\"guestMode\" key=\"login-buttons\">\n        <!-- Registration button: only if showLoginRegistration is true -->\n        <v-dialog v-model=\"regDialog\" width=\"500px\" v-if=\"authUIConfig.showLoginRegistration\">\n          <template #activator=\"{ props }\">\n            <v-btn class=\"mr-2\" size=\"small\" color=\"success\" v-bind=\"props\">Sign Up</v-btn>\n          </template>\n          <UserRegistration\n            @toggle=\"toggle\"\n            @signup-success=\"handleSignupSuccess\"\n            :on-signup-success=\"handleSignupSuccess\"\n          />\n        </v-dialog>\n        \n        <!-- Login button: always show in guest mode -->\n        <v-dialog v-model=\"loginDialog\" width=\"500px\">\n          <template #activator=\"{ props }\">\n            <v-btn size=\"small\" color=\"success\" v-bind=\"props\">Log In</v-btn>\n          </template>\n          <UserLogin @toggle=\"toggle\" @forgot-password=\"openResetDialog\" />\n        </v-dialog>\n\n        <!-- Password reset dialog: opened from login via \"Forgot password?\" -->\n        <v-dialog v-model=\"resetDialog\" width=\"500px\">\n          <RequestPasswordReset @cancel=\"closeResetDialog\" @success=\"closeResetDialog\" />\n        </v-dialog>\n      </div>\n      <div v-else key=\"user-chip\">\n        <user-chip />\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref } from 'vue';\nimport { useRoute } from 'vue-router';\nimport UserLogin from './UserLogin.vue';\nimport UserRegistration from './UserRegistration.vue';\nimport RequestPasswordReset from './RequestPasswordReset.vue';\nimport UserChip from './UserChip.vue';\nimport { useAuthStore } from '../../stores/useAuthStore';\nimport { useAuthUI } from '../../composables/useAuthUI';\nimport { GuestUsername } from '@vue-skuilder/db';\n\n// Define props\nconst props = defineProps<{\n  showLoginButton?: boolean;\n  redirectToPath?: string;\n  showRegistration?: boolean;\n  onSignupSuccess?: (payload: { username: string }) => void;\n}>();\n\n// Define emits (keeping for backward compatibility if needed)\nconst emit = defineEmits<{\n  'signup-success': [payload: { username: string }]\n}>();\n\nconst route = useRoute();\nconst authStore = useAuthStore();\nconst authUI = useAuthUI();\n\n// Initialize auth UI detection\nonMounted(async () => {\n  await authUI.detectSyncStrategy();\n});\n\nconst display = computed(() => {\n  if (!route.name || typeof route.name !== 'string') {\n    return true;\n  }\n  const routeName = route.name.toLowerCase();\n  return !(routeName === 'login' || routeName === 'signup');\n});\n\nconst userReady = computed(() => authStore.onLoadComplete);\n\nconst guestMode = computed(() => {\n  if (authStore._user) {\n    return authStore._user.getUsername().startsWith(GuestUsername);\n  }\n  return !authStore.loginAndRegistration.loggedIn;\n});\n\nconst authUIConfig = computed(() => {\n  const baseConfig = authUI.config.value || {\n    showLoginRegistration: true,\n    showLogout: true, \n    showResetData: false,\n    logoutLabel: 'Log out',\n    resetLabel: '',\n  };\n  \n  // Apply prop overrides\n  return {\n    ...baseConfig,\n    ...(props.showRegistration !== undefined && { showLoginRegistration: props.showRegistration })\n  };\n});\n\nconst regDialog = computed({\n  get: () => authStore.loginAndRegistration.regDialogOpen,\n  set: (value: boolean) => {\n    authStore.loginAndRegistration.regDialogOpen = value;\n  },\n});\n\nconst loginDialog = computed({\n  get: () => authStore.loginAndRegistration.loginDialogOpen,\n  set: (value: boolean) => {\n    authStore.loginAndRegistration.loginDialogOpen = value;\n  },\n});\n\n// Password reset dialog state (local, not in auth store)\nconst resetDialog = ref(false);\n\nconst toggle = () => {\n  if (regDialog.value && loginDialog.value) {\n    throw new Error('Registration / Login dialogs both activated.');\n  } else if (regDialog.value === loginDialog.value) {\n    throw new Error('Registration / Login dialogs toggled while both were dormant.');\n  } else {\n    regDialog.value = !regDialog.value;\n    loginDialog.value = !loginDialog.value;\n  }\n};\n\nconst openResetDialog = () => {\n  loginDialog.value = false; // Close login dialog\n  resetDialog.value = true; // Open reset dialog\n};\n\nconst closeResetDialog = () => {\n  resetDialog.value = false;\n};\n\nconst handleSignupSuccess = (payload: { username: string }) => {\n  // Close the registration dialog\n  regDialog.value = false;\n\n  // Call the callback prop if provided (preferred method)\n  if (props.onSignupSuccess) {\n    props.onSignupSuccess(payload);\n  }\n\n  // Also emit event for backward compatibility\n  emit('signup-success', payload);\n};\n</script>\n\n<style scoped>\n.component-fade-enter-active,\n.component-fade-leave-active {\n  transition: opacity 0.5s ease;\n}\n.component-fade-enter,\n.component-fade-leave-to {\n  opacity: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GAQR,IAAO,GAIP,IAAQ,GAAU,EAClB,IAAY,GAAc,EAC1B,IAAS,GAAW;AAG1B,IAAU,YAAY;AACpB,SAAM,EAAO,oBAAoB;IACjC;EAEF,IAAM,IAAU,QAAe;AAC7B,OAAI,CAAC,EAAM,QAAQ,OAAO,EAAM,QAAS,SACvC,QAAO;GAET,IAAM,IAAY,EAAM,KAAK,aAAa;AAC1C,UAAO,EAAE,MAAc,WAAW,MAAc;IAChD,EAEI,IAAY,QAAe,EAAU,eAAe,EAEpD,IAAY,QACZ,EAAU,QACL,EAAU,MAAM,aAAa,CAAC,WAAW,EAAc,GAEzD,CAAC,EAAU,qBAAqB,SACvC,EAEI,IAAe,SAUZ;GACL,GAViB,EAAO,OAAO,SAAS;IACxC,uBAAuB;IACvB,YAAY;IACZ,eAAe;IACf,aAAa;IACb,YAAY;IACb;GAKC,GAAI,EAAM,qBAAqB,KAAA,KAAa,EAAE,uBAAuB,EAAM,kBAAkB;GAC9F,EACD,EAEI,IAAY,EAAS;GACzB,WAAW,EAAU,qBAAqB;GAC1C,MAAM,MAAmB;AACvB,MAAU,qBAAqB,gBAAgB;;GAElD,CAAC,EAEI,IAAc,EAAS;GAC3B,WAAW,EAAU,qBAAqB;GAC1C,MAAM,MAAmB;AACvB,MAAU,qBAAqB,kBAAkB;;GAEpD,CAAC,EAGI,IAAc,EAAI,GAAM,EAExB,eAAe;AACnB,OAAI,EAAU,SAAS,EAAY,MACjC,OAAU,MAAM,+CAA+C;OACtD,EAAU,UAAU,EAAY,MACzC,OAAU,MAAM,gEAAgE;AAGhF,GADA,EAAU,QAAQ,CAAC,EAAU,OAC7B,EAAY,QAAQ,CAAC,EAAY;KAI/B,wBAAwB;AAE5B,GADA,EAAY,QAAQ,IACpB,EAAY,QAAQ;KAGhB,yBAAyB;AAC7B,KAAY,QAAQ;KAGhB,uBAAuB,MAAkC;AAU7D,GARA,EAAU,QAAQ,IAGd,EAAM,mBACR,EAAM,gBAAgB,EAAQ,EAIhC,EAAK,kBAAkB,EAAQ"}

package/dist/components/auth/UserRegistration.mjs

@@ -0,0 +1,147 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./UserRegistration.vue_vue_type_script_lang.mjs";
+import { createBlock as n, createTextVNode as r, createVNode as i, openBlock as a, resolveComponent as o, withCtx as s, withModifiers as c } from "vue";
+//#region src/components/auth/UserRegistration.vue
+function _sfc_render(e, t, l, u, d, f) {
+	let p = o("v-card-title"), m = o("v-text-field"), h = o("v-btn"), g = o("v-snackbar"), _ = o("v-icon"), v = o("router-link"), y = o("v-form"), b = o("v-card-text"), x = o("v-card");
+	return a(), n(x, null, {
+		default: s(() => [i(p, { class: "text-h5 bg-grey-lighten-2" }, {
+			default: s(() => t[7] || (t[7] = [r(" Create an Account ")])),
+			_: 1
+		}), i(b, null, {
+			default: s(() => [i(y, { onSubmit: c(e.createUser, ["prevent"]) }, {
+				default: s(() => [
+					i(m, {
+						modelValue: e.email,
+						"onUpdate:modelValue": t[0] || (t[0] = (t) => e.email = t),
+						name: "email",
+						label: "Email address",
+						type: "email",
+						"prepend-icon": "mdi-email",
+						error: e.emailError,
+						hint: e.emailHint,
+						onBlur: e.validateEmail
+					}, null, 8, [
+						"modelValue",
+						"error",
+						"hint",
+						"onBlur"
+					]),
+					i(m, {
+						id: "",
+						ref: "userNameTextField",
+						modelValue: e.username,
+						"onUpdate:modelValue": t[1] || (t[1] = (t) => e.username = t),
+						name: "username",
+						label: "Choose a Username",
+						"prepend-icon": "mdi-account-circle",
+						error: e.usernameError,
+						hint: e.usernameHint,
+						onBlur: e.validateUsername
+					}, null, 8, [
+						"modelValue",
+						"error",
+						"hint",
+						"onBlur"
+					]),
+					i(m, {
+						modelValue: e.password,
+						"onUpdate:modelValue": t[2] || (t[2] = (t) => e.password = t),
+						"prepend-icon": "mdi-lock",
+						name: "password",
+						hover: "Show password",
+						label: "Create a password",
+						hint: e.passwordError,
+						error: !!e.passwordError,
+						min: "4",
+						"append-icon": e.passwordVisible ? "mdi-eye-off" : "mdi-eye",
+						type: e.passwordVisible ? "text" : "password",
+						"onClick:append": t[3] || (t[3] = () => e.passwordVisible = !e.passwordVisible)
+					}, null, 8, [
+						"modelValue",
+						"hint",
+						"error",
+						"append-icon",
+						"type"
+					]),
+					i(m, {
+						modelValue: e.retypedPassword,
+						"onUpdate:modelValue": t[4] || (t[4] = (t) => e.retypedPassword = t),
+						"prepend-icon": "mdi-lock",
+						name: "retypedPassword",
+						hover: "Show password",
+						label: "Retype your password",
+						disabled: e.password === "" || !!e.passwordError,
+						hint: e.passwordRetypeError,
+						min: "4",
+						type: e.passwordVisible ? "text" : "password"
+					}, null, 8, [
+						"modelValue",
+						"disabled",
+						"hint",
+						"type"
+					]),
+					i(g, {
+						modelValue: e.badLoginAttempt,
+						"onUpdate:modelValue": t[6] || (t[6] = (t) => e.badLoginAttempt = t),
+						location: "bottom right",
+						timeout: 5e3
+					}, {
+						default: s(() => [t[9] || (t[9] = r(" Username or password was incorrect. ")), i(h, {
+							color: "pink",
+							variant: "text",
+							onClick: t[5] || (t[5] = (t) => e.badLoginAttempt = !1)
+						}, {
+							default: s(() => t[8] || (t[8] = [r(" Close ")])),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["modelValue"]),
+					i(h, {
+						class: "mr-2 my-2",
+						type: "submit",
+						loading: e.awaitingResponse,
+						color: e.buttonStatus.color,
+						disabled: !!e.passwordError || e.password !== e.retypedPassword
+					}, {
+						default: s(() => [i(_, { start: "" }, {
+							default: s(() => t[10] || (t[10] = [r("mdi-lock-open")])),
+							_: 1
+						}), t[11] || (t[11] = r(" Create Account "))]),
+						_: 1
+					}, 8, [
+						"loading",
+						"color",
+						"disabled"
+					]),
+					e.registrationRoute ? (a(), n(v, {
+						key: 0,
+						to: "login"
+					}, {
+						default: s(() => [i(h, { variant: "text" }, {
+							default: s(() => t[12] || (t[12] = [r("Log In")])),
+							_: 1
+						})]),
+						_: 1
+					})) : (a(), n(h, {
+						key: 1,
+						variant: "text",
+						onClick: e.toggle
+					}, {
+						default: s(() => t[13] || (t[13] = [r(" Log In ")])),
+						_: 1
+					}, 8, ["onClick"]))
+				]),
+				_: 1
+			}, 8, ["onSubmit"])]),
+			_: 1
+		})]),
+		_: 1
+	});
+}
+var l = /* @__PURE__ */ e(t, [["render", _sfc_render]]);
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=UserRegistration.mjs.map

package/dist/components/auth/UserRegistration.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserRegistration.mjs","names":[],"sources":["../../../src/components/auth/UserRegistration.vue"],"sourcesContent":["<template>\n  <v-card>\n    <v-card-title class=\"text-h5 bg-grey-lighten-2\"> Create an Account </v-card-title>\n\n    <v-card-text>\n      <v-form @submit.prevent=\"createUser\">\n        <v-text-field\n          v-model=\"email\"\n          name=\"email\"\n          label=\"Email address\"\n          type=\"email\"\n          prepend-icon=\"mdi-email\"\n          :error=\"emailError\"\n          :hint=\"emailHint\"\n          @blur=\"validateEmail\"\n        ></v-text-field>\n        <v-text-field\n          id=\"\"\n          ref=\"userNameTextField\"\n          v-model=\"username\"\n          name=\"username\"\n          label=\"Choose a Username\"\n          prepend-icon=\"mdi-account-circle\"\n          :error=\"usernameError\"\n          :hint=\"usernameHint\"\n          @blur=\"validateUsername\"\n        ></v-text-field>\n        <v-text-field\n          v-model=\"password\"\n          prepend-icon=\"mdi-lock\"\n          name=\"password\"\n          hover=\"Show password\"\n          label=\"Create a password\"\n          :hint=\"passwordError\"\n          :error=\"!!passwordError\"\n          min=\"4\"\n          :append-icon=\"passwordVisible ? 'mdi-eye-off' : 'mdi-eye'\"\n          :type=\"passwordVisible ? 'text' : 'password'\"\n          @click:append=\"() => (passwordVisible = !passwordVisible)\"\n        ></v-text-field>\n        <v-text-field\n          v-model=\"retypedPassword\"\n          prepend-icon=\"mdi-lock\"\n          name=\"retypedPassword\"\n          hover=\"Show password\"\n          label=\"Retype your password\"\n          :disabled=\"password === '' || !!passwordError\"\n          :hint=\"passwordRetypeError\"\n          min=\"4\"\n          :type=\"passwordVisible ? 'text' : 'password'\"\n        ></v-text-field>\n\n        <!-- <v-checkbox label=\"Student\" v-model=\"student\" ></v-checkbox>\n            <v-checkbox label=\"Teacher\" v-model=\"teacher\" ></v-checkbox>\n            <v-checkbox label=\"Author\" v-model=\"author\" ></v-checkbox> -->\n\n        <v-snackbar v-model=\"badLoginAttempt\" location=\"bottom right\" :timeout=\"5000\">\n          Username or password was incorrect.\n          <v-btn color=\"pink\" variant=\"text\" @click=\"badLoginAttempt = false\"> Close </v-btn>\n        </v-snackbar>\n        <v-btn\n          class=\"mr-2 my-2\"\n          type=\"submit\"\n          :loading=\"awaitingResponse\"\n          :color=\"buttonStatus.color\"\n          :disabled=\"!!passwordError || password !== retypedPassword\"\n        >\n          <v-icon start>mdi-lock-open</v-icon>\n          Create Account\n        </v-btn>\n        <router-link v-if=\"registrationRoute\" to=\"login\">\n          <v-btn variant=\"text\">Log In</v-btn>\n        </router-link>\n        <v-btn v-else variant=\"text\" @click=\"toggle\"> Log In </v-btn>\n      </v-form>\n    </v-card-text>\n  </v-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { UserDBInterface } from '@vue-skuilder/db';\nimport { alertUser } from '../SnackbarService';\nimport { Status, log } from '@vue-skuilder/common';\nimport { getCurrentUser, useAuthStore } from '../../stores/useAuthStore';\nimport { sendVerificationEmail } from '../../services/authAPI';\nimport { validatePassword } from '../../utils/passwordValidation';\n\nexport default defineComponent({\n  name: 'UserRegistration',\n\n  props: {\n    onSignupSuccess: {\n      type: Function as PropType<(payload: { username: string }) => void>,\n      required: false,\n    },\n  },\n\n  emits: ['toggle', 'signup-success'],\n\n  data() {\n    return {\n      email: '',\n      username: '',\n      password: '',\n      retypedPassword: '',\n      passwordVisible: false,\n      emailError: false,\n      emailHint: '',\n      usernameValidationInProgress: false,\n      usernameError: false,\n      usernameHint: '',\n      awaitingResponse: false,\n      badLoginAttempt: false,\n      userSecret: '',\n      secret: 'goons',\n      user: null as UserDBInterface | null,\n      roles: ['Student', 'Teacher', 'Author'] as string[],\n      student: true,\n      teacher: false,\n      author: false,\n      authStore: useAuthStore(),\n    };\n  },\n\n  computed: {\n    registrationRoute(): boolean {\n      return typeof this.$route.name === 'string' && this.$route.name.toLowerCase() === 'signup';\n    },\n    buttonStatus() {\n      return {\n        color: this.badLoginAttempt ? 'error' : 'success',\n        text: this.badLoginAttempt ? 'Try again' : 'Log In',\n      };\n    },\n    passwordError(): string {\n      return validatePassword(this.password);\n    },\n    passwordRetypeError(): string {\n      console.log('[RTE]');\n      if (this.password !== this.retypedPassword) {\n        return 'Passwords must match.';\n      } else {\n        return '';\n      }\n    },\n  },\n\n  async created() {\n    this.user = await getCurrentUser();\n  },\n\n  methods: {\n    toggle() {\n      log('Toggling registration / login forms.');\n      this.$emit('toggle');\n    },\n\n    validateEmail() {\n      this.emailError = false;\n      // Basic email validation\n      const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n      if (this.email && !emailRegex.test(this.email)) {\n        this.emailError = true;\n        this.emailHint = 'Please enter a valid email address';\n      } else {\n        this.emailHint = '';\n      }\n    },\n\n    validateUsername() {\n      this.usernameError = false;\n    },\n\n    async createUser() {\n      this.awaitingResponse = true;\n\n      // Validate password before proceeding\n      if (this.passwordError) {\n        alertUser({\n          text: this.passwordError,\n          status: Status.error,\n        });\n        this.awaitingResponse = false;\n        return;\n      }\n\n      log(`\nUser creation\n-------------\n\nName: ${this.username}\nStudent: ${this.student}\nTeacher: ${this.teacher}\nAuthor: ${this.author}\n`);\n      if (this.password === this.retypedPassword) {\n        if (!this.user) {\n          console.error('ERROR: No user object available');\n          return;\n        }\n\n        this.user\n          .createAccount(this.username, this.password)\n          .then(async (resp: any) => {\n            if (resp.status === Status.ok) {\n              // Account created successfully via PouchDB\n              this.authStore.loginAndRegistration.loggedIn = true;\n              this.authStore.loginAndRegistration.init = false;\n              this.authStore.loginAndRegistration.init = true;\n\n              // Send verification email if an address was provided. The address\n              // is persisted to the _users doc by send-verification (the single\n              // source of truth); no separate CONFIG.email copy is kept.\n              if (this.email) {\n                try {\n                  // Trigger verification email send with current origin\n                  const origin = typeof window !== 'undefined' ? window.location.origin : undefined;\n                  const verificationResult = await sendVerificationEmail(this.username, this.email, origin);\n                  if (verificationResult.ok) {\n                    alertUser({\n                      text: 'Account created! Please check your email to verify your account.',\n                      status: Status.ok,\n                    });\n                  } else {\n                    log(`Warning: Failed to send verification email: ${verificationResult.error}`);\n                    // Continue anyway - user can still use the account\n                  }\n                } catch (emailError) {\n                  console.error('Email save/send error:', emailError);\n                  log(`Warning: Failed to save email or send verification: ${emailError}`);\n                  // Continue anyway - account was created successfully\n                }\n              }\n\n              // Emit signup success event for parent to handle\n              // Use the username we just created rather than calling getCurrentUser() again\n              // which can fail if the auth state hasn't fully synchronized\n\n              // Call callback prop if provided (preferred method)\n              if (this.onSignupSuccess) {\n                console.log('[UserRegistration] Calling onSignupSuccess callback');\n                this.onSignupSuccess({ username: this.username });\n              }\n\n              // Also emit for backward compatibility\n              this.$emit('signup-success', { username: this.username });\n            } else {\n              if (resp.error === 'This username is taken!') {\n                this.usernameError = true;\n                this.usernameHint = 'Try a different name.';\n                (this.$refs.userNameTextField as HTMLInputElement).focus();\n                alertUser({\n                  text: `The name ${this.username} is taken!`,\n                  status: resp.status,\n                });\n              } else {\n                alertUser({\n                  text: resp.error,\n                  status: resp.status,\n                });\n              }\n            }\n          })\n          .catch((e) => {\n            console.error('[UserRegistration] .catch() called with error:', e);\n            if (e) {\n              const errorText = e?.message || e?.error || e?.toString() || 'Account creation failed';\n              alertUser({\n                text: errorText,\n                status: Status.error,\n              });\n            }\n          });\n        this.awaitingResponse = false;\n      } else {\n        alertUser({\n          text: 'Passwords do not match.',\n          status: Status.error,\n        });\n        this.awaitingResponse = false;\n      }\n    },\n  },\n});\n</script>\n"],"mappings":";;;;;;;aACE,EA2ES,GAAA,MAAA;EA5EX,SAAA,QAEsF,CAAlF,EAAkF,GAAA,EAApE,OAAM,6BAA2B,EAAA;GAFnD,SAAA,QAEuE,EAAA,OAAA,EAAA,KAAA,CAFvE,EAEoD,sBAAmB,CAAA,EAAA;GAFvE,GAAA;MAII,EAuEc,GAAA,MAAA;GA3ElB,SAAA,QA0Ee,CArET,EAqES,GAAA,EArEA,UALf,EAK+B,EAAA,YAAU,CAAA,UAAA,CAAA,EAAA,EAAA;IALzC,SAAA,QAewB;KAThB,EASgB,GAAA;MAfxB,YAOmB,EAAA;MAPnB,uBAAA,EAAA,OAAA,EAAA,MAAA,MAAA,EAOmB,QAAK;MACd,MAAK;MACL,OAAM;MACN,MAAK;MACL,gBAAa;MACZ,OAAO,EAAA;MACP,MAAM,EAAA;MACN,QAAM,EAAA;;;;;;;KAET,EAUgB,GAAA;MATd,IAAG;MACH,KAAI;MAlBd,YAmBmB,EAAA;MAnBnB,uBAAA,EAAA,OAAA,EAAA,MAAA,MAAA,EAmBmB,WAAQ;MACjB,MAAK;MACL,OAAM;MACN,gBAAa;MACZ,OAAO,EAAA;MACP,MAAM,EAAA;MACN,QAAM,EAAA;;;;;;;KAET,EAYgB,GAAA;MAvCxB,YA4BmB,EAAA;MA5BnB,uBAAA,EAAA,OAAA,EAAA,MAAA,MAAA,EA4BmB,WAAQ;MACjB,gBAAa;MACb,MAAK;MACL,OAAM;MACN,OAAM;MACL,MAAM,EAAA;MACN,OAAK,CAAA,CAAI,EAAA;MACV,KAAI;MACH,eAAa,EAAA,kBAAe,gBAAA;MAC5B,MAAM,EAAA,kBAAe,SAAA;MACrB,kBAAY,EAAA,OAAA,EAAA,WAAS,EAAA,kBAAe,CAAI,EAAA;;;;;;;;KAE3C,EAUgB,GAAA;MAlDxB,YAyCmB,EAAA;MAzCnB,uBAAA,EAAA,OAAA,EAAA,MAAA,MAAA,EAyCmB,kBAAe;MACxB,gBAAa;MACb,MAAK;MACL,OAAM;MACN,OAAM;MACL,UAAU,EAAA,aAAQ,MAAA,CAAA,CAAa,EAAA;MAC/B,MAAM,EAAA;MACP,KAAI;MACH,MAAM,EAAA,kBAAe,SAAA;;;;;;;KAOxB,EAGa,GAAA;MA3DrB,YAwD6B,EAAA;MAxD7B,uBAAA,EAAA,OAAA,EAAA,MAAA,MAAA,EAwD6B,kBAAe;MAAE,UAAS;MAAgB,SAAS;;MAxDhF,SAAA,QA0DU,CAAA,EAAA,OAAA,EAAA,KA1DV,EAwDsF,wCAE5E,GAAA,EAAmF,GAAA;OAA5E,OAAM;OAAO,SAAQ;OAAQ,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,kBAAe;;OA1DpE,SAAA,QA0DqF,EAAA,OAAA,EAAA,KAAA,CA1DrF,EA0D8E,UAAO,CAAA,EAAA;OA1DrF,GAAA;;MAAA,GAAA;;KA4DQ,EASQ,GAAA;MARN,OAAM;MACN,MAAK;MACJ,SAAS,EAAA;MACT,OAAO,EAAA,aAAa;MACpB,UAAQ,CAAA,CAAI,EAAA,iBAAiB,EAAA,aAAa,EAAA;;MAjErD,SAAA,QAmE8C,CAApC,EAAoC,GAAA,EAA5B,OAAA,IAAK,EAAA;OAnEvB,SAAA,QAmEqC,EAAA,QAAA,EAAA,MAAA,CAnErC,EAmEwB,gBAAa,CAAA,EAAA;OAnErC,GAAA;4BAAA,EAmE8C,mBAEtC,EAAA,CAAA;MArER,GAAA;;;;;;KAsE2B,EAAA,qBAAA,GAAA,EAAnB,EAEc,GAAA;MAxEtB,KAAA;MAsE8C,IAAG;;MAtEjD,SAAA,QAuE8C,CAApC,EAAoC,GAAA,EAA7B,SAAQ,QAAM,EAAA;OAvE/B,SAAA,QAuEsC,EAAA,QAAA,EAAA,MAAA,CAvEtC,EAuEgC,SAAM,CAAA,EAAA;OAvEtC,GAAA;;MAAA,GAAA;iBAyEQ,EAA6D,GAAA;MAzErE,KAAA;MAyEsB,SAAQ;MAAQ,SAAO,EAAA;;MAzE7C,SAAA,QAyE6D,EAAA,QAAA,EAAA,MAAA,CAzE7D,EAyEqD,WAAQ,CAAA,EAAA;MAzE7D,GAAA;;;IAAA,GAAA;;GAAA,GAAA;;EAAA,GAAA"}

package/dist/components/auth/UserRegistration.vue_vue_type_script_lang.mjs

@@ -0,0 +1,130 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import { alertUser as e } from "../SnackbarService.mjs";
+import { sendVerificationEmail as t } from "../../services/authAPI.mjs";
+import { getCurrentUser as n, useAuthStore as r } from "../../stores/useAuthStore.mjs";
+import { validatePassword as i } from "../../utils/passwordValidation.mjs";
+import { defineComponent as a } from "vue";
+import { Status as o, log as s } from "@vue-skuilder/common";
+//#region src/components/auth/UserRegistration.vue?vue&type=script&lang.ts
+var c = a({
+	name: "UserRegistration",
+	props: { onSignupSuccess: {
+		type: Function,
+		required: !1
+	} },
+	emits: ["toggle", "signup-success"],
+	data() {
+		return {
+			email: "",
+			username: "",
+			password: "",
+			retypedPassword: "",
+			passwordVisible: !1,
+			emailError: !1,
+			emailHint: "",
+			usernameValidationInProgress: !1,
+			usernameError: !1,
+			usernameHint: "",
+			awaitingResponse: !1,
+			badLoginAttempt: !1,
+			userSecret: "",
+			secret: "goons",
+			user: null,
+			roles: [
+				"Student",
+				"Teacher",
+				"Author"
+			],
+			student: !0,
+			teacher: !1,
+			author: !1,
+			authStore: r()
+		};
+	},
+	computed: {
+		registrationRoute() {
+			return typeof this.$route.name == "string" && this.$route.name.toLowerCase() === "signup";
+		},
+		buttonStatus() {
+			return {
+				color: this.badLoginAttempt ? "error" : "success",
+				text: this.badLoginAttempt ? "Try again" : "Log In"
+			};
+		},
+		passwordError() {
+			return i(this.password);
+		},
+		passwordRetypeError() {
+			return console.log("[RTE]"), this.password === this.retypedPassword ? "" : "Passwords must match.";
+		}
+	},
+	async created() {
+		this.user = await n();
+	},
+	methods: {
+		toggle() {
+			s("Toggling registration / login forms."), this.$emit("toggle");
+		},
+		validateEmail() {
+			this.emailError = !1, this.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email) ? (this.emailError = !0, this.emailHint = "Please enter a valid email address") : this.emailHint = "";
+		},
+		validateUsername() {
+			this.usernameError = !1;
+		},
+		async createUser() {
+			if (this.awaitingResponse = !0, this.passwordError) {
+				e({
+					text: this.passwordError,
+					status: o.error
+				}), this.awaitingResponse = !1;
+				return;
+			}
+			if (s(`
+User creation
+-------------
+
+Name: ${this.username}
+Student: ${this.student}
+Teacher: ${this.teacher}
+Author: ${this.author}
+`), this.password === this.retypedPassword) {
+				if (!this.user) {
+					console.error("ERROR: No user object available");
+					return;
+				}
+				this.user.createAccount(this.username, this.password).then(async (n) => {
+					if (n.status === o.ok) {
+						if (this.authStore.loginAndRegistration.loggedIn = !0, this.authStore.loginAndRegistration.init = !1, this.authStore.loginAndRegistration.init = !0, this.email) try {
+							let n = typeof window < "u" ? window.location.origin : void 0, r = await t(this.username, this.email, n);
+							r.ok ? e({
+								text: "Account created! Please check your email to verify your account.",
+								status: o.ok
+							}) : s(`Warning: Failed to send verification email: ${r.error}`);
+						} catch (e) {
+							console.error("Email save/send error:", e), s(`Warning: Failed to save email or send verification: ${e}`);
+						}
+						this.onSignupSuccess && (console.log("[UserRegistration] Calling onSignupSuccess callback"), this.onSignupSuccess({ username: this.username })), this.$emit("signup-success", { username: this.username });
+					} else n.error === "This username is taken!" ? (this.usernameError = !0, this.usernameHint = "Try a different name.", this.$refs.userNameTextField.focus(), e({
+						text: `The name ${this.username} is taken!`,
+						status: n.status
+					})) : e({
+						text: n.error,
+						status: n.status
+					});
+				}).catch((t) => {
+					console.error("[UserRegistration] .catch() called with error:", t), t && e({
+						text: t?.message || t?.error || t?.toString() || "Account creation failed",
+						status: o.error
+					});
+				}), this.awaitingResponse = !1;
+			} else e({
+				text: "Passwords do not match.",
+				status: o.error
+			}), this.awaitingResponse = !1;
+		}
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=UserRegistration.vue_vue_type_script_lang.mjs.map

package/dist/components/auth/UserRegistration.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserRegistration.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../src/components/auth/UserRegistration.vue"],"sourcesContent":["<template>\n  <v-card>\n    <v-card-title class=\"text-h5 bg-grey-lighten-2\"> Create an Account </v-card-title>\n\n    <v-card-text>\n      <v-form @submit.prevent=\"createUser\">\n        <v-text-field\n          v-model=\"email\"\n          name=\"email\"\n          label=\"Email address\"\n          type=\"email\"\n          prepend-icon=\"mdi-email\"\n          :error=\"emailError\"\n          :hint=\"emailHint\"\n          @blur=\"validateEmail\"\n        ></v-text-field>\n        <v-text-field\n          id=\"\"\n          ref=\"userNameTextField\"\n          v-model=\"username\"\n          name=\"username\"\n          label=\"Choose a Username\"\n          prepend-icon=\"mdi-account-circle\"\n          :error=\"usernameError\"\n          :hint=\"usernameHint\"\n          @blur=\"validateUsername\"\n        ></v-text-field>\n        <v-text-field\n          v-model=\"password\"\n          prepend-icon=\"mdi-lock\"\n          name=\"password\"\n          hover=\"Show password\"\n          label=\"Create a password\"\n          :hint=\"passwordError\"\n          :error=\"!!passwordError\"\n          min=\"4\"\n          :append-icon=\"passwordVisible ? 'mdi-eye-off' : 'mdi-eye'\"\n          :type=\"passwordVisible ? 'text' : 'password'\"\n          @click:append=\"() => (passwordVisible = !passwordVisible)\"\n        ></v-text-field>\n        <v-text-field\n          v-model=\"retypedPassword\"\n          prepend-icon=\"mdi-lock\"\n          name=\"retypedPassword\"\n          hover=\"Show password\"\n          label=\"Retype your password\"\n          :disabled=\"password === '' || !!passwordError\"\n          :hint=\"passwordRetypeError\"\n          min=\"4\"\n          :type=\"passwordVisible ? 'text' : 'password'\"\n        ></v-text-field>\n\n        <!-- <v-checkbox label=\"Student\" v-model=\"student\" ></v-checkbox>\n            <v-checkbox label=\"Teacher\" v-model=\"teacher\" ></v-checkbox>\n            <v-checkbox label=\"Author\" v-model=\"author\" ></v-checkbox> -->\n\n        <v-snackbar v-model=\"badLoginAttempt\" location=\"bottom right\" :timeout=\"5000\">\n          Username or password was incorrect.\n          <v-btn color=\"pink\" variant=\"text\" @click=\"badLoginAttempt = false\"> Close </v-btn>\n        </v-snackbar>\n        <v-btn\n          class=\"mr-2 my-2\"\n          type=\"submit\"\n          :loading=\"awaitingResponse\"\n          :color=\"buttonStatus.color\"\n          :disabled=\"!!passwordError || password !== retypedPassword\"\n        >\n          <v-icon start>mdi-lock-open</v-icon>\n          Create Account\n        </v-btn>\n        <router-link v-if=\"registrationRoute\" to=\"login\">\n          <v-btn variant=\"text\">Log In</v-btn>\n        </router-link>\n        <v-btn v-else variant=\"text\" @click=\"toggle\"> Log In </v-btn>\n      </v-form>\n    </v-card-text>\n  </v-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { UserDBInterface } from '@vue-skuilder/db';\nimport { alertUser } from '../SnackbarService';\nimport { Status, log } from '@vue-skuilder/common';\nimport { getCurrentUser, useAuthStore } from '../../stores/useAuthStore';\nimport { sendVerificationEmail } from '../../services/authAPI';\nimport { validatePassword } from '../../utils/passwordValidation';\n\nexport default defineComponent({\n  name: 'UserRegistration',\n\n  props: {\n    onSignupSuccess: {\n      type: Function as PropType<(payload: { username: string }) => void>,\n      required: false,\n    },\n  },\n\n  emits: ['toggle', 'signup-success'],\n\n  data() {\n    return {\n      email: '',\n      username: '',\n      password: '',\n      retypedPassword: '',\n      passwordVisible: false,\n      emailError: false,\n      emailHint: '',\n      usernameValidationInProgress: false,\n      usernameError: false,\n      usernameHint: '',\n      awaitingResponse: false,\n      badLoginAttempt: false,\n      userSecret: '',\n      secret: 'goons',\n      user: null as UserDBInterface | null,\n      roles: ['Student', 'Teacher', 'Author'] as string[],\n      student: true,\n      teacher: false,\n      author: false,\n      authStore: useAuthStore(),\n    };\n  },\n\n  computed: {\n    registrationRoute(): boolean {\n      return typeof this.$route.name === 'string' && this.$route.name.toLowerCase() === 'signup';\n    },\n    buttonStatus() {\n      return {\n        color: this.badLoginAttempt ? 'error' : 'success',\n        text: this.badLoginAttempt ? 'Try again' : 'Log In',\n      };\n    },\n    passwordError(): string {\n      return validatePassword(this.password);\n    },\n    passwordRetypeError(): string {\n      console.log('[RTE]');\n      if (this.password !== this.retypedPassword) {\n        return 'Passwords must match.';\n      } else {\n        return '';\n      }\n    },\n  },\n\n  async created() {\n    this.user = await getCurrentUser();\n  },\n\n  methods: {\n    toggle() {\n      log('Toggling registration / login forms.');\n      this.$emit('toggle');\n    },\n\n    validateEmail() {\n      this.emailError = false;\n      // Basic email validation\n      const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n      if (this.email && !emailRegex.test(this.email)) {\n        this.emailError = true;\n        this.emailHint = 'Please enter a valid email address';\n      } else {\n        this.emailHint = '';\n      }\n    },\n\n    validateUsername() {\n      this.usernameError = false;\n    },\n\n    async createUser() {\n      this.awaitingResponse = true;\n\n      // Validate password before proceeding\n      if (this.passwordError) {\n        alertUser({\n          text: this.passwordError,\n          status: Status.error,\n        });\n        this.awaitingResponse = false;\n        return;\n      }\n\n      log(`\nUser creation\n-------------\n\nName: ${this.username}\nStudent: ${this.student}\nTeacher: ${this.teacher}\nAuthor: ${this.author}\n`);\n      if (this.password === this.retypedPassword) {\n        if (!this.user) {\n          console.error('ERROR: No user object available');\n          return;\n        }\n\n        this.user\n          .createAccount(this.username, this.password)\n          .then(async (resp: any) => {\n            if (resp.status === Status.ok) {\n              // Account created successfully via PouchDB\n              this.authStore.loginAndRegistration.loggedIn = true;\n              this.authStore.loginAndRegistration.init = false;\n              this.authStore.loginAndRegistration.init = true;\n\n              // Send verification email if an address was provided. The address\n              // is persisted to the _users doc by send-verification (the single\n              // source of truth); no separate CONFIG.email copy is kept.\n              if (this.email) {\n                try {\n                  // Trigger verification email send with current origin\n                  const origin = typeof window !== 'undefined' ? window.location.origin : undefined;\n                  const verificationResult = await sendVerificationEmail(this.username, this.email, origin);\n                  if (verificationResult.ok) {\n                    alertUser({\n                      text: 'Account created! Please check your email to verify your account.',\n                      status: Status.ok,\n                    });\n                  } else {\n                    log(`Warning: Failed to send verification email: ${verificationResult.error}`);\n                    // Continue anyway - user can still use the account\n                  }\n                } catch (emailError) {\n                  console.error('Email save/send error:', emailError);\n                  log(`Warning: Failed to save email or send verification: ${emailError}`);\n                  // Continue anyway - account was created successfully\n                }\n              }\n\n              // Emit signup success event for parent to handle\n              // Use the username we just created rather than calling getCurrentUser() again\n              // which can fail if the auth state hasn't fully synchronized\n\n              // Call callback prop if provided (preferred method)\n              if (this.onSignupSuccess) {\n                console.log('[UserRegistration] Calling onSignupSuccess callback');\n                this.onSignupSuccess({ username: this.username });\n              }\n\n              // Also emit for backward compatibility\n              this.$emit('signup-success', { username: this.username });\n            } else {\n              if (resp.error === 'This username is taken!') {\n                this.usernameError = true;\n                this.usernameHint = 'Try a different name.';\n                (this.$refs.userNameTextField as HTMLInputElement).focus();\n                alertUser({\n                  text: `The name ${this.username} is taken!`,\n                  status: resp.status,\n                });\n              } else {\n                alertUser({\n                  text: resp.error,\n                  status: resp.status,\n                });\n              }\n            }\n          })\n          .catch((e) => {\n            console.error('[UserRegistration] .catch() called with error:', e);\n            if (e) {\n              const errorText = e?.message || e?.error || e?.toString() || 'Account creation failed';\n              alertUser({\n                text: errorText,\n                status: Status.error,\n              });\n            }\n          });\n        this.awaitingResponse = false;\n      } else {\n        alertUser({\n          text: 'Passwords do not match.',\n          status: Status.error,\n        });\n        this.awaitingResponse = false;\n      }\n    },\n  },\n});\n</script>\n"],"mappings":"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"}

package/dist/components/auth/VerifyEmail.mjs

@@ -0,0 +1,118 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./VerifyEmail.vue_vue_type_script_lang.mjs";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, openBlock as c, renderSlot as l, resolveComponent as u, toDisplayString as d, withCtx as f } from "vue";
+//#region src/components/auth/VerifyEmail.vue
+var p = {
+	key: 0,
+	class: "text-center"
+}, m = {
+	key: 1,
+	class: "text-center"
+}, h = { key: 0 }, g = {
+	key: 2,
+	class: "text-center"
+}, _ = {
+	key: 3,
+	class: "text-center"
+};
+function _sfc_render(e, t, v, y, b, x) {
+	let S = u("v-card-title"), C = u("v-progress-circular"), w = u("v-icon"), T = u("v-card-text"), E = u("v-spacer"), D = u("v-btn"), O = u("v-card-actions"), k = u("v-card"), A = u("v-col"), j = u("v-row"), M = u("v-container");
+	return c(), n(M, {
+		class: "fill-height",
+		fluid: ""
+	}, {
+		default: f(() => [s(j, {
+			align: "center",
+			justify: "center"
+		}, {
+			default: f(() => [s(A, {
+				cols: "12",
+				sm: "8",
+				md: "6"
+			}, {
+				default: f(() => [s(k, null, {
+					default: f(() => [
+						s(S, { class: "text-h5 bg-grey-lighten-2" }, {
+							default: f(() => t[2] || (t[2] = [o(" Email Verification ")])),
+							_: 1
+						}),
+						s(T, { class: "pa-6" }, {
+							default: f(() => [e.isVerifying ? (c(), i("div", p, [s(C, {
+								indeterminate: "",
+								color: "primary",
+								size: "64",
+								class: "mb-4"
+							}), t[3] || (t[3] = a("p", null, "Verifying your email...", -1))])) : e.verificationStatus === "success" ? (c(), i("div", m, [
+								s(w, {
+									color: "success",
+									size: "64",
+									class: "mb-4"
+								}, {
+									default: f(() => t[4] || (t[4] = [o("mdi-check-circle")])),
+									_: 1
+								}),
+								t[5] || (t[5] = a("h3", { class: "mb-2" }, "Email Verified!", -1)),
+								t[6] || (t[6] = a("p", null, "Your account has been successfully verified.", -1)),
+								e.username ? (c(), i("p", h, "Welcome, " + d(e.username) + "!", 1)) : r("", !0)
+							])) : e.verificationStatus === "error" ? (c(), i("div", g, [
+								s(w, {
+									color: "error",
+									size: "64",
+									class: "mb-4"
+								}, {
+									default: f(() => t[7] || (t[7] = [o("mdi-alert-circle")])),
+									_: 1
+								}),
+								t[8] || (t[8] = a("h3", { class: "mb-2" }, "Verification Failed", -1)),
+								a("p", null, d(e.errorMessage), 1)
+							])) : (c(), i("div", _, [
+								s(w, {
+									color: "warning",
+									size: "64",
+									class: "mb-4"
+								}, {
+									default: f(() => t[9] || (t[9] = [o("mdi-help-circle")])),
+									_: 1
+								}),
+								t[10] || (t[10] = a("h3", { class: "mb-2" }, "No Verification Token", -1)),
+								t[11] || (t[11] = a("p", null, "Please use the link from your verification email.", -1))
+							]))]),
+							_: 1
+						}),
+						s(O, null, {
+							default: f(() => [s(E), l(e.$slots, "actions", {
+								status: e.verificationStatus,
+								username: e.username
+							}, () => [e.verificationStatus === "success" ? (c(), n(D, {
+								key: 0,
+								color: "primary",
+								onClick: t[0] || (t[0] = (t) => e.$emit("verified", e.username))
+							}, {
+								default: f(() => t[12] || (t[12] = [o(" Continue ")])),
+								_: 1
+							})) : e.verificationStatus === "error" ? (c(), n(D, {
+								key: 1,
+								variant: "text",
+								onClick: t[1] || (t[1] = (t) => e.$emit("error", e.errorMessage))
+							}, {
+								default: f(() => t[13] || (t[13] = [o(" Close ")])),
+								_: 1
+							})) : r("", !0)])]),
+							_: 3
+						})
+					]),
+					_: 3
+				})]),
+				_: 3
+			})]),
+			_: 3
+		})]),
+		_: 3
+	});
+}
+var v = /* @__PURE__ */ e(t, [["render", _sfc_render]]);
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=VerifyEmail.mjs.map

package/dist/components/auth/VerifyEmail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerifyEmail.mjs","names":[],"sources":["../../../src/components/auth/VerifyEmail.vue"],"sourcesContent":["<template>\n  <v-container class=\"fill-height\" fluid>\n    <v-row align=\"center\" justify=\"center\">\n      <v-col cols=\"12\" sm=\"8\" md=\"6\">\n        <v-card>\n          <v-card-title class=\"text-h5 bg-grey-lighten-2\">\n            Email Verification\n          </v-card-title>\n\n          <v-card-text class=\"pa-6\">\n            <!-- Loading state -->\n            <div v-if=\"isVerifying\" class=\"text-center\">\n              <v-progress-circular\n                indeterminate\n                color=\"primary\"\n                size=\"64\"\n                class=\"mb-4\"\n              ></v-progress-circular>\n              <p>Verifying your email...</p>\n            </div>\n\n            <!-- Success state -->\n            <div v-else-if=\"verificationStatus === 'success'\" class=\"text-center\">\n              <v-icon color=\"success\" size=\"64\" class=\"mb-4\">mdi-check-circle</v-icon>\n              <h3 class=\"mb-2\">Email Verified!</h3>\n              <p>Your account has been successfully verified.</p>\n              <p v-if=\"username\">Welcome, {{ username }}!</p>\n            </div>\n\n            <!-- Error state -->\n            <div v-else-if=\"verificationStatus === 'error'\" class=\"text-center\">\n              <v-icon color=\"error\" size=\"64\" class=\"mb-4\">mdi-alert-circle</v-icon>\n              <h3 class=\"mb-2\">Verification Failed</h3>\n              <p>{{ errorMessage }}</p>\n            </div>\n\n            <!-- No token state -->\n            <div v-else class=\"text-center\">\n              <v-icon color=\"warning\" size=\"64\" class=\"mb-4\">mdi-help-circle</v-icon>\n              <h3 class=\"mb-2\">No Verification Token</h3>\n              <p>Please use the link from your verification email.</p>\n            </div>\n          </v-card-text>\n\n          <v-card-actions>\n            <v-spacer></v-spacer>\n            <slot name=\"actions\" :status=\"verificationStatus\" :username=\"username\">\n              <!-- Default action - external apps can override with their own navigation -->\n              <v-btn\n                v-if=\"verificationStatus === 'success'\"\n                color=\"primary\"\n                @click=\"$emit('verified', username)\"\n              >\n                Continue\n              </v-btn>\n              <v-btn\n                v-else-if=\"verificationStatus === 'error'\"\n                variant=\"text\"\n                @click=\"$emit('error', errorMessage)\"\n              >\n                Close\n              </v-btn>\n            </slot>\n          </v-card-actions>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { verifyEmail } from '../../services/authAPI';\nimport { alertUser } from '../SnackbarService';\nimport { Status } from '@vue-skuilder/common';\n\nexport default defineComponent({\n  name: 'VerifyEmail',\n\n  emits: ['verified', 'error'],\n\n  props: {\n    /**\n     * Verification token. If not provided, will try to read from URL query params.\n     */\n    token: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data() {\n    return {\n      isVerifying: false,\n      verificationStatus: null as 'success' | 'error' | null,\n      errorMessage: '',\n      username: '',\n    };\n  },\n\n  async mounted() {\n    await this.performVerification();\n  },\n\n  methods: {\n    async performVerification() {\n      // Get token from prop or URL query params\n      const token = this.token || this.getTokenFromURL();\n\n      if (!token) {\n        this.verificationStatus = 'error';\n        this.errorMessage = 'No verification token provided';\n        return;\n      }\n\n      this.isVerifying = true;\n\n      try {\n        const result = await verifyEmail(token);\n\n        if (result.ok) {\n          this.verificationStatus = 'success';\n          this.username = result.username || '';\n          alertUser({\n            text: 'Email verified successfully!',\n            status: Status.ok,\n          });\n        } else {\n          this.verificationStatus = 'error';\n          this.errorMessage = result.error || 'Verification failed';\n          alertUser({\n            text: result.error || 'Verification failed',\n            status: Status.error,\n          });\n        }\n      } catch (error) {\n        this.verificationStatus = 'error';\n        this.errorMessage = 'An unexpected error occurred';\n        alertUser({\n          text: 'An unexpected error occurred',\n          status: Status.error,\n        });\n      } finally {\n        this.isVerifying = false;\n      }\n    },\n\n    getTokenFromURL(): string | null {\n      if (typeof window === 'undefined') return null;\n\n      const params = new URLSearchParams(window.location.search);\n      return params.get('token');\n    },\n  },\n});\n</script>\n"],"mappings":"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"}

package/dist/components/auth/VerifyEmail.vue_vue_type_script_lang.mjs

@@ -0,0 +1,59 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import { alertUser as e } from "../SnackbarService.mjs";
+import { verifyEmail as t } from "../../services/authAPI.mjs";
+import { defineComponent as n } from "vue";
+import { Status as r } from "@vue-skuilder/common";
+//#region src/components/auth/VerifyEmail.vue?vue&type=script&lang.ts
+var i = n({
+	name: "VerifyEmail",
+	emits: ["verified", "error"],
+	props: { token: {
+		type: String,
+		default: null
+	} },
+	data() {
+		return {
+			isVerifying: !1,
+			verificationStatus: null,
+			errorMessage: "",
+			username: ""
+		};
+	},
+	async mounted() {
+		await this.performVerification();
+	},
+	methods: {
+		async performVerification() {
+			let n = this.token || this.getTokenFromURL();
+			if (!n) {
+				this.verificationStatus = "error", this.errorMessage = "No verification token provided";
+				return;
+			}
+			this.isVerifying = !0;
+			try {
+				let i = await t(n);
+				i.ok ? (this.verificationStatus = "success", this.username = i.username || "", e({
+					text: "Email verified successfully!",
+					status: r.ok
+				})) : (this.verificationStatus = "error", this.errorMessage = i.error || "Verification failed", e({
+					text: i.error || "Verification failed",
+					status: r.error
+				}));
+			} catch {
+				this.verificationStatus = "error", this.errorMessage = "An unexpected error occurred", e({
+					text: "An unexpected error occurred",
+					status: r.error
+				});
+			} finally {
+				this.isVerifying = !1;
+			}
+		},
+		getTokenFromURL() {
+			return typeof window > "u" ? null : new URLSearchParams(window.location.search).get("token");
+		}
+	}
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=VerifyEmail.vue_vue_type_script_lang.mjs.map

package/dist/components/auth/VerifyEmail.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerifyEmail.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../src/components/auth/VerifyEmail.vue"],"sourcesContent":["<template>\n  <v-container class=\"fill-height\" fluid>\n    <v-row align=\"center\" justify=\"center\">\n      <v-col cols=\"12\" sm=\"8\" md=\"6\">\n        <v-card>\n          <v-card-title class=\"text-h5 bg-grey-lighten-2\">\n            Email Verification\n          </v-card-title>\n\n          <v-card-text class=\"pa-6\">\n            <!-- Loading state -->\n            <div v-if=\"isVerifying\" class=\"text-center\">\n              <v-progress-circular\n                indeterminate\n                color=\"primary\"\n                size=\"64\"\n                class=\"mb-4\"\n              ></v-progress-circular>\n              <p>Verifying your email...</p>\n            </div>\n\n            <!-- Success state -->\n            <div v-else-if=\"verificationStatus === 'success'\" class=\"text-center\">\n              <v-icon color=\"success\" size=\"64\" class=\"mb-4\">mdi-check-circle</v-icon>\n              <h3 class=\"mb-2\">Email Verified!</h3>\n              <p>Your account has been successfully verified.</p>\n              <p v-if=\"username\">Welcome, {{ username }}!</p>\n            </div>\n\n            <!-- Error state -->\n            <div v-else-if=\"verificationStatus === 'error'\" class=\"text-center\">\n              <v-icon color=\"error\" size=\"64\" class=\"mb-4\">mdi-alert-circle</v-icon>\n              <h3 class=\"mb-2\">Verification Failed</h3>\n              <p>{{ errorMessage }}</p>\n            </div>\n\n            <!-- No token state -->\n            <div v-else class=\"text-center\">\n              <v-icon color=\"warning\" size=\"64\" class=\"mb-4\">mdi-help-circle</v-icon>\n              <h3 class=\"mb-2\">No Verification Token</h3>\n              <p>Please use the link from your verification email.</p>\n            </div>\n          </v-card-text>\n\n          <v-card-actions>\n            <v-spacer></v-spacer>\n            <slot name=\"actions\" :status=\"verificationStatus\" :username=\"username\">\n              <!-- Default action - external apps can override with their own navigation -->\n              <v-btn\n                v-if=\"verificationStatus === 'success'\"\n                color=\"primary\"\n                @click=\"$emit('verified', username)\"\n              >\n                Continue\n              </v-btn>\n              <v-btn\n                v-else-if=\"verificationStatus === 'error'\"\n                variant=\"text\"\n                @click=\"$emit('error', errorMessage)\"\n              >\n                Close\n              </v-btn>\n            </slot>\n          </v-card-actions>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { verifyEmail } from '../../services/authAPI';\nimport { alertUser } from '../SnackbarService';\nimport { Status } from '@vue-skuilder/common';\n\nexport default defineComponent({\n  name: 'VerifyEmail',\n\n  emits: ['verified', 'error'],\n\n  props: {\n    /**\n     * Verification token. If not provided, will try to read from URL query params.\n     */\n    token: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data() {\n    return {\n      isVerifying: false,\n      verificationStatus: null as 'success' | 'error' | null,\n      errorMessage: '',\n      username: '',\n    };\n  },\n\n  async mounted() {\n    await this.performVerification();\n  },\n\n  methods: {\n    async performVerification() {\n      // Get token from prop or URL query params\n      const token = this.token || this.getTokenFromURL();\n\n      if (!token) {\n        this.verificationStatus = 'error';\n        this.errorMessage = 'No verification token provided';\n        return;\n      }\n\n      this.isVerifying = true;\n\n      try {\n        const result = await verifyEmail(token);\n\n        if (result.ok) {\n          this.verificationStatus = 'success';\n          this.username = result.username || '';\n          alertUser({\n            text: 'Email verified successfully!',\n            status: Status.ok,\n          });\n        } else {\n          this.verificationStatus = 'error';\n          this.errorMessage = result.error || 'Verification failed';\n          alertUser({\n            text: result.error || 'Verification failed',\n            status: Status.error,\n          });\n        }\n      } catch (error) {\n        this.verificationStatus = 'error';\n        this.errorMessage = 'An unexpected error occurred';\n        alertUser({\n          text: 'An unexpected error occurred',\n          status: Status.error,\n        });\n      } finally {\n        this.isVerifying = false;\n      }\n    },\n\n    getTokenFromURL(): string | null {\n      if (typeof window === 'undefined') return null;\n\n      const params = new URLSearchParams(window.location.search);\n      return params.get('token');\n    },\n  },\n});\n</script>\n"],"mappings":";;;;;;AA4EA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CAEN,OAAO,CAAC,YAAY,QAAQ;CAE5B,OAAO,EAIL,OAAO;EACL,MAAM;EACN,SAAS;EACV,EACF;CAED,OAAO;AACL,SAAO;GACL,aAAa;GACb,oBAAoB;GACpB,cAAc;GACd,UAAU;GACX;;CAGH,MAAM,UAAU;AACd,QAAM,KAAK,qBAAqB;;CAGlC,SAAS;EACP,MAAM,sBAAsB;GAE1B,IAAM,IAAQ,KAAK,SAAS,KAAK,iBAAiB;AAElD,OAAI,CAAC,GAAO;AAEV,IADA,KAAK,qBAAqB,SAC1B,KAAK,eAAe;AACpB;;AAGF,QAAK,cAAc;AAEnB,OAAI;IACF,IAAM,IAAS,MAAM,EAAY,EAAM;AAEvC,IAAI,EAAO,MACT,KAAK,qBAAqB,WAC1B,KAAK,WAAW,EAAO,YAAY,IACnC,EAAU;KACR,MAAM;KACN,QAAQ,EAAO;KAChB,CAAC,KAEF,KAAK,qBAAqB,SAC1B,KAAK,eAAe,EAAO,SAAS,uBACpC,EAAU;KACR,MAAM,EAAO,SAAS;KACtB,QAAQ,EAAO;KAChB,CAAC;WAEU;AAGd,IAFA,KAAK,qBAAqB,SAC1B,KAAK,eAAe,gCACpB,EAAU;KACR,MAAM;KACN,QAAQ,EAAO;KAChB,CAAC;aACM;AACR,SAAK,cAAc;;;EAIvB,kBAAiC;AAI/B,UAHI,OAAO,SAAW,MAAoB,OAE3B,IAAI,gBAAgB,OAAO,SAAS,OAAO,CAC5C,IAAI,QAAQ;;EAE7B;CACF,CAAC"}

package/dist/components/cardRendering/AudioAutoPlayer.mjs

@@ -0,0 +1,9 @@
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./AudioAutoPlayer.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                                 */
+//#region src/components/cardRendering/AudioAutoPlayer.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-e1a0f62c"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=AudioAutoPlayer.mjs.map

package/dist/components/cardRendering/AudioAutoPlayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioAutoPlayer.mjs","names":[],"sources":["../../../src/components/cardRendering/AudioAutoPlayer.vue"],"sourcesContent":["<template>\n  <v-btn size=\"large\" icon :color=\"playing ? 'primary lighten-3' : 'primary'\" :class=\"{ playing }\" @click=\"play\">\n    <v-icon>mdi-volume-high</v-icon>\n  </v-btn>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue';\nimport { SkldrMouseTrap } from '../../utils/SkldrMouseTrap';\n\nconst props = defineProps<{\n  src: string | string[];\n}>();\n\nconst audioElems = ref<HTMLAudioElement[]>([]);\nconst playTimeouts = ref<NodeJS.Timer[]>([]);\nconst playing = ref(false);\n\nlet staticLOCK: any = null;\nconst playbackGap = 500;\n\nconst stop = () => {\n  playing.value = false;\n  setTimeout(() => {\n    staticLOCK = null;\n  }, playbackGap);\n\n  playTimeouts.value.forEach(clearTimeout);\n\n  console.log(`Audio stopping...`);\n  audioElems.value.forEach((audio) => {\n    if (!audio.paused) {\n      audio.pause();\n      audio.currentTime = 0;\n    }\n  });\n};\n\nconst downloadFinished = (i: number): boolean => {\n  try {\n    return !isNaN(audioElems.value[i].duration);\n  } catch (e) {\n    throw new Error('AudioPlayer does not have an element at this index:', e);\n  }\n};\n\nconst playByIndex = (n: number) => {\n  if (downloadFinished(n)) {\n    audioElems.value[n].play();\n\n    if (n + 1 < audioElems.value.length) {\n      const delay = (audioElems.value[n].duration + 0.7) * 1000;\n      playTimeouts.value.push(\n        setTimeout(() => {\n          if (playing.value) {\n            playByIndex(n + 1);\n          }\n        }, delay)\n      );\n    } else {\n      setTimeout(() => {\n        playing.value = false;\n      }, audioElems.value[n].duration * 1000);\n      setTimeout(() => {\n        staticLOCK = null;\n      }, audioElems.value[n].duration * 1000 + playbackGap);\n    }\n  } else {\n    setTimeout(playByIndex, 100, n);\n  }\n};\n\nconst play = () => {\n  if (staticLOCK === null || staticLOCK === getCurrentInstance()) {\n    staticLOCK = getCurrentInstance();\n    playing.value = true;\n    playByIndex(0);\n  } else {\n    setTimeout(play, 100);\n  }\n};\n\nonMounted(() => {\n  staticLOCK = null;\n\n  if (typeof props.src === 'string') {\n    audioElems.value.push(new Audio(props.src));\n  } else {\n    props.src.forEach((url) => {\n      audioElems.value.push(new Audio(url));\n    });\n  }\n\n  // Define hotkeys\n  const hotkeys = [\n    {\n      hotkey: 'up',\n      callback: play,\n      command: 'Replay Audio',\n    },\n  ];\n  \n  // Add bindings\n  SkldrMouseTrap.addBinding(hotkeys);\n\n  play();\n});\n\nonBeforeUnmount(() => {\n  // Clean up hotkey bindings\n  SkldrMouseTrap.removeBinding('up');\n  stop();\n});\n</script>\n\n<style scoped>\n.playing {\n  /* transform: rotate(3deg) scale(1.15); */\n  animation: 0.85s ease-in-out infinite alternate pulse;\n  z-index: 1;\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(1.15);\n  }\n}\n</style>\n"],"mappings":""}