From 790201be90e63a3e93c64060bacd977e52dfb4ff Mon Sep 17 00:00:00 2001
From: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
Date: Wed, 20 Oct 2021 16:05:03 +0200
Subject: [PATCH] patch: Add draft info boxes for system information

Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
---
 lib/gui/app/components/settings/settings.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/lib/gui/app/components/settings/settings.tsx b/lib/gui/app/components/settings/settings.tsx
index d6ac584b..2c91658f 100644
--- a/lib/gui/app/components/settings/settings.tsx
+++ b/lib/gui/app/components/settings/settings.tsx
@@ -17,7 +17,7 @@
 import GithubSvg from '@fortawesome/fontawesome-free/svgs/brands/github.svg';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Flex, Checkbox, Txt } from 'rendition';
+import { Box, Checkbox, Flex, TextWithCopy, Txt } from 'rendition';
 
 import { version, packageType } from '../../../../../package.json';
 import * as settings from '../../models/settings';
@@ -50,6 +50,14 @@ interface SettingsModalProps {
 	toggleModal: (value: boolean) => void;
 }
 
+const UUID = process.env.BALENA_DEVICE_UUID;
+
+const InfoBox = (props: any) => (
+	<Box fontSize={14}>
+		<Txt>{props.label}</Txt>
+		<TextWithCopy code text={props.value} copy={props.value} />
+	</Box>
+);
 export function SettingsModal({ toggleModal }: SettingsModalProps) {
 	const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]);
 	React.useEffect(() => {
@@ -103,6 +111,12 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
 						</Flex>
 					);
 				})}
+				{UUID !== undefined && (
+					<Flex flexDirection="column">
+						<Txt fontSize={24}>System Information</Txt>
+						<InfoBox label="UUID" value={UUID.substr(0, 7)} />
+					</Flex>
+				)}
 				<Flex
 					mt={18}
 					alignItems="center"