Create Account Page

[eleanorreem]

Overview

We want users to be able to see their account details when they are logged in. This ticket only includes creating the account page and the card where we display profile details. See designs:

Desktop

Mobile

Note that it is not for displaying the delete account or update email preferences. These will be separated into a follow up ticket.

Action Items

• [ ] Pull the most updated version of develop and create your own branch
• [ ] Create a new page with url /account/settings and ensure it is kept behind a firebase auth guard. See /bloom-frontend/pages/_app.tsx for the auth guard.
• [ ] Use state to populate the profile details
• [ ] The link in the profile card goes to https://chayn.typeform.com/to/OY9Wdk4h?typeform-source=bloom.chayn.co
• [ ] Add a new 'Account settings' link to nav bar. Take a look at /components/layout/UserMenu.tsx
• [ ] Write a cypress test that logs in and clicks through the account page and tests the correct details are there.

[anmol-fzr]

@eleanorreem @kyleecodes

Hi!, Could you please assign me an issue to work on for the bloom-frontend project? I'm eager to contribute to the project and the society

[github-actions[bot]]

Thank you for your interest in contributing to Chayn! Please carefully read the CONTRIBUTING.md file and the README.md file for guidance. Let us know if you have any questions. Good luck!

[kyleecodes]

@anmol-fzr Thank you for your interest in contributing to Chayn! I've assigned you this issue. Please read the Contributing Guidelines and let us know if you have any questions. 🙂

[anmol-fzr]

@kyleecodes , I'm getting 403 Foribidden resource error on delete account API can somebody guide me ?

[eleanorreem]

Hi there, sorry for the delay in getting back to you.

If you are looking to delete the account with the following endpoint you need to create a super admin user and log in with them.

  @ApiBearerAuth()
  @Delete(':id')
  @ApiParam({ name: 'id', description: 'User id to delete' })
  @UseGuards(SuperAdminAuthGuard)
  async adminDeleteUser(@Param() { id }): Promise<UserEntity> {
    return await this.userService.deleteUserById(id);
  }

Here is the documentation about how to add different types of bloom users.

How I normally get the access token to authenticate against the backend:

• login through the UI with the user that has the correct level of access (in this case the super admin). Ensure you are on a page that requires authentication such as /courses.
• Go into the network tab in the developer tools and look at a request like /user/me.
• I look at the access token that was sent in the Request Headers Authorisation property. It looks like Bearer xxxxx.
• I copy the authorisation token into the Request Headers - Authorisation property of the API request I am sending the backend. There is currently no UI to delete users.

We plan to make a shareable Postman Collection at some point to make this easier.

I just wanted to check that I had been clear enough on this ticket. I know the design includes deleting a user and also updating the subscription preferences but it didn't mean implementing the whole design. I.e. you don't need to implement delete user section or the update subscription sections. This ticket required just building the page, adding the link to the UserMenu and displaying the user name and email.

Hope that makes sense!

[anmol-fzr]

Okay If only super admins can delete a user, then how will we impliment delete User functionality on the Account Page as described in this issue.

[eleanorreem]

Thanks for your question 😄 The ticket specifies "Note that it is not for displaying the delete account or update email preferences. These will be separated into a follow up ticket." We are implementing the design in stages. This ticket does not cover the whole design. Hope that explains it!

[eleanorreem]

I think my instructions in combination with the design is confusing the situation. For the first iteration - the design below is all we need. Hope that clarifies things!

[anmol-fzr]

Okay, I understand, I have implemented the rest of the part ( UI + functionality ). Should i raise a PR now ?

[anmol-fzr]

Currently I have this much, working and tested ( except delete Account ). with translations

[eleanorreem]

Oh cool! Thats amazing 🎉 Thank you

What was your mechanism for updating the user subscription preferences? Do you have a PR for the backend as well? I think the endpoint exists but the DTO doesn't include the subscription preferences. Also I think the endpoint reuses the getUserDTO and should probably have its own DTO.

[eleanorreem]

Make a PR with what you have got and we can chat through your solutions.

[github-actions[bot]]

Thank you @annarhughes you have been assigned this issue! Please follow the directions in our Contributing Guide. We look forward to reviewing your pull request shortly ✨

---

Support Chayn's mission? ⭐ Please star this repo to help us find more contributors like you! Learn more about Chayn here and explore our projects. 🌸