使用 Angular 构建用户管理应用

1
import { Component } from '@angular/core'
2
import { FormBuilder, FormGroup } from '@angular/forms'
3
import { SupabaseService } from '../supabase.service'
4
5
@Component({
6
  selector: 'app-auth',
7
  templateUrl: './auth.component.html',
8
  styleUrls: ['./auth.component.css'],
9
  standalone: false,
10
})
11
export class AuthComponent {
12
  signInForm!: FormGroup
13
  constructor(
14
    private readonly supabase: SupabaseService,
15
    private readonly formBuilder: FormBuilder
16
  ) {}
17
18
  loading = false
19
  ngOnInit() {
20
    this.signInForm = this.formBuilder.group({
21
      email: '',
22
    })
23
  }
24
25
  async onSubmit(): Promise<void> {
26
    try {
27
      this.loading = true
28
      const email = this.signInForm.value.email as string
29
      const { error } = await this.supabase.signIn(email)
30
      if (error) throw error
31
      alert('Check your email for the login link!')
32
    } catch (error) {
33
      if (error instanceof Error) {
34
        alert(error.message)
35
      }
36
    } finally {
37
      this.signInForm.reset()
38
      this.loading = false
39
    }
40
  }
41
}

1
import { Component, Input, OnInit } from '@angular/core'
2
import { FormBuilder, FormGroup } from '@angular/forms'
3
import { User } from '@supabase/supabase-js'
4
import { Profile, SupabaseService } from '../supabase.service'
5
6
@Component({
7
  selector: 'app-account',
8
  templateUrl: './account.component.html',
9
  styleUrls: ['./account.component.css'],
10
  standalone: false,
11
})
12
export class AccountComponent implements OnInit {
13
  loading = false
14
  profile!: Profile
15
  updateProfileForm!: FormGroup
16
17
  get avatarUrl() {
18
    return this.updateProfileForm.value.avatar_url as string
19
  }
20
21
  async updateAvatar(event: string): Promise<void> {
22
    this.updateProfileForm.patchValue({
23
      avatar_url: event,
24
    })
25
    await this.updateProfile()
26
  }
27
28
  @Input()
29
  user!: User
30
31
  constructor(
32
    private readonly supabase: SupabaseService,
33
    private formBuilder: FormBuilder
34
  ) {
35
    this.updateProfileForm = this.formBuilder.group({
36
      username: '',
37
      website: '',
38
      avatar_url: '',
39
    })
40
  }
41
42
  async ngOnInit(): Promise<void> {
43
    await this.getProfile()
44
45
    const { username, website, avatar_url } = this.profile
46
    this.updateProfileForm.patchValue({
47
      username,
48
      website,
49
      avatar_url,
50
    })
51
  }
52
53
  async getProfile() {
54
    try {
55
      this.loading = true
56
      const { data: profile, error, status } = await this.supabase.profile(this.user)
57
58
      if (error && status !== 406) {
59
        throw error
60
      }
61
62
      if (profile) {
63
        this.profile = profile
64
      }
65
    } catch (error) {
66
      if (error instanceof Error) {
67
        alert(error.message)
68
      }
69
    } finally {
70
      this.loading = false
71
    }
72
  }
73
74
  async updateProfile(): Promise<void> {
75
    try {
76
      this.loading = true
77
78
      const username = this.updateProfileForm.value.username as string
79
      const website = this.updateProfileForm.value.website as string
80
      const avatar_url = this.updateProfileForm.value.avatar_url as string
81
82
      const { error } = await this.supabase.updateProfile({
83
        id: this.user.id,
84
        username,
85
        website,
86
        avatar_url,
87
      })
88
      if (error) throw error
89
    } catch (error) {
90
      if (error instanceof Error) {
91
        alert(error.message)
92
      }
93
    } finally {
94
      this.loading = false
95
    }
96
  }
97
98
  async signOut() {
99
    await this.supabase.signOut()
100
  }
101
}

1
import { Component, EventEmitter, Input, Output } from '@angular/core'
2
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'
3
import { SupabaseService } from '../supabase.service'
4
5
@Component({
6
  selector: 'app-avatar',
7
  templateUrl: './avatar.component.html',
8
  styleUrls: ['./avatar.component.css'],
9
  standalone: false,
10
})
11
export class AvatarComponent {
12
  _avatarUrl: SafeResourceUrl | undefined
13
  uploading = false
14
15
  @Input()
16
  set avatarUrl(url: string | null) {
17
    if (url) {
18
      this.downloadImage(url)
19
    }
20
  }
21
22
  @Output() upload = new EventEmitter<string>()
23
24
  constructor(
25
    private readonly supabase: SupabaseService,
26
    private readonly dom: DomSanitizer
27
  ) {}
28
29
  async downloadImage(path: string) {
30
    try {
31
      const { data } = await this.supabase.downLoadImage(path)
32
      if (data instanceof Blob) {
33
        this._avatarUrl = this.dom.bypassSecurityTrustResourceUrl(URL.createObjectURL(data))
34
      }
35
    } catch (error) {
36
      if (error instanceof Error) {
37
        console.error('Error downloading image: ', error.message)
38
      }
39
    }
40
  }
41
42
  async uploadAvatar(event: any) {
43
    try {
44
      this.uploading = true
45
      if (!event.target.files || event.target.files.length === 0) {
46
        throw new Error('You must select an image to upload.')
47
      }
48
49
      const file = event.target.files[0]
50
      const fileExt = file.name.split('.').pop()
51
      const filePath = `${Math.random()}.${fileExt}`
52
53
      await this.supabase.uploadAvatar(filePath, file)
54
      this.upload.emit(filePath)
55
    } catch (error) {
56
      if (error instanceof Error) {
57
        alert(error.message)
58
      }
59
    } finally {
60
      this.uploading = false
61
    }
62
  }
63
}

1
import { Component, OnInit } from '@angular/core'
2
import { User } from '@supabase/supabase-js'
3
import { SupabaseService } from './supabase.service'
4
5
@Component({
6
  selector: 'app-root',
7
  templateUrl: './app.component.html',
8
  styleUrls: ['./app.component.css'],
9
  standalone: false,
10
})
11
export class AppComponent implements OnInit {
12
  constructor(private readonly supabase: SupabaseService) {}
13
14
  title = 'angular-user-management'
15
  user: User | null = null
16
17
  async ngOnInit() {
18
    this.user = await this.supabase.getUser()
19
    this.supabase.authChanges(async () => {
20
      this.user = await this.supabase.getUser()
21
    })
22
  }
23
}