feat: login wall (#42)

* feat: add login-wall app

* fix: rename vars

* fix: rename vars

* update docker file

* add validations for app state

* add host check for app

* fix: docker file

app/src/App.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthorizerProvider } from '@authorizerdev/authorizer-react';
+import Root from './Root';
+
+export default function App() {
+  // @ts-ignore
+  const globalState: Record<string, string> = window['__authorizer__'];
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <div
+        style={{
+          width: 400,
+          margin: `10px auto`,
+          border: `1px solid #D1D5DB`,
+          padding: `25px 20px`,
+          borderRadius: 5,
+        }}
+      >
+        <BrowserRouter>
+          <AuthorizerProvider
+            config={{
+              authorizerURL: globalState.authorizerURL,
+              redirectURL: globalState.redirectURL,
+            }}
+          >
+            <Root />
+          </AuthorizerProvider>
+        </BrowserRouter>
+      </div>
+    </div>
+  );
+}

app/src/Root.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { useAuthorizer } from '@authorizerdev/authorizer-react';
+import Dashboard from './pages/dashboard';
+import Login from './pages/login';
+import ResetPassword from './pages/rest-password';
+
+export default function Root() {
+  const { token, loading } = useAuthorizer();
+
+  if (loading) {
+    return <h1>Loading...</h1>;
+  }
+
+  if (token) {
+    return (
+      <Switch>
+        <Route path="/app" exact>
+          <Dashboard />
+        </Route>
+      </Switch>
+    );
+  }
+
+  return (
+    <Switch>
+      <Route path="/app" exact>
+        <Login />
+      </Route>
+      <Route path="/app/reset-password">
+        <ResetPassword />
+      </Route>
+    </Switch>
+  );
+}

app/src/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));

app/src/pages/dashboard.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useAuthorizer } from '@authorizerdev/authorizer-react';
+
+export default function Dashboard() {
+  const [loading, setLoading] = React.useState(false);
+  const { user, setToken, graphQlRef } = useAuthorizer();
+
+  const onLogout = async () => {
+    setLoading(true);
+    await graphQlRef
+      .mutation(
+        `
+          mutation {
+            logout {
+              message
+            }
+          }
+        `
+      )
+      .toPromise();
+    setToken(null);
+    setLoading(false);
+  };
+
+  return (
+    <div>
+      <h1>Hey 👋,</h1>
+      <p>Thank you for joining authorizer demo app.</p>
+      <p>
+        Your email address is{' '}
+        <a href={`mailto:${user?.email}`} style={{ color: '#3B82F6' }}>
+          {user?.email}
+        </a>
+      </p>
+
+      <br />
+      {loading ? (
+        <h3>Processing....</h3>
+      ) : (
+        <h3
+          style={{
+            color: '#3B82F6',
+            cursor: 'pointer',
+          }}
+          onClick={onLogout}
+        >
+          Logout
+        </h3>
+      )}
+    </div>
+  );
+}

app/src/pages/login.tsx

@@ -0,0 +1,10 @@
+import React, { Fragment } from 'react';
+import { Authorizer } from '@authorizerdev/authorizer-react';
+
+export default function Login() {
+  return (
+    <Fragment>
+      <Authorizer />
+    </Fragment>
+  );
+}

app/src/pages/rest-password.tsx

@@ -0,0 +1,12 @@
+import React, { Fragment } from 'react';
+import { AuthorizerResetPassword } from '@authorizerdev/authorizer-react';
+
+export default function ResetPassword() {
+  return (
+    <Fragment>
+      <h1 style={{ textAlign: 'center' }}>Reset Password</h1>
+      <br />
+      <AuthorizerResetPassword />
+    </Fragment>
+  );
+}