dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Added version text and adding loading for creating and logging in users

Browse Source
This commit is contained in:
Karmaa
2025-03-17 23:00:07 -05:00
parent b493d9f993
commit d71352045c
4 changed files with 121 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.jsx
View File

@@ -379,9 +379,18 @@ function App() {
} }
}; };
const handleGuestLogin = () => { const handleGuestLogin = async ({ onSuccess, onFailure }) => {
if (userRef.current) { if (userRef.current) {
userRef.current.loginAsGuest(); try {
await userRef.current.loginAsGuest();
setIsLoginUserHidden(true);
setIsLoggingIn(false);
if (onSuccess) onSuccess();
} catch (error) {
setIsLoginUserHidden(false);
setIsLoggingIn(false);
if (onFailure) onFailure(error);
}
} }
} }

55
src/modals/CreateUserModal.jsx
View File

@@ -10,22 +10,31 @@ const CreateUserModal = ({ isHidden, form, setForm, handleCreateUser, setIsCreat
const [confirmPassword, setConfirmPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState('');
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const isFormValid = () => { const isFormValid = () => {
if (!form.username || !form.password || form.password !== confirmPassword) return false; if (!form.username || !form.password || form.password !== confirmPassword) return false;
return true; return true;
}; };
const handleCreate = () => { const handleCreate = async () => {
handleCreateUser({ setIsLoading(true);
...form try {
}); await handleCreateUser({
...form,
onSuccess: () => setIsLoading(false),
onFailure: () => setIsLoading(false)
});
} catch (error) {
setIsLoading(false);
}
}; };
useEffect(() => { useEffect(() => {
if (isHidden) { if (isHidden) {
setForm({ username: '', password: '' }); setForm({ username: '', password: '' });
setConfirmPassword(''); setConfirmPassword('');
setIsLoading(false);
} }
}, [isHidden]); }, [isHidden]);
@@ -54,18 +63,23 @@ const CreateUserModal = ({ isHidden, form, setForm, handleCreateUser, setIsCreat
<form <form
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
if (isFormValid()) handleCreate(); if (isFormValid() && !isLoading) handleCreate();
}} }}
> >
<Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}> <Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}>
<FormControl> <FormControl>
<FormLabel>Username</FormLabel> <FormLabel>Username</FormLabel>
<Input <Input
disabled={isLoading}
value={form.username} value={form.username}
onChange={(event) => setForm({ ...form, username: event.target.value })} onChange={(event) => setForm({ ...form, username: event.target.value })}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
/> />
</FormControl> </FormControl>
@@ -73,6 +87,7 @@ const CreateUserModal = ({ isHidden, form, setForm, handleCreateUser, setIsCreat
<FormLabel>Password</FormLabel> <FormLabel>Password</FormLabel>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<Input <Input
disabled={isLoading}
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
value={form.password} value={form.password}
onChange={(event) => setForm({ ...form, password: event.target.value })} onChange={(event) => setForm({ ...form, password: event.target.value })}
@@ -80,13 +95,21 @@ const CreateUserModal = ({ isHidden, form, setForm, handleCreateUser, setIsCreat
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
flex: 1, flex: 1,
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
/> />
<IconButton <IconButton
disabled={isLoading}
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
sx={{ sx={{
color: theme.palette.text.primary, color: theme.palette.text.primary,
marginLeft: 1, marginLeft: 1,
'&:disabled': {
opacity: 0.5,
},
}} }}
> >
{showPassword ? <VisibilityOff /> : <Visibility />} {showPassword ? <VisibilityOff /> : <Visibility />}
@@ -97,6 +120,7 @@ const CreateUserModal = ({ isHidden, form, setForm, handleCreateUser, setIsCreat
<FormLabel>Confirm Password</FormLabel> <FormLabel>Confirm Password</FormLabel>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<Input <Input
disabled={isLoading}
type={showConfirmPassword ? 'text' : 'password'} type={showConfirmPassword ? 'text' : 'password'}
value={confirmPassword} value={confirmPassword}
onChange={(event) => setConfirmPassword(event.target.value)} onChange={(event) => setConfirmPassword(event.target.value)}
@@ -104,13 +128,21 @@ const CreateUserModal = ({ isHidden, form, setForm, handleCreateUser, setIsCreat
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
flex: 1, flex: 1,
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
/> />
<IconButton <IconButton
disabled={isLoading}
onClick={() => setShowConfirmPassword(!showConfirmPassword)} onClick={() => setShowConfirmPassword(!showConfirmPassword)}
sx={{ sx={{
color: theme.palette.text.primary, color: theme.palette.text.primary,
marginLeft: 1, marginLeft: 1,
'&:disabled': {
opacity: 0.5,
},
}} }}
> >
{showConfirmPassword ? <VisibilityOff /> : <Visibility />} {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
@@ -119,17 +151,22 @@ const CreateUserModal = ({ isHidden, form, setForm, handleCreateUser, setIsCreat
</FormControl> </FormControl>
<Button <Button
type="submit" type="submit"
disabled={!isFormValid()} disabled={!isFormValid() || isLoading}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
'&:hover': { '&:hover': {
backgroundColor: theme.palette.general.disabled, backgroundColor: theme.palette.general.disabled,
}, },
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
> >
Create {isLoading ? "Creating user..." : "Create"}
</Button> </Button>
<Button <Button
disabled={isLoading}
onClick={() => { onClick={() => {
setForm({ username: '', password: '' }); setForm({ username: '', password: '' });
setConfirmPassword(''); setConfirmPassword('');
@@ -141,6 +178,10 @@ const CreateUserModal = ({ isHidden, form, setForm, handleCreateUser, setIsCreat
'&:hover': { '&:hover': {
backgroundColor: theme.palette.general.disabled, backgroundColor: theme.palette.general.disabled,
}, },
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
> >
Back Back

67
src/modals/LoginUserModal.jsx
View File

@@ -8,21 +8,42 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff';
const LoginUserModal = ({ isHidden, form, setForm, handleLoginUser, handleGuestLogin, setIsLoginUserHidden, setIsCreateUserHidden }) => { const LoginUserModal = ({ isHidden, form, setForm, handleLoginUser, handleGuestLogin, setIsLoginUserHidden, setIsCreateUserHidden }) => {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const isFormValid = () => { const isFormValid = () => {
if (!form.username || !form.password) return false; if (!form.username || !form.password) return false;
return true; return true;
}; };
const handleLogin = () => { const handleLogin = async () => {
handleLoginUser({ setIsLoading(true);
...form, try {
}); await handleLoginUser({
...form,
onSuccess: () => setIsLoading(false),
onFailure: () => setIsLoading(false)
});
} catch (error) {
setIsLoading(false);
}
};
const handleGuest = async () => {
setIsLoading(true);
try {
await handleGuestLogin({
onSuccess: () => setIsLoading(false),
onFailure: () => setIsLoading(false)
});
} catch (error) {
setIsLoading(false);
}
}; };
useEffect(() => { useEffect(() => {
if (isHidden) { if (isHidden) {
setForm({ username: '', password: '' }); setForm({ username: '', password: '' });
setIsLoading(false);
} }
}, [isHidden]); }, [isHidden]);
@@ -51,18 +72,23 @@ const LoginUserModal = ({ isHidden, form, setForm, handleLoginUser, handleGuestL
<form <form
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
if (isFormValid()) handleLogin(); if (isFormValid() && !isLoading) handleLogin();
}} }}
> >
<Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}> <Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}>
<FormControl> <FormControl>
<FormLabel>Username</FormLabel> <FormLabel>Username</FormLabel>
<Input <Input
disabled={isLoading}
value={form.username} value={form.username}
onChange={(event) => setForm({ ...form, username: event.target.value })} onChange={(event) => setForm({ ...form, username: event.target.value })}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
/> />
</FormControl> </FormControl>
@@ -70,6 +96,7 @@ const LoginUserModal = ({ isHidden, form, setForm, handleLoginUser, handleGuestL
<FormLabel>Password</FormLabel> <FormLabel>Password</FormLabel>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<Input <Input
disabled={isLoading}
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
value={form.password} value={form.password}
onChange={(event) => setForm({ ...form, password: event.target.value })} onChange={(event) => setForm({ ...form, password: event.target.value })}
@@ -77,13 +104,21 @@ const LoginUserModal = ({ isHidden, form, setForm, handleLoginUser, handleGuestL
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
flex: 1, flex: 1,
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
/> />
<IconButton <IconButton
disabled={isLoading}
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
sx={{ sx={{
color: theme.palette.text.primary, color: theme.palette.text.primary,
marginLeft: 1, marginLeft: 1,
'&:disabled': {
opacity: 0.5,
},
}} }}
> >
{showPassword ? <VisibilityOff /> : <Visibility />} {showPassword ? <VisibilityOff /> : <Visibility />}
@@ -92,17 +127,22 @@ const LoginUserModal = ({ isHidden, form, setForm, handleLoginUser, handleGuestL
</FormControl> </FormControl>
<Button <Button
type="submit" type="submit"
disabled={!isFormValid()} disabled={!isFormValid() || isLoading}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
'&:hover': { '&:hover': {
backgroundColor: theme.palette.general.disabled, backgroundColor: theme.palette.general.disabled,
}, },
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
> >
Login {isLoading ? "Logging in..." : "Login"}
</Button> </Button>
<Button <Button
disabled={isLoading}
onClick={() => { onClick={() => {
setForm({ username: '', password: '' }); setForm({ username: '', password: '' });
setIsCreateUserHidden(false); setIsCreateUserHidden(false);
@@ -113,20 +153,29 @@ const LoginUserModal = ({ isHidden, form, setForm, handleLoginUser, handleGuestL
'&:hover': { '&:hover': {
backgroundColor: theme.palette.general.disabled, backgroundColor: theme.palette.general.disabled,
}, },
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
> >
Create User Create User
</Button> </Button>
<Button <Button
onClick={handleGuestLogin} disabled={isLoading}
onClick={handleGuest}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
'&:hover': { '&:hover': {
backgroundColor: theme.palette.general.disabled, backgroundColor: theme.palette.general.disabled,
}, },
'&:disabled': {
opacity: 0.5,
backgroundColor: theme.palette.general.primary,
},
}} }}
> >
Login as Guest {isLoading ? "Logging in as guest..." : "Login as Guest"}
</Button> </Button>
</Stack> </Stack>
</form> </form>

4
src/modals/ProfileModal.jsx
View File

@@ -71,6 +71,10 @@ export default function ProfileModal({
> >
Delete Account Delete Account
</Button> </Button>
<div className="text-center text-xs text-gray-400">
v2.0.1
</div>
</div> </div>
</div> </div>
</Modal> </Modal>