nihira2020/angular17_authapp

How nihira2020/angular17_authapp works

Authapp is an Angular frontend for account authentication, user/role administration, and customer management. Users enter through the routed application: they can register and confirm an OTP, sign in, or use password recovery; authenticated users can then manage customers, users, and role permissions. The services issue HTTP requests to an external API, while a route guard checks local login state and requests menu permission. Major screen capabilities are represented from the route table and component tree; only the sampled components and services support detailed call edges.

Main entry points: app.routes.ts Route table · user.service.ts User service · app.component.ts Angular shell · customer.service.ts Customer service

Components 22

Application shell

Angular shell src/app/app.component.ts
Route table src/app/app.routes.ts
Home src/app/component/home/home.component.ts
App menu src/app/component/appmenu/appmenu.component.ts

Authentication

Auth screens src/app/component
Register src/app/component/register/register.component.ts
Confirm OTP src/app/component/confirmotp/confirmotp.component.ts
Login src/app/component/login/login.component.ts
Forgot password src/app/component/forgetpassword/forgetpassword.component.ts
Reset password src/app/component/resetpassword/resetpassword.component.ts
Update password src/app/component/updatepassword/updatepassword.component.ts

User administration

User list src/app/component/user/user.component.ts
User update src/app/component/userupdate/userupdate.component.ts
Role permissions src/app/component/userrole/userrole.component.ts

Customer management

Customer list src/app/component/customer/customer.component.ts
Customer form src/app/component/addcustomer/addcustomer.component.ts
Customer service src/app/_service/customer.service.ts

Access and API

Auth guard src/app/_guard/auth.guard.ts
User service src/app/_service/user.service.ts
Token interceptor src/app/_service/token.interceptor.ts
Backend API

Other components

User

Connections 30

User → Angular shell: opens app
Angular shell → Route table: hosts outlet
Route table → Home: routes to
Route table → Register: routes to
Route table → Login: routes to
Route table → Confirm OTP: routes to
Route table → Forgot password: routes to
Route table → Reset password: routes to
Route table → Update password: routes to
Route table → Customer list: routes to
Route table → Customer form: routes to
Route table → User list: routes to
Route table → Role permissions: routes to
Route table → Auth guard: guards routes
Angular shell → App menu: renders
Auth guard → User service: checks permission
Register → User service: submits registration
Confirm OTP → User service: confirms registration
Login → User service: requests login
Forgot password → User service: requests recovery
Reset password → User service: resets password
Update password → User service: updates password
User list → User service: manages users
User update → User service: updates user
Role permissions → User service: manages permissions
Customer form → Customer service: creates or edits
Customer list → Customer service: manages customers
User service → Backend API: HTTP requests
Customer service → Backend API: HTTP requests
Token interceptor → Backend API: intercepts requests

More TypeScript diagrams: steipete/conduit-mcp · stloendays/superpower · typeorm/react-native-example · vindiar/file-organizer · vonsim/vonsim

Drawn by GitDiagram on September 26, 2026 from the repository's file tree, README and source files. Read as Markdown ·