Utilisation d'un serveur Go custom pour le backend au lieu de

super-graph

Malheureusement, super-graph n'a pas tenu les promesses qu'il semblait
annoncer.

Je propose donc de basculer sur un serveur Go classique (via goweb).
L'authentification OpenID Connect étant gérée côté backend et non plus
côté frontend.

client/src/components/App.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
+import { HomePage } from './HomePage/HomePage';
+import { store } from '../store/store';
+import { Provider } from 'react-redux';
+
+export class App extends React.Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <BrowserRouter>
+          <Switch>
+            <Route path="/" exact component={HomePage} />
+            <Route component={() => <Redirect to="/" />} />
+          </Switch>
+        </BrowserRouter>
+      </Provider>
+    );
+  }
+}

client/src/components/HomePage/HomePage.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { Page } from '../Page';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../store/reducers/root';
+
+export function HomePage() {
+  const currentUser = useSelector((state: RootState) => state.auth.currentUser);
+
+  return (
+    <Page title="Daddy - Accueil">
+      <div className="container is-fluid">
+        <section className="section">
+          <div className="columns">
+            <div className="column is-4 is-offset-4">
+              <div className="box">
+              { 
+                currentUser && currentUser.full_name ?
+                <p>Bonjour <span className="has-text-weight-bold">{currentUser.full_name}</span> !</p> :
+                <p>Veuillez vous authentifier.</p>
+              }
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Page>
+  );
+}

client/src/components/Loader.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export class Loader extends React.Component {
+  render() {
+    return (
+      <div className="loader-container">
+        <div className="lds-ripple">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    )
+  }
+}

client/src/components/Modal.tsx

@@ -0,0 +1,26 @@
+import React, { PropsWithChildren } from 'react';
+
+export interface ModalProps {
+  active: boolean
+  showCloseButton?: boolean
+  onClose?: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+}
+
+export class Modal extends React.PureComponent<PropsWithChildren<ModalProps>> {
+  render() {
+    const { children, active, showCloseButton, onClose } = this.props;
+    return (
+      <div className={`modal ${active ? 'is-active': ''}`}>
+        <div className="modal-background"></div>
+        <div className="modal-content">
+          {children}
+        </div>
+        {
+          showCloseButton ?
+          <button onClick={onClose} className="modal-close is-large" aria-label="close"></button> :
+          null
+        }
+      </div>
+    );
+  }
+}

client/src/components/Navbar.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import logo from '../resources/logo.svg';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store/reducers/root';
+import { Config } from '../config';
+
+export function Navbar() {
+  const isAuthenticated = useSelector<RootState>(state => state.auth.isAuthenticated);
+  
+  return (
+    <nav className="navbar" role="navigation" aria-label="main navigation">
+      <div className="container is-fluid">
+        <div className="navbar-brand">
+          <a className="navbar-item" href="#/">
+            <img src={logo} style={{marginRight:'5px',width:'28px',height:'28px'}} />
+            <h1 className="is-size-4">Daddy</h1>
+          </a>
+          <a role="button" className="navbar-burger" aria-label="menu" aria-expanded="false">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+        <div className="navbar-menu">
+          <div className="navbar-end">
+            <div className="navbar-item">
+              {
+                isAuthenticated ?
+                <a className="button is-small" href={Config.logoutURL}>
+                  <span className="icon">
+                    <i className="fas fa-sign-out-alt"></i>
+                  </span>
+                  <span>Se déconnecter</span>
+                </a> :
+                <a className="button is-small" href={Config.loginURL}>
+                  <span className="icon">
+                    <i className="fas fa-sign-in-alt"></i>
+                  </span>
+                  <span>Se connecter</span>
+                </a>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};

client/src/components/Page.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Navbar } from './Navbar';
+
+export interface PageProps {
+  title?: string
+}
+
+export class Page extends React.PureComponent<PageProps> {
+  render() {
+    return (
+      <React.Fragment>
+        <Navbar />
+        {this.props.children}
+      </React.Fragment>
+    );
+  }
+
+  componentDidMount() {
+    this.updateTitle();
+  }
+
+  componentDidUpdate() {
+    this.updateTitle();
+  }
+
+  updateTitle() {
+    const { title } = this.props;
+    if (title !== undefined) window.document.title = title;
+  }
+}