weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

More work on login connection logic

Browse Source
This commit is contained in:
Davide Passoni
2024-05-02 10:05:12 +02:00
parent 2cb3287d1f
commit f5aca98e49
7 changed files with 99 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/react/src/ui/modals/components/modal.tsx
View File

@@ -5,7 +5,7 @@ export function Modal(props: {
children?: JSX.Element | JSX.Element[],
className?: string
}) {
return <div className={props.className + "fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-48%] z-ui-2 rounded-xl border-solid border-[1px] border-gray-500 drop-shadow"}>
return <div className={props.className + "fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-48%] z-ui-4 rounded-xl border-solid border-[1px] border-gray-500 drop-shadow"}>
{props.children}
</div>
}

51
frontend/react/src/ui/modals/login.tsx
View File

@@ -8,11 +8,15 @@ import { VERSION, connectedToServer } from '../../olympusapp'
export function LoginModal(props: {
checkingPassword: boolean,
loginError: boolean,
onLogin: (password: string) => void
commandMode: string | null,
onLogin: (password: string) => void,
onContinue: (username: string) => void,
onBack: () => void
}) {
const [password, setPassword] = useState("");
const [displayName, setDisplayName] = useState("");
return <Modal className="flex inline-flex max-h-[600px] overflow-y-auto h-[75%] scroll-smooth w-[80%] bg-white dark:bg-olympus-800 ">
return <Modal className="inline-flex max-h-[600px] overflow-y-auto h-[75%] scroll-smooth w-[80%] bg-white dark:bg-olympus-800 ">
<div className='absolute gap-8 flex flex-col p-16 max-lg:p-12 w-full'>
<div className="flex flex-row max-lg:flex-col w-full gap-6">
<div className="flex flex-grow flex-col gap-5 w-[40%] max-lg:w-[100%] content-center justify-start">
@@ -30,18 +34,37 @@ export function LoginModal(props: {
{
!props.loginError ?
<>
<div className="flex flex-col items-start gap-2">
<label className=" text-gray-800 dark:text-white text-md">Password</label>
<input type="text" onChange={(ev) => setPassword(ev.currentTarget.value)} className="w-full max-w-80 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Enter password" required />
</div>
<div className='flex'>
<button type="button" onClick={() => props.onLogin(password)} className="flex content-center items-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm">
Login <FontAwesomeIcon className="my-auto" icon={faArrowRight} />
</button>
<button type="button" className="flex content-center items-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm dark:border-gray-600 border-[1px] dark:text-gray-400">
View Guide <FontAwesomeIcon className="my-auto" icon={faExternalLink} />
</button>
</div>
{ props.commandMode === null?
<>
<div className="flex flex-col items-start gap-2">
<label className=" text-gray-800 dark:text-white text-md">Password</label>
<input type="text" onChange={(ev) => setPassword(ev.currentTarget.value)} className="w-full max-w-80 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Enter password" required />
</div>
<div className='flex'>
<button type="button" onClick={() => props.onLogin(password)} className="flex content-center items-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm">
Login <FontAwesomeIcon className="my-auto" icon={faArrowRight} />
</button>
<button type="button" className="flex content-center items-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm dark:border-gray-600 border-[1px] dark:text-gray-400">
View Guide <FontAwesomeIcon className="my-auto" icon={faExternalLink} />
</button>
</div>
</>
:
<>
<div className="flex flex-col items-start gap-2">
<label className=" text-gray-800 dark:text-white text-md">Set display name</label>
<input type="text" onChange={(ev) => setDisplayName(ev.currentTarget.value)} className="w-full max-w-80 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Enter display name" required />
</div>
<div className='flex'>
<button type="button" onClick={() => props.onContinue(displayName)} className="flex content-center items-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm">
Continue <FontAwesomeIcon className="my-auto" icon={faArrowRight} />
</button>
<button type="button" className="flex content-center items-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm dark:border-gray-600 border-[1px] dark:text-gray-400">
Back
</button>
</div>
</>
}
</>
:
<div>

34
frontend/react/src/ui/ui.tsx
View File

@@ -28,6 +28,7 @@ export type OlympusState = {
}
export function UI() {
var [loginModalVisible, setLoginModalVisible] = useState(true);
var [mainMenuVisible, setMainMenuVisible] = useState(false);
var [spawnMenuVisible, setSpawnMenuVisible] = useState(false);
var [unitControlMenuVisible, setUnitControlMenuVisible] = useState(false);
@@ -60,7 +61,7 @@ export function UI() {
function checkPassword(password: string) {
setCheckingPassword(true);
var hash = sha256.create();
getApp().getServerManager().setCredentials("no-username", hash.update(password).hex());
getApp().getServerManager().setPassword(hash.update(password).hex());
getApp().getServerManager().getMission((response) => {
const commandMode = response.mission.commandModeOptions.commandMode;
try {
@@ -69,7 +70,18 @@ export function UI() {
setLoginError(true);
}
setCheckingPassword(false);
})
},
() => {
setLoginError(true);
setCheckingPassword(false);
},
)
}
function connect(username: string) {
getApp().getServerManager().setUsername(username);
getApp().getServerManager().startUpdate();
setLoginModalVisible(false);
}
return (
@@ -103,11 +115,19 @@ export function UI() {
<div className='absolute top-0 left-0 h-full w-full flex flex-col'>
<Header />
<div className='flex h-full'>
<LoginModal
onLogin={(password) => { checkPassword(password) }}
checkingPassword={checkingPassword}
loginError={loginError}
/>
{loginModalVisible &&
<>
<div className="fixed top-0 left-0 w-full h-full z-ui-3 bg-black opacity-60"></div>
<LoginModal
onLogin={(password) => { checkPassword(password) }}
onContinue={(username) => { connect(username) }}
onBack={() => { setCommandMode(null) }}
checkingPassword={checkingPassword}
loginError={loginError}
commandMode={commandMode}
/>
</>
}
<SideBar />
<MainMenu
open={mainMenuVisible}