) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ handleAddTag();
+ } else if (
+ e.key === "Backspace" &&
+ tagInput === "" &&
+ formData.tags.length > 0
+ ) {
+ // Remove last tag on backspace when input is empty
+ const lastTag = formData.tags[formData.tags.length - 1];
+ if (lastTag) {
+ handleRemoveTag(lastTag);
+ }
+ }
+ };
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
@@ -146,7 +228,47 @@ export function SecretForm({
>
{showPassword ? "Hide" : "Show"}
+
+
+ {/* Password Strength Indicator */}
+ {passwordStrength && formData.password.length > 0 && (
+
+
+
+
+ {getStrengthLabel(
+ passwordStrength.strength as PasswordStrengthLevel
+ )}
+
+
+ {passwordStrength.feedback.length > 0 && (
+
+ {passwordStrength.feedback.map((fb, idx) => (
+ - • {fb}
+ ))}
+
+ )}
+
+ )}
{/* URL */}
@@ -186,6 +308,87 @@ export function SecretForm({
/>
+ {/* Tags */}
+
+
+
+ {/* Display existing tags */}
+ {formData.tags.length > 0 && (
+
+ {formData.tags.map((tag) => (
+
+ #{tag}
+
+
+ ))}
+
+ )}
+ {/* Tag input */}
+
+ setTagInput(e.target.value)}
+ onKeyDown={handleTagInputKeyDown}
+ disabled={isSubmitting}
+ placeholder="Enter tag name"
+ className="block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-zinc-900 focus:outline-none focus:ring-1 focus:ring-zinc-900 disabled:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:focus:border-white dark:focus:ring-white"
+ />
+
+
+
+ Press Enter to add a tag
+
+
+
+
+ {/* Expiration Date */}
+
+
+
+ handleChange(
+ "expires_at",
+ e.target.value ? `${e.target.value}T23:59:59Z` : ""
+ )
+ }
+ disabled={isSubmitting}
+ min={new Date().toISOString().split("T")[0]}
+ className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-zinc-900 focus:outline-none focus:ring-1 focus:ring-zinc-900 disabled:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:focus:border-white dark:focus:ring-white"
+ />
+
+
{/* Action Buttons */}