v2: Make photon a drop in replacement

package.json

@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -19,19 +19,20 @@
     "@types/markdown-it-container": "^2.0.6",
     "@types/nprogress": "^0.2.0",
     "@vite-pwa/sveltekit": "^0.2.5",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.16",
     "jsdom": "^22.1.0",
+    "lemmy-js-client": "^0.18.1",
     "markdown-it-container": "^3.0.0",
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
     "nprogress": "^0.2.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.30",
     "rollup-plugin-visualizer": "^5.9.2",
     "svelte": "^4.2.0",
     "svelte-check": "^3.0.1",
     "svelte-hero-icons": "^5.0.0",
     "svelte-tiny-virtual-list": "^2.0.5",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.3",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.3.0",
@@ -42,7 +43,6 @@
   "dependencies": {
     "@dicebear/core": "^6.0.4",
     "@dicebear/initials": "^6.0.4",
-    "lemmy-js-client": "^0.18.0-rc.2",
     "markdown-it": "^13.0.1",
     "mono-svelte": "^0.3.7"
   },

src/lib/auth.ts

@@ -135,7 +135,7 @@ export async function setUser(jwt: string, inst: string, username: string) {
 
     return {
       profile: id,
-      profiles: [...pd.profiles, newProfile],
+      profiles: [newProfile, ...pd.profiles],
     }
   })
 
