zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

handle submit on enter, style buttons

Browse Source
This commit is contained in:
MathieuG-P
2022-06-12 23:02:33 +02:00
parent d933db3a03
commit 820dfc34e8
2 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/modal/modal-types/guard-modal.component.tsx
+11 -10
View File
@@ -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>
)
src/renderer/components/modal/modal-types/login-modal.component.tsx
+18 -12
View File
@@ -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>
)