feat: add choose language on login page

- Add icon to check which langage is selected Reviewed-by: andriacap
PnX-SI · Oct 25, 2024 · 37e4816 · 37e4816
1 parent 89089bb
commit 37e4816
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 15 deletions.
diff --git a/admin/src/app/header/header.component.html b/admin/src/app/header/header.component.html
@@ -42,9 +42,12 @@
         </a>
         <div class="dropdown-menu dropdown-menu-right" ngbDropdownMenu>
           <div *ngFor="let lang of availableLanguages">
-            <button class="dropdown-item" (click)="changeLanguage(lang)">
-              {{ 'LANGUAGES.'+lang | translate }}
-            </button>
+            <div class="icon-wrapper">
+              <button class="dropdown-item" (click)="changeLanguage(lang)">
+                {{ 'LANGUAGES.' + lang | translate }}
+              </button>
+              <i *ngIf="lang === selectedLanguage" class="icon-checkmark"></i>
+            </div>
           </div>
         </div>
         <div class="selected-language">

diff --git a/admin/src/app/header/header.component.scss b/admin/src/app/header/header.component.scss
@@ -76,7 +76,7 @@ li {
 .language{
   padding-bottom: 3px;
   padding-left: 0px;
-  padding-right: 20px;
+  padding-right: 30px;
   .icon-earth{
     font-size: 26px
   }
@@ -85,4 +85,11 @@ li {
   text-align: center;
   font-size: 14px;
   margin-top: 5px;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-right: 20px;
 }
diff --git a/admin/src/app/login-page/login-page.component.html b/admin/src/app/login-page/login-page.component.html
@@ -1,5 +1,29 @@
 <div class="login-page" >
-    <img class="logo" [src]="logoUrl"  > 
+  <div class="header">
+    <div><img class="logo" [src]="logoUrl" alt="Logo"></div>
+    <div class="dropdown-container" ngbDropdown>
+      <div class="icon-language-toggle">
+        <a class="dropdown-toggle" ngbDropdownToggle>
+          <i class="icon-earth"></i>
+        </a>
+          <div class="selected-language">
+            {{ 'LANGUAGES.'+selectedLanguage | translate }}
+          </div>
+      </div>
+      <div class="dropdown-menu dropdown-menu-right" ngbDropdownMenu>
+        <div *ngFor="let lang of availableLanguages">
+          <div class="icon-wrapper">
+          <button class="dropdown-item" (click)="changeLanguage(lang)">
+            {{ 'LANGUAGES.' + lang | translate }}
+          </button>
+          <i *ngIf="lang === selectedLanguage" class="icon-checkmark"></i>
+        </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
   <div class="container">
     <div class="row">
       <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">

diff --git a/admin/src/app/login-page/login-page.component.scss b/admin/src/app/login-page/login-page.component.scss
@@ -1,20 +1,18 @@
+
 .login-page {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   flex: 1 0 auto;
   width: 100%;
   min-height: 100vh;
-  background: url('/assets/images/dark-material-bg.jpg') no-repeat;
+  background: url('/assets/images/dark-material-bg.jpg') no-repeat center center;
   background-size: cover;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
 
 .logo {
-  position: absolute;
-  left: 20px;
-  top: 20px;
-  max-width: 30%;
+  max-width: 50%;
 }
 
 .form-control {
@@ -82,3 +80,67 @@
   z-index: 1;
   font-size: 25px;
 }
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px; /* ajustez la hauteur selon vos besoins */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 25px;
+  padding: 10px 20px; /* espace autour du logo et de l'icône */
+  z-index: 1000; /* pour s'assurer que le header est au-dessus du reste */
+}
+
+.container {
+  padding-top: 80px;
+}
+
+
+.dropdown-container {
+  display: flex;
+  align-items: center;
+}
+
+
+.icon-language-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+.selected-language {
+  color: white;
+  font-size: 14px;
+  margin-top: 5px; /* Espace entre l'icône et la langue */
+}
+
+.icon-language-toggle {
+  color:white;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon-language-toggle .icon-earth {
+  font-size: 24px;
+}
+
+.icon-language-toggle .selected-language {
+  margin-left: 8px;
+}
+
+.icon-language-toggle .dropdown-arrow {
+  font-size: 24px; /* Ajustez selon vos préférences */
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0px 10px 2px 2px;
+}
diff --git a/admin/src/app/login-page/login-page.component.ts b/admin/src/app/login-page/login-page.component.ts
@@ -17,7 +17,8 @@ export class LoginPageComponent implements OnInit {
   userForm: any;
   currentUser: User;
   logoUrl: string;
-  currentLang: string;
+  availableLanguages: string[] = [];
+  selectedLanguage: string;
 
   constructor(
     private loginService: LoginService,
@@ -28,7 +29,10 @@ export class LoginPageComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.currentLang =  this.languageService.getCurrentLang();
+    this.selectedLanguage = this.languageService.getCurrentLang();
+    this.languageService.getAvailableLanguages().subscribe(languages => {
+      this.availableLanguages = languages;
+    });
     this.logoUrl = `${Conf.customFiles}images/logo_txt_blanc.png`;
     this.loginForm = this.formBuilder.group({
       login: ['', Validators.required],
@@ -76,4 +80,9 @@ export class LoginPageComponent implements OnInit {
     }
     return 'required';
   }
+
+  changeLanguage(lang: string) {
+    this.languageService.changeLanguage(lang);
+    this.selectedLanguage = lang;
+  }
 }