Added Branding + Auth.

index.html

@@ -7,9 +7,9 @@
           name="description">
     <meta content="width=device-width, initial-scale=1, height=device-height" name="viewport">
     <!--<link href="/styles.css" rel="stylesheet"> -->
-    <link href="/assets/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
+    <link href="/assets/dasfad/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
-    <link href="/assets/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
+    <link href="/assets/dasfad/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
-    <link href="/assets/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
+    <link href="/assets/dasfad/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
     <title>Deep Diagram</title>
     <!--    <link as="script" href="/newRelic.js" rel="preload">
         <script defer src="/newRelic.js"></script> -->

src/react/pageHeader.tsx

@@ -1,12 +1,32 @@
-import {Anchor, AppShell, Burger, Button, Group, Image} from "@mantine/core";
+import {Anchor, AppShell, Box, Burger, Button, Group, Image, Menu, Stack} from "@mantine/core";
 import React from "react";
 import {Link} from "react-router-dom";
+import {useAuth0} from "@auth0/auth0-react";
 
 export default function PageHeader() {
+
+    const {user, isAuthenticated, loginWithRedirect, logout} = useAuth0();
+    const picture = () => {
+        if (user.picture) {
+            return <Image w="32" h="32" src={user.picture} alt="user"/>
+        } else {
+            return <></>
+        }
+    }
+    const userDisplay = () => {
+        if (isAuthenticated) {
+            return <Group>
+                <Box visibleFrom="sm" component="span">{picture()}</Box>
+                <Button onClick={() => logout({logoutParams: {returnTo: window.location.origin}})}>Logout</Button>
+            </Group>
+        } else {
+            return <Button key="login" onClick={() => loginWithRedirect()}>Login</Button>
+        }
+    }
     return (
-        <AppShell.Header p={10}>
+        <AppShell.Header p={5} m={20}>
             <Group justify="space-between">
-                <Image w={64} src="/assets/ddd.svg"/>
+                <Image w={64} src="/assets/dasfad-logo.svg"/>
                 <Group justify="flex-end">
 
                     <Group visibleFrom="sm">
@@ -21,11 +41,34 @@ export default function PageHeader() {
                         <Anchor component={Link} key="vrexperience" to="/db/public/local" p={5} c="myColor" bg="none"
                                 underline="hover">VR Experience</Anchor>
                     </Group>
-                    <Burger hiddenFrom="sm"/>
+                    <Menu trigger="click" openDelay={50} closeDelay={400}>
-                    <Button key="signup">Sign up for Free</Button>
+                        <Menu.Target>
-                    <Button>Login</Button>
+                            <Burger hiddenFrom="sm"/>
+                        </Menu.Target>
+                        <Menu.Dropdown>
+                            <Menu.Item><Anchor size="xl" component={Link} key="examples" to="/examples" p={5}
+                                               c="myColor" bg="none"
+                                               underline="hover">Examples</Anchor></Menu.Item>
+                            <Menu.Item><Anchor size="xl" component={Link} key="about" to="/" p={5} c="myColor" bg="none"
+                                               underline="hover">About</Anchor></Menu.Item>
+                            <Menu.Item><Anchor size="xl" component={Link} key="documentation" to="/documentation" p={5}
+                                               c="myColor" bg="none"
+                                               underline="hover">Documentation</Anchor></Menu.Item>
+                            <Menu.Item><Anchor size="xl" component={Link} key="pricing" to="/pricing" p={5} c="myColor"
+                                               bg="none"
+                                               underline="hover">Pricing</Anchor></Menu.Item>
+                            <Menu.Item><Anchor size="xl" component={Link} key="vrexperience" to="/db/public/local" p={5}
+                                               c="myColor" bg="none"
+                                               underline="hover">VR Experience</Anchor></Menu.Item>
+                        </Menu.Dropdown>
+
+                    </Menu>
+                    {userDisplay()}
                 </Group>
             </Group>
+            <Stack>
+
+            </Stack>
         </AppShell.Header>
     )
 }

src/react/webApp.tsx

@@ -3,6 +3,7 @@ import '@mantine/core/styles.css';
 import React from "react";
 import {RouterProvider} from "react-router-dom";
 import {webRouter} from "./webRouter";
+import {Auth0Provider} from "@auth0/auth0-react";
 
 export default function WebApp() {
     document.addEventListener('promptpassword', () => {
@@ -13,6 +14,13 @@ export default function WebApp() {
     });
 
     return (
+        <Auth0Provider
+            domain="dev-g0lt18ndbcp6earr.us.auth0.com"
+            clientId="3l9HFxOIotk2QbJbdmLoI7lgCjsSUt2j"
+            authorizationParams={{
+                redirect_uri: window.location.origin
+            }}>
             <RouterProvider router={webRouter}/>
+        </Auth0Provider>
     )
 }

src/vrApp.ts

@@ -1,4 +1,13 @@
-import {Color3, Engine, FreeCamera, Observable, Scene, Vector3, WebGPUEngine} from "@babylonjs/core";
+import {
+    Color3,
+    DeviceOrientationCamera,
+    Engine,
+    FreeCamera,
+    Observable,
+    Scene,
+    Vector3,
+    WebGPUEngine
+} from "@babylonjs/core";
 import '@babylonjs/loaders';
 import {DiagramManager} from "./diagram/diagramManager";
 import log, {Logger} from "loglevel";
@@ -21,6 +30,7 @@ export default class VrApp {
     private _db: PouchData;
     private _dbName: string;
     private _engine: Engine | WebGPUEngine;
+    private _mobileCamera: DeviceOrientationCamera;
 
     constructor(canvas: HTMLCanvasElement, dbname: string) {
         this._canvas = canvas;
@@ -32,7 +42,7 @@ export default class VrApp {
     }
 
     public async initialize(scene: Scene) {
-        setMainCamera(scene);
+        this.setMainCamera(scene);
         const spinner = new Spinner();
         spinner.show();
         const diagramReadyObservable = new Observable<boolean>();
@@ -89,14 +99,34 @@ export default class VrApp {
             scene.render();
         });
     }
+
+    private setMainCamera(scene: Scene) {
+        const CAMERA_NAME = 'Main Camera';
+        const camera: FreeCamera = new FreeCamera(CAMERA_NAME,
+            new Vector3(0, 1.6, 0), scene);
+        scene.setActiveCameraByName(CAMERA_NAME);
+
+        /* if (!this._mobileCamera) {
+             window.addEventListener("devicemotion", (event) => {
+                 if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma) {
+                     console.log(this);
+                     const camera: DeviceOrientationCamera = new DeviceOrientationCamera('Mobile Camera',
+                         new Vector3(0, 1.6, 0), scene);
+                     this._mobileCamera = camera;
+
+                     scene.setActiveCameraByName('Mobile Camera');
+                 }
+
+             });
+         }
+
+         */
+
+
+    }
+
 }
 
-function setMainCamera(scene: Scene) {
-    const CAMERA_NAME = 'Main Camera';
-    const camera: FreeCamera = new FreeCamera(CAMERA_NAME,
-        new Vector3(0, 1.6, 0), scene);
-    scene.setActiveCameraByName(CAMERA_NAME);
-}
 
 
 function initEnvironment(diagramManager: DiagramManager, spinner: Spinner) {