From e876b57350ee74fe5568cd99440791e0f7ffb7fc Mon Sep 17 00:00:00 2001
From: KaffinPX <KaffinPX@gmail.com>
Date: Fri, 18 Oct 2024 18:38:26 +0300
Subject: [PATCH] Improve password page (Requirement component)

---
 src/pages/Creation/Import.tsx   |  2 +-
 src/pages/Creation/Password.tsx | 58 ++++++++++++++++++++-------------
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/pages/Creation/Import.tsx b/src/pages/Creation/Import.tsx
index 8ff97e5..89a390d 100644
--- 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
index 9c26bc9..8222e2d 100644
--- 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,27 +53,27 @@ 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)}>
@@ -81,4 +81,16 @@ export default function Password ({ onSet }: {
       </button>
     </main>
   )
-}
\ No newline at end of file
+}
+
+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>
+  );
+};