使用 Svelte 构建用户管理应用

1
import { createClient } from '@supabase/supabase-js'
2
3
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
4
const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
5
6
export const supabase = createClient(supabaseUrl, supabasePublishableKey)

1
<script lang="ts">
2
  import { supabase } from "../supabaseClient";
3
4
  let loading = $state(false);
5
  let email = $state("");
6
7
  const handleLogin = async () => {
8
    try {
9
      loading = true;
10
      const { error } = await supabase.auth.signInWithOtp({ email });
11
      if (error) throw error;
12
      alert("Check your email for login link!");
13
    } catch (error) {
14
      if (error instanceof Error) {
15
        alert(error.message);
16
      }
17
    } finally {
18
      loading = false;
19
    }
20
  };
21
</script>
22
23
<div class="row flex-center flex">
24
  <div class="col-6 form-widget" aria-live="polite">
25
    <h1 class="header">Supabase + Svelte</h1>
26
    <p class="description">Sign in via magic link with your email below</p>
27
    <form class="form-widget" onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
28
      <div>
29
        <label for="email">Email</label>
30
        <input
31
          id="email"
32
          class="inputField"
33
          type="email"
34
          placeholder="Your email"
35
          bind:value={email}
36
        />
37
      </div>
38
      <div>
39
        <button
40
          type="submit"
41
          class="button block"
42
          aria-live="polite"
43
          disabled={loading}
44
        >
45
          <span>{loading ? "Loading" : "Send magic link"}</span>
46
        </button>
47
      </div>
48
    </form>
49
  </div>
50
</div>

1
<script lang="ts">
2
  import { onMount } from 'svelte'
3
  import { supabase } from './supabaseClient'
4
  import type { AuthSession } from '@supabase/supabase-js'
5
  import Account from './lib/Account.svelte'
6
  import Auth from './lib/Auth.svelte'
7
8
  let session = $state<AuthSession | null>(null)
9
10
  onMount(() => {
11
    supabase.auth.getSession().then(({ data }) => {
12
      session = data.session
13
    })
14
15
    supabase.auth.onAuthStateChange((_event, _session) => {
16
      session = _session
17
    })
18
  })
19
</script>
20
21
<div class="container" style="padding: 50px 0 100px 0">
22
  {#if !session}
23
  <Auth />
24
  {:else}
25
  <Account {session} />
26
  {/if}
27
</div>

1
<script lang="ts">
2
  import { supabase } from "../supabaseClient";
3
4
  interface Props {
5
    size: number;
6
    url?: string | null;
7
    onupload?: () => void;
8
  }
9
10
  let { size, url = $bindable(null), onupload }: Props = $props();
11
12
  let avatarUrl = $state<string | null>(null);
13
  let uploading = $state(false);
14
  let files = $state<FileList>();
15
16
  const downloadImage = async (path: string) => {
17
    try {
18
      const { data, error } = await supabase.storage
19
        .from("avatars")
20
        .download(path);
21
22
      if (error) {
23
        throw error;
24
      }
25
26
      const url = URL.createObjectURL(data);
27
      avatarUrl = url;
28
    } catch (error) {
29
      if (error instanceof Error) {
30
        console.log("Error downloading image: ", error.message);
31
      }
32
    }
33
  };
34
35
  const uploadAvatar = async () => {
36
    try {
37
      uploading = true;
38
39
      if (!files || files.length === 0) {
40
        throw new Error("You must select an image to upload.");
41
      }
42
43
      const file = files[0];
44
      const fileExt = file.name.split(".").pop();
45
      const filePath = `${Math.random()}.${fileExt}`;
46
47
      const { error } = await supabase.storage
48
        .from("avatars")
49
        .upload(filePath, file);
50
51
      if (error) {
52
        throw error;
53
      }
54
55
      url = filePath;
56
      onupload?.();
57
    } catch (error) {
58
      if (error instanceof Error) {
59
        alert(error.message);
60
      }
61
    } finally {
62
      uploading = false;
63
    }
64
  };
65
66
  $effect(() => {
67
    if (url) downloadImage(url);
68
  });
69
</script>
70
71
<div style="width: {size}px" aria-live="polite">
72
  {#if avatarUrl}
73
    <img
74
      src={avatarUrl}
75
      alt={avatarUrl ? "Avatar" : "No image"}
76
      class="avatar image"
77
      style="height: {size}px, width: {size}px"
78
    />
79
  {:else}
80
    <div class="avatar no-image" style="height: {size}px, width: {size}px"></div>
81
  {/if}
82
  <div style="width: {size}px">
83
    <label class="button primary block" for="single">
84
      {uploading ? "Uploading ..." : "Upload avatar"}
85
    </label>
86
    <span style="display:none">
87
      <input
88
        type="file"
89
        id="single"
90
        accept="image/*"
91
        bind:files
92
        onchange={uploadAvatar}
93
        disabled={uploading}
94
      />
95
    </span>
96
  </div>
97
</div>