Created login / sign-up modal

Dinamically change user in the entire app

src/app/core/menu/menu.component.html

@@ -16,14 +16,16 @@
             </ng-container>
 
             <ng-template #notAuthTemplate>
-                <ion-list-header>
-                    <ion-avatar>
-                        <img
-                            src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"
-                        />
-                    </ion-avatar>
-                    <span>Guest</span>
-                </ion-list-header>
+                <ion-menu-toggle (click)="presentModal()" auto-hide="false" menu="main-content">
+                    <ion-item lines="none" detail="false">
+                        <ion-icon
+                            slot="start"
+                            [ios]="'home-outline'"
+                            [md]="'home-sharp'"
+                        ></ion-icon>
+                        <ion-list-header>Login/Sign-up</ion-list-header>
+                    </ion-item>
+                </ion-menu-toggle>
             </ng-template>
 
             <ng-template #authTemplate let-user="user">
@@ -39,7 +41,7 @@
                             [ios]="'home-outline'"
                             [md]="'home-sharp'"
                         ></ion-icon>
-                        <ion-list-header>{{ user.username }}</ion-list-header>
+                        <ion-list-header>{{ user.name }}</ion-list-header>
                         <!-- <ion-note>{{ user.email }}</ion-note> -->
                     </ion-item>
                 </ion-menu-toggle>

src/app/core/menu/menu.component.ts

@@ -1,39 +1,67 @@
 import { Component, Input, OnInit } from "@angular/core";
+import { ModalController } from "@ionic/angular";
+import { UserApiService } from "src/app/api/apis/users.api";
+
+import { UserDetail } from "./../../api/types/user-detail";
+import { LoginComponent } from "./../../shared/login/login.component";
 
 @Component({
     selector: "app-menu",
     templateUrl: "./menu.component.html",
-    styleUrls: ["./menu.component.scss"]
+    styleUrls: ["./menu.component.scss"],
 })
 export class MenuComponent implements OnInit {
     @Input() contentId: string;
 
-    isAuthenticated: boolean = true;
-    user = {
-        username: "MyUser",
-        email: "myUser@emai.com"
-    };
+    isAuthenticated;
+    user: UserDetail;
     appPages = [
         {
             url: "posts",
             icon: "smiley",
-            title: "All Posts"
+            title: "All Posts",
         },
         {
             url: "country",
             icon: "earth",
-            title: "By country"
+            title: "Maps",
         },
         {
             url: "about",
             icon: "about",
-            title: "About"
-        }
+            title: "About",
+        },
     ];
 
     public categories = ["Family", "Friends", "Notes", "Work", "Travel", "Reminders"];
 
-    constructor() {}
+    constructor(private userService: UserApiService, public modalController: ModalController) {
+        this.user = this.userService.getLoggedInUser();
+        if (this.user.name === "guest") {
+            this.isAuthenticated = false;
+        } else {
+            this.isAuthenticated = true;
+        }
+    }
 
     ngOnInit() {}
+
+    presentModal() {
+        const modal = this.modalController.create({
+            component: LoginComponent,
+            swipeToClose: true,
+            showBackdrop: true,
+        });
+        modal.then((x) => {
+            x.present();
+            x.onDidDismiss().then(() => {
+                this.user = this.userService.getLoggedInUser();
+                if (this.user.name === "guest") {
+                    this.isAuthenticated = false;
+                } else {
+                    this.isAuthenticated = true;
+                }
+            });
+        });
+    }
 }

src/app/pages/profile/profile.component.html

@@ -10,10 +10,17 @@
                         </ion-card-title>
                     </ion-card-header>
                     <ion-card-content>
-                        <ion-input [value]="user.username">Username</ion-input>
-                        <ion-input type="password">Password</ion-input>
+                        <ion-input [(ngModel)]="user.name" placeholder="Username"></ion-input>
+                        <ion-input
+                            [(ngModel)]="user.password"
+                            type="password"
+                            placeholder="Password"
+                        ></ion-input>
 
                         <ion-grid>
+                            <ion-row>
+                                <ion-text>Themes:</ion-text>
+                            </ion-row>
                             <ion-row>
                                 <ion-col>
                                     <ion-button expand="block" (click)="changeTheme(theme.Light)"
@@ -56,7 +63,13 @@
                             </ion-row>
                         </ion-grid>
 
-                        <ion-button fill="solid" type="submit">Submit</ion-button>
+                        <ion-button
+                            fill="solid"
+                            type="submit"
+                            (click)="updateUser()"
+                            [disabled]="!user.name || !user.password"
+                            >Submit</ion-button
+                        >
                     </ion-card-content>
                 </ion-card>
             </ion-col>

src/app/pages/profile/profile.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { UserApiService } from "src/app/api/apis/users.api";
 
 import { ThemeNames } from "../../shared/enums/theme-variables";
 import { ThemeService } from "../../shared/services/theme.service";
