Skip to content
Snippets Groups Projects
Commit c2d49d8f authored by narindra.rajohnso's avatar narindra.rajohnso
Browse files

feat: add interface for list users and add modal

parent 8cd4a5d8
No related branches found
No related tags found
No related merge requests found
Showing
with 356 additions and 27 deletions
......@@ -4,6 +4,11 @@ import { LoginComponent } from "./login/login.component";
import {SignInComponent} from "./login/sign-in/sign-in.component";
import {SignUpComponent} from "./login/sign-up/sign-up.component";
import {ManageComponent} from "./manage/manage.component";
import {ListUsersComponent} from "./manage/list-users/list-users.component";
import {ListQuestionsComponent} from "./manage/list-questions/list-questions.component";
import {CreateUserComponent} from "./manage/create-user/create-user.component";
import {CreateQuestionComponent} from "./manage/create-question/create-question.component";
import {AccountDetailsComponent} from "./manage/account-details/account-details.component";
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
......@@ -26,7 +31,36 @@ const routes: Routes = [
}
]
},
{ path: ':admin/manage', component: ManageComponent }
{ path: ':admin/manage',
component: ManageComponent,
children: [
{
path: '',
redirectTo: 'list-users',
pathMatch: 'full'
},
{
path: 'list-users',
component: ListUsersComponent
},
{
path: 'list-questions',
component: ListQuestionsComponent
},
{
path: 'create-user',
component: CreateUserComponent
},
{
path: 'create-question',
component: CreateQuestionComponent
},
{
path: 'account-details',
component: AccountDetailsComponent
}
]
}
];
......
......@@ -6,12 +6,18 @@ import { AppComponent } from './app.component';
import { SignInComponent } from './login/sign-in/sign-in.component';
import { SignUpComponent } from './login/sign-up/sign-up.component';
import { LoginComponent } from './login/login.component';
import {CommonModule} from "@angular/common";
import {CommonModule, NgOptimizedImage} from "@angular/common";
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ErrorloginComponent } from './login/errorlogin/errorlogin.component';
import { ManageComponent } from './manage/manage.component';
import { ListUsersComponent } from './manage/list-users/list-users.component';
import { ListQuestionsComponent } from './manage/list-questions/list-questions.component';
import { CreateUserComponent } from './manage/create-user/create-user.component';
import { CreateQuestionComponent } from './manage/create-question/create-question.component';
import { AccountDetailsComponent } from './manage/account-details/account-details.component';
import { AlertAddComponent } from './manage/alert-add/alert-add.component';
......@@ -22,7 +28,13 @@ import { ManageComponent } from './manage/manage.component';
SignUpComponent,
LoginComponent,
ErrorloginComponent,
ManageComponent
ManageComponent,
ListUsersComponent,
ListQuestionsComponent,
CreateUserComponent,
CreateQuestionComponent,
AccountDetailsComponent,
AlertAddComponent
],
imports: [
BrowserModule,
......@@ -30,7 +42,8 @@ import { ManageComponent } from './manage/manage.component';
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule
HttpClientModule,
NgOptimizedImage
],
providers: [],
bootstrap: [AppComponent]
......
import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';
import {FormControl, FormGroup, Validators} from "@angular/forms";
export enum ErrorLogin {
PassConfirm ,
......@@ -28,4 +29,32 @@ export class LoginService {
const hash = CryptoJS.SHA256(password);
return hash.toString(CryptoJS.enc.Base64);
}
formDataCreate():FormGroup{
return new FormGroup({
username: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
firstname: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
lastname: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
email: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
password: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
accountType: new FormControl("User", {
updateOn: 'change'
})
});
}
}
......@@ -16,29 +16,7 @@ export class SignUpComponent{
ngOnInit() {
this.errorOccured=false;
this.formData = new FormGroup({
username: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
firstname: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
lastname: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
email: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
password: new FormControl(null, {
updateOn: 'change',
validators: [Validators.required],
}),
accountType: new FormControl(0)
});
this.formData = this.loginService.formDataCreate();
}
......@@ -53,6 +31,7 @@ export class SignUpComponent{
return;
}
this.formData.value.password = this.loginService.hashPassword(this.formData.value.password);
this.formData.value.accountType=0;
this.httpClient.post<any>('http://localhost:30992/api/v1/guest/create-account', this.formData.value).subscribe(
response => {
console.log(response); // Affiche la réponse du serveur dans la console
......
<p>account-details works!</p>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AccountDetailsComponent } from './account-details.component';
describe('AccountDetailsComponent', () => {
let component: AccountDetailsComponent;
let fixture: ComponentFixture<AccountDetailsComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [AccountDetailsComponent]
});
fixture = TestBed.createComponent(AccountDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
@Component({
selector: 'app-account-details',
templateUrl: './account-details.component.html',
styleUrls: ['./account-details.component.css']
})
export class AccountDetailsComponent {
}
<div
role="alert"
class="rounded-xl border border-gray-100 bg-white p-4 shadow-xl"
>
<div class="flex items-start gap-4">
<span class="text-green-600">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
<div class="flex-1">
<strong class="block font-medium text-gray-900"> Ajout d'utilisateur </strong>
<p class="mt-1 text-sm text-gray-700">
L'utilisateur a été ajouté avec succès
</p>
</div>
</div>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AlertAddComponent } from './alert-add.component';
describe('AlertAddComponent', () => {
let component: AlertAddComponent;
let fixture: ComponentFixture<AlertAddComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [AlertAddComponent]
});
fixture = TestBed.createComponent(AlertAddComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
@Component({
selector: 'app-alert-add',
templateUrl: './alert-add.component.html',
styleUrls: ['./alert-add.component.css']
})
export class AlertAddComponent {
}
<p>create-question works!</p>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CreateQuestionComponent } from './create-question.component';
describe('CreateQuestionComponent', () => {
let component: CreateQuestionComponent;
let fixture: ComponentFixture<CreateQuestionComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [CreateQuestionComponent]
});
fixture = TestBed.createComponent(CreateQuestionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
@Component({
selector: 'app-create-question',
templateUrl: './create-question.component.html',
styleUrls: ['./create-question.component.css']
})
export class CreateQuestionComponent {
}
<div
class="overflow-x-hidden overflow-y-auto fixed top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center h-modal sm:h-full">
<div class="relative w-full max-w-2xl px-4 h-full md:h-auto">
<!-- Modal content -->
<div class="bg-white rounded-lg shadow relative">
<!-- Modal header -->
<div class="flex items-start justify-between p-5 border-b rounded-t">
<h3 class="text-xl font-semibold">
Ajouter un utilisateur
</h3>
<button type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<!-- Modal body -->
<form [formGroup]="formData"
enctype="multipart/form-data"
(submit)="addUser($event)">
<div class="p-6 space-y-6">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="first-name" class="text-sm font-medium text-gray-900 block mb-2">Prénom</label>
<input type="text" id="first-name" formControlName="firstname"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
placeholder="John">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="lastname" class="text-sm font-medium text-gray-900 block mb-2">Nom de famille</label>
<input type="text" id="lastname" formControlName="lastname"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
placeholder="Doe">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="email" class="text-sm font-medium text-gray-900 block mb-2">Email</label>
<input type="email" id="email" formControlName="email"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
placeholder="example@company.com">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="username" class="text-sm font-medium text-gray-900 block mb-2">Nom d'utilisateur</label>
<input type="text" id="username" formControlName="username"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
placeholder="johndoe74">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="password" class="text-sm font-medium text-gray-900 block mb-2">Mot de passe</label>
<input type="password" id="password" formControlName="password"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
placeholder="***********">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="user" class="text-sm font-medium text-gray-900 block mb-2">Type</label>
<label for="user" class="mr-2">Utilisateur</label>
<input type="radio" id="user" formControlName="accountType" value="User" class="mr-4">
<label for="admin" class="mr-2">Administrateur</label>
<input type="radio" id="admin" formControlName="accountType" value="Admin" class="mr-4">
</div>
</div>
</div>
<!-- Modal footer -->
<div class="items-center p-6 border-t border-gray-200 rounded-b">
<button
class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
type="submit">Ajouter un utilisateur
</button>
</div>
</form>
</div>
</div>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CreateUserComponent } from './create-user.component';
describe('CreateUserComponent', () => {
let component: CreateUserComponent;
let fixture: ComponentFixture<CreateUserComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [CreateUserComponent]
});
fixture = TestBed.createComponent(CreateUserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {ErrorLogin, LoginService} from "../../login/login.service";
import {HttpClient} from "@angular/common/http";
import {ManageService} from "../manage.service";
@Component({
selector: 'app-create-user',
templateUrl: './create-user.component.html',
styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit{
formData!: FormGroup;
errorOccured!: boolean;
selectedRadio!:string;
@Output() closeModal: EventEmitter<void> = new EventEmitter<void>();
constructor(private httpClient: HttpClient, private loginService: LoginService, private manageService: ManageService) {
}
ngOnInit() {
this.errorOccured=false;
this.formData = this.loginService.formDataCreate();
}
addUser(event: Event) {
event.preventDefault();
this.errorOccured=false;
this.formData.value.password = this.loginService.hashPassword(this.formData.value.password);
if(this.formData.value.accountType === "User")
this.formData.value.accountType = 0;
else
this.formData.value.accountType = 1;
this.httpClient.post<any>('http://localhost:30992/api/v1/admin/'+this.manageService.username+'/create-user-account', this.formData.value).subscribe(
response => {
console.log(response); // Affiche la réponse du serveur dans la console
// Effectuer une action en fonction de la réponse du serveur ici
},
error => {
this.errorOccured=true;
if(error.error.message === "USER_EXIST"){
this.loginService.actualError=ErrorLogin.UserNameExist;
}
}
);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment