From 820dfc34e8b83fb1cef0ce2a7bf37860db86135e Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sun, 12 Jun 2022 23:02:33 +0200
Subject: [PATCH] handle submit on enter, style buttons

---
 .../modal-types/guard-modal.component.tsx     | 21 ++++++-------
 .../modal-types/login-modal.component.tsx     | 30 +++++++++++--------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/modal/modal-types/guard-modal.component.tsx b/src/renderer/components/modal/modal-types/guard-modal.component.tsx
index 34a118aa..767dfcc8 100644
--- a/src/renderer/components/modal/modal-types/guard-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/guard-modal.component.tsx
@@ -6,17 +6,15 @@ export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
     const [guardCode, setGuardCode] = useState('');
 
-    const loggin = (e: React.MouseEvent) => {
-      e.preventDefault();
+    const login = () => {
+      if(!guardCode){ return; }
       resolver({exitCode: ModalExitCode.COMPLETED, data: guardCode});
     }
-    const cancel = (e: React.MouseEvent) => {
-      e.preventDefault();
-      resolver({exitCode: ModalExitCode.CANCELED});
-    }
+    const cancel = () => resolver({exitCode: ModalExitCode.CANCELED});
+    
 
   return (
-    <form className="p-4 bg-main-color-2 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black">
+    <form className="p-4 bg-main-color-2 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black" onSubmit={(e) => {e.preventDefault(); login();}}>
         <h1 className="w-full text-center font-bold text-2xl">Steam Guard</h1>
         <div className="w-full flex justify-center content-center items-center">
             <img className="aspect-square object-cover w-28" src={BeatConflict} />
@@ -25,9 +23,12 @@ export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
             <label className="font-bold" htmlFor="guard">Guard Code</label>
             <input className="bg-main-color-3 p-1 pr-2 pl-2 rounded-md" onChange={e => setGuardCode(e.target.value)} value={guardCode} type="guard" name="guard" id="guard" placeholder="Enter your Guard code"/>
         </div>
-        <div className="w-full flex justify-center items-center content-center">
-            <button onClick={e => cancel(e)} className="mr-4">Cancel</button>
-            <button onClick={e =>loggin(e)}>LogIn</button>
+        <div className="mt-3 w-full flex justify-center items-center content-center">
+            <span onClick={cancel} className="font-bold uppercase grow mr-4 border-2 pr-3 pl-3 pt-[2px] pb-[2px] cursor-pointer rounded-md border-gray-300 hover:bg-gray-300 hover:text-black transition-colors">Cancel</span>
+            <button type="submit" className="relative font-bold uppercase grow">
+              <div className="absolute glow-on-hover opacity-100 z-[1] w-[calc(100%+4px)] h-[calc(100%+4px)] top-[-2px] left-[-2px] blur-none rounded-md"></div>
+              <div className="relative tracking-wide rounded-md h-full w-full z-[1] pr-3 pl-3 pt-[2px] pb-[2px] bg-main-color-2 hover:text-black hover:bg-transparent transition-colors">login</div>
+            </button>
         </div>
     </form>
   )
diff --git a/src/renderer/components/modal/modal-types/login-modal.component.tsx b/src/renderer/components/modal/modal-types/login-modal.component.tsx
index f4404314..2c9998d9 100644
--- a/src/renderer/components/modal/modal-types/login-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/login-modal.component.tsx
@@ -6,32 +6,38 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
-    const [stay, setStay] = useState(false);
+    const [stay, setStay] = useState(true);
 
-    const loggin = () => resolver({exitCode: ModalExitCode.COMPLETED, data:{username, password, stay}});
+    const loggin = () => {
+        if(!username || !password){ return; }
+        resolver({exitCode: ModalExitCode.COMPLETED, data:{username, password, stay}});
+    }
     const cancel = () => resolver({exitCode: ModalExitCode.CANCELED});
 
   return (
-    <form className="p-4 bg-main-color-2 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black">
-        <h1 className="w-full text-center font-bold text-2xl">Connect to Steam</h1>
+    <form className="p-4 bg-main-color-2 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black" onSubmit={(e) => {e.preventDefault(); loggin();}}>
+        <h1 className="w-full text-center font-bold text-2xl">Login to Steam</h1>
         <div className="w-full flex justify-center content-center items-center">
             <img className="aspect-square object-cover w-24" src={BeatImpatient} />
         </div>
         <div className="flex flex-col mb-2">
-            <label className="font-bold" htmlFor="username">Username</label>
-            <input className="bg-main-color-3 p-1 pr-2 pl-2 rounded-md" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder="Enter your username"/>
+            <label className="font-bold cursor-pointer" htmlFor="username">Username</label>
+            <input className="bg-main-color-3 p-1 pr-2 pl-2 rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder="Enter your username"/>
         </div>
         <div className="flex flex-col">
-            <label className="font-bold" htmlFor="password">Password</label>
-            <input className="bg-main-color-3 p-1 pr-2 pl-2 rounded-md" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder="Enter your password"/>
+            <label className="font-bold cursor-pointer" htmlFor="password">Password</label>
+            <input className="bg-main-color-3 p-1 pr-2 pl-2 rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder="Enter your password"/>
         </div>
         <div className="flex items-center content-center justify-start mt-2 mb-2">
             <input onChange={e => setStay(e.target.checked)} checked={stay} className="mr-1" type="checkbox" name="stay" id="stay" />
-            <label htmlFor="stay">Stay connected</label>
+            <label className="cursor-pointer" htmlFor="stay">Stay connected</label>
         </div>
-        <div className="w-full flex justify-center items-center content-center">
-            <button onClick={(e) => {e.preventDefault(); cancel()}} className="mr-4">Cancel</button>
-            <button onClick={(e) => {e.preventDefault(); loggin()}}>LogIn</button>
+        <div className="mt-3 w-full flex items-center content-center">
+            <span onClick={cancel} className="font-bold uppercase tracking-wide grow mr-4 border-2 pr-3 pl-3 pt-[2px] pb-[2px] cursor-pointer rounded-md border-gray-300 hover:bg-gray-300 hover:text-black transition-colors">Cancel</span>
+            <button type="submit" className="relative font-bold uppercase grow">
+              <div className="absolute glow-on-hover opacity-100 z-[1] w-[calc(100%+4px)] h-[calc(100%+4px)] top-[-2px] left-[-2px] blur-none rounded-md"></div>
+              <div className="relative tracking-wide rounded-md h-full w-full z-[1] pr-3 pl-3 pt-[2px] pb-[2px] bg-main-color-2 hover:text-black hover:bg-transparent transition-colors">login</div>
+            </button>
         </div>
     </form>
   )