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

4
src/modals/ProfileModal.jsx
View File

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