Improve password page (Requirement component)

KaffinPX · Oct 18, 2024 · e876b57 · e876b57
1 parent c58a118
commit e876b57
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/src/pages/Creation/Import.tsx b/src/pages/Creation/Import.tsx
@@ -35,7 +35,7 @@ export default function Import ({ onSubmit }: {
           </h1>
         </div>
         <p className="font-semibold text-center">
-          Enter mnemonic, theq key of a wallet.
+          Enter mnemonic, the key of a wallet.
         </p>
       </div>
       <div className="grid grid-cols-3 gap-1">

diff --git a/src/pages/Creation/Password.tsx b/src/pages/Creation/Password.tsx
@@ -1,4 +1,4 @@
-import { KeyIcon } from "lucide-react"
+import { KeyIcon, XIcon, CheckIcon } from "lucide-react"
 import { useState, useMemo } from "react"
 
 enum PasswordErrors {
@@ -53,32 +53,44 @@ export default function Password ({ onSet }: {
         <button className="btn btn-xs" onClick={() => setIsHidden(!isHidden)}>
           {isHidden ? "Show" : "Hide"}
         </button>
-        <div className="flex flex-col gap-0.5">
-          <label>
-            {errors.has(PasswordErrors.TooShort) ? "❌ " : "✅ "}
-            At least 8 characters long.
-          </label>
-          <label>
-            {errors.has(PasswordErrors.UpperCase) ? "❌ " : "✅ "}
-            At least one uppercase letter.
-          </label>
-          <label>
-            {errors.has(PasswordErrors.LowerCase) ? "❌ " : "✅ "} 
-            At least one lowercase letter.
-          </label>
-          <label>
-            {errors.has(PasswordErrors.Number) ? "❌ " : "✅ "} 
-            At least one number.
-          </label>
-          <label>
-            {errors.has(PasswordErrors.SpecialCharacter) ? "❌ " : "✅ "} 
-            At least one special character.
-          </label>
+        <div className="flex flex-col">
+          <Requirement 
+            condition={errors.has(PasswordErrors.TooShort)} 
+            label="At least 8 characters long." 
+          />
+          <Requirement 
+            condition={errors.has(PasswordErrors.UpperCase)} 
+            label="At least one uppercase letter." 
+          />
+          <Requirement 
+            condition={errors.has(PasswordErrors.LowerCase)} 
+            label="At least one lowercase letter." 
+          />
+          <Requirement 
+            condition={errors.has(PasswordErrors.Number)} 
+            label="At least one number." 
+          />
+          <Requirement 
+            condition={errors.has(PasswordErrors.SpecialCharacter)} 
+            label="At least one special character." 
+          />
         </div>
       </div>
       <button className="btn btn-primary" disabled={!!errors.size} onClick={() => onSet(password)}>
          Continue
       </button>
     </main>
   )
-}
+}
+
+const Requirement = ({ condition, label }: {
+  condition: boolean,
+  label: string
+}) => {
+  return (
+    <label className={`flex flex-row items-center ${condition ? "text-red-500" : "text-green-500"}`}>
+      {condition ? <XIcon /> : <CheckIcon />}
+      {label}
+    </label>
+  );
+};