Create admin settings/extra features

package.json

@@ -25,8 +25,10 @@
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
+    "@tailwindcss/forms": "^0.5.3",
     "nostr": "^0.2.8",
     "nostr-tools": "^1.12.0",
+    "palettey": "^1.0.3",
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-esformatter": "^3.0.0",
     "rollup-plugin-livereload": "^2.0.5",

src/ConnectedWidget.svelte

@@ -14,6 +14,7 @@
   let responses = {};
   let profiles = {};
 
+  export let startPage;
   export let websiteOwnerPubkey;
   export let chatConfiguration;
   let prevChatConfiguration;
@@ -344,7 +345,7 @@
 
 <div
   id="chat-messages"
-  class="flex-1 px-4 min-h-[384px] block overflow-y-hidden md:overflow-y-auto overflow-x-hidden"
+  class="flex-1 px-4 min-h-[192px] block overflow-y-hidden md:overflow-y-auto overflow-x-hidden"
 >
   {#if $selectedMessage}
     {#if !getEventById($selectedMessage)}
@@ -383,7 +384,7 @@
     class="overflow-auto overflow-x-hidden -mx-4 px-4 min-h-full h-full"
   >
 
-    <div id="messages-container-inner" class="flex flex-col gap-4">
+    <div id="messages-container-inner" class="flex flex-col {!$selectedMessage && "mt-96"} gap-4">
       {#if $selectedMessage}
       <div class="md:hidden px-2 py-4 mb-3">
         <button class="" on:click|preventDefault={selectParent}>
@@ -440,6 +441,18 @@
 
 <div id="chat-input-container" class="p-4">
   <div class="flex space-x-4 items-center">
+    {#if startPage == "chat"}
+    <button
+    title="Login"
+    class="bg-green-700 min-h-[40px] max-h-[40px] hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 text-white rounded-md px-4 py-2 cursor-pointer"
+    on:click|preventDefault={() => chatAdapter.set('')}
+  >
+  <svg transform="scale(-1,1)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+  </svg>
+    >
+  </button>
+    {/if}
     <input
       type="text"
       id="message-input"

src/Container.svelte

@@ -3,19 +3,32 @@
   import KeyPrompt from "./KeyPrompt.svelte";
   import ConnectedWidget from "./ConnectedWidget.svelte";
 
+  export let startPage;
   export let websiteOwnerPubkey;
   export let chatStarted;
   export let chatConfiguration;
   export let relays;
   export let toggleChat;
 
+  let editedStartPage = startPage;
+  let editedStartPage2 = startPage;
+
+  function firstStartupDone () {
+    editedStartPage = "login";
+  }
+
+  function managedLogin () {
+    editedStartPage2 = "login";
+  }
+
   $: chatStarted = !!$chatAdapter;
 </script>
 
 {#if !chatStarted}
-  <KeyPrompt {toggleChat} {websiteOwnerPubkey} {chatConfiguration} {relays} />
+  <KeyPrompt {firstStartupDone} {managedLogin} startPage={editedStartPage} {toggleChat} {websiteOwnerPubkey} {chatConfiguration} {relays} />
 {:else}
   <ConnectedWidget
+    startPage={editedStartPage2}
     {toggleChat}
     {websiteOwnerPubkey}
     {chatConfiguration}

src/KeyPrompt.svelte

@@ -6,6 +6,9 @@
   import NstrAdapterNip46 from "./lib/adapters/nip46.js";
   import NstrAdapterDiscadableKeys from "./lib/adapters/discardable-keys.js";
 
+  export let firstStartupDone;
+  export let managedLogin;
+  export let startPage;
   export let websiteOwnerPubkey;
   export let chatConfiguration;
   export let relays;
@@ -34,6 +37,13 @@
       websiteOwnerPubkey,
       relays,
     };
+
+    if (startPage === "chat") {
+      firstStartupDone();
+      chatAdapter.set(new NstrAdapterDiscadableKeys(adapterConfig));
+    } else {
+      managedLogin();
+    }
   });
 
   function useNip07() {
@@ -42,6 +52,19 @@
       chatAdapter.set(new NstrAdapterNip07(pubkey, adapterConfig));
     });
   }
+
+  let showAdvanced = false;
+  let foundKeys = false;
+
+  if (localStorage.getItem("nostrichat-discardable-key") || localStorage.getItem("nostrichat-discardable-public-key")) {
+    foundKeys = true;
+  }
+
+  function resetKeys() {
+    localStorage.removeItem("nostrichat-discardable-key");
+    localStorage.removeItem("nostrichat-discardable-public-key");
+    foundKeys = false;
+  }
 
   import { generatePrivateKey, getPublicKey } from "nostr-tools";
   import { Connect, ConnectURI } from "@nostr-connect/connect";
@@ -157,7 +180,7 @@
     </p>
 
     <div class="bg-white w-full p-3" on:click|preventDefault={Nip46Copy}>
-      <!-- <QR text={nip46URI} /> -->
+      <!--<QR text={nip46URI} />-->
     </div>
 
     <button class="bg-purple-800 hover:bg-purple-700 w-full p-2 rounded-xl text-center font-regular text-white"
@@ -189,6 +212,15 @@
         Anonymous
         <span class="text-xs text-gray-300"> (Ephemeral Keys) </span>
       </button>
+
+      {#if foundKeys}
+      <button on:click={() => showAdvanced = !showAdvanced} class="text-purple-700 my-4 hover:underline text-xs">View Advanced</button>
+      {#if showAdvanced == true}
+      <button class="bg-red-700 hover:bg-red-600 w-full p-4 rounded-xl text-center font-regular text-gray-200"
+      on:click|preventDefault={resetKeys}
+      >Reset Anonymous Keys</button>
+      {/if}
+      {/if}
     </div>
   {/if}
 </div>

src/app.html

@@ -7,9 +7,7 @@
 		%sveltekit.head%
 	</head>
 	<!-- bg-white dark:bg-black -->
-	<body class="
-
-	">
+	<body class="scroll-smooth">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>