init Project ✌️✌️

client/src/app/app-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () =>
+      import('./features/home/home.component').then((m) => m.HomeComponent),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

client/src/app/app.component.html

@@ -0,0 +1,5 @@
+<app-layout-header></app-layout-header>
+
+<router-outlet></router-outlet>
+
+<app-layout-footer></app-layout-footer>

client/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [RouterTestingModule],
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'client'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('client');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('client app is running!');
+  });
+});

client/src/app/app.component.ts

@@ -0,0 +1,14 @@
+import {
+  GoogleLoginProvider,
+  SocialAuthService,
+} from '@abacritt/angularx-social-login';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent {
+  title = 'Recipe Manager';
+}

client/src/app/app.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import {
+  GoogleLoginProvider,
+  GoogleSigninButtonModule,
+  SocialAuthServiceConfig,
+  SocialLoginModule,
+} from '@abacritt/angularx-social-login';
+import { CoreModule } from './core/core.module';
+import { FooterComponent } from './core/layout/footer.component';
+import { HeaderComponent } from './core/layout/header.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    FooterComponent,
+    HeaderComponent,
+    AppRoutingModule,
+    SocialLoginModule,
+  ],
+  providers: [
+    {
+      provide: 'SocialAuthServiceConfig',
+      useValue: {
+        autoLogin: false,
+        providers: [
+          {
+            id: GoogleLoginProvider.PROVIDER_ID,
+            provider: new GoogleLoginProvider(
+              '250904650832-atnankrca4pvegjofnp24hmefjke4doq.apps.googleusercontent.com',
+              {
+                oneTapEnabled: true,
+                scopes: 'profile email',
+                prompt: 'select_account',
+              }
+            ),
+          },
+        ],
+      } as SocialAuthServiceConfig,
+    },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

client/src/app/core/core.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class CoreModule { }

client/src/app/core/layout/footer.component.html

@@ -0,0 +1,9 @@
+<footer>
+  <div class="container">
+    <a class="logo-font" routerLink="/">conduit</a>
+    <span class="attribution">
+      &copy; {{ today | date : "yyyy" }}. An interactive learning project from
+      <a href="https://thinkster.io">Thinkster</a>. Code licensed under MIT.
+    </span>
+  </div>
+</footer>

client/src/app/core/layout/footer.component.ts

@@ -0,0 +1,14 @@
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-layout-footer',
+  templateUrl: './footer.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DatePipe, RouterLink],
+  standalone: true,
+})
+export class FooterComponent {
+  today: number = Date.now();
+}

client/src/app/core/layout/header.component.html

@@ -0,0 +1,3 @@
+<div>
+  <h1>This is Header</h1>
+</div>

client/src/app/core/layout/header.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-layout-header',
+  templateUrl: './header.component.html',
+  standalone: true,
+})
+export class HeaderComponent {}

client/src/app/features/home/home.component.html

@@ -0,0 +1,7 @@
+<p>home works!</p>
+<asl-google-signin-button
+  type="standard"
+  shape="pill"
+  text="signin_with"
+  size="large"
+></asl-google-signin-button>

client/src/app/features/home/home.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomeComponent]
+    });
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/features/home/home.component.ts

@@ -0,0 +1,23 @@
+import {
+  GoogleSigninButtonModule,
+  SocialAuthService,
+} from '@abacritt/angularx-social-login';
+import { Component, OnInit } from '@angular/core';
+import { AppModule } from 'src/app/app.module';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css'],
+  imports: [GoogleSigninButtonModule],
+  standalone: true,
+})
+export class HomeComponent implements OnInit {
+  constructor(private _authService: SocialAuthService) {}
+
+  ngOnInit(): void {
+    this._authService.authState.subscribe((user) => {
+      console.log(user);
+    });
+  }
+}