Update client and admin ui (#68)

* update portr client ui * update admin ui
amalshaji · Jun 14, 2024 · d20d16c · d20d16c
1 parent d53f9c6
commit d20d16c
Show file tree

Hide file tree

Showing 20 changed files with 277 additions and 140 deletions.
diff --git a/admin/src/web/src/lib/components/team-selector.svelte b/admin/src/web/src/lib/components/team-selector.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <Select.Root bind:selected onSelectedChange={switchTeams}>
-  <Select.Trigger class="text-[14px] border-black focus:ring-0">
+  <Select.Trigger class="text-[14px] focus:ring-0">
     <div class="flex items-center space-x-2">
       <Avatar.Root class="w-5 h-5 rounded-full">
         <Avatar.Image

diff --git a/admin/src/web/src/lib/components/users/delete.svelte b/admin/src/web/src/lib/components/users/delete.svelte
@@ -3,8 +3,7 @@
   import { Button } from "$lib/components/ui/button/index.js";
   import { currentUser, users } from "$lib/store";
   import type { TeamUser } from "$lib/types";
-  import { Trash2 } from "lucide-svelte";
-  import { Reload } from "radix-icons-svelte";
+  import { Loader, Trash2 } from "lucide-svelte";
   import { getContext } from "svelte";
   import { toast } from "svelte-sonner";
 
@@ -64,7 +63,7 @@
       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
       <Button on:click={removeUser} disabled={isLoading}>
         {#if isLoading}
-          <Reload class="mr-2 h-4 w-4 animate-spin" />
+          <Loader class="mr-2 h-4 w-4 animate-spin" />
         {/if}
         Remove
       </Button>

diff --git a/admin/src/web/src/lib/components/users/invite-user.svelte b/admin/src/web/src/lib/components/users/invite-user.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { Button } from "$lib/components/ui/button";
   import * as AlertDialog from "$lib/components/ui/alert-dialog";
-  import { Reload } from "radix-icons-svelte";
+  import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
+  import { Loader } from "lucide-svelte";
 
   import * as Select from "$lib/components/ui/select";
-  import { toast } from "svelte-sonner";
   import { currentUser, users } from "$lib/store";
   import { getContext } from "svelte";
+  import { toast } from "svelte-sonner";
   import ApiError from "../ApiError.svelte";
 
   import { Checkbox } from "$lib/components/ui/checkbox";
@@ -135,7 +135,7 @@
       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
       <Button on:click={add_member} disabled={isLoading}>
         {#if isLoading}
-          <Reload class="mr-2 h-4 w-4 animate-spin" />
+          <Loader class="mr-2 h-4 w-4 animate-spin" />
         {/if}
         Add
       </Button>

diff --git a/admin/src/web/src/pages/app/myaccount.svelte b/admin/src/web/src/pages/app/myaccount.svelte
@@ -5,7 +5,7 @@
   import * as Card from "$lib/components/ui/card";
   import { currentUser } from "$lib/store";
   import { toast } from "svelte-sonner";
-  import { Reload } from "radix-icons-svelte";
+  import { Loader } from "lucide-svelte";
   import { getContext } from "svelte";
 
   let team = getContext("team") as string;
@@ -85,7 +85,7 @@
     <Card.Footer>
       <Button on:click={updateProfile} disabled={isUpdating}>
         {#if isUpdating}
-          <Reload class="mr-2 h-4 w-4 animate-spin" />
+          <Loader class="mr-2 h-4 w-4 animate-spin" />
         {/if}
         Save changes
       </Button>

diff --git a/admin/src/web/src/pages/app/settings.svelte b/admin/src/web/src/pages/app/settings.svelte
@@ -4,7 +4,7 @@
   import * as Card from "$lib/components/ui/card";
   import { currentUser } from "$lib/store";
   import { toast } from "svelte-sonner";
-  import { Reload } from "radix-icons-svelte";
+  import { Loader } from "lucide-svelte";
   import { getContext } from "svelte";
   import { copyCodeToClipboard } from "$lib/utils";
 
@@ -64,7 +64,7 @@
         disabled={isRotatingSecretKey}
       >
         {#if isRotatingSecretKey}
-          <Reload class="mr-2 h-4 w-4 animate-spin" />
+          <Loader class="mr-2 h-4 w-4 animate-spin" />
         {/if}
         Rotate key
       </Button>

diff --git a/admin/src/web/src/pages/home.svelte b/admin/src/web/src/pages/home.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Github, Lock, TriangleAlert, X } from "lucide-svelte";
+  import { Github, Lock, TriangleAlert, X, TreePalm } from "lucide-svelte";
   import { onMount } from "svelte";
 
   import * as Alert from "$lib/components/ui/alert";
@@ -52,9 +52,14 @@
   <div
     class="w-full max-w-sm p-6 m-auto mx-auto rounded-md dark:bg-gray-800 py-8"
   >
-    <p class="text-center my-6 text-2xl font-semibold tracking-wide">
-      Log into Portr
-    </p>
+    <div class="flex space-x-2 items-center justify-center">
+      <TreePalm />
+      <span
+        class="items-center text-center my-6 text-2xl font-semibold tracking-wide"
+      >
+        Welcome back!
+      </span>
+    </div>
     <Button
       variant="outline"
       class="w-full"

diff --git a/admin/src/web/src/pages/instance-settings/emailSettings.svelte b/admin/src/web/src/pages/instance-settings/emailSettings.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { Label } from "$lib/components/ui/label";
+  import ErrorText from "$lib/components/ErrorText.svelte";
   import { Button } from "$lib/components/ui/button";
   import * as Card from "$lib/components/ui/card";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Switch } from "$lib/components/ui/switch";
   import { Textarea } from "$lib/components/ui/textarea";
   import { instanceSettings } from "$lib/store";
+  import { Loader } from "lucide-svelte";
   import { onDestroy, onMount } from "svelte";
   import { toast } from "svelte-sonner";
-  import { Reload } from "radix-icons-svelte";
-  import { Switch } from "$lib/components/ui/switch";
-  import { Input } from "$lib/components/ui/input";
-  import ErrorText from "$lib/components/ErrorText.svelte";
 
   let smtpEnabled: boolean;
 
@@ -239,7 +239,7 @@
   <Card.Footer>
     <Button on:click={updateEmailSettings} disabled={isUpdating}>
       {#if isUpdating}
-        <Reload class="mr-2 h-4 w-4 animate-spin" />
+        <Loader class="mr-2 h-4 w-4 animate-spin" />
       {/if}
       Save changes
     </Button>

diff --git a/admin/src/web/src/pages/instance-settings/newteam.svelte b/admin/src/web/src/pages/instance-settings/newteam.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { Input } from "$lib/components/ui/input";
   import { Button } from "$lib/components/ui/button";
   import * as Card from "$lib/components/ui/card";
+  import { Input } from "$lib/components/ui/input";
+  import { Loader } from "lucide-svelte";
   import { toast } from "svelte-sonner";
-  import { Reload } from "radix-icons-svelte";
   import ErrorText from "../../lib/components/ErrorText.svelte";
 
   let teamName: string = "",
@@ -63,7 +63,7 @@
   <Card.Footer>
     <Button on:click={createTeam} disabled={isUpdating}>
       {#if isUpdating}
-        <Reload class="mr-2 h-4 w-4 animate-spin" />
+        <Loader class="mr-2 h-4 w-4 animate-spin" />
       {/if}
       Create team
     </Button>

diff --git a/tunnel/internal/client/dashboard/ui/package.json b/tunnel/internal/client/dashboard/ui/package.json
@@ -13,10 +13,12 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tsconfig/svelte": "^5.0.4",
     "autoprefixer": "^10.4.19",
+    "highlight.js": "^11.9.0",
     "postcss": "^8.4.38",
     "postcss-load-config": "^5.0.3",
     "svelte": "^4.2.13",
     "svelte-check": "^3.6.9",
+    "svelte-highlight": "^7.6.1",
     "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",

diff --git a/tunnel/internal/client/dashboard/ui/pnpm-lock.yaml b/tunnel/internal/client/dashboard/ui/pnpm-lock.yaml
diff --git a/tunnel/internal/client/dashboard/ui/src/lib/components/HttpBadge.svelte b/tunnel/internal/client/dashboard/ui/src/lib/components/HttpBadge.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  export let method:
+    | "GET"
+    | "POST"
+    | "PUT"
+    | "DELETE"
+    | "PATCH"
+    | "OPTIONS"
+    | "HEAD"
+    | "CONNECT"
+    | "TRACE";
+
+  const getColorByMethod = (method: string) => {
+    switch (method) {
+      case "GET":
+        return "bg-green-500";
+      case "POST":
+        return "bg-blue-500";
+      case "PUT":
+        return "bg-yellow-500";
+      case "DELETE":
+        return "bg-red-500";
+      case "PATCH":
+        return "bg-purple-500";
+      case "OPTIONS":
+        return "bg-gray-500";
+      case "HEAD":
+        return "bg-gray-500";
+      case "CONNECT":
+        return "bg-gray-500";
+      case "TRACE":
+        return "bg-gray-500";
+      default:
+        return "bg-gray-500";
+    }
+  };
+</script>
+
+<span
+  class={`rounded-sm px-2 py-1 text-white text-xs font-light ${getColorByMethod(method)}`}
+>
+  {method}
+</span>