add guard code modal

src/renderer/components/modal/modal-types/guard-modal.component.tsx

@@ -0,0 +1,28 @@
+import { ModalExitCode, ModalResponse } from "../../../services/modale.service";
+import { useState } from "react";
+import BeatConflict from "../../../../../assets/beat-conflict.png"
+
+export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
+
+    const [guardCode, setGuardCode] = useState('');
+
+    const loggin = () => resolver({exitCode: ModalExitCode.COMPLETED, data: guardCode});
+    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">Steam Guard</h1>
+        <div className="w-full flex justify-center content-center items-center">
+            <img className="aspect-square object-cover w-28" src={BeatConflict} />
+        </div>
+        <div className="flex flex-col">
+            <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={cancel} className="mr-4">Cancel</button>
+            <button onClick={loggin}>LogIn</button>
+        </div>
+    </form>
+  )
+}

src/renderer/components/modal/modal.component.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react"
 import { distinctUntilChanged } from "rxjs";
 
 import { LoginModal } from "./modal-types/login-modal.component";
+import { GuardModal } from "./modal-types/guard-modal.component";
 
 export function Modal() {
 
@@ -23,6 +24,7 @@ export function Modal() {
       <span onClick={() => modalSevice.resolve({exitCode: ModalExitCode.NO_CHOICE})} className={`absolute top-0 bottom-0 right-0 left-0 transition-opacity bg-black ${modalType? "opacity-40" : "opacity-0"}`}></span>
       <div className={`absolute transition-transform ${modalType ? "translate-y-0" : "translate-y-full"}`}>
           {modalType === ModalType.STEAM_LOGIN && <LoginModal resolver={modalSevice.getResolver()}/>}
+          {modalType === ModalType.GUARD_CODE && <GuardModal resolver={modalSevice.getResolver()}/>}
       </div>
     </div>
   )