From 21c23206d088fa1bd663907c4226c6874eba977a Mon Sep 17 00:00:00 2001
From: James Chaloupka <47349533+SirGoodenough@users.noreply.github.com>
Date: Fri, 9 Feb 2024 20:18:02 -0600
Subject: [PATCH] Add dialout permissions instructions to no-port (#427)

* Add dialout permissions instructions to no-port

* Add OS check

* Remove || true

---------

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
---
 src/no-port-picked/no-port-picked-dialog.ts | 21 ++++++++++++++++++
 src/util/get-operating-system.ts            | 24 +++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/util/get-operating-system.ts

diff --git a/src/no-port-picked/no-port-picked-dialog.ts b/src/no-port-picked/no-port-picked-dialog.ts
index cc65f452..935cd1ef 100644
--- a/src/no-port-picked/no-port-picked-dialog.ts
+++ b/src/no-port-picked/no-port-picked-dialog.ts
@@ -3,6 +3,7 @@ import { customElement } from "lit/decorators.js";
 import "../components/ewt-dialog";
 import "../components/ewt-button";
 import { dialogStyles } from "../styles";
+import { getOperatingSystem } from "../util/get-operating-system";
 
 const cloudDownload = svg`
   <svg
@@ -30,6 +31,8 @@ class EwtNoPortPickedDialog extends LitElement {
   public doTryAgain?: () => void;
 
   public render() {
+    const OS = getOperatingSystem();
+
     return html`
       <ewt-dialog
         open
@@ -54,6 +57,20 @@ class EwtNoPortPickedDialog extends LitElement {
             Make sure that the USB cable you use can be used for data and is not
             a power-only cable.
           </li>
+          ${OS === "Linux"
+            ? html`
+                <li>
+                  If you are using a Linux flavor, make sure that your user is
+                  part of the <code>dialout</code> group so it has permission to
+                  access the device.
+                  <code class="block"
+                    >sudo usermod -a -G dialout YourUserName</code
+                  >
+                  You may need to log out & back in or reboot to activate the
+                  new group access.
+                </li>
+              `
+            : ""}
           <li>
             Make sure you have the right drivers installed. Below are the
             drivers for common chips used in ESP devices:
@@ -147,6 +164,10 @@ class EwtNoPortPickedDialog extends LitElement {
         margin-bottom: 0;
         padding-left: 1.5em;
       }
+      li code.block {
+        display: block;
+        margin: 0.5em 0;
+      }
     `,
   ];
 }
diff --git a/src/util/get-operating-system.ts b/src/util/get-operating-system.ts
new file mode 100644
index 00000000..66ca776b
--- /dev/null
+++ b/src/util/get-operating-system.ts
@@ -0,0 +1,24 @@
+// From https://stackoverflow.com/a/38241481
+export const getOperatingSystem = () => {
+  const userAgent = window.navigator.userAgent;
+  const platform =
+    // @ts-expect-error
+    window.navigator?.userAgentData?.platform || window.navigator.platform;
+  const macosPlatforms = ["macOS", "Macintosh", "MacIntel", "MacPPC", "Mac68K"];
+  const windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
+  const iosPlatforms = ["iPhone", "iPad", "iPod"];
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    return "Mac OS";
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    return "iOS";
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    return "Windows";
+  } else if (/Android/.test(userAgent)) {
+    return "Android";
+  } else if (/Linux/.test(platform)) {
+    return "Linux";
+  }
+
+  return null;
+};