pretty code

.gitignore

@@ -6,6 +6,9 @@
 /out-tsc
 /bazel-out
 /template
+/.angular
+/.history
+/.vscode
 
 # Node
 /node_modules

package.json

@@ -14,6 +14,7 @@
     "@angular/common": "^15.0.0",
     "@angular/compiler": "^15.0.0",
     "@angular/core": "^15.0.0",
+    "@angular/fire": "^7.5.0",
     "@angular/forms": "^15.0.0",
     "@angular/platform-browser": "^15.0.0",
     "@angular/platform-browser-dynamic": "^15.0.0",

src/app/app.module.ts

@@ -1,14 +1,25 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { AngularFireModule } from '@angular/fire/compat';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { UserModule } from './user/user.module';
 import { NavComponent } from './nav/nav.component';
+import { environment } from 'src/environments/environment';
+import { AngularFireAuthModule } from '@angular/fire/compat/auth';
+import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
 
 @NgModule({
   declarations: [AppComponent, NavComponent],
-  imports: [BrowserModule, AppRoutingModule, UserModule],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    UserModule,
+    AngularFireModule.initializeApp(environment.firebaseConfig),
+    AngularFireAuthModule,
+    AngularFirestoreModule,
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/models/user.model.ts

@@ -0,0 +1,7 @@
+export interface IUser {
+  name: string;
+  email: string;
+  password?: string;
+  age: number;
+  phoneNumber: string;
+}

src/app/services/auth.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/compat/auth';
+import {
+  AngularFirestore,
+  AngularFirestoreCollection,
+} from '@angular/fire/compat/firestore';
+import { IUser } from '../models/user.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  private usersCollection: AngularFirestoreCollection<IUser>;
+  constructor(private auth: AngularFireAuth, private db: AngularFirestore) {
+    this.usersCollection = this.db.collection('users');
+  }
+
+  public async createUser(userData: IUser) {
+    if (!userData.password) {
+      throw new Error('Error is missing!');
+    }
+    const userCredentials = await this.auth.createUserWithEmailAndPassword(
+      userData.email,
+      userData.password
+    );
+    if (!userCredentials.user) {
+      throw new Error("User can't be found");
+    }
+    await this.db
+      .collection<IUser>('users')
+      .doc(userCredentials.user?.uid)
+      .set({
+        name: userData.name,
+        email: userData.email,
+        age: userData.age,
+        phoneNumber: userData.phoneNumber,
+      });
+
+    await userCredentials.user.updateProfile({
+      displayName: userData.name,
+    });
+  }
+}

src/app/user/login/login.component.html

@@ -1,21 +1,30 @@
 <!-- Login Form -->
-<form>
+<form #loginForm='ngForm' (ngSubmit)="login()">
   <!-- Email -->
   <div class="mb-3">
     <label class="inline-block mb-2">Email</label>
-    <input type="email" class="block w-full py-1.5 px-3 text-gray-200 border border-gray-400 transition
-                  duration-500 focus:outline-none rounded bg-transparent
-                  focus:border-indigo-400" placeholder="Enter Email" />
+    <input #email='ngModel' type="email" name='email' [(ngModel)]='credentials.email'
+      class="block w-full py-1.5 px-3 text-gray-200 border border-gray-400 transition duration-500 focus:outline-none rounded bg-transparent focus:border-indigo-400"
+      placeholder="Enter Email" required
+      pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" />
+    <p *ngIf="email.errors && email.touched && email.dirty" class='text-red-400'>
+      Email is invalid
+    </p>
   </div>
   <!-- Password -->
   <div class="mb-3">
     <label class="inline-block mb-2">Password</label>
-    <input type="password" class="block w-full py-1.5 px-3 text-gray-200 border border-gray-400 transition
-                duration-500 focus:outline-none rounded bg-transparent focus:border-indigo-400"
-      placeholder="Password" />
+    <input #password='ngModel' [(ngModel)]='credentials.password' required type="password"
+      class="block w-full py-1.5 px-3 text-gray-200 border border-gray-400 transition duration-500 focus:outline-none rounded bg-transparent focus:border-indigo-400"
+      placeholder="Password" [ngModelOptions]="{standalone: true}" />
+    <p *ngIf="password.errors && password.touched && password.dirty" class='text-red-400'>
+      Password is invalid
+    </p>
   </div>
-  <button type="submit" class="block w-full bg-indigo-400 text-white py-1.5 px-3 rounded transition
-                hover:bg-indigo-500">
+
+  <button type="submit"
+    class="block w-full bg-indigo-400 text-white py-1.5 px-3 rounded transition hover:bg-indigo-500 disabled:opacity-50 disabled:bg-indigo-400"
+    [disabled]='loginForm.invalid'>
     Submit
   </button>
 </form>

src/app/user/login/login.component.ts

@@ -3,8 +3,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
+  styleUrls: ['./login.component.css'],
 })
 export class LoginComponent {
+  credentials = {
+    email: '',
+    password: '',
+  };
 
+  login(): void {
+    console.log(this.credentials);
+  }
 }

