jinx-vi-0#19 Add a criteria to the password input to enhance the pass…

…word validation mechanism for users.
FazeZxc · Oct 4, 2024 · 7b925e4 · 7b925e4
1 parent 48c5d78
commit 7b925e4
Showing 1 changed file with 122 additions and 0 deletions.
diff --git a/src/components/Manager.jsx b/src/components/Manager.jsx
@@ -247,6 +247,128 @@ const Manager = () => {
             Save
           </button>
         </div>
+        <div className="passwords">
+          <h2 className="font-bold text-2xl py-4">Your Passwords</h2>
+          {passwordArray.length === 0 && <div>No passwords to show</div>}
+          {passwordArray.length !== 0 && (
+            <div className="overflow-x-auto">
+              <table className="table-auto w-full rounded-md overflow-hidden mb-10">
+                <thead className="bg-green-800 text-white">
+                  <tr>
+                    <th className="py-2">Site</th>
+                    <th className="py-2">Username</th>
+                    <th className="py-2">Password</th>
+                    <th className="py-2">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-green-100">
+                  {passwordArray.map((item, index) => (
+                    <tr key={index}>
+                      <td className="py-2 border border-white text-center">
+                        <div className="flex items-center justify-center">
+                          <a
+                            href={item.site}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {item.site}
+                          </a>
+                          <div
+                            className="lordiconcopy size-7 cursor-pointer"
+                            onClick={() => {
+                              copyText(item.site);
+                            }}
+                          >
+                            <lord-icon
+                              style={{
+                                width: "25px",
+                                height: "25px",
+                                paddingTop: "3px",
+                                paddingLeft: "3px",
+                              }}
+                              src="https://cdn.lordicon.com/iykgtsbt.json"
+                              trigger="hover"
+                            ></lord-icon>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="py-2 border border-white text-center">
+                        <div className="flex items-center justify-center">
+                          <span>{item.username}</span>
+                          <div
+                            className="lordiconcopy size-7 cursor-pointer"
+                            onClick={() => {
+                              copyText(item.username);
+                            }}
+                          >
+                            <lord-icon
+                              style={{
+                                width: "25px",
+                                height: "25px",
+                                paddingTop: "3px",
+                                paddingLeft: "3px",
+                              }}
+                              src="https://cdn.lordicon.com/iykgtsbt.json"
+                              trigger="hover"
+                            ></lord-icon>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="py-2 border border-white text-center">
+                        <div className="flex items-center justify-center">
+                          <span>{"*".repeat(item.password.length)}</span>
+                          <div
+                            className="lordiconcopy size-7 cursor-pointer"
+                            onClick={() => {
+                              copyText(item.password);
+                            }}
+                          >
+                            <lord-icon
+                              style={{
+                                width: "25px",
+                                height: "25px",
+                                paddingTop: "3px",
+                                paddingLeft: "3px",
+                              }}
+                              src="https://cdn.lordicon.com/iykgtsbt.json"
+                              trigger="hover"
+                            ></lord-icon>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="justify-center py-2 border border-white text-center">
+                        <span
+                          className="cursor-pointer mx-1"
+                          onClick={() => {
+                            editPassword(item.id);
+                          }}
+                        >
+                          <lord-icon
+                            src="https://cdn.lordicon.com/gwlusjdu.json"
+                            trigger="hover"
+                            style={{ width: "25px", height: "25px" }}
+                          ></lord-icon>
+                        </span>
+                        <span
+                          className="cursor-pointer mx-1"
+                          onClick={() => {
+                            deletePassword(item.id);
+                          }}
+                        >
+                          <lord-icon
+                            src="https://cdn.lordicon.com/skkahier.json"
+                            trigger="hover"
+                            style={{ width: "25px", height: "25px" }}
+                          ></lord-icon>
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
       </div>
     </>
   );