add error handling for login

firsttris · Jan 2, 2024 · 4a95341 · 4a95341
1 parent e2a8215
commit 4a95341
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/src/app/ChannelsForType.tsx b/src/app/ChannelsForType.tsx
@@ -18,15 +18,14 @@ import { Icon } from '@iconify/react';
 import { Channel, ChannelType } from './../types/types';
 import { RainDetectionControl } from './controls/RainDetectionControl';
 import { DoorControl } from './controls/DoorControl';
-import { styledWithForward } from './../styled';
 
 
 interface ExpandMoreProps {
-  isExpanded: boolean;
+  expanded: string;
 }
 
-const ExpandMore = styledWithForward(Icon)<ExpandMoreProps>(({ isExpanded }) => ({
-  transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+const ExpandMore = styled(Icon)<ExpandMoreProps>(({ expanded }) => ({
+  transform: expanded === 'true' ? 'rotate(180deg)' : 'rotate(0deg)',
   marginLeft: 'auto',
   transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
   fontSize: '25px',
@@ -114,7 +113,7 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
           >
             {t(channelType)}
           </Typography>
-          <ExpandMore icon="uiw:down" isExpanded={expanded}/>
+          <ExpandMore icon="uiw:down" expanded={expanded.toString()}/>
         </ListItemButton>
       </ListItem>
       {hasTransitionExited ? <Divider /> : null}

diff --git a/src/app/Login.tsx b/src/app/Login.tsx
@@ -1,12 +1,15 @@
-import { Box, Button, TextField } from '@mui/material';
+import { Alert, Box, Button, TextField, Typography } from '@mui/material';
 import { Container } from '@mui/system';
 import { FormEvent } from 'react';
 import { useLogin } from '../hooks/useApi';
 import { useRedirectToRooms } from '../hooks/useCheckSession';
+import { useTranslations } from './../i18n/utils';
 
 export const Login = () => {
   const loginMutation = useLogin();
 
+  const t = useTranslations();
+
   const { navigateRooms } = useRedirectToRooms();
 
   const Login = async (d: FormEvent<HTMLFormElement>) => {
@@ -21,6 +24,10 @@ export const Login = () => {
 
   return (
     <Container maxWidth="xs">
+          <Typography variant="h4" sx={{ mt: 6, mb: 3 }}>
+      {t('signInTitle')}
+    </Typography>
+    {loginMutation.isError && <Alert severity="error">{t('errorOccuredWhileLogin')}</Alert>}
       <form onSubmit={Login}>
         <Box sx={{ mt: 4 }}>
           <TextField

diff --git a/src/app/controls/DoorControl.tsx b/src/app/controls/DoorControl.tsx
@@ -3,7 +3,6 @@ import { StyledIconButton } from '../components/StyledIcons';
 import { KeymaticChannel } from './../../types/types';
 import { useSetValueMutation } from './../../hooks/useApi';
 import { styled } from '@mui/system';
-import { styledWithForward } from './../../styled';
 
 const StyledOuterBox = styled(Box)({
     display: 'flex',
@@ -18,10 +17,10 @@ const StyledOuterBox = styled(Box)({
   });
 
   interface StyledTypographyProps {
-    isUncertain: boolean;
+    uncertain: string;
   }
-  const StyledTypography = styledWithForward(Typography)<StyledTypographyProps>(({ isUncertain }) => ({
-    display: isUncertain ? 'block' : 'none',
+  const StyledTypography = styled(Typography)<StyledTypographyProps>(({ uncertain }) => ({
+    display: uncertain === 'true' ? 'block' : 'none',
   }));
 
 interface DoorControlProps {
@@ -92,7 +91,7 @@ export const DoorControl: React.FC<DoorControlProps> = ({ channel, refetch }) =>
             />
           </StyledInnerBox>
           <StyledTypography
-            isUncertain={isUncertain}
+            uncertain={isUncertain.toString()}
             variant="caption"
           >
             Door state is uncertain

diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
@@ -16,6 +16,8 @@ export const ui = {
     CLIMATECONTROL_FLOOR_TRANSCEIVER: 'Floor',
     RAIN_DETECTION_TRANSMITTER: 'Rain',
     KEYMATIC: 'Keymatic',
+    errorOccuredWhileLogin: 'Error occured while login',
+    signInTitle: 'Sign in',
   },
   de: {
     SWITCH_VIRTUAL_RECEIVER: 'Schalter',
@@ -24,6 +26,8 @@ export const ui = {
     CLIMATECONTROL_FLOOR_TRANSCEIVER: 'Fußboden',
     RAIN_DETECTION_TRANSMITTER: 'Regen',
     KEYMATIC: 'Keymatic',
+    errorOccuredWhileLogin: 'Fehler beim Login',
+    signInTitle: 'Anmelden',
   },
 } as const;