Merge pull request #40 from isdi-coders-2023/feature/usernameLogin

Add greeting component

src/app/core/store/store.service.ts

@@ -15,8 +15,8 @@ export class StoreService {
   currentPage = 1;
   currentColor = '';
   currentType = '';
-  private usernameForm = new BehaviorSubject<string>('');
-  public usernameForm$ = this.state.asObservable();
+  private usernameForm = new BehaviorSubject<string>('Freak');
+  public usernameForm$ = this.usernameForm.asObservable();
   private isAuthenticated = new BehaviorSubject<boolean>(false);
   constructor(private repo: RepoService, private router: Router) {
     this.loadData();
@@ -56,4 +56,8 @@ export class StoreService {
   getIsAuthenticated(): Observable<boolean> {
     return this.isAuthenticated.asObservable();
   }
+  changeUsername(username: string) {
+    this.usernameForm.next(username);
+    this.isAuthenticated.next(true);
+  }
 }

src/app/feature/error/error.component.html

@@ -5,6 +5,6 @@
   <img src="../../../assets/img/error-image.jpeg" alt="Error" />
   <div>
     <h2>ERROR</h2>
-    <p>WE CAN'T FIND YOUR MANA</p>
+    <p class="error">WE CAN'T FIND YOUR MANA</p>
   </div>
 </section>

src/app/feature/error/error.component.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import ErrorComponent from './error.component';
 import { provideRouter } from '@angular/router';
 import { routes } from '../../app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('ErrorComponent', () => {
   let component: ErrorComponent;
@@ -11,7 +12,7 @@ describe('ErrorComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ErrorComponent],
-      providers: [provideRouter(routes)],
+      providers: [provideRouter(routes), provideHttpClient()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ErrorComponent);
@@ -34,7 +35,7 @@ describe('ErrorComponent', () => {
     const img = compiled.querySelector('section > img');
     expect(img.src).toContain('error-image.jpeg');
     expect(compiled.querySelector('h2').textContent).toContain('ERROR');
-    expect(compiled.querySelector('p').textContent).toContain(
+    expect(compiled.querySelector('.error').textContent).toContain(
       "WE CAN'T FIND YOUR MANA"
     );
   });

src/app/feature/greeting/greeting.component.css

@@ -0,0 +1,6 @@
+p {
+  color: white;
+  position: absolute;
+  left: 36rem;
+  top: 3rem;
+}

src/app/feature/greeting/greeting.component.html

@@ -0,0 +1 @@
+<p>Welcome {{ user }}</p>

src/app/feature/greeting/greeting.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GreetingComponent } from './greeting.component';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('GreetingComponent', () => {
+  let component: GreetingComponent;
+  let fixture: ComponentFixture<GreetingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GreetingComponent],
+      providers: [provideHttpClient()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GreetingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should set isGreeting to true on component initialization', () => {
+    expect(component.isGreeting).toBeTrue();
+  });
+});

src/app/feature/greeting/greeting.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { StoreService } from '../../core/store/store.service';
+
+@Component({
+  selector: 'app-greeting',
+  standalone: true,
+  imports: [],
+  templateUrl: './greeting.component.html',
+  styleUrl: './greeting.component.css',
+})
+export class GreetingComponent {
+  user: string = 'Freak';
+  isGreeting: boolean = false;
+  constructor(private service: StoreService) {
+    this.getLoggedIn();
+  }
+  getLoggedIn() {
+    this.isGreeting = true;
+    this.service.usernameForm$.subscribe((name) => {
+      this.user = name;
+    });
+  }
+}

src/app/feature/initial-form/initial-form.component.css

@@ -17,15 +17,15 @@ form {
   flex-direction: column;
   gap: 0.5rem;
   button {
-    cursor: pointer;
     margin-inline: 3rem;
     background-color: white;
     border: none;
     border-radius: 1rem;
     padding: 0.4rem;
-    &:hover {
+    &:not(:disabled):hover {
       background-color: black;
       color: white;
+      cursor: pointer;
     }
   }
 }

src/app/feature/initial-form/initial-form.component.html

@@ -27,7 +27,6 @@ <h2>Sign in</h2>
     <label>
       <input type="text" placeholder="username" formControlName="username" />
     </label>
-
-    <button type="submit">Entry</button>
+    <button type="submit" [disabled]="form.invalid">Entry</button>
   </form>
 </section>

src/app/feature/initial-form/initial-form.component.spec.ts

@@ -40,6 +40,6 @@ describe('InitialFormComponent', () => {
   });
 
   it('form invalid when empty', () => {
-    expect(component.form.invalid).toBeFalsy();
+    expect(component.form.invalid).toBeTruthy();
   });
 });

src/app/feature/initial-form/initial-form.component.ts

@@ -1,5 +1,10 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
 import { StoreService } from '../../core/store/store.service';
 
 @Component({
@@ -14,7 +19,7 @@ export class InitialFormComponent {
     email: new FormControl(),
     password: new FormControl(),
     repeatpassword: new FormControl(),
-    username: new FormControl(),
+    username: new FormControl('', Validators.required),
   });
 
   displayWeb: boolean = false;

src/app/shared/header/header.component.css

@@ -3,4 +3,4 @@ header {
   padding-inline: 3rem;
   display: flex;
   justify-content: space-between;
-}
+}

src/app/shared/header/header.component.html

@@ -6,5 +6,7 @@ <h1>
       width="200"
     />
   </h1>
+  <app-greeting></app-greeting>
+
   <ng-content></ng-content>
-</header>
+</header>

src/app/shared/header/header.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HeaderComponent } from './header.component';
 import { By } from '@angular/platform-browser';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
@@ -10,6 +11,7 @@ describe('HeaderComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [HeaderComponent],
+      providers: [provideHttpClient()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(HeaderComponent);
@@ -37,4 +39,4 @@ describe('HeaderComponent', () => {
     const image = fixture.debugElement.query(By.css('img')).nativeElement;
     expect(image.alt).toContain('Logo de Magic');
   });
-});
+});

src/app/shared/header/header.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { MenuComponent } from '../menu/menu.component';
+import { GreetingComponent } from '../../feature/greeting/greeting.component';
 
 @Component({
   selector: 'app-header',
   standalone: true,
   templateUrl: './header.component.html',
   styleUrl: './header.component.css',
-  imports: [MenuComponent],
+  imports: [MenuComponent, GreetingComponent],
 })
-export class HeaderComponent {}
+export class HeaderComponent {}