@@ -9,16 +10,23 @@ import { ThemeService } from "../../shared/services/theme.service";
     styleUrls: ["./profile.component.scss"],
 })
 export class ProfileComponent implements OnInit {
-    user = {
-        username: "MyUser",
-        email: "myUser@emai.com",
-    };
+    user;
     theme = ThemeNames;
+    oldUsername;
 
-    constructor(private themeService: ThemeService) {}
+    constructor(private themeService: ThemeService, private userService: UserApiService) {}
 
     changeTheme(name: string) {
         this.themeService.setTheme(name);
     }
-    ngOnInit() {}
+    ngOnInit() {
+        this.user = this.userService.getLoggedInUser();
+        this.oldUsername = this.user.name;
+    }
+
+    updateUser() {
+        if (!!this.user && !!this.user.name && !!this.user.password) {
+            this.userService.updateUser(this.oldUsername, this.user.name, this.user.password);
+        }
+    }
 }

src/app/shared/login/login.component.html

@@ -0,0 +1,46 @@
+<ion-content style="width: 100%; height: 100%;">
+    <ion-grid style="height: 100%;">
+        <ion-row style="height: 100%;" class="ion-justify-content-center ion-align-items-center">
+            <ion-col style="height: 90%;" sizeLg="12" sizeMd="12" sizeXs="12">
+                <ion-card style="height: 100%;">
+                    <ion-card-header>
+                        <ion-card-title *ngIf="!toggle">
+                            Login
+                        </ion-card-title>
+                        <ion-card-title *ngIf="toggle">
+                            Sign-up
+                        </ion-card-title>
+                    </ion-card-header>
+                    <ion-card-content>
+                        <ion-item *ngIf="loggedIn === false">
+                            <ion-text color="danger">Invalid username or password</ion-text>
+                        </ion-item>
+                        <ion-item>
+                            <ion-label>Login</ion-label>
+                            <ion-toggle [(ngModel)]="toggle"></ion-toggle>
+                            <ion-label class="ion-text-end">Sign Up</ion-label>
+                        </ion-item>
+
+                        <ion-item>
+                            <ion-input placeholder="Username" [(ngModel)]="username"></ion-input>
+                        </ion-item>
+                        <ion-item>
+                            <ion-input
+                                placeholder="Password"
+                                type="password"
+                                [(ngModel)]="password"
+                            ></ion-input>
+                        </ion-item>
+                        <ion-button
+                            fill="solid"
+                            type="submit"
+                            (click)="login()"
+                            [disabled]="!username || !password"
+                            >Submit</ion-button
+                        >
+                    </ion-card-content>
+                </ion-card>
+            </ion-col>
+        </ion-row>
+    </ion-grid>
+</ion-content>

src/app/shared/login/login.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from "@angular/core";
+import { ModalController } from "@ionic/angular";
+import { UserApiService } from "src/app/api/apis/users.api";
+
+@Component({
+    selector: "app-login",
+    templateUrl: "./login.component.html",
+    styleUrls: ["./login.component.scss"],
+})
+export class LoginComponent implements OnInit {
+    toggle = false;
+    username;
+    password;
+    loggedIn;
+
+    constructor(public modalCtrl: ModalController, private userService: UserApiService) {}
+
+    ngOnInit() {}
+
+    login() {
+        if (!!this.username && !!this.password) {
+            if (this.toggle) {
+                this.userService.signUp(this.username, this.password);
+                this.modalCtrl.dismiss();
+            } else {
+                this.loggedIn = this.userService.logIn(this.username, this.password);
+                if (this.loggedIn) {
+                    this.modalCtrl.dismiss();
+                }
+            }
+        }
+    }
+}

src/app/shared/shared.module.ts

@@ -11,6 +11,7 @@ import { MenuComponent } from "../core/menu/menu.component";
 import { ProfileComponent } from "../pages/profile/profile.component";
 import { AboutComponent } from "./about/about.component";
 import { CategoryCountriesComponent } from "./category-countries/category-countries.component";
+import { LoginComponent } from "./login/login.component";
 import { MapsComponent } from "./maps/maps.component";
 import { UploadComponent } from "./upload/upload.component";
 
@@ -23,6 +24,7 @@ import { UploadComponent } from "./upload/upload.component";
         ProfileComponent,
         UploadComponent,
         MapsComponent,
+        LoginComponent,
     ],
     imports: [
         CommonModule,
@@ -48,7 +50,9 @@ import { UploadComponent } from "./upload/upload.component";
         UploadComponent,
         AgmCoreModule,
         FormsModule,
+        LoginComponent,
     ],
     providers: [GoogleMapsAPIWrapper],
+    entryComponents: [LoginComponent],
 })
 export class SharedModule {}