spy4x/seed

feat(front-shared-auth): edit user data in ProfileComponent

spy4x opened this issue · 0 comments

spy4x commented

Features:

  • Edit fields
    • firstName
    • lastName
    • photoURL
  • Delete account

Steps:

  1. Add form with first name, last name and photoURL (just text for now) fields to In shared component libs/front/shared/auth/ui/src/lib/profile/profile.component.html.

Look at libs/front/web/auth/src/lib/create-profile/create-profile.component.html as an example.

Note: you'll need to define a form = new FormGroup({...}); in TS file to make HTML form fields work.

  1. Define @Output() update = new EventEmitter<User>(); and @Input() isSaving = false for delegating a parent component (libs/front/web/profile/src/lib/profile/profile.component.html) to handle the logic and provide a loading state back to this component.

  2. Implement necessary NGRX actions, effects, and selectors to handle the REST API interaction. Folder: libs/front/shared/auth/state/src/lib/+state

  3. Use implemented action and selector in libs/front/web/profile/src/lib/profile/profile.component.ts to initiate an update and watch the loading state. Check if it works. Repeat in libs/front/admin/profile/src/lib/profile/profile.component.html

The final result will look similar to the "Create Profile" component, just with photoURL field instead of email:

Screen Shot 2022-11-16 at 21 53 56