Update

src/web/WiFi.tsx

@@ -1,25 +1,72 @@
 import {Component} from "react";
+import {Backdrop, Box, Button, CircularProgress, Fade, Modal, Stack, Typography} from "@mui/material";
 
 
 interface WiFiState {
-
+    open: boolean,
 }
 
 export default class WiFi extends Component<{}, WiFiState> {
     constructor(props: {}) {
         super(props);
+        this.state = {
+            open: false,
+        };
     }
 
     componentDidMount() {
-
+        setTimeout( () => this.setState({open: true}), 500);
     }
 
-    componentWillUnmount() {
+    style = {
+        position: 'absolute' as 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 400,
+        bgcolor: 'background.paper',
+        border: '2px solid #000',
+        boxShadow: 24,
+        p: 4,
+    };
 
-    }
+    handleClose = () => this.setState((prevState) => ({
+        ...prevState,
+        open: false
+    }));
 
     render() {
-        return <p>Test</p>
+        return <Modal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={this.state.open}
+            onClose={null}
+            closeAfterTransition
+            slots={{backdrop: Backdrop}}
+            slotProps={{
+                backdrop: {
+                    timeout: 500,
+                },
+            }}
+        >
+            <Fade in={this.state.open}>
+                <Box sx={this.style}>
+                    <Typography id="transition-modal-title" variant="h6" component="h2">
+                        WiFi Verbindungsmanager
+                    </Typography>
+                    <Typography id="transition-modal-description" sx={{mt: 2}}>
+                        Folgende Netzwerke wurden gefunden...
+                        <br/>
+                        <i>Dafür wird eine WiFi-Verbindung hergestellt</i>
+                        <br/>
+                        <br/>
+                        <Button variant="contained" onClick={() => null}>Ja</Button>
+                        <Button variant="contained" onClick={() => null}
+                                color="error">Nein</Button>
+                    </Typography>
+                </Box>
+            </Fade>
+        </Modal>
     }
 
 }