From 63306aa0526a24c2f93bf8a01fc1a5c8c3b66221 Mon Sep 17 00:00:00 2001
From: Yan Luiz <yan@nomadbitcoin.xyz>
Date: Wed, 18 Sep 2024 22:48:05 -0300
Subject: [PATCH] fix: svg path and email regex

---
 pages/auth/index.js       | 21 +++++++++++++--------
 public/assets/img/eye.svg |  2 ++
 2 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/img/eye.svg

diff --git a/pages/auth/index.js b/pages/auth/index.js
index 548f4062..0318276b 100644
--- a/pages/auth/index.js
+++ b/pages/auth/index.js
@@ -18,15 +18,15 @@ function authPage() {
   const [showpass, setShowPass] = useState(false)
   const { t } = useTranslation()
 
-  const [isSignUp, setIsSignUp] = useState(false) // Toggle for sign-up
+  const [isSignUp, setIsSignUp] = useState(false)
   const [email, setEmail] = useState('')
   const { register, handleSubmit } = useForm()
 
   const onSubmit = (data) => {
     if (isSignUp) {
-      signup(data) // Handle sign-up
+      signup(data)
     } else {
-      login(data) // Handle login
+      login(data)
     }
   }
 
@@ -70,7 +70,7 @@ function authPage() {
             >
               {isSignUp ? t('form.already_have_account') : t('form.no_account')}{' '}
               <span
-                onClick={() => setIsSignUp(!isSignUp)} // Toggle between sign-in and sign-up
+                onClick={() => setIsSignUp(!isSignUp)}
                 className="cursor-pointer text-sm font-medium leading-none text-primary-300 hover:text-gray-500"
               >
                 {isSignUp ? t('buttons.sign_in') : t('buttons.register_now')}
@@ -93,7 +93,8 @@ function authPage() {
                   {...register('email', {
                     required: t('form.enter_email'),
                     message: t('form.invalid_email'),
-                    pattern: /.../, // Your email regex pattern
+                    pattern:
+                      /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/i,
                   })}
                 />
               </div>
@@ -109,6 +110,7 @@ function authPage() {
                     id="password"
                     type={showpass ? 'text' : 'password'}
                     className="mt-2 w-full rounded border bg-gray-200 py-3 pl-3 text-xs font-medium leading-none text-gray-800"
+                    placeholder=""
                     {...register('password', {
                       required: t('form.enter_password'),
                       message: t('form.verify_password'),
@@ -119,8 +121,11 @@ function authPage() {
                     onClick={() => setShowPass(!showpass)}
                     className="absolute right-0 mt-2 mr-3 cursor-pointer"
                   >
-                    {showpass ? <span>Hide</span> : <span>Show</span>}{' '}
-                    {/* Ensure the text is displayed */}
+                    <img
+                      src="/assets/img/eye.svg"
+                      alt={showpass ? 'Hide Password' : 'Show Password'}
+                      className="h-4 w-4"
+                    />
                   </div>
                 </div>
               </div>
@@ -142,7 +147,7 @@ function authPage() {
                 ></p>
               </div>
             )}
-            {!isSignUp && ( // Ensure this shows only during login
+            {!isSignUp && (
               <div className="mt-8">
                 <p
                   className="w-fit cursor-pointer text-xs text-indigo-300 hover:underline"
diff --git a/public/assets/img/eye.svg b/public/assets/img/eye.svg
new file mode 100644
index 00000000..47a059db
--- /dev/null
+++ b/public/assets/img/eye.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" ?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.7469 15.4149C17.9855 14.8742 18.1188 14.2724 18.1188 14.0016C18.1188 11.6544 16.2952 9.7513 14.046 9.7513C11.7969 9.7513 9.97332 11.6544 9.97332 14.0016C9.97332 16.3487 12.0097 17.8886 14.046 17.8886C15.3486 17.8886 16.508 17.2515 17.2517 16.2595C17.4466 16.0001 17.6137 15.7168 17.7469 15.4149ZM14.046 15.7635C14.5551 15.7635 15.0205 15.5684 15.3784 15.2457C15.81 14.8566 16 14.2807 16 14.0016C16 12.828 15.1716 11.8764 14.046 11.8764C12.9205 11.8764 12 12.8264 12 14C12 14.8104 12.9205 15.7635 14.046 15.7635Z" fill="#000000" fill-rule="evenodd"/><path clip-rule="evenodd" d="M1.09212 14.2724C1.07621 14.2527 1.10803 14.2931 1.09212 14.2724C0.96764 14.1021 0.970773 13.8996 1.09268 13.7273C1.10161 13.7147 1.11071 13.7016 1.11993 13.6882C4.781 8.34319 9.32105 5.5 14.0142 5.5C18.7025 5.5 23.2385 8.33554 26.8956 13.6698C26.965 13.771 27 13.875 27 13.9995C27 14.1301 26.9593 14.2399 26.8863 14.3461C23.2302 19.6702 18.6982 22.5 14.0142 22.5C9.30912 22.5 4.75717 19.6433 1.09212 14.2724ZM3.93909 13.3525C3.6381 13.7267 3.6381 14.2722 3.93908 14.6465C7.07417 18.5443 10.6042 20.3749 14.0142 20.3749C17.4243 20.3749 20.9543 18.5443 24.0894 14.6465C24.3904 14.2722 24.3904 13.7267 24.0894 13.3525C20.9543 9.45475 17.4243 7.62513 14.0142 7.62513C10.6042 7.62513 7.07417 9.45475 3.93909 13.3525Z" fill="#000000" fill-rule="evenodd"/></svg>
\ No newline at end of file