@umbra.ui/core 0.1.0

package/src/components/inputs/InputSecure/README.md

@@ -0,0 +1,771 @@
+# InputSecure
+
+A comprehensive password input component built with Vue 3 Composition API and TypeScript. The InputSecure component provides password visibility toggle, strength validation, requirement checking, secure password generation, and copy functionality with smooth animations and accessibility features.
+
+## Installation/Import
+
+```typescript
+import { InputSecure } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- @umbra-ui/icons (for eye, eye-slash, clone, and password edit icons)
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { InputSecure } from "@umbra-ui/core";
+
+const password = ref("");
+
+const handlePasswordUpdate = (value: string) => {
+  console.log("Password:", value);
+  password.value = value;
+};
+
+const handleValidUpdate = (isValid: boolean) => {
+  console.log("Valid:", isValid);
+};
+
+const handleStrengthUpdate = (strength: number) => {
+  console.log("Strength:", strength);
+};
+</script>
+
+<template>
+  <div>
+    <InputSecure
+      v-model:value="password"
+      @update:valid="handleValidUpdate"
+      @update:strength="handleStrengthUpdate"
+      placeholder="Enter password"
+      :show-strength="true"
+      :allow-generate="true"
+      :show-requirements="true"
+    />
+  </div>
+</template>
+```
+
+## Props
+
+| Prop Name             | Type                                                          | Required | Default            | Description                                 |
+| --------------------- | ------------------------------------------------------------- | -------- | ------------------ | ------------------------------------------- |
+| `value`               | `string`                                                      | No       | `""`               | The password value                          |
+| `placeholder`         | `string`                                                      | No       | `"Enter password"` | Placeholder text displayed when empty       |
+| `showStrength`        | `boolean`                                                     | No       | `true`             | Whether to show password strength indicator |
+| `allowGenerate`       | `boolean`                                                     | No       | `true`             | Whether to show password generation button  |
+| `showRequirements`    | `boolean`                                                     | No       | `true`             | Whether to show password requirements list  |
+| `minLength`           | `number`                                                      | No       | `8`                | Minimum password length                     |
+| `requireUppercase`    | `boolean`                                                     | No       | `true`             | Whether to require uppercase letters        |
+| `requireLowercase`    | `boolean`                                                     | No       | `true`             | Whether to require lowercase letters        |
+| `requireNumbers`      | `boolean`                                                     | No       | `true`             | Whether to require numbers                  |
+| `requireSpecialChars` | `boolean`                                                     | No       | `true`             | Whether to require special characters       |
+| `preventCommon`       | `boolean`                                                     | No       | `true`             | Whether to prevent common passwords         |
+| `state`               | `"normal" \| "active" \| "disabled" \| "readonly" \| "error"` | No       | `"normal"`         | Current state of the input field            |
+
+## Events
+
+| Event Name        | Payload Type | Description                                      |
+| ----------------- | ------------ | ------------------------------------------------ |
+| `update:value`    | `string`     | Emitted when the password value changes          |
+| `update:valid`    | `boolean`    | Emitted when the validation state changes        |
+| `update:strength` | `number`     | Emitted when the password strength changes (0-4) |
+
+## Slots
+
+This component does not provide any slots.
+
+## Exposed Methods/Refs
+
+This component does not expose any methods or refs.
+
+## CSS Customization
+
+The InputSecure component uses CSS custom properties for theming and customization:
+
+### Input Container Variables
+
+```css
+--input-border: 1px solid var(--input-border-color);
+--input-border-radius: 0.588rem;
+--input-focus-border: var(--input-focus-color);
+--input-background-normal: var(--input-bg-normal);
+--input-background-filled: var(--input-bg-filled);
+--input-border-filled: var(--input-border-filled-color);
+--input-text-empty: var(--input-text-empty-color);
+--input-text-filled: var(--input-text-filled-color);
+--input-placeholder: var(--input-placeholder-color);
+--input-placeholder-filled: var(--input-placeholder-filled-color);
+```
+
+### State-Specific Variables
+
+```css
+/* Disabled State */
+--input-disabled-bg: var(--input-disabled-background);
+--input-disabled-text: var(--input-disabled-text-color);
+--input-disabled-border: var(--input-disabled-border-color);
+--input-disabled-placeholder: var(--input-disabled-placeholder-color);
+
+/* Readonly State */
+--input-readonly-bg: var(--input-readonly-background);
+--input-readonly-text: var(--input-readonly-text-color);
+--input-readonly-border: var(--input-readonly-border-color);
+--input-readonly-placeholder: var(--input-readonly-placeholder-color);
+
+/* Error State */
+--input-error-bg: var(--input-error-background);
+--input-error-text: var(--input-error-text-color);
+--input-error-border: var(--input-error-border-color);
+
+/* Success State */
+--input-success-color: var(--input-success-text-color);
+```
+
+## Key Features
+
+### Password Visibility
+
+- **Toggle Visibility**: Show/hide password with eye icon toggle
+- **Secure by Default**: Password is hidden by default
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+
+### Password Strength
+
+- **Real-time Assessment**: Calculates strength as user types (0-4 scale)
+- **Visual Indicator**: Color-coded strength bar with labels
+- **Strength Levels**: Very Weak, Weak, Fair, Good, Strong
+- **Multiple Factors**: Length, character variety, pattern detection
+
+### Password Requirements
+
+- **Configurable Rules**: Customizable password requirements
+- **Real-time Validation**: Shows requirement status as user types
+- **Visual Feedback**: Checkmarks for met requirements
+- **Common Password Prevention**: Blocks common weak passwords
+
+### Password Generation
+
+- **Secure Generation**: Creates cryptographically secure passwords
+- **Requirement Compliance**: Generated passwords meet all requirements
+- **Customizable Length**: Respects minimum length and requirements
+- **Character Variety**: Includes all required character types
+
+### Additional Features
+
+- **Copy to Clipboard**: One-click password copying
+- **Input States**: Normal, disabled, readonly, error states
+- **Responsive Design**: Mobile-friendly with proper font scaling
+- **Smooth Animations**: Transitions for requirements and strength indicators
+
+## Examples
+
+### Basic Password Input
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { InputSecure } from "@umbra-ui/core";
+
+const password = ref("");
+const isValid = ref(false);
+const strength = ref(0);
+
+const handleValidUpdate = (valid: boolean) => {
+  isValid.value = valid;
+};
+
+const handleStrengthUpdate = (strengthValue: number) => {
+  strength.value = strengthValue;
+};
+</script>
+
+<template>
+  <div class="password-form">
+    <h3>Create Account</h3>
+
+    <div class="form-group">
+      <label>Password</label>
+      <InputSecure
+        v-model:value="password"
+        @update:valid="handleValidUpdate"
+        @update:strength="handleStrengthUpdate"
+        placeholder="Enter your password"
+        :show-strength="true"
+        :allow-generate="true"
+        :show-requirements="true"
+      />
+    </div>
+
+    <div class="password-info">
+      <p><strong>Valid:</strong> {{ isValid ? "Yes" : "No" }}</p>
+      <p><strong>Strength:</strong> {{ strength }}/4</p>
+    </div>
+  </div>
+</template>
+
+<style module>
+.password-form {
+  max-width: 400px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.password-info {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-radius: 0.25rem;
+}
+</style>
+```
+
+### Custom Requirements
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { InputSecure } from "@umbra-ui/core";
+
+const customPassword = ref("");
+
+const handleCustomValid = (valid: boolean) => {
+  console.log("Custom password valid:", valid);
+};
+</script>
+
+<template>
+  <div class="custom-requirements">
+    <h3>Custom Password Requirements</h3>
+
+    <div class="form-group">
+      <label>Password (Min 12 chars, no special chars required)</label>
+      <InputSecure
+        v-model:value="customPassword"
+        @update:valid="handleCustomValid"
+        placeholder="Enter password"
+        :min-length="12"
+        :require-uppercase="true"
+        :require-lowercase="true"
+        :require-numbers="true"
+        :require-special-chars="false"
+        :prevent-common="true"
+        :show-strength="true"
+        :show-requirements="true"
+      />
+    </div>
+
+    <div class="requirements-info">
+      <h4>Custom Requirements:</h4>
+      <ul>
+        <li>At least 12 characters</li>
+        <li>One uppercase letter</li>
+        <li>One lowercase letter</li>
+        <li>One number</li>
+        <li>Not a common password</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style module>
+.custom-requirements {
+  max-width: 500px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.requirements-info {
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 0.25rem;
+}
+
+.requirements-info h4 {
+  margin: 0 0 0.5rem 0;
+  color: #333;
+}
+
+.requirements-info ul {
+  margin: 0;
+  padding-left: 1.5rem;
+}
+
+.requirements-info li {
+  margin-bottom: 0.25rem;
+  color: #666;
+}
+</style>
+```
+
+### Registration Form Integration
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { InputSecure } from "@umbra-ui/core";
+
+interface RegistrationForm {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+}
+
+const form = ref<RegistrationForm>({
+  username: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+});
+
+const passwordValid = ref(false);
+const passwordsMatch = ref(false);
+
+const isFormValid = computed(() => {
+  return (
+    form.value.username &&
+    form.value.email &&
+    form.value.password &&
+    passwordValid.value &&
+    passwordsMatch.value
+  );
+});
+
+const handlePasswordValid = (valid: boolean) => {
+  passwordValid.value = valid;
+};
+
+const handlePasswordChange = (password: string) => {
+  form.value.password = password;
+  passwordsMatch.value = password === form.value.confirmPassword;
+};
+
+const handleConfirmPasswordChange = (confirmPassword: string) => {
+  form.value.confirmPassword = confirmPassword;
+  passwordsMatch.value = form.value.password === confirmPassword;
+};
+
+const handleSubmit = () => {
+  if (isFormValid.value) {
+    console.log("Registration submitted:", form.value);
+    // Handle form submission
+  }
+};
+</script>
+
+<template>
+  <div class="registration-form">
+    <h3>Create Account</h3>
+
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label>Username *</label>
+        <input
+          v-model="form.username"
+          type="text"
+          placeholder="Choose a username"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Email *</label>
+        <input
+          v-model="form.email"
+          type="email"
+          placeholder="your@email.com"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Password *</label>
+        <InputSecure
+          v-model:value="form.password"
+          @update:value="handlePasswordChange"
+          @update:valid="handlePasswordValid"
+          placeholder="Create a password"
+          :show-strength="true"
+          :allow-generate="true"
+          :show-requirements="true"
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Confirm Password *</label>
+        <InputSecure
+          v-model:value="form.confirmPassword"
+          @update:value="handleConfirmPasswordChange"
+          placeholder="Confirm your password"
+          :show-strength="false"
+          :allow-generate="false"
+          :show-requirements="false"
+        />
+        <div
+          v-if="form.confirmPassword && !passwordsMatch"
+          class="error-message"
+        >
+          Passwords do not match
+        </div>
+      </div>
+
+      <button type="submit" :disabled="!isFormValid" class="submit-button">
+        Create Account
+      </button>
+    </form>
+  </div>
+</template>
+
+<style module>
+.registration-form {
+  max-width: 500px;
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  background-color: #fff;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.error-message {
+  color: #dc3545;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.submit-button {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.submit-button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+.submit-button:disabled {
+  background-color: #6c757d;
+  cursor: not-allowed;
+}
+</style>
+```
+
+### Different States
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { InputSecure } from "@umbra-ui/core";
+
+const normalPassword = ref("");
+const disabledPassword = ref("password123");
+const readonlyPassword = ref("readonly123");
+const errorPassword = ref("weak");
+</script>
+
+<template>
+  <div class="states-example">
+    <h3>Input States</h3>
+
+    <div class="state-group">
+      <label>Normal State</label>
+      <InputSecure
+        v-model:value="normalPassword"
+        placeholder="Enter password"
+        state="normal"
+        :show-strength="true"
+        :show-requirements="true"
+      />
+    </div>
+
+    <div class="state-group">
+      <label>Disabled State</label>
+      <InputSecure
+        v-model:value="disabledPassword"
+        state="disabled"
+        :show-strength="false"
+        :show-requirements="false"
+      />
+    </div>
+
+    <div class="state-group">
+      <label>Readonly State</label>
+      <InputSecure
+        v-model:value="readonlyPassword"
+        state="readonly"
+        :show-strength="false"
+        :show-requirements="false"
+      />
+    </div>
+
+    <div class="state-group">
+      <label>Error State (Weak Password)</label>
+      <InputSecure
+        v-model:value="errorPassword"
+        placeholder="Enter strong password"
+        state="normal"
+        :show-strength="true"
+        :show-requirements="true"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.states-example {
+  max-width: 500px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.state-group {
+  margin-bottom: 1.5rem;
+}
+
+.state-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #333;
+}
+</style>
+```
+
+### Password Manager Integration
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { InputSecure } from "@umbra-ui/core";
+
+const masterPassword = ref("");
+const generatedPasswords = ref<string[]>([]);
+
+const handleMasterPasswordValid = (valid: boolean) => {
+  console.log("Master password valid:", valid);
+};
+
+const generateNewPassword = () => {
+  // This would typically call a password generation service
+  const newPassword = "Generated" + Math.random().toString(36).substr(2, 9);
+  generatedPasswords.value.push(newPassword);
+};
+
+const copyPassword = async (password: string) => {
+  try {
+    await navigator.clipboard.writeText(password);
+    console.log("Password copied to clipboard");
+  } catch (err) {
+    console.error("Failed to copy password");
+  }
+};
+</script>
+
+<template>
+  <div class="password-manager">
+    <h3>Password Manager</h3>
+
+    <div class="master-password-section">
+      <h4>Master Password</h4>
+      <InputSecure
+        v-model:value="masterPassword"
+        @update:valid="handleMasterPasswordValid"
+        placeholder="Enter master password"
+        :show-strength="true"
+        :allow-generate="false"
+        :show-requirements="true"
+        :min-length="12"
+      />
+    </div>
+
+    <div class="generated-passwords-section">
+      <div class="section-header">
+        <h4>Generated Passwords</h4>
+        <button @click="generateNewPassword" class="generate-btn">
+          Generate New
+        </button>
+      </div>
+
+      <div v-if="generatedPasswords.length === 0" class="empty-state">
+        <p>No passwords generated yet</p>
+      </div>
+
+      <div v-else class="password-list">
+        <div
+          v-for="(password, index) in generatedPasswords"
+          :key="index"
+          class="password-item"
+        >
+          <InputSecure
+            v-model:value="generatedPasswords[index]"
+            :show-strength="false"
+            :allow-generate="false"
+            :show-requirements="false"
+            state="readonly"
+          />
+          <button
+            @click="copyPassword(password)"
+            class="copy-btn"
+            title="Copy password"
+          >
+            Copy
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.password-manager {
+  max-width: 600px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.master-password-section {
+  margin-bottom: 2rem;
+  padding: 1rem;
+  border: 1px solid #f0f0f0;
+  border-radius: 0.25rem;
+}
+
+.master-password-section h4 {
+  margin: 0 0 1rem 0;
+  color: #333;
+}
+
+.generated-passwords-section h4 {
+  margin: 0 0 1rem 0;
+  color: #333;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.generate-btn {
+  padding: 0.5rem 1rem;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.generate-btn:hover {
+  background-color: #218838;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+  font-style: italic;
+}
+
+.password-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.password-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid #f0f0f0;
+  border-radius: 0.25rem;
+}
+
+.copy-btn {
+  padding: 0.5rem 0.75rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+.copy-btn:hover {
+  background-color: #0056b3;
+}
+</style>
+```
+
+## Technical Notes
+
+- Password strength calculation considers length, character variety, and pattern detection
+- Common password prevention uses a curated list of weak passwords
+- Password generation creates cryptographically secure passwords meeting all requirements
+- Copy functionality uses the modern Clipboard API with fallback handling
+- Input states provide proper accessibility and visual feedback
+- Responsive design prevents zoom on mobile devices with proper font sizing
+- Requirements list shows/hides based on focus state and validation status
+- Strength indicator updates in real-time with smooth color transitions