@bagelink/vue 1.7.94 → 1.7.96

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.7.94",
+  "version": "1.7.96",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -57,17 +57,17 @@
     "bin/experimentalGenTypedRoutes.ts"
   ],
   "devDependencies": {
-    "swiper": "^12.0.3",
     "@types/leaflet": "^1.9.18",
     "@types/signature_pad": "^4.0.0",
+    "swiper": "^12.0.3",
     "vue": "^3.5.16",
     "vue-component-type-helpers": "^2.2.10"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
     "type-fest": "^4",
-    "vue-component-type-helpers": "^2.2.10",
     "vue": "*",
+    "vue-component-type-helpers": "^2.2.10",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "*"
   },
@@ -81,6 +81,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^13.3.0",
+    "@zxcvbn-ts/core": "^3.0.4",
     "axios": "^1.9.0",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.12.9",

package/src/components/Alert.vue

@@ -87,7 +87,6 @@ const color = {
   display: none;
   position: absolute;
   inset-inline-end: 1.5rem;
-  top: 2rem;
 }
 
 .alert[dismissable="true"] .alert_close {

package/src/components/form/inputs/PasswordInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { Btn, TextInput } from '@bagelink/vue'
+import { zxcvbn } from '@zxcvbn-ts/core'
 import { computed } from 'vue'
 
 export interface TextInputProps {
@@ -27,12 +28,14 @@ export interface TextInputProps {
 	debounceDelay?: number
 	autocomplete?: AutoFillField
 	onFocusout?: (e: FocusEvent) => void
+	strengthMeter?: boolean
 }
 const props = withDefaults(
 	defineProps<TextInputProps>(),
 	{
 		autocomplete: 'current-password',
-		label: ''
+		label: '',
+		strengthMeter: false
 	}
 )
 
@@ -41,25 +44,75 @@ const showPwd = defineModel<boolean>('showPwd', { default: false })
 
 const toggleShowPwdIcon = computed(() => showPwd.value ? 'visibility_off' : 'visibility')
 const inputType = computed(() => (showPwd.value ? 'text' : 'password'))
+
+const passwordStrength = computed(() => {
+	const pwd = password.value
+	if (!props.strengthMeter || pwd == null || pwd.length === 0) {
+		return null
+	}
+	return zxcvbn(pwd)
+})
+
+const strengthScore = computed(() => {
+	if (password.value == null || password.value.length === 0) {
+		return null
+	}
+	return passwordStrength.value?.score ?? 0
+})
+
+const strengthColor = computed(() => {
+	const score = strengthScore.value
+	if (score == null) return 'var(--input-bg)' // gray - no password
+	if (score <= 1) return 'var(--bgl-red)' // red
+	if (score === 2) return 'var(--bgl-orange)' // orange
+	if (score === 3) return 'var(--bgl-yellow)' // amber
+	return 'var(--bgl-green)' // green
+})
+
+const strengthLabel = computed(() => {
+	const score = strengthScore.value
+	if (score == null) return ''
+	if (score === 0) return 'Very Weak'
+	if (score === 1) return 'Weak'
+	if (score === 2) return 'Fair'
+	if (score === 3) return 'Good'
+	return 'Strong'
+})
+
+const strengthPercentage = computed(() => {
+	const score = strengthScore.value
+	if (score == null) return 0
+	return ((score + 1) / 5) * 100
+})
+
+const feedbackMessage = computed(() => {
+	const strength = passwordStrength.value
+	if (!strength)
+		return ''
+	const { feedback: { warning, suggestions } } = strength
+	const warnings = (warning != null && warning !== '') ? [warning] : []
+	return [...warnings, ...suggestions].join(' ')
+})
 </script>
 
 <template>
-	<div class="relative passwordInput">
-		<TextInput
-			v-model="password"
-			v-bind="props"
-			:type="inputType"
-			class="mb-0"
-			:name="props.name"
-		/>
+	<div class="relative passwordInput" :class="{ 'relative mb-2': props.strengthMeter }">
+		<TextInput v-model="password" v-bind="props" :type="inputType" class="mb-0" :name="props.name" />
 		<div class="m-password position-bottom-end flex column justify-content-center">
-			<Btn
-				flat
-				thin
-				class="mx-05"
-				:icon="toggleShowPwdIcon"
-				@click="showPwd = !showPwd"
-			/>
+			<Btn flat thin class="mx-05" :icon="toggleShowPwdIcon" @click="showPwd = !showPwd" />
+		</div>
+		<div v-if="props.strengthMeter" class="password-strength-container absolute start end -bottom-1-5">
+			<div v-tooltip="feedbackMessage || `Password strength: ${strengthLabel}`" class="password-strength-bar pointer overflow-hidden round">
+				<div
+					class="password-strength-fill h-100p round" :style="{
+						width: `${strengthPercentage}%`,
+						backgroundColor: strengthColor,
+					}"
+				/>
+			</div>
+			<span class="password-strength-label txt10 light white-space " :style="{ color: strengthColor }">
+				{{ strengthLabel }}
+			</span>
 		</div>
 	</div>
 </template>
@@ -68,8 +121,27 @@ const inputType = computed(() => (showPwd.value ? 'text' : 'password'))
 .m-password {
 	height: var(--input-height) !important;
 }
+
 [dir='rtl'] .passwordInput input {
-    direction: ltr;
-    text-align: right;
+	direction: ltr;
+	text-align: right;
+}
+
+.password-strength-container {
+	height: 1.25rem;
+}
+
+.password-strength-bar {
+	flex: 1;
+	height: 6px;
+	background-color: var(--input-bg);
+}
+
+.password-strength-fill {
+	transition: width 0.3s ease, background-color 0.3s ease;
+}
+
+.password-strength-label {
+	transition: color 0.3s ease;
 }
 </style>