angular-user-mgmt

A simple Angular 15 application with UI for typical user management operations:

• signup (registration) via email/password
• signin (login)
• forgot password (send user email with link to reset password)
• update profile page information (name, address, email, password, profile photo, etc)

The goal of this repository is to provide an example of user management in a modern web application.

The code in this repository is example code, and is not production ready. Use it at your own risk. Enhance this code and perform all necessary tests to ensure it is secure and bug free if you use it in your projects.

This application uses these technologies:

• Angular 15.2
• Angular Material
• ngx-toastr
• SASS (for styling, supercharged CSS)
• TypeScript
• rxjs BehaviorSubject, Observable

The application includes these architectural features:

• Angular routing
• Guard (for routes requiring login)
• Constants files
• Utility files
• Services (auth service, http service, local storage service, user service, etc.)
• Components (common components, page components, page template components, sub-components, etc.)
• Responsive web design (media queries)

This application is designed to be used with this example backend

Simply clone the examplae backend repository, and place it in a folder named "server" at the same level as this repositories "client" folder.

Running the Angular Application

• clone this repository
• open a shell window and CD to the "client/user-mgmt" directory
• execute "npm install" to install the required npm packages
• follow this blog post to create a localhost certificate and place them in the root of where this repository is cloned
• execute "npm start" to start the application ("ng serve --ssl true --ssl-key ../../localhost-key.pem --ssl-cert ../../localhost.pem")
• View the application via this browser url: https://localhost:4200 (you might need to do this in a Chrome incognito window)

You'll get errors if you try to use the Angular app as you have not yet started the backend. See the example backend repository for instructions on setting up and running the backend.

Overview of the Application

Here is the application home page:

Here is the signin popup:

You can toggle between signin/signup in that one popup:

If you click forgot password, you'll be prompted for your email address, and then you will receive an email auto-sent by the server with a link. When clicked the Angular app automatically launches and displays the reset password screen where you can enter a new password. The reset password link expires in one hour.

After logging in you will be directed to the user profile page, where you can enter additional, optional information, change your email, password, upload a profile photo:

If you reduce the browser width the profile page will display fields in a single column (responsive design with media queries)