Add sign in with private key

CHANGELOG.md

@@ -17,6 +17,7 @@
 * Fix opening images in fullscreen dialog
 * Add support for blocked relays
 * Add authentication policy setting
+* Add login with key if no signer is detected
 
 # 1.6.2
 

src/app/components/LogIn.svelte

@@ -7,6 +7,7 @@
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Cpu from "@assets/icons/cpu-bolt.svg?dataurl"
   import Compass from "@assets/icons/compass-big.svg?dataurl"
+  import Key from "@assets/icons/key.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -14,6 +15,7 @@
   import InfoNostr from "@app/components/InfoNostr.svelte"
   import LogInBunker from "@app/components/LogInBunker.svelte"
   import LogInEmail from "@app/components/LogInEmail.svelte"
+  import LogInKey from "@app/components/LogInKey.svelte"
   import {pushModal, clearModals} from "@app/util/modal"
   import {PLATFORM_NAME, POMADE_SIGNERS} from "@app/core/state"
   import {pushToast} from "@app/util/toast"
@@ -78,6 +80,8 @@
 
   const loginWithBunker = () => pushModal(LogInBunker)
 
+  const loginWithKey = () => pushModal(LogInKey)
+
   const hasSigner = $derived(getNip07() || signers.length > 0)
 
   onMount(async () => {
@@ -133,6 +137,12 @@
       Log in with Email
     </Button>
   {/if}
+  {#if !hasSigner}
+    <Button {disabled} onclick={loginWithKey} class="btn btn-neutral">
+      <Icon icon={Key} />
+      Log in with Key
+    </Button>
+  {/if}
   {#if !hasSigner || !hasPomade}
     <Link
       external

src/app/components/LogInKey.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import {bytesToHex} from "@welshman/lib"
+  import {loginWithNip01} from "@welshman/app"
+  import {decrypt} from "nostr-tools/nip49"
+  import {preventDefault} from "@lib/html"
+  import {nsecDecode} from "@lib/util"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Key from "@assets/icons/key.svg?dataurl"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {clearModals} from "@app/util/modal"
+  import {setChecked} from "@app/util/notifications"
+  import {pushToast} from "@app/util/toast"
+
+  let loading = $state(false)
+  let keyInput = $state("")
+  let password = $state("")
+
+  const back = () => history.back()
+
+  const isHex = $derived(keyInput.match(/^[0-9a-f]{64}$/i))
+
+  const isNsec = $derived(keyInput.startsWith("nsec1"))
+
+  const isNcryptsec = $derived(keyInput.startsWith("ncryptsec1"))
+
+  const canSubmit = $derived(!loading && (isHex || isNsec || isNcryptsec))
+
+  const onSubmit = async () => {
+    loading = true
+
+    try {
+      let secret: string
+
+      if (isNcryptsec) {
+        secret = bytesToHex(decrypt(keyInput, password))
+      } else if (isNsec) {
+        secret = nsecDecode(keyInput)
+      } else if (isHex) {
+        secret = keyInput.toLowerCase()
+      } else {
+        return pushToast({
+          theme: "error",
+          message: "Invalid key format. Please enter a hex key, nsec, or ncryptsec.",
+        })
+      }
+
+      loginWithNip01(secret)
+      pushToast({message: "Successfully logged in!"})
+      setChecked("*")
+      clearModals()
+    } catch (e) {
+      console.error(e)
+
+      pushToast({
+        theme: "error",
+        message: isNcryptsec
+          ? "Failed to decrypt key. Please check your password."
+          : "Invalid key format. Please check your input.",
+      })
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<form class="column gap-4" onsubmit={preventDefault(onSubmit)}>
+  <ModalHeader>
+    {#snippet title()}
+      <div>Log In with Key</div>
+    {/snippet}
+    {#snippet info()}
+      <div>Enter your nostr private key to log in.</div>
+    {/snippet}
+  </ModalHeader>
+  <FieldInline>
+    {#snippet label()}
+      <p>Your Key*</p>
+    {/snippet}
+    {#snippet input()}
+      <label class="input input-bordered flex w-full items-center gap-2">
+        <Icon icon={Key} />
+        <input type="password" bind:value={keyInput} placeholder="nsec1..." />
+      </label>
+    {/snippet}
+  </FieldInline>
+  {#if isNcryptsec}
+    <FieldInline>
+      {#snippet label()}
+        <p>Password*</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <Icon icon={Key} />
+          <input type="password" bind:value={password} placeholder="Your password" />
+        </label>
+      {/snippet}
+    </FieldInline>
+  {/if}
+  <div class="card2 card2-sm bg-alt flex flex-col gap-2 text-sm">
+    <strong class="flex items-center gap-2">
+      <Icon icon={Danger} />
+      Please note!
+    </strong>
+    <p>
+      Logging in this way is not a best practice. For better security, please consider using a
+      <Link external href="https://nostrapps.com#signers" class="link">signer app</Link>
+      to keep your keys safe.
+    </p>
+  </div>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={!canSubmit}>
+      <Spinner {loading}>Log in</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</form>

src/app/components/RelayIcon.svelte

@@ -14,4 +14,8 @@
   const relay = deriveRelay(url)
 </script>
 
-<ImageIcon {size} alt="" src={$relay?.icon || RemoteControllerMinimalistic} class={props.class} />
+{#if $relay?.icon}
+  <ImageIcon {size} alt="" src={$relay?.icon} class={props.class} />
+{:else}
+  <ImageIcon size={size - 2} alt="" src={RemoteControllerMinimalistic} class={props.class} />
+{/if}

src/app/components/RoomForm.svelte

@@ -122,11 +122,11 @@
           <span class="text-sm opacity-75">No icon selected</span>
         {/if}
         <div class="flex gap-2">
-          <IconPickerButton onSelect={handleIconSelect} class="btn btn-primary btn-sm">
+          <IconPickerButton onSelect={handleIconSelect} class="btn btn-primary btn-xs">
             <Icon icon={StickerSmileSquare} size={4} />
             <span class="hidden sm:inline">Select</span>
           </IconPickerButton>
-          <label class="btn btn-neutral btn-sm cursor-pointer">
+          <label class="btn btn-neutral btn-xs cursor-pointer">
             <Icon icon={UploadMinimalistic} size={4} />
             <span class="hidden sm:inline">Upload</span>
             <input type="file" accept="image/*" class="hidden" onchange={handleImageUpload} />

src/app/components/SpaceEdit.svelte

@@ -144,11 +144,11 @@
             <span class="text-sm opacity-75">No icon selected</span>
           {/if}
           <div class="flex gap-2">
-            <IconPickerButton onSelect={handleIconSelect} class="btn btn-primary btn-sm">
+            <IconPickerButton onSelect={handleIconSelect} class="btn btn-primary btn-xs">
               <Icon icon={StickerSmileSquare} size={4} />
               Select
             </IconPickerButton>
-            <label class="btn btn-neutral btn-sm cursor-pointer">
+            <label class="btn btn-neutral btn-xs cursor-pointer">
               <Icon icon={UploadMinimalistic} size={4} />
               Upload
               <input type="file" accept="image/*" class="hidden" onchange={handleImageUpload} />

src/lib/components/FieldInline.svelte

@@ -9,14 +9,14 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="grid grid-cols-1 gap-6 lg:grid-cols-5 {props.class} items-start">
-  <label class="flex items-center gap-2 font-bold lg:col-span-2">
+<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 {props.class}">
+  <label class="flex items-center gap-2 font-bold">
     {@render props.label?.()}
   </label>
-  <div class="col-span-2 flex items-center gap-2 lg:col-span-3">
+  <div class="col-span-2 flex items-center gap-2">
     {@render props.input?.()}
   </div>
-  <p class="flex-end text-sm opacity-50 lg:col-span-5">
+  <p class="flex-end text-sm opacity-50 lg:col-span-3">
     {#if props.info}
       {@render props.info?.()}
     {/if}