feat(sharing): use stronger wording about public sharing of devices

hello-nrfcloud · Dec 5, 2024 · e9937da · e9937da
1 parent d5e7f6a
commit e9937da
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 25 deletions.
diff --git a/dashboard/index.html b/dashboard/index.html
@@ -11,7 +11,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300&family=Roboto+Condensed:wght@100;300;400;500&family=Share+Tech+Mono&display=swap"
       rel="stylesheet"
     />
-    <title>hello.nrfcloud.com/map &middot; Dashboard</title>
+    <title>hello.nrfcloud.com/map &middot; Manage your public devices</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/e2e-tests/add-device-by-fingerprint.spec.ts b/e2e-tests/add-device-by-fingerprint.spec.ts
@@ -23,7 +23,7 @@ test('Add an out-of-box experience device using its fingerprint', async ({
 	await expect(page.getByTestId('device-deviceId')).toHaveText(
 		/oob-3526561666[0-9]+/,
 	)
-	await page.getByRole('button', { name: 'share device' }).click()
+	await page.getByRole('button', { name: 'make device public' }).click()
 
 	await expect(
 		page.getByText('We will now show data sent by the device on the map!'),

diff --git a/src/base.css b/src/base.css
@@ -34,6 +34,8 @@
   --color-progress-bg: #283b5e;
   --color-success-bg: #44663f;
   --color-success-fg: #3d724a;
+  --color-warning-bg: #594e12;
+  --color-warning-fg: #d4c53a;
 
   /* Fonts */
   --regular-font-family: "Inter Tight", sans-serif;

diff --git a/src/component/AddDevice.tsx b/src/component/AddDevice.tsx
@@ -43,7 +43,7 @@ export const Sidebar = () => {
 							<a
 								class="button"
 								href={'/map/dashboard/#add-device'}
-								title="Dashboard"
+								title="Manage your public devices"
 							>
 								logging in to the Dashboard
 							</a>

diff --git a/src/component/Dashboard.tsx b/src/component/Dashboard.tsx
@@ -9,7 +9,7 @@ export const SidebarButton = () => {
 			<a
 				class="button"
 				href={location.linkToPage('dashboard')}
-				title="Dashboard"
+				title="Manage your public devices"
 			>
 				<Dashboard strokeWidth={2} />
 			</a>

diff --git a/src/component/notifications/Warning.css b/src/component/notifications/Warning.css
@@ -0,0 +1,13 @@
+.warning {
+  width: 100%;
+  background-color: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-fg);
+  padding: var(--gap-small);
+  border-radius: var(--border-radius);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
diff --git a/src/component/notifications/Warning.tsx b/src/component/notifications/Warning.tsx
@@ -0,0 +1,7 @@
+import { type ParentProps } from 'solid-js'
+
+import './Warning.css'
+
+export const Warning = (props: ParentProps<{ class?: string }>) => (
+	<div class={`warning ${props.class ?? ''}`}>{props.children}</div>
+)
diff --git a/src/dashboard/DashboardApp.tsx b/src/dashboard/DashboardApp.tsx
@@ -107,11 +107,12 @@ export const DashboardApp = () => {
 const Unauthenticated = () => (
 	<Card>
 		<CardHeader>
-			<h1>Dashboard</h1>
+			<h1>Manage your public devices</h1>
 		</CardHeader>
 		<CardBody>
 			<p>
-				Welcome to the dashboard. Here you can view and manage your devices.
+				Welcome to the dashboard. Here you can view and manage your public
+				devices.
 			</p>
 			<hr />
 			<p>Get started by logging in with your email.</p>
@@ -126,14 +127,15 @@ const Home = () => {
 		<>
 			<Card>
 				<CardHeader>
-					<h1>Dashboard</h1>
+					<h1>Manage your public devices</h1>
 					<Show when={user() !== undefined}>
 						<p>Welcome {user()?.email}!</p>
 					</Show>
 				</CardHeader>
 				<CardBody>
 					<p>
-						Welcome to the dashboard. Here you can view and manage your devices.
+						Welcome to the dashboard. Here you can view and manage your public
+						devices.
 					</p>
 				</CardBody>
 			</Card>

diff --git a/src/dashboard/DeviceList.tsx b/src/dashboard/DeviceList.tsx
@@ -72,10 +72,10 @@ export const DeviceList = () => {
 				<h1>Your devices</h1>
 				<p>
 					To extend the time the device is visible on the map by 30 days select
-					one or more devices below and click &quot;extend sharing&quot;.
+					one or more devices below and click &quot;extend publication&quot;.
 				</p>
 				<div class="one-line">
-					<p>Click here to extend the sharing for all devices:</p>
+					<p>Click here to extend the publication for all devices:</p>
 					<Show when={submit() === false}>
 						<button
 							type="button"
@@ -87,7 +87,7 @@ export const DeviceList = () => {
 								})
 							}}
 						>
-							extend all
+							extend publication for all
 						</button>
 					</Show>
 				</div>
@@ -238,7 +238,7 @@ export const DeviceList = () => {
 								when={checked().size > 0}
 								fallback={
 									<button type="button" class="btn" disabled>
-										extend sharing
+										extend publication
 									</button>
 								}
 							>
@@ -252,7 +252,7 @@ export const DeviceList = () => {
 										})
 									}}
 								>
-									extend sharing
+									extend publication
 								</button>
 							</Show>
 						</CardFooter>

diff --git a/src/dashboard/ShareOOBDevice.tsx b/src/dashboard/ShareOOBDevice.tsx
@@ -2,6 +2,7 @@ import { ModelInfoBlock } from '#component/ModelInfoBlock.tsx'
 import { Problem } from '#component/notifications/Problem.tsx'
 import { Progress } from '#component/notifications/Progress.tsx'
 import { Success } from '#component/notifications/Success.tsx'
+import { Warning } from '#component/notifications/Warning.tsx'
 import { ResourcesDL } from '#component/ResourcesDL.tsx'
 import { useParameters } from '#context/Parameters.tsx'
 import { useUser } from '#context/User.tsx'
@@ -28,7 +29,7 @@ export const ShareOOBDevice = (props: {
 	return (
 		<Card>
 			<CardHeader>
-				<h1>Share device</h1>
+				<h1>Make your device public</h1>
 			</CardHeader>
 			<Show when={modelValid()} fallback={<InvalidModel model={props.model} />}>
 				<Show
@@ -65,14 +66,17 @@ export const ShareOOBDevice = (props: {
 
 const ShareInfo = (props: { device: Static<typeof DeviceIdentity> }) => (
 	<section>
-		<p>
-			You're about to make your device <code>{props.device.id}</code> publicly
-			available on{' '}
-			<a href="/map" target="_blank">
-				the map
-			</a>
-			.
-		</p>
+		<Warning class="pad-s pad-e pad-t gap-b">
+			<p>
+				You're about to make your device <code>{props.device.id}</code>{' '}
+				<strong>publicly available</strong> on{' '}
+				<a href="/map" target="_blank">
+					the map
+				</a>
+				. Everyone will be able to see data sent by your device, which may
+				include the precise location.
+			</p>
+		</Warning>
 		<ResourcesDL>
 			<CopyableProp
 				name={'Device ID'}
@@ -179,7 +183,7 @@ const DoShare = (props: {
 					onClick={() => setShare(true)}
 					disabled={shareDeviceRequest.loading}
 				>
-					share device
+					make device public
 				</button>
 			</CardFooter>
 		</>

diff --git a/src/dashboard/ShowDevice.tsx b/src/dashboard/ShowDevice.tsx
@@ -67,7 +67,7 @@ export const ShowDevice = () => {
 								{deviceInfo()!.model.about.title}
 							</a>
 						</dd>
-						<dt>Sharing expires</dt>
+						<dt>Public until</dt>
 						<dd class="pad-b pad-t">
 							<ExtendSharing
 								id={deviceInfo()!.id}
@@ -139,7 +139,7 @@ const ExtendSharing = (props: { id: string; expires: Date }) => {
 							setExtend(true)
 						}}
 					>
-						extend sharing
+						extend publication for 30 days
 					</button>
 				}
 			>