src/app/user/register/register.component.html

@@ -37,7 +37,7 @@
   </div>
   <button type="submit"
     class="block w-full bg-indigo-400 text-white py-1.5 px-3 rounded transition hover:bg-indigo-500 disabled:opacity-50 disabled:bg-indigo-400"
-    [disabled]="registerForm.invalid">
+    [disabled]="registerForm.invalid || inSubmission">
     Submit
   </button>
 </form>

src/app/user/register/register.component.ts

@@ -1,16 +1,15 @@
 import { Component } from '@angular/core';
-import {
-  FormGroup,
-  FormControl,
-  Validators,
-  AbstractControl,
-} from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { IUser } from 'src/app/models/user.model';
+import { AuthService } from 'src/app/services/auth.service';
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.css'],
 })
 export class RegisterComponent {
+  constructor(private authService: AuthService) {}
+  inSubmission: boolean = false;
   name: FormControl = new FormControl('', [
     Validators.required,
     Validators.minLength(3),
@@ -19,7 +18,7 @@ export class RegisterComponent {
     Validators.required,
     Validators.email,
   ]);
-  age: FormControl = new FormControl('', [
+  age: FormControl = new FormControl<number | null>(null, [
     Validators.required,
     Validators.min(18),
     Validators.max(120),
@@ -48,13 +47,24 @@ export class RegisterComponent {
     phoneNumber: this.phoneNumber,
   });
 
-  constructor() {
-    this.registerForm.controls['name'];
-  }
-
-  register($event: Event): void {
+  async register($event: Event): Promise<void> {
+    this.inSubmission = true;
     this.showAlert = true;
     this.alertMessage = 'Please Wait! Your account is being created.';
     this.alertColor = 'blue';
+    const { email, password } = this.registerForm.value;
+
+    try {
+      await this.authService.createUser(this.registerForm.value as IUser);
+    } catch (error) {
+      console.error(error);
+      this.alertMessage = 'A unexpected error ocurred. Please try again later.';
+      this.alertColor = 'red';
+    }
+
+    this.alertMessage = 'Success! Your account has been created.';
+    this.alertColor = 'green';
+    this.inSubmission = false;
+    return;
   }
 }

src/app/user/user.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AuthModalComponent } from './auth-modal/auth-modal.component';
 import { SharedModule } from '../shared/shared.module';
@@ -9,7 +9,7 @@ import { RegisterComponent } from './register/register.component';
 
 @NgModule({
   declarations: [AuthModalComponent, LoginComponent, RegisterComponent],
-  imports: [CommonModule, SharedModule, ReactiveFormsModule],
+  imports: [CommonModule, SharedModule, ReactiveFormsModule, FormsModule],
   exports: [AuthModalComponent],
 })
 export class UserModule {}

src/environments/environment.prod.ts

@@ -0,0 +1,11 @@
+export const environment = {
+  production: true,
+  firebaseConfig: {
+    apiKey: 'AIzaSyC2zxPU3mO3RVDiO-IuGuNd5XVqmiGN3kI',
+    authDomain: 'clipz-dfbc1.firebaseapp.com',
+    projectId: 'clipz-dfbc1',
+    storageBucket: 'clipz-dfbc1.appspot.com',
+    messagingSenderId: '576704584143',
+    appId: '1:576704584143:web:d34d242234b6fa15b49aba',
+  },
+};

src/environments/environment.ts

@@ -0,0 +1,11 @@
+export const environment = {
+  production: false,
+  firebaseConfig: {
+    apiKey: 'AIzaSyC2zxPU3mO3RVDiO-IuGuNd5XVqmiGN3kI',
+    authDomain: 'clipz-dfbc1.firebaseapp.com',
+    projectId: 'clipz-dfbc1',
+    storageBucket: 'clipz-dfbc1.appspot.com',
+    messagingSenderId: '576704584143',
+    appId: '1:576704584143:web:d34d242234b6fa15b49aba',
+  },
+};

tsconfig.json

@@ -5,6 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
@@ -19,10 +20,7 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,