From 831dafd4513084c758d3b70587a9b7fecce2c100 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Fri, 18 Mar 2022 13:30:08 +0100
Subject: fix(web/ui): Do not use next/image

This change removes the use of next/image from the project. Although it
is recommended by the Next.js project to use this component, it is not
compatible currently with static export.
---
 opendc-web/opendc-web-ui/src/components/AppHeader.js                 | 4 ++--
 .../src/components/topologies/sidebar/rack/MachineComponent.js       | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js
index b33212c4..fd54b3ad 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js
@@ -22,13 +22,13 @@
 
 import { PageHeader } from '@patternfly/react-core'
 import React from 'react'
-import Image from 'next/image'
 import AppHeaderTools from './AppHeaderTools'
 import { AppNavigation } from './AppNavigation'
 import AppLogo from './AppLogo'
 
 export function AppHeader() {
-    const logo = <Image src="/img/logo.png" layout="fixed" width={30} height={30} alt="OpenDC" />
+    // eslint-disable-next-line @next/next/no-img-element
+    const logo = <img src="/img/logo.png" width={30} height={30} alt="OpenDC" />
 
     return (
         <PageHeader
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
index 921622d6..8897f2d0 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Image from 'next/image'
 import { Flex, Label } from '@patternfly/react-core'
 import { Machine } from '../../../../shapes'
 
 const UnitIcon = ({ id, type }) => (
-    <Image
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
         src={'/img/topology/' + id + '-icon.png'}
         alt={'Machine contains ' + type + ' units'}
-        layout="intrinsic"
         height={24}
         width={24}
     />
-- 
cgit v1.2.3


From 68d9003f8d8d2adcba43cad6366eca5365110e48 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 5 Apr 2022 21:15:57 +0200
Subject: feat(web/ui): Add support for unauthenticated user access

This change updates the web UI and API to support unauthenticated user
access. Such functionality is helpful when there is just a single user
that wants to try OpenDC.
---
 .../opendc-web-ui/src/components/AppHeaderTools.js       | 16 +++++++++++-----
 .../topologies/sidebar/rack/MachineComponent.js          |  7 +------
 2 files changed, 12 insertions(+), 11 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/AppHeaderTools.js b/opendc-web/opendc-web-ui/src/components/AppHeaderTools.js
index 02e5d265..3e58b209 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeaderTools.js
+++ b/opendc-web/opendc-web-ui/src/components/AppHeaderTools.js
@@ -39,7 +39,9 @@ import { useAuth } from '../auth'
 import { GithubIcon, HelpIcon } from '@patternfly/react-icons'
 
 function AppHeaderTools() {
-    const auth = useAuth()
+    const { logout, user, isAuthenticated, isLoading } = useAuth()
+    const username = isAuthenticated || isLoading ? user?.name : 'Anonymous'
+    const avatar = isAuthenticated || isLoading ? user?.picture : '/img/avatar.svg'
 
     const [isKebabDropdownOpen, setKebabDropdownOpen] = useState(false)
     const kebabDropdownItems = [
@@ -56,7 +58,11 @@ function AppHeaderTools() {
     const [isDropdownOpen, setDropdownOpen] = useState(false)
     const userDropdownItems = [
         <DropdownGroup key="group 2">
-            <DropdownItem key="group 2 logout" onClick={() => auth.logout({ returnTo: window.location.origin })}>
+            <DropdownItem
+                key="group 2 logout"
+                isDisabled={!isAuthenticated}
+                onClick={() => logout({ returnTo: window.location.origin })}
+            >
                 Logout
             </DropdownItem>
         </DropdownGroup>,
@@ -105,7 +111,7 @@ function AppHeaderTools() {
                         isOpen={isDropdownOpen}
                         toggle={
                             <DropdownToggle onToggle={() => setDropdownOpen(!isDropdownOpen)}>
-                                {auth?.user?.name ?? (
+                                {username ?? (
                                     <Skeleton
                                         fontSize="xs"
                                         width="150px"
@@ -119,8 +125,8 @@ function AppHeaderTools() {
                     />
                 </PageHeaderToolsItem>
             </PageHeaderToolsGroup>
-            {auth?.user?.picture ? (
-                <Avatar src={auth.user.picture} alt="Avatar image" />
+            {avatar ? (
+                <Avatar src={avatar} alt="Avatar image" />
             ) : (
                 <Skeleton className="pf-c-avatar" shape="circle" width="2.25rem" screenreaderText="Loading avatar" />
             )}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
index 8897f2d0..18c3db3c 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
@@ -5,12 +5,7 @@ import { Machine } from '../../../../shapes'
 
 const UnitIcon = ({ id, type }) => (
     // eslint-disable-next-line @next/next/no-img-element
-    <img
-        src={'/img/topology/' + id + '-icon.png'}
-        alt={'Machine contains ' + type + ' units'}
-        height={24}
-        width={24}
-    />
+    <img src={'/img/topology/' + id + '-icon.png'} alt={'Machine contains ' + type + ' units'} height={24} width={24} />
 )
 
 UnitIcon.propTypes = {
-- 
cgit v1.2.3