Chat Frontend 💬

An Angular-based web application for real-time chat. Users can register, login, create chat rooms, and exchange messages with other users.

Features ✨

• User Authentication: Register and login with JWT tokens
• Chat Rooms: Create and browse chat rooms
• Real-Time Messaging: Send and receive messages in chat rooms
• User-Friendly UI: Clean, responsive interface
• Token Management: Secure JWT token storage and handling
• Protected Routes: Authentication guard for chat pages

Technology Stack

• Angular 17 - Modern web framework
• TypeScript - Type-safe JavaScript
• RxJS - Reactive programming
• Angular Forms - Form handling (FormsModule)
• HttpClient - HTTP communication
• CSS3 - Responsive styling

Prerequisites

• Node.js 18+ and npm
• Angular CLI 17+

Installation & Setup

1. Navigate to the project directory:

   cd chat-frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

   Or use:

   ng serve

The application will be available at http://localhost:4200

Build for Production

npm run build

Output will be in the dist/chat-frontend directory.

Project Structure

chat-frontend/
├── src/
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
│   └── app/
│       ├── app.component.ts
│       ├── app.component.css
│       ├── app.routes.ts
│       ├── components/
│       │   ├── login/
│       │   │   ├── login.component.ts
│       │   │   ├── login.component.html
│       │   │   └── login.component.css
│       │   └── chat/
│       │       ├── chat.component.ts
│       │       ├── chat.component.html
│       │       └── chat.component.css
│       ├── services/
│       │   ├── auth.service.ts
│       │   └── chat.service.ts
│       ├── models/
│       │   ├── user.model.ts
│       │   └── chat.model.ts
│       └── guards/
│           └── auth.guard.ts
├── package.json
├── angular.json
├── tsconfig.json
├── tsconfig.app.json
└── README.md

API Integration

The frontend communicates with two backend services:

Auth Service (Python FastAPI)

• Base URL: http://localhost:8000
• Endpoints:
  • POST /auth/register - Register new user
  • POST /auth/login - Login and get JWT token
  • GET /auth/verify - Verify token validity
  • GET /auth/me - Get current user info

Chat Backend (Java Spring Boot)

• Base URL: http://localhost:8080/api
• Endpoints:
  • GET /rooms - Get all chat rooms
  • POST /rooms - Create new room (requires JWT)
  • GET /messages?roomId=X - Get messages in a room
  • POST /messages - Send a message (requires JWT)

Usage

1. Register a New User

1. Click "Register" on the login page
2. Enter username, email, and password
3. Click "Register" button
4. You'll be redirected to login

2. Login

1. Enter your username and password
2. Click "Login" button
3. You'll be redirected to the chat page

3. Create a Chat Room

1. Click "+ New Room" in the sidebar
2. Enter room name and optional description
3. Click "Create" button

4. Send Messages

1. Select a room from the sidebar
2. Type your message in the text area
3. Press Enter or click "Send" button
4. Your message will appear in the chat

Configuration

Edit the service URLs in your components or services:

Auth Service URL (in auth.service.ts):

private authUrl = 'http://localhost:8000/auth';

Chat Backend URL (in chat.service.ts):

private backendUrl = 'http://localhost:8080/api';

Authentication Flow

1. Registration: User provides username, email, password

   • Frontend sends to Auth Service
   • Auth Service hashes password and stores user

2. Login: User provides username and password

   • Frontend sends to Auth Service
   • Auth Service validates and returns JWT token
   • Frontend stores token in localStorage

3. Protected Requests: All chat operations

   • Frontend includes JWT in Authorization: Bearer <token> header
   • Backend validates token signature
   • Request proceeds if token is valid

4. Token Storage: JWT stored in browser localStorage

   • Persists across page refreshes
   • Cleared on logout

Token Management

The AuthService provides methods for token management:

// Save token after login
authService.saveToken(token);

// Get stored token
const token = authService.getToken();

// Check if user is authenticated
if (authService.isAuthenticated()) { ... }

// Get headers with token for API calls
const headers = authService.getAuthHeaders();

// Logout (clears token)
authService.logout();

Error Handling

The application handles common errors:

• Invalid Credentials: "Invalid credentials" message on login
• User Exists: "User already exists" message during registration
• Network Errors: "Failed to load rooms/messages" alerts
• Token Expired: Auto-redirect to login if token is invalid

Security Features

• JWT Authentication: Secure token-based authentication
• Password Hashing: Passwords hashed with bcrypt on auth service
• Protected Routes: AuthGuard prevents access to chat without login
• CORS: Configured for localhost development
• Secure Headers: Authorization headers sent with all protected requests

⚠️ Development Only: This configuration is for development. For production:

• Use HTTPS for all communications
• Update CORS allowed origins
• Use environment-specific configurations
• Implement token refresh mechanism
• Add rate limiting
• Secure JWT secret on backend

Troubleshooting

Port 4200 already in use?

ng serve --port 4201

CORS errors?

• Ensure auth service is running on http://localhost:8000
• Ensure chat backend is running on http://localhost:8080
• Check CORS configuration in both backend services

Blank page after login?

• Check browser console for errors
• Verify token is being saved in localStorage
• Check network tab for API call failures

Messages not loading?

• Verify chat backend is running
• Check that room ID is valid
• Ensure JWT token is valid (not expired)

Can't create rooms?

• Verify you're logged in (token in localStorage)
• Check that auth service is running
• Verify chat backend is running

Testing

Example flow using the UI:

1. Open http://localhost:4200 in browser
2. Register a new user (e.g., username: testuser, email: [email protected])
3. Login with those credentials
4. Create a new room (e.g., "General")
5. Send a message
6. Open another browser/incognito window and repeat steps 2-3
7. You should see the same rooms and messages from both users

Performance Tips

• Messages are loaded once when a room is selected
• Auto-scroll to latest message implemented
• Responsive design works on mobile devices
• Lazy loading of routes with Angular Router

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

License

MIT