✨ update user info added

Author: marcode24

src/app/core/components/sidebar/sidebar.component.html

@@ -40,7 +40,7 @@
           src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"
           alt="img-user">
       </figure>
-      <span class="username"> {{userActive.email }} </span>
+      <span class="username"> {{ getName }} </span>
     </div>
   </div>
 

src/app/core/components/sidebar/sidebar.component.ts

@@ -47,4 +47,9 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
     this.userActive = this.authService.getUserActive;
   }
 
+  get getName(): string {
+    const { name, lastName, email } = this.userActive;
+    return (name && name?.length > 0) ? `${name} ${lastName || ''}` : email;
+  }
+
 }

src/app/core/interfaces/response.interface.ts

@@ -15,7 +15,12 @@ export interface IResponseWebsite {
 }
 
 export interface IResponseLogin {
-  ok: true,
+  ok: boolean,
   token: string,
   user: User,
 };
+
+export interface IResponseUser {
+  ok: boolean,
+  msg: string;
+}

src/app/core/interfaces/user.interface.ts

@@ -0,0 +1,4 @@
+export interface IUser {
+  readonly name: string;
+  readonly lastName: string;
+}

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

@@ -1,5 +1,5 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { catchError, map, Observable, of, Subject, tap } from 'rxjs';
+import { catchError, map, Observable, of } from 'rxjs';
 import { environment } from 'environments/environment';
 import { HttpClient } from '@angular/common/http';
 
@@ -80,4 +80,9 @@ export class AuthService {
     }))
   }
 
+  setNewUserInfo(name: string, lastName: string): void {
+    this.userActive.name = name;
+    this.userActive.lastName = lastName
+  }
+
 }

src/app/core/services/user.service.ts

@@ -3,6 +3,10 @@ import { Injectable } from '@angular/core';
 import { environment } from 'environments/environment';
 
 import Storage from '@utils/storage.util';
+import { IUser } from '@interfaces/user.interface';
+import { map, Observable } from 'rxjs';
+import { IResponseUser } from '@interfaces/response.interface';
+import { AuthService } from './auth.service';
 
 const base_url = environment.base_url;
 
@@ -20,7 +24,8 @@ export class UserService {
   }
 
   constructor(
-    private http: HttpClient
+    private http: HttpClient,
+    private authService: AuthService,
   ) { }
 
   modifyPreferences(resourceID: string, filter: 'subscription' | 'read' | 'saved') {
@@ -30,7 +35,15 @@ export class UserService {
 
   setTheme(darkMode: boolean): void {
     const url = `${base_url}/user/theme`;
-    this.http.patch(url, { darkMode }, this.headers).subscribe(resp => console.log({resp}));
+    this.http.patch(url, { darkMode }, this.headers).subscribe();
+  }
+
+  updateUserInfo(data: IUser): Observable<boolean> {
+    const url = `${base_url}/user`;
+    return this.http.patch<IResponseUser>(url, data, this.headers).pipe(map(resp => {
+      this.authService.setNewUserInfo(data.name, data.lastName);
+      return resp.ok;
+    }));
   }
 
 }

src/app/core/utils/regex.util.ts

@@ -1,4 +1,5 @@
 export class RegexExpressions {
   public static readonly EMAIL = /^((?!\.)[\w\-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/;
   public static readonly PASSWORD = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=.\-_*])([a-zA-Z0-9@#$%^&+=*.\-_]){5,40}$/;
+  public static readonly TEXT = /^([a-zA-Z\ñÀ-ú]+(\s?[a-zA-Z\ñÀ-ú])){2,20}$/;
 }

src/app/features/settings/components/components.module.ts

@@ -2,13 +2,16 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { UserFormComponent } from './user-form/user-form.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
     UserFormComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
   ],
   exports: [
     UserFormComponent

src/app/features/settings/components/user-form/user-form.component.css

@@ -1,16 +1,16 @@
-/* label.floating span {
-  top: -24px;
-  transform: translateY(17px);
-}
-
-label.floating:focus-within > span,
-input:not(:placeholder-shown) + span {
-  transform: translateY(7px);
-} */
-
 form {
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
+
+.message {
+  color: var(--primary-color);
+  margin-left: 5px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+}

src/app/features/settings/components/user-form/user-form.component.html

@@ -1,15 +1,33 @@
-<form>
-  <label for="email-user" class="floating">
-    <input type="text" id="email-user" placeholder="email">
-    <span>Email</span>
-  </label>
-  <label for="name" class="floating">
-    <input type="text" id="name" placeholder="email">
-    <span>Name</span>
-  </label>
-  <label for="lastName" class="floating">
-    <input type="text" id="lastName" placeholder="email">
-    <span>Lastname</span>
-  </label>
-  <button class="btn btn-primary btn-lg">Save</button>
+<form [formGroup]="userForm" (submit)="updateUserInfo()">
+  <div class="input-group">
+    <label for="email" class="floating">
+      <input formControlName="email" type="text" id="email" placeholder="email">
+      <span>Email</span>
+    </label>
+    <div *ngIf="validateForm('email')" class="text-error">
+      <span *ngIf="validateField('email', 'required')" class="error">must provide an email</span>
+      <span *ngIf="validateField('email', 'pattern')" class="error">email format wrong</span>
+    </div>
+  </div>
+  <div class="input-group">
+    <label for="name" class="floating">
+      <input formControlName="name" type="text" id="name" placeholder="email">
+      <span>Name</span>
+    </label>
+    <div *ngIf="validateForm('name')" class="text-error">
+      <span *ngIf="validateField('name', 'required')" class="error">must provide a name</span>
+      <span *ngIf="validateField('name', 'pattern')" class="error">name format wrong</span>
+    </div>
+  </div>
+  <div class="input-group">
+    <label for="lastName" class="floating">
+      <input formControlName="lastName" type="text" id="lastName" placeholder="email">
+      <span>Lastname</span>
+    </label>
+    <div *ngIf="validateForm('lastName')" class="text-error">
+      <span *ngIf="validateField('lastName', 'pattern')" class="error">lastName format wrong</span>
+    </div>
+  </div>
+  <span class="message" *ngIf="message">{{message}}</span>
+  <button class="btn btn-primary btn-lg" type="submit">Save</button>
 </form>