@@ -146,7 +146,24 @@ async function userFromJwt(
   jwt: string,
   instance: string
 ): Promise<{ user: PersonData; site: GetSiteResponse } | undefined> {
-  const site = await getClient(instance).getSite({ auth: jwt })
+  const sitePromise = getClient(instance).getSite({
+    auth: jwt,
+  })
+
+  let timer = setTimeout(
+    () =>
+      toast({
+        content: `It's taking a while to fetch your user. Is your instance down?`,
+        type: 'warning',
+      }),
+    5000
+  )
+
+  const site = await sitePromise.then((r) => {
+    clearTimeout(timer)
+    return r
+  })
+
   const myUser = site.my_user
   if (!myUser) return undefined
 

src/routes/admin/config/+page.svelte

@@ -128,6 +128,16 @@
     <Checkbox bind:checked={formData.federation_enabled} defaultValue={true}>
       Federation enabled
     </Checkbox>
+    <Checkbox bind:checked={formData.federation_debug} defaultValue={false}>
+      Federation debug mode
+    </Checkbox>
+    <Checkbox bind:checked={formData.captcha_enabled} defaultValue={false}>
+      Captcha enabled
+    </Checkbox>
+    {#if formData.captcha_enabled}
+      {console.log(formData.captcha_difficulty)}
+      <Select bind:value={formData.captcha_difficulty} />
+    {/if}
   {/if}
   <Button color="primary" size="lg" loading={saving} disabled={saving} submit>
     Save

src/routes/communities/+page.svelte

@@ -40,7 +40,7 @@
   <title>Communities</title>
 </svelte:head>
 
-<h1 class="text-2xl font-bold">
+<h1 class="text-3xl font-bold">
   <span>Communities</span>
   <Popover
     openOnHover

src/routes/create/post/+page.svelte

@@ -46,6 +46,6 @@
     passedCommunity={community}
     on:submit={(e) => goto(`/post/${e.detail.post.id}`)}
   >
-    <h1 class="text-2xl font-bold" slot="formtitle">Create Post</h1>
+    <h1 class="text-3xl font-bold" slot="formtitle">Create Post</h1>
   </PostForm>
 </div>

src/routes/login/+page.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { setUser } from '$lib/auth.js'
-  import Link from '$lib/components/input/Link.svelte'
-  import { Material, toast } from 'mono-svelte'
+  import { toast } from 'mono-svelte'
   import { DEFAULT_INSTANCE_URL, LINKED_INSTANCE_URL } from '$lib/instance.js'
   import { getClient, validateInstance } from '$lib/lemmy.js'
   import { Button, TextInput } from 'mono-svelte'
-  import { AtSymbol, Icon, Identification } from 'svelte-hero-icons'
+  import {
+    AtSymbol,
+    Icon,
+    Identification,
+    QuestionMarkCircle,
+  } from 'svelte-hero-icons'
 
   let data = {
     instance: DEFAULT_INSTANCE_URL,
@@ -116,6 +120,10 @@
         <Icon src={Identification} mini size="16" />
         Sign Up
       </Button>
+      <Button color="tertiary" href="/login_reset">
+        <Icon src={QuestionMarkCircle} mini size="16" />
+        Forgot Password
+      </Button>
     </div>
   </form>
 </div>

src/routes/login_reset/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import {
+    DEFAULT_INSTANCE_URL,
+    LINKED_INSTANCE_URL,
+    instance as currentInstance,
+  } from '$lib/instance.js'
+  import { getClient, validateInstance } from '$lib/lemmy.js'
+  import { Button, TextInput, toast } from 'mono-svelte'
+
+  let instance = LINKED_INSTANCE_URL || $currentInstance || ''
+  let email = ''
+  let loading = false
+
+  async function submit() {
+    loading = true
+    try {
+      if (!(await validateInstance(instance)))
+        throw new Error('Failed to contact instance url')
+
+      await getClient(instance).passwordReset({
+        email: email,
+      })
+
+      toast({
+        content: 'A password reset link was sent to your email.',
+        type: 'success',
+      })
+    } catch (err) {
+      toast({
+        content: err as any,
+        type: 'error',
+      })
+    }
+    loading = false
+  }
+</script>
+
+<div class="my-auto max-w-xl mx-auto flex flex-col gap-2">
+  <h1 class="font-bold text-3xl">Reset Password</h1>
+  <p>
+    Enter the email of your account, and a password reset link will be sent. If
+    you did not have an email set up, contact your instance admins.
+  </p>
+  <form class="mt-2 flex flex-col gap-4" on:submit|preventDefault={submit}>
+    {#if !LINKED_INSTANCE_URL}
+      <TextInput
+        bind:value={instance}
+        label="Instance URL"
+        placeholder={DEFAULT_INSTANCE_URL}
+        required
+      />
+    {/if}
+    <TextInput
+      bind:value={email}
+      label="Email"
+      type="email"
+      required
+      placeholder="[email protected]"
+    />
+    <Button color="primary" size="lg" {loading} disabled={loading} submit>
+      Submit
+    </Button>
+  </form>
+</div>

src/routes/moderation/+page.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div class="mb-4 flex flex-col gap-4">
-  <h1 class="font-bold text-2xl">Reports</h1>
+  <h1 class="font-bold text-3xl">Reports</h1>
   <div class="flex flex-row gap-2 flex-wrap items-center">
     <Select
       bind:value={data.type}

src/routes/password_change/[token]/+error.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { page } from '$app/stores'
+  import { XMark, Icon } from 'svelte-hero-icons'
+</script>
+
+<div class="flex flex-col items-center h-max my-auto gap-2">
+  <div
+    class="rounded-full bg-red-200 dark:bg-red-900 text-red-600 dark:text-red-300 p-3"
+  >
+    <Icon src={XMark} size="32" mini />
+  </div>
+  <h1 class="text-red-800 dark:text-red-300 text-2xl font-semibold">Error</h1>
+  <p class="text-red-800 dark:text-red-300">
+    That password reset token doesn't exist.
+  </p>
+  <code>{$page.error?.message}</code>
+</div>

src/routes/password_change/[token]/+page.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { goto } from '$app/navigation'
+  import {
+    DEFAULT_INSTANCE_URL,
+    LINKED_INSTANCE_URL,
+    instance as currentInstance,
+  } from '$lib/instance.js'
+  import { getClient, validateInstance } from '$lib/lemmy.js'
+  import { Button, TextInput, toast } from 'mono-svelte'
+
+  export let data: {
+    token: string
+  }
+
+  let instance = LINKED_INSTANCE_URL || $currentInstance || ''
+  let password = '',
+    password_verify = ''
+  let loading = false
+
+  async function submit() {
+    loading = true
+    try {
+      if (!(await validateInstance(instance)))
+        throw new Error('Failed to contact instance url')
+
+      await getClient(instance).passwordChangeAfterReset({
+        password: password,
+        password_verify: password_verify,
+        token: data.token,
+      })
+
+      toast({
+        content: 'Your password was reset.',
+        type: 'success',
+      })
+
+      goto('/login')
+    } catch (err) {
+      toast({
+        content: err as any,
+        type: 'error',
+      })
+    }
+    loading = false
+  }
+</script>
+
+<div class="my-auto max-w-xl mx-auto flex flex-col gap-2">
+  <h1 class="font-bold text-3xl">Reset Password</h1>
+  <p>
+    You've clicked an email with the password reset link in it. Now, choose your
+    new password.
+  </p>
+  <form class="mt-2 flex flex-col gap-4" on:submit|preventDefault={submit}>
+    {#if !LINKED_INSTANCE_URL}
+      <TextInput
+        bind:value={instance}
+        label="Instance URL"
+        placeholder={DEFAULT_INSTANCE_URL}
+        required
+      >
+        <span class="font-normal text-xs">
+          What instance did you reset your password for?
+        </span>
+      </TextInput>
+    {/if}
+    <TextInput
+      bind:value={password}
+      label="New Password"
+      type="password"
+      required
+    />
+    <TextInput
+      bind:value={password_verify}
+      label="New Password (Verify)"
+      type="password"
+      required
+    />
+    <Button color="primary" size="lg" {loading} disabled={loading} submit>
+      Submit
+    </Button>
+  </form>
+</div>

src/routes/password_change/[token]/+page.ts

@@ -0,0 +1,3 @@
+export const load = ({ params }) => ({
+  token: params.token,
+})

src/routes/profile/(local_user)/password/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { deleteProfile, profile, setUser } from '$lib/auth.js'
+  import { getClient } from '$lib/lemmy.js'
+  import { trycatch } from '$lib/util.js'
+  import { Button, TextInput, toast } from 'mono-svelte'
+  import { instance as currentInstance } from '$lib/instance.js'
+
+  let oldPassword = '',
+    newPassword = '',
+    newPasswordVerify = ''
+  let loading = false
+
+  async function submit() {
+    loading = true
+    const res = await trycatch(async () => {
+      if (!$profile?.jwt) return
+      const res = await getClient().changePassword({
+        auth: $profile?.jwt,
+        new_password: newPassword,
+        new_password_verify: newPasswordVerify,
+        old_password: oldPassword,
+      })
+      if (res?.jwt) {
+        const { instance, username } = $profile
+        deleteProfile($profile.id)
+        await setUser(res.jwt, instance, username!)
+        $currentInstance = instance
+
+        toast({ content: 'Your login was refreshed.', type: 'success' })
+      } else {
+        throw new Error('Invalid credentials')
+      }
+    })
+
+    if (res) toast({ content: 'Successfully changed your password. ' })
+
+    loading = false
+  }
+</script>
+
+<h1 class="font-bold text-3xl">Change Password</h1>
+<form on:submit|preventDefault={submit} class="max-w-sm flex flex-col gap-4">
+  <TextInput
+    bind:value={oldPassword}
+    label="Current Password"
+    type="password"
+    required
+  />
+  <TextInput
+    bind:value={newPassword}
+    label="New Password"
+    type="password"
+    required
+  />
+  <TextInput
+    bind:value={newPasswordVerify}
+    label="New Password (Verify)"
+    type="password"
+    required
+  />
+  <Button size="lg" color="primary" submit {loading} disabled={loading}>
+    Submit
+  </Button>
+</form>