Update

src/web/Startup.tsx

@@ -9,7 +9,7 @@ import {
     Typography,
     Button,
     Dialog,
-    DialogTitle, DialogContent, DialogContentText, DialogActions, Chip, FormControl
+    DialogTitle, DialogContent, DialogContentText, DialogActions, Chip, FormControl, Snackbar
 } from "@mui/material";
 import {FunctionTest} from "../IPCConstants";
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -22,6 +22,7 @@ interface StartupState {
     openCloudConnectModal: boolean,
     showStartBtn: boolean,
     isConnected: boolean,
+    cloudErrorMsg: string,
     isConnectionIssue: boolean,
     startCounter: number,
 }
@@ -35,6 +36,7 @@ export default class Startup extends Component<{}, StartupState> {
             showStartBtn: false,
             isConnected: false,
             isConnectionIssue: false,
+            cloudErrorMsg: "",
             startCounter: 10,
         };
     }
@@ -48,7 +50,6 @@ export default class Startup extends Component<{}, StartupState> {
                 openCloudConnectModal: true,
                 statusTxt: "Möchten Sie CloudConnect+ nutzen?"
             }));
-            //this.cloudDecision(true).then();
         }, 1)
     }
 
@@ -59,6 +60,11 @@ export default class Startup extends Component<{}, StartupState> {
     connectToCloud = async (): Promise<boolean> => {
         try {
             let response = await window.api.request("CLOUD_CONNECT", {});
+            this.setState((prevState) => ({
+                ...prevState,
+                cloudErrorMsg: response.data.toString()
+            }));
+            console.log(response)
             return response.status;
         } catch (e) {
             return false;
@@ -116,7 +122,7 @@ export default class Startup extends Component<{}, StartupState> {
                 this.connectToCloud().then((connected) => {
                     this.setState((prevState) => ({
                             ...prevState,
-                            statusTxt: "Bereit zum spielen?",
+                            statusTxt: "Bereit zum Spielen?",
                             showStartBtn: true,
                             isConnectionIssue: !connected,
                             isConnected: connected
@@ -124,21 +130,23 @@ export default class Startup extends Component<{}, StartupState> {
                     )
                     if(connected)
                         this.counterInterval = setInterval(() => {
+                            if(this.state.startCounter == 0) {
+                                clearInterval(this.counterInterval);
+                                this.startupBtnClick();
+                                return;
+                            }
                             this.setState((prevState) => ({
                                 ...prevState,
                                 startCounter: prevState.startCounter-1
                             }));
-                            if(this.state.startCounter == 0) {
-                                clearInterval(this.counterInterval);
-                                this.startupBtnClick();
-                            }
+
                         }, 1000);
                 });
             }
         } else {
             this.setState((prevState) => ({
                 ...prevState,
-                statusTxt: "Bereit zum spielen?",
+                statusTxt: "Bereit zum Spielen?",
                 showStartBtn: true,
                 startCounter: 30
             }));
@@ -158,6 +166,15 @@ export default class Startup extends Component<{}, StartupState> {
 
     render() {
         return <div className="startup">
+            <Snackbar
+                open={this.state.cloudErrorMsg != ""}
+                autoHideDuration={8000}
+                onClose={() => {this.setState(prevState => ({
+                    ...prevState,
+                    cloudErrorMsg: ""
+                }))}}
+                message={this.state.cloudErrorMsg}
+            />
             <Dialog
                 open={this.state.isConnectionIssue}
                 onClose={null}
@@ -217,14 +234,14 @@ export default class Startup extends Component<{}, StartupState> {
                 </Fade>
             </Modal>
 
-            <Stack alignItems="center" sx={{width: '100%'}}>
+            <Stack className="centerMiddle" alignItems="center">
                 <h1>Willkommen!</h1>
                 <br/>
                 <p>{this.state.statusTxt}</p>
                 <br/>
                 {!this.state.showStartBtn && <CircularProgress/>}
 
-                <Box alignItems="center" sx={{width: '100%', ml: 10}}>
+                <Box alignItems="center" sx={{width: '100%'}}>
                     <FormControl sx={{mr: 2, minWidth: '30%'}}>
                         {this.state.showStartBtn && <Button color="secondary" variant="contained">Setup  <SettingsIcon/></Button>}
                     </FormControl>