Import login route from default theme

package-lock.json

@@ -1788,6 +1788,14 @@
         "react-transition-group": "^4.4.0"
       }
     },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",

src/helpers/AccountHelper.ts

@@ -0,0 +1,16 @@
+/**
+ * Account helper
+ * 
+ * @author Pierre Hubert
+ */
+
+export class AccountHelper {
+    /**
+     * Check whether access token are available
+     * or not
+     */
+    static get hasAccessToken() : boolean {
+        // TODO : implement support
+        return false;
+    }
+}

src/ui/routes/LoginRoute.tsx

@@ -0,0 +1,113 @@
+/**
+ * Login route
+ * 
+ * @author Pierre Hubert
+ */
+
+import { Typography, Link, makeStyles, Container, CssBaseline, Avatar, TextField, FormControlLabel, Checkbox, Button, Grid, Box } from "@material-ui/core";
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import React from "react";
+
+function Copyright() {
+    return (
+      <Typography variant="body2" color="textSecondary" align="center">
+        {'Copyright © '}
+        <Link color="inherit" href="https://material-ui.com/">
+          Your Website
+        </Link>{' '}
+        {new Date().getFullYear()}
+        {'.'}
+      </Typography>
+    );
+  }
+  
+  const useStyles = makeStyles((theme) => ({
+    paper: {
+      marginTop: theme.spacing(8),
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+    avatar: {
+      margin: theme.spacing(1),
+      backgroundColor: theme.palette.secondary.main,
+    },
+    form: {
+      width: '100%', // Fix IE 11 issue.
+      marginTop: theme.spacing(1),
+    },
+    submit: {
+      margin: theme.spacing(3, 0, 2),
+    },
+  }));
+  
+export function LoginRoute() {
+    const classes = useStyles();
+  
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <div className={classes.paper}>
+          <Avatar className={classes.avatar}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <form className={classes.form} noValidate>
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Sign In
+            </Button>
+            <Grid container>
+              <Grid item xs>
+                <Link href="#" variant="body2">
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="#" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </form>
+        </div>
+        <Box mt={8}>
+          <Copyright />
+        </Box>
+      </Container>
+    );
+  }
+  

src/ui/widgets/AsyncWidget.tsx

@@ -55,7 +55,7 @@ export class AsyncWidget extends React.Component<AsyncWidgetProperties, AsyncWid
 
     render() {
 
-        if (this.state.status == Status.ERROR)
+        if (this.state.status === Status.ERROR)
             return (<div style={{
                 display: "flex",
                 alignItems: "center",
@@ -73,7 +73,7 @@ export class AsyncWidget extends React.Component<AsyncWidgetProperties, AsyncWid
                </Paper>
             </div>);
 
-        if(this.state.status == Status.SUCCESS)
+        if(this.state.status === Status.SUCCESS)
             return this.props.onBuild();
 
         return (<CenterCircularProgress></CenterCircularProgress>)

src/ui/widgets/InitWidget.tsx

@@ -5,24 +5,33 @@
  */
 
 import React from "react";
+import { AccountHelper } from "../../helpers/AccountHelper";
+import { LoginRoute } from "../routes/LoginRoute";
 import { AsyncWidget } from "./AsyncWidget";
 
+interface InitWidgetState {
+    signedIn: boolean,
+}
 
-export class InitWidget extends React.Component {
+export class InitWidget extends React.Component<{}, InitWidgetState> {
 
     constructor(props: any) {
         super(props);
 
+        this.state = {
+            signedIn: false
+        };
+
         this.init = this.init.bind(this);
         this.build = this.build.bind(this);
     }
 
     async init() {
-        await new Promise((res, rej) => {
-            setTimeout(() => {
-                rej(null);
-            }, 500)
-        })
+        this.setState({ signedIn: false });
+
+        if (AccountHelper.hasAccessToken) {
+            throw Error("UNIMPLEMENTED!");
+        }
     }
 
     render() {
@@ -34,6 +43,6 @@ export class InitWidget extends React.Component {
     }
 
     build() {
-        return (<div>yes !!! done !!!</div>);
+        return this.state.signedIn ? null : (<LoginRoute></LoginRoute>);
     }
 }