@umbra.ui/core 0.1.0

package/src/components/inputs/InputSecure/InputSecure.vue

@@ -0,0 +1,646 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import {
+  CloneIcon,
+  EyeIcon,
+  EyeSlashIcon,
+  InputPasswordEditIcon,
+} from "@umbra-ui/icons";
+import "../theme.css";
+
+export interface Props {
+  value?: string;
+  placeholder?: string;
+  showStrength?: boolean;
+  allowGenerate?: boolean;
+  showRequirements?: boolean;
+  minLength?: number;
+  requireUppercase?: boolean;
+  requireLowercase?: boolean;
+  requireNumbers?: boolean;
+  requireSpecialChars?: boolean;
+  preventCommon?: boolean;
+  state?: "normal" | "active" | "disabled" | "readonly" | "error";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: "",
+  placeholder: "Enter password",
+  showStrength: true,
+  allowGenerate: true,
+  showRequirements: true,
+  minLength: 8,
+  requireUppercase: true,
+  requireLowercase: true,
+  requireNumbers: true,
+  requireSpecialChars: true,
+  preventCommon: true,
+  state: "normal",
+});
+
+const emit = defineEmits<{
+  "update:value": [value: string];
+  "update:valid": [value: boolean];
+  "update:strength": [value: number];
+}>();
+
+const showInput = ref<boolean>(false);
+const internalValue = ref(props.value);
+const isFocused = ref(false);
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// Common weak passwords to check against
+const commonPasswords = [
+  "password",
+  "123456",
+  "password123",
+  "admin",
+  "letmein",
+  "welcome",
+  "monkey",
+  "dragon",
+  "baseball",
+  "iloveyou",
+  "trustno1",
+  "1234567",
+  "sunshine",
+  "master",
+  "123456789",
+  "welcome123",
+  "shadow",
+  "ashley",
+  "football",
+  "jesus",
+  "michael",
+  "ninja",
+  "mustang",
+  "password1",
+];
+
+// Password requirement checks
+const requirements = computed(() => {
+  const password = internalValue.value;
+  return {
+    minLength: {
+      met: password.length >= props.minLength,
+      text: `At least ${props.minLength} characters`,
+      required: true,
+    },
+    uppercase: {
+      met: /[A-Z]/.test(password),
+      text: "One uppercase letter",
+      required: props.requireUppercase,
+    },
+    lowercase: {
+      met: /[a-z]/.test(password),
+      text: "One lowercase letter",
+      required: props.requireLowercase,
+    },
+    number: {
+      met: /\d/.test(password),
+      text: "One number",
+      required: props.requireNumbers,
+    },
+    special: {
+      met: /[^A-Za-z0-9]/.test(password),
+      text: "One special character",
+      required: props.requireSpecialChars,
+    },
+    notCommon: {
+      met: !commonPasswords.includes(password.toLowerCase()),
+      text: "Not a common password",
+      required: props.preventCommon,
+    },
+  };
+});
+
+// Check if all requirements are met
+const isValid = computed(() => {
+  return Object.values(requirements.value)
+    .filter((req) => req.required)
+    .every((req) => req.met);
+});
+
+// Calculate password strength (0-4)
+const passwordStrength = computed(() => {
+  const password = internalValue.value;
+  if (!password) return 0;
+
+  let strength = 0;
+
+  // Length bonus
+  if (password.length >= 8) strength += 0.5;
+  if (password.length >= 12) strength += 0.5;
+  if (password.length >= 16) strength += 0.5;
+
+  // Character variety
+  if (/[a-z]/.test(password)) strength += 0.5;
+  if (/[A-Z]/.test(password)) strength += 0.5;
+  if (/\d/.test(password)) strength += 0.5;
+  if (/[^A-Za-z0-9]/.test(password)) strength += 0.5;
+
+  // Deduct for common passwords
+  if (commonPasswords.includes(password.toLowerCase())) {
+    strength = Math.min(strength, 1);
+  }
+
+  // Deduct for repetitive patterns
+  if (/(.)\1{2,}/.test(password)) strength -= 0.5;
+
+  return Math.max(0, Math.min(4, Math.round(strength)));
+});
+
+// Strength indicator properties
+const strengthIndicator = computed(() => {
+  const indicators = [
+    { level: 0, label: "Very Weak", color: "#dc3545", width: "20%" },
+    { level: 1, label: "Weak", color: "#fd7e14", width: "40%" },
+    { level: 2, label: "Fair", color: "#ffc107", width: "60%" },
+    { level: 3, label: "Good", color: "#28a745", width: "80%" },
+    { level: 4, label: "Strong", color: "#20c997", width: "100%" },
+  ];
+
+  return indicators[passwordStrength.value] || indicators[0];
+});
+
+// Override state to show error when password is invalid
+const effectiveState = computed(() => {
+  if (internalValue.value && !isValid.value) {
+    return "error";
+  }
+  return props.state;
+});
+
+// Get the appropriate text color for icons based on state
+const getIconColor = () => {
+  return "var(--input-text-filled)";
+};
+
+// Generate secure password
+const generatePassword = () => {
+  showInput.value = true;
+  const lowercase = "abcdefghijklmnopqrstuvwxyz";
+  const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  const numbers = "0123456789";
+  const special = "!@#$%^&*()_+-=[]{}|;:,.<>?";
+
+  let chars = "";
+  let password = "";
+
+  // Add required character sets
+  if (props.requireLowercase) {
+    chars += lowercase;
+    password += lowercase[Math.floor(Math.random() * lowercase.length)];
+  }
+  if (props.requireUppercase) {
+    chars += uppercase;
+    password += uppercase[Math.floor(Math.random() * uppercase.length)];
+  }
+  if (props.requireNumbers) {
+    chars += numbers;
+    password += numbers[Math.floor(Math.random() * numbers.length)];
+  }
+  if (props.requireSpecialChars) {
+    chars += special;
+    password += special[Math.floor(Math.random() * special.length)];
+  }
+
+  // Fill remaining length
+  const remainingLength = Math.max(props.minLength, 12) - password.length;
+  for (let i = 0; i < remainingLength; i++) {
+    password += chars[Math.floor(Math.random() * chars.length)];
+  }
+
+  // Shuffle password
+  password = password
+    .split("")
+    .sort(() => Math.random() - 0.5)
+    .join("");
+
+  internalValue.value = password;
+  emit("update:value", password);
+  emit("update:valid", true);
+  emit("update:strength", passwordStrength.value);
+};
+
+// Watch for changes to value prop
+watch(
+  () => props.value,
+  (newValue) => {
+    if (newValue !== internalValue.value) {
+      internalValue.value = newValue;
+    }
+  }
+);
+
+// Watch for validation changes
+watch([isValid, passwordStrength], () => {
+  emit("update:valid", isValid.value);
+  emit("update:strength", passwordStrength.value);
+});
+
+const fieldTypeComputed = computed(() => {
+  return showInput.value ? "text" : "password";
+});
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  internalValue.value = target.value;
+  emit("update:value", target.value);
+};
+
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleBlur = () => {
+  // Delay to allow clicks on requirements
+  setTimeout(() => {
+    isFocused.value = false;
+  }, 200);
+};
+
+// Copy password to clipboard
+const copyToClipboard = async () => {
+  if (!internalValue.value) return;
+
+  try {
+    await navigator.clipboard.writeText(internalValue.value);
+    // You could emit a success event here
+  } catch (err) {
+    console.error("Failed to copy password");
+  }
+};
+
+const getPlaceholder = computed(() => {
+  if (props.state === "readonly") {
+    return "Field Cannot Be Edited";
+  }
+  return props.placeholder;
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div
+      :class="[
+        $style.input_container,
+        $style[effectiveState],
+        { [$style.focused]: isFocused },
+      ]"
+    >
+      <!-- Generate password button -->
+      <button
+        v-if="allowGenerate"
+        type="button"
+        :class="[$style.icon_button, $style.generate_button]"
+        @click="generatePassword"
+        title="Generate secure password"
+      >
+        <InputPasswordEditIcon :size="16" />
+      </button>
+
+      <input
+        ref="inputRef"
+        class="body"
+        :type="fieldTypeComputed"
+        :placeholder="getPlaceholder"
+        :value="internalValue"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        autocomplete="new-password"
+        :disabled="state === 'disabled'"
+        :readonly="state === 'readonly'"
+      />
+
+      <div :class="$style.actions">
+        <!-- Copy button (only show when there's a password) -->
+        <button
+          v-if="internalValue"
+          type="button"
+          :class="$style.icon_button"
+          @click="copyToClipboard"
+          title="Copy password"
+        >
+          <CloneIcon :size="16" />
+        </button>
+
+        <!-- Show/hide toggle -->
+        <button
+          type="button"
+          :class="$style.icon_button"
+          @click="showInput = !showInput"
+          :title="showInput ? 'Hide password' : 'Show password'"
+        >
+          <!-- Eye open icon -->
+          <EyeIcon v-if="!showInput" :size="16" />
+          <!-- Eye closed icon -->
+          <EyeSlashIcon v-else :size="16" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Password strength indicator -->
+    <div
+      v-if="showStrength && internalValue"
+      :class="$style.strength_container"
+    >
+      <div :class="$style.strength_bar">
+        <div
+          :class="$style.strength_fill"
+          :style="{
+            width: strengthIndicator.width,
+            backgroundColor: strengthIndicator.color,
+          }"
+        />
+      </div>
+      <span
+        :class="$style.strength_label"
+        :style="{ color: strengthIndicator.color }"
+      >
+        {{ strengthIndicator.label }}
+      </span>
+    </div>
+
+    <!-- Requirements list -->
+    <transition name="slide-fade">
+      <div
+        v-if="showRequirements && (isFocused || !isValid) && internalValue"
+        :class="$style.requirements"
+      >
+        <div
+          v-for="(req, key) in requirements"
+          :key="key"
+          v-show="req.required"
+          :class="[$style.requirement, { [$style.met]: req.met }]"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+            <path
+              v-if="req.met"
+              d="M10.3 3.3L4.5 9.1 1.7 6.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.5 3.5c.2.2.5.3.7.3s.5-.1.7-.3l6.5-6.5c.4-.4.4-1 0-1.4s-1-.4-1.4 0z"
+            />
+            <circle
+              v-else
+              cx="6"
+              cy="6"
+              r="5"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            />
+          </svg>
+          <span>{{ req.text }}</span>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.588rem;
+}
+
+.input_container {
+  width: 100%;
+  padding-left: 0.882rem;
+  padding-right: 0.5rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  border: var(--input-border);
+  border-radius: var(--input-border-radius);
+  transition: background-color 0.3s ease, border 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.input_container:focus-within,
+.input_container.focused {
+  border: 1px solid var(--input-focus-border);
+}
+
+.input_container input {
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  font-family: inherit;
+  letter-spacing: 0.05em;
+}
+
+/* State-based styling using CSS variables */
+.input_container.normal:has(input:placeholder-shown),
+.input_container.active:has(input:placeholder-shown) {
+  background-color: var(--input-background-normal);
+  color: var(--input-text-empty);
+}
+
+.input_container.normal:has(input:not(:placeholder-shown)),
+.input_container.active:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-background-filled);
+  color: var(--input-text-filled);
+  border-color: var(--input-border-filled);
+}
+
+.input_container.normal input:placeholder-shown,
+.input_container.active input:placeholder-shown {
+  color: var(--input-text-empty);
+  opacity: 0.6;
+}
+
+.input_container.normal input:not(:placeholder-shown),
+.input_container.active input:not(:placeholder-shown) {
+  color: var(--input-text-filled);
+}
+
+.input_container.disabled:has(input:placeholder-shown),
+.input_container.disabled:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-disabled-bg);
+  color: var(--input-disabled-text);
+  border-color: var(--input-disabled-border);
+  cursor: not-allowed;
+}
+
+.input_container.disabled input:placeholder-shown,
+.input_container.disabled input:not(:placeholder-shown) {
+  color: var(--input-disabled-text);
+  cursor: not-allowed;
+}
+
+.input_container.readonly:has(input:placeholder-shown),
+.input_container.readonly:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-readonly-bg);
+  color: var(--input-readonly-text);
+  border-color: var(--input-readonly-border);
+  cursor: not-allowed;
+}
+
+.input_container.readonly input:placeholder-shown,
+.input_container.readonly input:not(:placeholder-shown) {
+  color: var(--input-readonly-text);
+  cursor: not-allowed;
+}
+
+.input_container.readonly button {
+  pointer-events: none;
+  display: none;
+}
+
+.input_container.error:has(input:placeholder-shown),
+.input_container.error:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-error-bg);
+  color: var(--input-error-text);
+  border-color: var(--input-error-border);
+}
+
+.input_container.error input:placeholder-shown,
+.input_container.error input:not(:placeholder-shown) {
+  color: var(--input-error-text);
+}
+
+.input_container.active {
+  pointer-events: none;
+}
+
+/* Actions container */
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.706rem;
+  flex-shrink: 0;
+}
+
+/* Icon buttons */
+.icon_button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: all 0.3s ease;
+  border-radius: 0.25rem;
+  color: inherit;
+}
+
+.icon_button:hover {
+  opacity: 0.8;
+  transform: scale(1.1);
+}
+
+.icon_button:active {
+  transform: scale(0.95);
+}
+
+.icon_button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.generate_button {
+  margin-right: 0.4rem;
+}
+
+/* Strength indicator */
+.strength_container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.strength_bar {
+  flex: 1;
+  height: 4px;
+  background-color: var(--input-background-normal);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.strength_fill {
+  height: 100%;
+  transition: all 0.3s ease;
+}
+
+.strength_label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+/* Requirements */
+.requirements {
+  padding: 0.75rem 0.882rem;
+  border-radius: 0.471rem;
+  background-color: var(--input-background-normal);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.requirement {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--input-text-empty);
+  transition: color 0.2s ease;
+}
+
+.requirement.met {
+  color: var(--input-success-color);
+}
+
+.requirement svg {
+  flex-shrink: 0;
+}
+
+/* Animations */
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-fade-enter-from {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.input_container input::placeholder {
+  color: var(--input-placeholder);
+}
+
+.input_container:has(input:not(:placeholder-shown)) input::placeholder {
+  color: var(--input-placeholder-filled);
+}
+
+.input_container.readonly input::placeholder {
+  color: var(--input-readonly-placeholder);
+}
+
+.input_container.disabled input::placeholder {
+  color: var(--input-disabled-placeholder);
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .input_container input {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+}
+</style>