Add New components Login & Signup

Author: ganatan

README.md

@@ -11,7 +11,7 @@
 it's part of a repo series designed to create a **Web Application with Angular 13**
 
 
-* Featuring [**Angular 13.0.3**](https://github.com/angular/angular/releases) & [**Angular CLI 13.0.4**](https://github.com/angular/angular-cli/releases/)
+* Featuring [**Angular 13.1.**](https://github.com/angular/angular/releases) & [**Angular CLI 13.1.0**](https://github.com/angular/angular-cli/releases/)
 
 
 * See the [**Live demo**](#live-demo), Test the repo with [**Quick start**](#quick-start) and for more information Read the step by step [**Tutorial**](#tutorial) or read the [**Getting started**](#getting-started)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-starter",
-  "version": "13.0.3",
+  "version": "13.1.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 4200",
@@ -15,30 +15,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "13.0.3",
-    "@angular/common": "13.0.3",
-    "@angular/compiler": "13.0.3",
-    "@angular/core": "13.0.3",
-    "@angular/forms": "13.0.3",
-    "@angular/platform-browser": "13.0.3",
-    "@angular/platform-browser-dynamic": "13.0.3",
-    "@angular/router": "13.0.3",
+    "@angular/animations": "13.1.0",
+    "@angular/common": "13.1.0",
+    "@angular/compiler": "13.1.0",
+    "@angular/core": "13.1.0",
+    "@angular/forms": "13.1.0",
+    "@angular/platform-browser": "13.1.0",
+    "@angular/platform-browser-dynamic": "13.1.0",
+    "@angular/router": "13.1.0",
     "rxjs": "7.4.0",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.0.4",
-    "@angular/cli": "13.0.4",
-    "@angular/compiler-cli": "13.0.3",
+    "@angular-devkit/build-angular": "13.1.0",
+    "@angular/cli": "13.1.0",
+    "@angular/compiler-cli": "13.1.0",
     "@types/jasmine": "3.10.2",
-    "@types/node": "16.11.11",
+    "@types/node": "16.11.12",
     "jasmine-core": "3.10.1",
     "karma": "6.3.9",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage": "2.1.0",
     "karma-jasmine": "4.0.1",
     "karma-jasmine-html-reporter": "1.7.0",
-    "typescript": "4.4.4"
+    "typescript": "4.5.3"
   }
 }

package.json

@@ -17,9 +17,14 @@ const routes: Routes = [
       .then(mod => mod.AboutModule)
   },
   {
-    path: 'signin',
-    loadChildren: () => import('./modules/general/signin/signin.module')
-      .then(mod => mod.SigninModule)
+    path: 'login',
+    loadChildren: () => import('./modules/general/login/login.module')
+      .then(mod => mod.LoginModule)
+  },
+  {
+    path: 'signup',
+    loadChildren: () => import('./modules/general/signup/signup.module')
+      .then(mod => mod.SignupModule)
   },
   { path: '**', component: NotFoundComponent }
 ];

src/app/app-routing.module.ts

@@ -9,7 +9,8 @@ <h2> {{ version }}</h2>
         <li><a routerLink="/">Home</a></li>
         <li><a routerLink="/about">About</a></li>
         <li><a routerLink="/contact">Contact</a></li>
-        <li><a routerLink="/signin">Signin</a></li>
+        <li><a routerLink="/login">Login</a></li>
+        <li><a routerLink="/signup">Signup</a></li>
       </ul>
     </nav>
   </header>
@@ -19,7 +20,7 @@ <h2> {{ version }}</h2>
   </main>
 
   <footer>
-    <a href="https://www.ganatan.com/">www.ganatan.com</a>
+    <a href="https://www.ganatan.com/">2021 - www.ganatan.com</a>
   </footer>
 
 </div>

src/app/app.component.html

@@ -7,7 +7,7 @@ describe('AppComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         RouterTestingModule
-      ],                  
+      ],
       declarations: [
         AppComponent
       ],

src/app/app.component.spec.ts

@@ -7,5 +7,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'angular-starter';
-  version = 'Angular version 13.0.3';
+  version = 'Angular version 13.1.0';
 }

src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './modules/general/home/home.component';
@@ -19,4 +19,4 @@ import { AppRoutingModule } from './app-routing.module';
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule { }

src/app/app.module.ts

@@ -1,12 +1,12 @@
 <div class="row">
-    <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
-      <p>contact works!</p>
-      <ul>
-        <li><a routerLink="/contact/mailing">Mailing</a></li>
-        <li><a routerLink="/contact/map">Map</a></li>
-      </ul>
-    </div>
-    <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9">
-      <router-outlet></router-outlet>
-    </div>
-  </div>
+	<div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
+		<p>contact works!</p>
+		<ul>
+			<li><a routerLink="/contact/mailing">Mailing</a></li>
+			<li><a routerLink="/contact/map">Map</a></li>
+		</ul>
+	</div>
+	<div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9">
+		<router-outlet></router-outlet>
+	</div>
+</div>

src/app/modules/general/contact/contact.component.html

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 
 import { ContactComponent } from './contact.component';
 
@@ -9,11 +8,9 @@ describe('ContactComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [ContactComponent]
-    }).compileComponents();
+      declarations: [ ContactComponent ]
+    })
+    .compileComponents();
   });
 
   beforeEach(() => {
@@ -25,4 +22,4 @@ describe('ContactComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+});

src/app/modules/general/contact/contact.component.spec.ts

@@ -1,14 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { SigninComponent } from './signin.component';
+import { LoginComponent } from './login.component';
 
 const routes: Routes = [
-  { path: '', component: SigninComponent },
+  { path: '', component: LoginComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class SigninRoutingModule { }
+export class LoginRoutingModule { }

src/app/modules/general/signin/signin-routing.module.ts renamed to src/app/modules/general/login/login-routing.module.ts

@@ -0,0 +1 @@
+<p>login works!</p>

src/app/modules/general/signin/signin.component.css renamed to src/app/modules/general/login/login.component.css

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SigninComponent } from './signin.component';
+import { LoginComponent } from './login.component';
 
-describe('SigninComponent', () => {
-  let component: SigninComponent;
-  let fixture: ComponentFixture<SigninComponent>;
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SigninComponent ]
+      declarations: [ LoginComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SigninComponent);
+    fixture = TestBed.createComponent(LoginComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/modules/general/login/login.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/general/signin/signin.component.spec.ts renamed to src/app/modules/general/login/login.component.spec.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoginComponent } from './login.component';
+import { LoginRoutingModule } from './login-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LoginRoutingModule
+  ],
+  exports: [
+    LoginComponent
+  ],
+  declarations: [
+    LoginComponent
+  ],
+  providers: [
+  ],
+})
+export class LoginModule { }

src/app/modules/general/login/login.component.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SignupComponent } from './signup.component';
+
+const routes: Routes = [
+  { path: '', component: SignupComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SignupRoutingModule { }

src/app/modules/general/login/login.module.ts

@@ -0,0 +1 @@
+<p>signup works!</p>

src/app/modules/general/signin/signin.component.html

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

src/app/modules/general/signin/signin.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-signup',
+  templateUrl: './signup.component.html',
+  styleUrls: ['./signup.component.css']
+})
+export class SignupComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/general/signin/signin.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SignupComponent } from './signup.component';
+import { SignupRoutingModule } from './signup-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SignupRoutingModule
+  ],
+  exports: [
+    SignupComponent
+  ],
+  declarations: [
+    SignupComponent
+  ],
+  providers: [
+  ],
+})
+export class SignupModule { }