Merge branch 'develop/gui'

vonsivers · Jan 29, 2021 · 06e78b0 · 06e78b0
2 parents f6ee2bf + a5fda45
commit 06e78b0
Show file tree

Hide file tree

Showing 19 changed files with 252 additions and 31 deletions.
diff --git a/code/servowordclock-gui-develop/.env b/code/servowordclock-gui-develop/.env
@@ -0,0 +1 @@
+PREACT_APP_API_BASE_PATH=http://192.168.3.141/api/
diff --git a/code/servowordclock-gui-develop/.env.production b/code/servowordclock-gui-develop/.env.production
@@ -0,0 +1 @@
+PREACT_APP_API_BASE_PATH=/api/
diff --git a/code/servowordclock-gui-develop/package-lock.json b/code/servowordclock-gui-develop/package-lock.json
diff --git a/code/servowordclock-gui-develop/package.json b/code/servowordclock-gui-develop/package.json
@@ -50,6 +50,7 @@
     "jest": "^25.1.0",
     "lint-staged": "^10.0.7",
     "preact-cli": "^3.0.5",
+    "preact-cli-plugin-env-vars": "^1.2.1",
     "preact-render-spy": "^1.3.0",
     "prettier": "^1.19.1",
     "sirv-cli": "^1.0.0-next.3",

diff --git a/code/servowordclock-gui-develop/preact.config.js b/code/servowordclock-gui-develop/preact.config.js
@@ -1,5 +1,6 @@
 import { resolve } from "path";
 import webpack from "webpack";
