feat(layout): added warning when serving app in insecure context (#175)

packages/app-client/src/app.css

@@ -23,6 +23,9 @@
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 0 0% 98%;
 
+  --warning: 31 98% 50%;
+  --warning-foreground: 0 0% 98%;
+
   --border: 0 0% 89.8%;
   --input: 0 0% 89.8%;
   --ring: 0 0% 3.9%;
@@ -55,6 +58,9 @@
   --destructive: 0 62.8% 30.6%;
   --destructive-foreground: 0 0% 98%;
 
+  --warning: 31 98% 50%;
+  --warning-foreground: 0 0% 98%;
+
   --border: 0 0% 14.9%;
   --input: 0 0% 14.9%;
   --ring: 0 0% 83.1%;

packages/app-client/src/locales/en.json

@@ -3,6 +3,10 @@
     "title": "Enclosed",
     "description": "Send private and secure notes"
   },
+  "insecureContextWarning": {
+    "description": "Your connection is not secure, the app must be served over HTTPS to work properly. You won't be able to create or view notes.",
+    "learn-more": "Learn more"
+  },
   "navbar": {
     "new-note": "New note",
     "theme": {

packages/app-client/src/locales/es.json

@@ -3,6 +3,10 @@
     "title": "Enclosed",
     "description": "Enviar notas privadas y seguras"
   },
+  "insecureContextWarning": {
+    "description": "Su conexión no es segura, la aplicación debe ser servida a través de HTTPS para funcionar correctamente. No podrá crear ni ver notas.",
+    "learn-more": "Más información"
+  },
   "navbar": {
     "new-note": "Nueva nota",
     "theme": {

packages/app-client/src/locales/fr.json

@@ -3,6 +3,10 @@
     "title": "Enclosed",
     "description": "Envoyez des notes privées et sécurisées"
   },
+  "insecureContextWarning": {
+    "description": "Votre connexion n'est pas sécurisée, l'application doit être servie via HTTPS pour fonctionner correctement. Vous ne pourrez pas créer ou consulter de notes.",
+    "learn-more": "En savoir plus"
+  },
   "navbar": {
     "new-note": "Nouvelle note",
     "theme": {

packages/app-client/src/modules/ui/layouts/app.layout.tsx

@@ -1,4 +1,3 @@
-import type { Component, ParentComponent } from 'solid-js';
 import { authStore } from '@/modules/auth/auth.store';
 import { buildTimeConfig } from '@/modules/config/config.constants';
 import { useConfig } from '@/modules/config/config.provider';
@@ -10,6 +9,7 @@ import { useThemeStore } from '@/modules/theme/theme.store';
 import { Button } from '@/modules/ui/components/button';
 import { DropdownMenu } from '@kobalte/core/dropdown-menu';
 import { A, useNavigate } from '@solidjs/router';
+import { type Component, type ParentComponent, Show } from 'solid-js';
 import { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../components/dropdown-menu';
 
 export const Navbar: Component = () => {
@@ -165,8 +165,25 @@ export const Footer: Component = () => {
 };
 
 export const AppLayout: ParentComponent = (props) => {
+  const getIsSecureContext = () => {
+    return window.isSecureContext ?? window.location.protocol === 'https:';
+  };
+
+  const { t } = useI18n();
+
   return (
     <div class="flex flex-col h-screen min-h-0">
+      <Show when={!getIsSecureContext()}>
+        <div class="bg-warning px-6 py-2 text-center gap-2 justify-center bg-op-20 text-warning text-pretty">
+          <div class="i-tabler-alert-triangle text-base hidden lg:inline-block vertical-mid mr-2"></div>
+          {t('insecureContextWarning.description')}
+          {' '}
+          <a href={buildDocUrl({ path: '/self-hosting/troubleshooting#why-do-i-see-a-warning-about-insecure-connexion' })} target="_blank" rel="noopener noreferrer" class="underline hover:text-primary transition">
+            {t('insecureContextWarning.learn-more')}
+          </a>
+        </div>
+      </Show>
+
       <Navbar />
 
       <div class="flex-1 pb-20 ">{props.children}</div>

packages/app-client/uno.config.ts

@@ -53,6 +53,10 @@ export default defineConfig({
         DEFAULT: 'hsl(var(--destructive))',
         foreground: 'hsl(var(--destructive-foreground))',
       },
+      warning: {
+        DEFAULT: 'hsl(var(--warning))',
+        foreground: 'hsl(var(--warning-foreground))',
+      },
       muted: {
         DEFAULT: 'hsl(var(--muted))',
         foreground: 'hsl(var(--muted-foreground))',

packages/docs/.vitepress/theme/custom.css

@@ -5,7 +5,7 @@
     --vp-c-brand-2: #000000;
 
     --vp-c-bg: #ffffff;
-    --vp-c-bg-alt: #ffffff;
+    --vp-c-bg-alt: #f5f5f5;
 
     --vp-c-text-1: #171717;
     --vp-c-text-2: #737373;
@@ -27,8 +27,7 @@
     --vp-c-text-2: #a3a3a3;
 
     --vp-c-bg: #0a0a0a;
-    --vp-c-bg-alt: #0a0a0a;
-    --vp-c-bg-soft: #262626;
+    --vp-c-bg-alt: #161618;
 
     --vp-c-border: #262626;
     --vp-c-divider: #262626;

packages/docs/src/self-hosting/troubleshooting.md

@@ -1,10 +1,18 @@
 # Troubleshooting
 
-## App accessible but unable to create a note
+## Why do I see a warning about insecure connexion?
 
-The app must be served over HTTPS to create notes. You will not be able to interact with the API if the app is not served over HTTPS.
-You will see an error message like this in the console:
+Enclosed rely on native browser crypto APIs to encrypt and decrypt notes with security and great performance.
+These APIs are only available in secure contexts (HTTPS). If you are running the app in a non-secure context (HTTP), you will see a warning in the app:
+
+```plaintext
+Your connection is not secure, the app must be served over HTTPS to work properly. You won't be able to create or view notes. Learn more.
+```
+
+You may also see a warning in the browser console:
 
 ```plaintext
 The Cross-Origin-Opener-Policy header has been ignored because the URL's origin was untrustworthy.
 ```
+
+You will need to serve the app over HTTPS to use it properly.