Merge pull request #144 from CapstoneProjectCMC/feature/sap-service-and-payment

fix AI layout

Author: Fxdonad

src/app/core/interceptors/handle/error-handler.service.ts

@@ -26,6 +26,7 @@ export class ErrorHandlerService {
             cancelText: 'Hủy',
             onConfirm: () => {
               this.router.navigate(['/auth/identity/login']);
+              localStorage.removeItem('token');
             },
             onCancel: () => {
               sendNotification(this.store, errorStatus, errorMessage, 'error');

src/app/core/models/api-response.ts

@@ -25,6 +25,7 @@ export type loginResponse = {
   authenticated: boolean;
   enabled: boolean;
   active: boolean;
+  needPasswordSetup: boolean;
 };
 
 export interface IPaginationResponse<T> {

src/app/core/models/code.model.ts

@@ -36,6 +36,7 @@ export type ExerciseCodeResponse = {
   endTime: string; // ISO datetime
   duration: number; // minutes
   allowDiscussionId: string;
+  purchased: boolean;
   resourceIds: string[];
   tags: string[];
   allowAiQuestion: boolean;

src/app/core/models/exercise.model.ts

@@ -23,6 +23,7 @@ export type ExerciseItem = {
   freeForOrg: boolean;
   tags: Set<string>;
   createdAt: string;
+  purchased: boolean;
 };
 
 export type UserBasicInfo = {
@@ -101,6 +102,7 @@ export interface ExerciseQuiz {
   endTime: string;
   duration: number;
   allowDiscussionId: string;
+  purchased: boolean;
   resourceIds: string[];
   tags: string[];
   allowAiQuestion: boolean;

src/app/core/services/api-service/auth.service.ts

@@ -31,6 +31,13 @@ export class AuthService {
     );
   }
 
+  createInitialPassword(password: string) {
+    return this.api.post<ApiResponse<null>>(
+      API_CONFIG.ENDPOINTS.POST.CREATE_FIRST_PASSWORD,
+      { password }
+    );
+  }
+
   requestForgotPassword(email: string) {
     return this.api.post<ApiResponse<RequestForgotPasswordResponse>>(
       API_CONFIG.ENDPOINTS.POST.REQUEST_FORGOT_PASSWORD,

src/app/core/services/config-service/api.enpoints.ts

@@ -148,6 +148,7 @@ export const API_CONFIG = {
       LOGIN: '/identity/auth/login',
       REGISTER: '/identity/auth/register',
       LOGOUT: '/identity/auth/logout',
+      CREATE_FIRST_PASSWORD: '/identity/auth/user/create-password',
       REQUEST_FORGOT_PASSWORD: '/identity/auth/forgot-password/request',
       RESET_PASSWORD: `/identity/auth/forgot-password/reset`,
       REFRESH_TOKEN: '/identity/auth/refresh',

src/app/features/auth/components/modal/set-password-modal/set-password-modal.component.html

@@ -0,0 +1,41 @@
+<!-- set-password-modal.component.html -->
+<div class="modal-backdrop" *ngIf="isOpen" (click)="close()"></div>
+
+<div class="modal-wrapper" *ngIf="isOpen">
+  <div class="modal-content">
+    <h2>Đặt mật khẩu mới</h2>
+
+    <form (ngSubmit)="onSubmit()">
+      <div class="form-group">
+        <label for="password">Mật khẩu mới</label>
+        <input
+          id="password"
+          type="password"
+          [(ngModel)]="password"
+          name="password"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="confirmPassword">Nhập lại mật khẩu</label>
+        <input
+          id="confirmPassword"
+          type="password"
+          [(ngModel)]="confirmPassword"
+          name="confirmPassword"
+          required
+        />
+      </div>
+
+      <p class="error-message" *ngIf="errorMessage">{{ errorMessage }}</p>
+
+      <div class="actions">
+        <button type="button" class="btn cancel" (click)="close()">Hủy</button>
+        <button type="submit" class="btn confirm" [disabled]="isLoading">
+          {{ isLoading ? "Đang xử lý..." : "Xác nhận" }}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/app/features/auth/components/modal/set-password-modal/set-password-modal.component.scss

@@ -0,0 +1,118 @@
+/* set-password-modal.component.scss */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.3s ease forwards;
+  z-index: 1000;
+}
+
+.modal-wrapper {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  animation: slideIn 0.3s ease forwards;
+}
+
+h2 {
+  margin-bottom: 16px;
+  font-size: 20px;
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+
+  label {
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+
+  input {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #3f51b5;
+      box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
+    }
+  }
+}
+
+.error-message {
+  color: #d32f2f;
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+
+  .btn {
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    border: none;
+    font-size: 14px;
+    transition: all 0.2s ease;
+
+    &.cancel {
+      background: #e0e0e0;
+      &:hover {
+        background: #d5d5d5;
+      }
+    }
+
+    &.confirm {
+      background: #3f51b5;
+      color: white;
+      &:hover {
+        background: #303f9f;
+      }
+      &:disabled {
+        background: #9fa8da;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/app/features/auth/components/modal/set-password-modal/set-password-modal.component.ts

@@ -0,0 +1,64 @@
+// set-password-modal.component.ts
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AuthService } from '../../../../../core/services/api-service/auth.service';
+
+@Component({
+  selector: 'app-set-password-modal',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './set-password-modal.component.html',
+  styleUrls: ['./set-password-modal.component.scss'],
+})
+export class SetPasswordModalComponent {
+  @Input() isOpen = false;
+  @Output() closed = new EventEmitter<void>();
+
+  password = '';
+  confirmPassword = '';
+  isLoading = false;
+  errorMessage = '';
+
+  constructor(private authService: AuthService) {}
+
+  close() {
+    this.closed.emit();
+    this.resetForm();
+    this.isOpen = !this.isOpen;
+  }
+
+  resetForm() {
+    this.password = '';
+    this.confirmPassword = '';
+    this.errorMessage = '';
+    this.isLoading = false;
+  }
+
+  onSubmit() {
+    if (!this.password || !this.confirmPassword) {
+      this.errorMessage = 'Vui lòng nhập đầy đủ thông tin';
+      return;
+    }
+    if (this.password.length < 6) {
+      this.errorMessage = 'Mật khẩu phải có ít nhất 6 ký tự';
+      return;
+    }
+    if (this.password !== this.confirmPassword) {
+      this.errorMessage = 'Mật khẩu nhập lại không khớp';
+      return;
+    }
+
+    this.isLoading = true;
+    this.authService.createInitialPassword(this.password).subscribe({
+      next: () => {
+        this.isLoading = false;
+        this.close();
+        // Có thể bắn event success hoặc toast ở đây
+      },
+      error: () => {
+        this.isLoading = false;
+      },
+    });
+  }
+}

src/app/features/auth/pages/login/login.ts

@@ -70,6 +70,7 @@ export class Login {
     authenticated: false,
     enabled: false,
     active: false,
+    needPasswordSetup: false,
   };
 
   constructor(