NyaGarcia’s gists

NyaGarcia / login-page.component.css

Created October 25, 2021 08:52

Styling the login page

NyaGarcia / login-page.component.html

Last active October 28, 2021 14:37

Adding the login form to the login page

	<div class="form-container">
	<h1>Welcome to NgBytes Login</h1>
	<h5>Sign in with your email</h5>
	<ngbytes-login-form (formData)="login($event)"></ngbytes-login-form>
	</div>

NyaGarcia / login-form.component.css

Last active October 28, 2021 14:36

Making the form pretty

NyaGarcia / login-form.component.html

Last active December 28, 2021 22:47

Login Form

	<form class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
	<mat-form-field class="form-control">
	<mat-label>Email</mat-label>
	<input matInput formControlName="email" type="text" required />
	<mat-error *ngIf="email?.hasError('required')">
	Email is required
	</mat-error>
	<mat-error *ngIf="email?.hasError('email')">
	Email isn't valid. Please enter a valid email.
	</mat-error>

NyaGarcia / auth.module.ts

Last active October 21, 2021 14:55

Importing module into AuthModule

	import { AuthRoutingModule } from './auth-routing.module';
	import { CommonModule } from '@angular/common';
	import { LoginFormComponent } from './components/login-form/login-form.component';
	import { LoginPageComponent } from './pages/login-page/login-page.component';
	import { MatButtonModule } from '@angular/material/button';
	import { MatFormFieldModule } from '@angular/material/form-field';
	import { MatInputModule } from '@angular/material/input';
	import { NgModule } from '@angular/core';
	import { ReactiveFormsModule } from '@angular/forms';

NyaGarcia / login-form.component.ts

Last active October 28, 2021 14:30

Creating a login form

	import { Component, EventEmitter, OnInit, Output } from '@angular/core';
	import { FormBuilder, FormGroup, Validators } from '@angular/forms';

	@Component({
	selector: 'ngbytes-login-form',
	templateUrl: './login-form.component.html',
	styleUrls: ['./login-form.component.css'],
	})
	export class LoginFormComponent implements OnInit {
	@Output() formData: EventEmitter<{

NyaGarcia / app.-routing.module.ts

Created October 21, 2021 14:20

Adding lazy loaded auth module to the app routing module

	import { RouterModule, Routes } from '@angular/router';

	import { NgModule } from '@angular/core';

	const routes: Routes = [
	{
	path: '',
	loadChildren: () =>
	import('./features/auth/auth.module').then((m) => m.AuthModule),
	},

NyaGarcia / auth-routing.module.ts

Last active October 21, 2021 12:52

Adding a base route to the AuthRoutingModule

	import { RouterModule, Routes } from '@angular/router';

	import { LoginPageComponent } from './pages/login-page/login-page.component';
	import { NgModule } from '@angular/core';

	const routes: Routes = [{ path: '', component: LoginPageComponent }];

	@NgModule({
	imports: [RouterModule.forChild(routes)],
	exports: [RouterModule],

NyaGarcia / todo-list.component.html

Created September 9, 2021 11:31

Adding the IN PROGRESS and DONE lists

	<div cdkDropList class="todo-list" (cdkDropListDropped)="drop($event)">
	<h3>TO DO</h3>
	<div class="awesome-todo" *ngFor="let todo of todos" cdkDrag>{{todo}}</div>
	</div>

	<div cdkDropList class="todo-list" (cdkDropListDropped)="drop($event)">
	<h3>IN PROGRESS</h3>
	<div class="awesome-todo" *ngFor="let item of inProgress" cdkDrag>{{item}}</div>
	</div>

NyaGarcia / todo-list.component.ts

Created September 9, 2021 11:28

Adding inProgress and done arrays

	import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
	import { Component, OnInit } from '@angular/core';

	@Component({
	selector: 'app-todo-list',
	templateUrl: './todo-list.component.html',
	styleUrls: ['./todo-list.component.css'],
	})
	export class TodoListComponent implements OnInit {
	constructor() {}

Nya NyaGarcia