Add language selection to forgot password page too

Frontend Angular 4/src/app/forgot-password/forgot-password.component.html

@@ -48,18 +48,35 @@
         </div>
       </form>
       <hr class="login-divider" />
+      <div class="flex flex-col justify-content-between align-items-center">
         <main-button
           text="i18n.links.login"
           [href]="loginUrl()"
           [titelize]="true"
         ></main-button>
-      <!-- <a
-        class="btn rounded-btn"
-        style="background: transparent; color: white; cursor: pointer"
-        [attr.href]="loginUrl()"
+        <div class="language-switcher mt-6">
+          <div ngbDropdown class="d-inline-block">
+            <button class="btn dropdown-toggle" ngbDropdownToggle>
+              <span
+                class="flag-icon flag-icon-{{ selectedLanguage.flagCode }}"
+              ></span>
+              {{ selectedLanguage.name }}
+            </button>
+            <div class="dropdown-menu" ngbDropdownMenu>
+              <div class="dropdown-menu-content">
+                <button
+                  class="dropdown-item"
+                  *ngFor="let lang of languages"
+                  (click)="onChangeLanguage(lang)"
                 >
-        {{ "i18n.links.login" | translate | titleCase }}
-      </a> -->
+                  <span class="flag-icon flag-icon-{{ lang.flagCode }}"></span>
+                  {{ lang.name }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

Frontend Angular 4/src/app/forgot-password/forgot-password.component.scss

@@ -144,5 +144,10 @@ $topnav-background-color: #222;
   }
   .dropdown-item {
     padding-left: 15px;
+    color: #ccc;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      color: #fff;
+    }
   }
 }

Frontend Angular 4/src/app/forgot-password/forgot-password.component.ts

@@ -11,13 +11,11 @@ import { TranslateService } from "@ngx-translate/core";
 })
 export class ForgotPasswordComponent implements OnInit {
   languages = [
-    { id: 0, name: "Español", code: "es", flagCode: "es" },
+    { id: 0, name: "Español", code: "es", flagCode: "uy" },
     { id: 1, name: "English", code: "en", flagCode: "us" },
   ];
 
-  model: any = {
-    language: this.languages[0],
-  };
+  selectedLanguage: any;
 
   loading = false;
   error = false;
@@ -36,19 +34,10 @@ export class ForgotPasswordComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    console.log("this.route", this.route.snapshot.data["language"]);
-    console.log("return", this.route.snapshot.queryParams["returnUrl"]);
-
-    let currentSession = localStorage.getItem("currentUser");
-    let langCode = currentSession ? JSON.parse(currentSession).language : "es";
-    if (langCode) {
-      this.model.language = this.getLanguageElementByCode(langCode);
-    }
-
-    this.model.language = this.getLanguageElementByCode(
-      this.route.snapshot.data["language"]
-    );
-    this.translate.use(this.model.language.code);
+    this.selectedLanguage =
+      this.languages.find(
+        (lang) => lang.code === (this.translate.currentLang || "es")
+      ) || this.languages[0];
 
     // reset login status
     this.authenticationService.logout();
@@ -58,12 +47,8 @@ export class ForgotPasswordComponent implements OnInit {
   }
 
   forgotPassword() {
-    // this.router.navigate([this.returnUrl]);
     this.loading = true;
 
-    var that = this;
-
-    this.translate.use(this.model.language.code);
     this.authenticationService.forgotPassword(this.user).subscribe(
       (data) => {
         console.log(data);
@@ -82,39 +67,13 @@ export class ForgotPasswordComponent implements OnInit {
     );
   }
 
-  // invitado() {
-  //   this.loading = true;
-
-  //   this.authenticationService
-  //     .login("invitado", "invitado", this.model.language.code)
-  //     .subscribe(
-  //       (data) => {
-  //         this.router.navigate([this.returnUrl]);
-  //         this.sessionService.reset();
-  //       },
-  //       (error) => {
-  //         this.loading = false;
-  //       }
-  //     );
-  // }
-
-  onChangeLanguage(lang) {
-    this.model.language = lang;
-    this.translate.use(this.model.language.code);
-  }
-
-  getLanguageElementByCode(code) {
-    let langElement = null;
-    for (let lang of this.languages) {
-      if (lang.code === code) {
-        langElement = lang;
-        break;
-      }
-    }
-    return langElement;
+  onChangeLanguage(lang: any) {
+    this.selectedLanguage = lang;
+    this.translate.use(lang.code);
+    localStorage.setItem("lastUserLanguage", lang.code);
   }
 
   loginUrl() {
-    return `/#/${this.model.language.code}/login`;
+    return `/${this.selectedLanguage.code}/login`;
   }
 }