+import envVars from 'preact-cli-plugin-env-vars';
 
 export default {
     /**
@@ -40,7 +41,8 @@ export default {
             "index"
         );
 
-
+        envVars(config, env, helpers);
+
 		// config.plugins.push(new webpack.optimize.LimitChunkCountPlugin({
         //     maxChunks: 1
         //   }))

diff --git a/code/servowordclock-gui-develop/src/components/app.tsx b/code/servowordclock-gui-develop/src/components/app.tsx
@@ -10,8 +10,8 @@ import TimeSettings from "./time-settings";
 import Header from "./header";
 import { createHashHistory } from "history";
 import { SWCClient } from "../domain/SWCClient";
-import { Auth } from "../domain/apiUtils";
 import Login from "./login";
+import ChangePassword from "./change-password";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 if ((module as any).hot) {
@@ -22,19 +22,28 @@ if ((module as any).hot) {
 class App extends Component<Props, State> {
     state: State = {
         currentRoute: Constants.routes.Login,
-        auth: {
-            key: "",
-            onNoAuth: () => route(Constants.routes.Login)
-        }
+        isLoggedIn: false
     };
-    client = new SWCClient(this.state.auth);
+    client = new SWCClient(this.onAccessDenied.bind(this));
+
+    private onAccessDenied() {
+        route(Constants.routes.Login);
+    }
 
     render() {
         return (
             <div id="app">
-                <Header currentRoute={this.state.currentRoute} />
+                <Header
+                    currentRoute={this.state.currentRoute}
+                    isLoggedIn={this.state.isLoggedIn}
+                />
                 <Router
-                    onChange={e => this.setState({ currentRoute: e.url })}
+                    onChange={e =>
+                        this.setState({
+                            currentRoute: e.url,
+                            isLoggedIn: Boolean(this.client.auth.key)
+                        })
+                    }
                     history={createHashHistory()}
                 >
                     <Home path={Constants.routes.Home} client={this.client} />
@@ -51,7 +60,11 @@ class App extends Component<Props, State> {
                         path={Constants.routes.NightMode}
                         client={this.client}
                     />
-                    <Login default client={this.client} />
+                    <ChangePassword
+                        path={Constants.routes.ChangePassword}
+                        client={this.client}
+                    />
+                    <Login path={Constants.routes.Login} client={this.client} />
                 </Router>
             </div>
         );
@@ -60,7 +73,7 @@ class App extends Component<Props, State> {
 
 interface State {
     currentRoute: string;
-    auth: Auth;
+    isLoggedIn: boolean;
 }
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface Props {}

diff --git a/code/servowordclock-gui-develop/src/components/change-password/index.tsx b/code/servowordclock-gui-develop/src/components/change-password/index.tsx
@@ -0,0 +1,89 @@
+import { h, Component } from "preact";
+import * as style from "./style.css";
+import Button from "preact-material-components/Button";
+import TextField from "preact-material-components/TextField";
+import "preact-material-components/TextField/style.css";
+import "preact-material-components/Button/style.css";
+import "preact-material-components/Theme/style.css";
+import { route } from "preact-router";
+import Constants from "../../Constants";
+import { SWCClient } from "../../domain/SWCClient";
+
+class ChangePassword extends Component<Props, State> {
+    onClickChangePassword(): void {
+        if (this.state.password && this.state.password === this.state.confirm) {
+            this.props.client
+                .setPassword({ newlogin: this.state.password })
+                .then(() => {
+                    route(Constants.routes.Home);
+                });
+        }
+    }
+
+    render() {
+        return (
+            <div class={style.changePassword}>
+                <h1>Change Password</h1>
+                <div>
+                    <label htmlFor="password">Password</label>
+                    <TextField
+                        id="password"
+                        label="Password"
+                        helperText="Your password"
+                        class={style.full}
+                        value={this.state.password}
+                        onChange={e =>
+                            this.setState({
+                                password: (e.target as HTMLInputElement).value
+                            })
+                        }
+                    />
+                </div>
+                <div>
+                    <label htmlFor="confirm">Confirm password</label>
+                    <TextField
+                        id="confirm"
+                        label="Confirm password"
+                        helperText="Confirm your password"
+                        class={style.full}
+                        value={this.state.confirm}
+                        onChange={e =>
+                            this.setState({
+                                confirm: (e.target as HTMLInputElement).value
+                            })
+                        }
+                    />
+                </div>
+                {this.state.password &&
+                    this.state.password !== this.state.confirm && (
+                        <div class={style.error}>
+                            Passwords don&apos;t match
+                        </div>
+                    )}
+                <div class={style.textRight}>
+                    <Button
+                        onClick={() => this.onClickChangePassword()}
+                        disabled={
+                            !this.state.password ||
+                            this.state.password !== this.state.confirm
+                        }
+                    >
+                        Change password
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+}
+
+interface State {
+    isLoading: boolean;
+    password: string;
+    confirm: string;
+    loginFailed: boolean;
+}
+interface Props {
+    client: SWCClient;
+}
+
+export default ChangePassword;
diff --git a/code/servowordclock-gui-develop/src/components/change-password/style.css b/code/servowordclock-gui-develop/src/components/change-password/style.css
@@ -0,0 +1,17 @@
+.changePassword {
+    padding: 56px 20px;
+    min-height: 100%;
+    width: 100%;
+}
+
+.full {
+    width: 100%;
+}
+
+.textRight {
+    text-align: right;
+}
+
+.error {
+    color: #ff3333;
+}
diff --git a/code/servowordclock-gui-develop/src/components/change-password/style.css.d.ts b/code/servowordclock-gui-develop/src/components/change-password/style.css.d.ts
@@ -0,0 +1,5 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+export const changePassword: string;
+export const full: string;
+export const textRight: string;
+export const error: string;
diff --git a/code/servowordclock-gui-develop/src/components/header/index.tsx b/code/servowordclock-gui-develop/src/components/header/index.tsx
@@ -7,13 +7,15 @@ import "preact-material-components/Drawer/style.css";
 import "preact-material-components/List/style.css";
 import "preact-material-components/TopAppBar/style.css";
 import { route } from "preact-router";
+import * as style from "./style.css";
 
 interface State {
     isDrawerOpen: boolean;
 }
 
 interface Props {
     currentRoute: string;
+    isLoggedIn: boolean;
 }
 
 class Header extends Component<Props, State> {
@@ -31,10 +33,11 @@ class Header extends Component<Props, State> {
     render() {
         return (
             <div>
-                <TopAppBar className="topappbar" onNav={null}>
+                <TopAppBar class={style.header} onNav={null}>
                     <TopAppBar.Row>
                         <TopAppBar.Section align-start>
                             <TopAppBar.Icon
+                                class={style.icon}
                                 onClick={() => {
                                     this.setState({
                                         isDrawerOpen: !this.state.isDrawerOpen
@@ -49,7 +52,7 @@ class Header extends Component<Props, State> {
                 </TopAppBar>
                 <Drawer
                     modal
-                    open={this.state.isDrawerOpen}
+                    open={this.state.isDrawerOpen && this.props.isLoggedIn}
                     onClose={() => {
                         this.setState({ isDrawerOpen: false });
                     }}
@@ -80,6 +83,11 @@ class Header extends Component<Props, State> {
                             `notifications_paused`,
                             Constants.routes.NightMode
                         )}
+                        {this.renderDrawerItem(
+                            `Change password`,
+                            `vpn_key`,
+                            Constants.routes.ChangePassword
+                        )}
                     </Drawer.DrawerContent>
                 </Drawer>
             </div>
@@ -89,6 +97,7 @@ class Header extends Component<Props, State> {
     private renderDrawerItem(title: string, icon: string, routePath: string) {
         return (
             <Drawer.DrawerItem
+                class={style.drawer}
                 selected={this.props.currentRoute === routePath}
                 onClick={() => {
                     this.route(routePath);

diff --git a/code/servowordclock-gui-develop/src/components/header/style.css b/code/servowordclock-gui-develop/src/components/header/style.css
@@ -5,7 +5,7 @@
     width: 100%;
     height: 56px;
     padding: 0;
-    background: #673ab7;
+    background: #171a3f;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
     z-index: 50;
 }
@@ -46,3 +46,10 @@
 .header nav a.active {
     background: rgba(0, 0, 0, 0.4);
 }
+
+.icon {
+    cursor: pointer;
+}
+.drawer {
+    cursor: pointer;
+}
diff --git a/code/servowordclock-gui-develop/src/components/header/style.css.d.ts b/code/servowordclock-gui-develop/src/components/header/style.css.d.ts
@@ -1,3 +1,5 @@
 // This file is automatically generated from your CSS. Any edits will be overwritten.
 export const header: string;
 export const active: string;
+export const icon: string;
+export const drawer: string;
diff --git a/code/servowordclock-gui-develop/src/components/home/index.tsx b/code/servowordclock-gui-develop/src/components/home/index.tsx
@@ -69,6 +69,12 @@ const Home: FunctionalComponent<Props> = (props: Props) => {
                 `notifications_paused`,
                 Constants.routes.NightMode
             )}
+            {renderCard(
+                `Change password`,
+                `Change your login password`,
+                `vpn_key`,
+                Constants.routes.ChangePassword
+            )}
         </div>
     );
 };

diff --git a/code/servowordclock-gui-develop/src/components/login/index.tsx b/code/servowordclock-gui-develop/src/components/login/index.tsx
@@ -24,12 +24,10 @@ class Login extends Component<Props, State> {
         return (
             <div class={style.login}>
                 <h1>Login</h1>
-                <div>
-                    <label htmlFor="login">Login</label>
+                <p>
+                    <label htmlFor="login">Password</label>
                     <TextField
                         id="login"
-                        label="Login"
-                        helperText="Your login"
                         class={style.full}
                         value={this.state.login}
                         onChange={e =>
@@ -38,9 +36,9 @@ class Login extends Component<Props, State> {
                             })
                         }
                     />
-                </div>
+                </p>
                 {this.state.loginFailed && (
-                    <div style={style.loginFailed}>Login failed</div>
+                    <div class={style.loginFailed}>Login failed</div>
                 )}
                 <div class={style.textRight}>
                     <Button onClick={() => this.onClickLogin()}>Login</Button>

diff --git a/code/servowordclock-gui-develop/src/components/login/style.css b/code/servowordclock-gui-develop/src/components/login/style.css
@@ -14,5 +14,4 @@
 
 .loginFailed {
     color: #ff3333;
-    font-weight: bold;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		PREACT_APP_API_BASE_PATH=http://192.168.3.141/api/