flare-ui/src/app/components/user-info/user-info.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-info',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="user-info-container">
      <h2>User Information</h2>

      <div class="card">
        <div class="card-body">
          <p class="text-muted">Password change functionality coming soon...</p>

          <form (ngSubmit)="changePassword()" #passwordForm="ngForm">
            <div class="form-group">
              <label for="currentPassword">Current Password</label>
              <input
                type="password"
                id="currentPassword"
                name="currentPassword"
                [(ngModel)]="currentPassword"
                required
                disabled
              >
            </div>

            <div class="form-group">
              <label for="newPassword">New Password</label>
              <input
                type="password"
                id="newPassword"
                name="newPassword"
                [(ngModel)]="newPassword"
                required
                disabled
              >
            </div>

            <div class="form-group">
              <label for="confirmPassword">Confirm New Password</label>
              <input
                type="password"
                id="confirmPassword"
                name="confirmPassword"
                [(ngModel)]="confirmPassword"
                required
                disabled
              >
            </div>

            <button type="submit" class="btn btn-primary" disabled>
              Change Password
            </button>
          </form>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .user-info-container {
      h2 {
        margin-bottom: 1.5rem;
      }
    }

    .text-muted {
      color: #6c757d;
      margin-bottom: 1rem;
    }
  `]
})
export class UserInfoComponent {
  currentPassword = '';
  newPassword = '';
  confirmPassword = '';

  changePassword() {
    console.log('Password change not implemented yet');
  }
}