💄 Style: update register ui login for google signup

src/app/components/create-post/create-post.component.html

@@ -1,7 +1,7 @@
 <section class="create-post">
   <div class="content">
     <div class="profile" (click)="toggleSidebarEvent()">
-      <img id="profile-img" src="../../../assets/images/avatars/image-juliusomo.png" alt="" title="toggle sidebar">
+      <img id="profile-img" [src]="currentUser?.image || 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jameson'" alt="" title="toggle sidebar">
       <div>
         <img src="../../../assets/images/icon-edit.svg" alt="">
       </div>

src/app/components/create-post/create-post.component.scss

@@ -29,6 +29,7 @@ section {
       }
 
       #profile-img {
+        border-radius: 50%;
         width: 3rem;
         height: 3rem;
       }

src/app/components/create-post/create-post.component.ts

@@ -14,6 +14,7 @@ import { MatIconModule } from '@angular/material/icon';
   templateUrl: './create-post.component.html',
   styleUrl: './create-post.component.scss'
 })
+
 export class CreatePostComponent implements OnInit, OnDestroy {
   @Output() toggleSidebar = new EventEmitter<boolean>();
 

src/app/views/auth/login/login.component.scss

@@ -34,25 +34,10 @@ button[mat-raised-button] {
   }
 }
 
-.google-btn {
-  display: flex;
-  align-items: center !important;
-  justify-content: center;
-  background-color: #fff !important;
-  color: rgba(0, 0, 0, 0.54);
-  border: 1px solid #ccc;
-
-  &:hover {
-    background-color: #f8f8f8;
+  .google-btn {
+    @include google-button-style;
   }
 
-  .google-logo {
-    width: 18px;
-    height: 18px;
-    margin-right: 8px;
-  }
-}
-
 ::ng-deep .p-toast {
   .p-toast-message {
     background-color: transparent;

src/app/views/auth/register/register.component.html

@@ -3,20 +3,35 @@
   <h4>Register</h4>
   <form [formGroup]="registerForm">
     <div class="form-grp">
-      <input formControlName="email" type="text" placeholder="email">
+      <input formControlName="username" type="text" placeholder="Username">
     </div>
     <div class="form-grp">
-      <input formControlName="password"  type="password" placeholder="password">
+      <input formControlName="email" type="text" placeholder="Email">
     </div>
     <div class="form-grp">
-      <input formControlName="confirmPassword"  type="password" placeholder="confirm password">
+      <input formControlName="password" type="password" placeholder="Password">
+    </div>
+    <div class="form-grp">
+      <input formControlName="confirmPassword" type="password" placeholder="Confirm Password">
     </div>
   </form>
-  <button type="button" mat-button (click)="register()">
-    <p>
-      create account
-    </p>
-  </button>
+  <div>
+    <button type="button" mat-raised-button (click)="register()" [disabled]="isLoading">
+      <p>
+        Create Account
+      </p>
+    </button>
+    <div class="divider">
+      <mat-divider></mat-divider>
+      <span>OR</span>
+      <mat-divider></mat-divider>
+    </div>
+    <button type="button" mat-raised-button class="google-btn" (click)="signInWithGoogle()" [disabled]="isLoading">
+      <img src="../../../../assets/images/google.png" alt="Google logo" class="google-logo">
+      Sign up with Google
+    </button>
+
+  </div>
   <footer>
     <span>Already have an account?</span>
     <a routerLink="/auth/login" class="link-effect">

src/app/views/auth/register/register.component.scss

@@ -3,6 +3,30 @@
 
 section{
   @include formCard-style;
+  .divider {
+    display: flex;
+    align-items: center;
+    margin: 1rem 0;
+
+    mat-divider {
+      flex-grow: 1;
+    }
+
+    span {
+      padding: 0 1rem;
+      color: rgba(0, 0, 0, 0.54);
+      font-size: 0.875rem;
+    }
+  }
+
+  button[mat-raised-button] {
+  width: 100%;
+  margin-top: 1rem;
+  }
+
+  .google-btn {
+    @include google-button-style;
+  }
 }
 
 ::ng-deep .p-toast {
@@ -27,3 +51,4 @@ section{
     }
   }
 }
+

src/app/views/auth/register/register.component.ts

@@ -8,11 +8,12 @@ import { MessageService } from 'primeng/api';
 import { ToastModule } from 'primeng/toast';
 import { IUser } from '../../../services/blog.interface';
 import { FireblogFacadeService } from '../../../services/fireblog/fireblog-facade.service';
+import { MatDividerModule } from '@angular/material/divider';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [RouterModule, MatButtonModule, ReactiveFormsModule, CommonModule, ToastModule],
+  imports: [RouterModule, MatButtonModule, ReactiveFormsModule, CommonModule, ToastModule,MatDividerModule],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',
   providers: [MessageService]
@@ -35,6 +36,7 @@ export class RegisterComponent implements OnInit {
 
   initializeRegisterForm() {
     this.registerForm = this.fb.group({
+      username: ['', [Validators.required]],
       email: ['', [Validators.required, Validators.email]],
       password: ['', [Validators.required, Validators.minLength(6)]],
       confirmPassword: ['', [Validators.required]]
@@ -51,9 +53,11 @@ export class RegisterComponent implements OnInit {
   async register() {
     if (this.registerForm.valid) {
       this.isLoading = true;
-      const { email, password } = this.registerForm.value;
+      const { username, email, password } = this.registerForm.value;
       try {
         const user: IUser = await this.authService.register(email, password);
+        user.username = username;
+        await this.authService.updateUserProfile(user);
         await this.blogFacade.createEmptyBlogPost(user);
         this.messageService.add({severity:'success', summary: 'Success', detail: 'Registration successful!', life: 2500});
         await new Promise(resolve => setTimeout(resolve, 2000));
@@ -69,6 +73,21 @@ export class RegisterComponent implements OnInit {
     }
   }
 
+  async signInWithGoogle() {
+    this.isLoading = true;
+    try {
+      await this.authService.googleSignIn();
+      this.messageService.add({severity:'success', summary: 'Success', detail: 'Google sign-in successful!', life: 2500});
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      await this.router.navigate(['/dashboard']);
+    } catch (error: any) {
+      console.error('Google sign-in error:', error);
+      this.handleRegistrationError(error);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
   private handleRegistrationError(error: any) {
     console.error('Full error object:', error);
     let errorMessage: string;

src/partials/_mixins.scss

@@ -1,12 +1,13 @@
 @use './variables' as *;
 
 @mixin formCard-style{
+
   background-color: #fff;
-  width: 21.5rem;
+  width: 22.5rem;
   border-radius: .75rem;
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 2.125rem;
   // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
   padding: 1.5rem;
 
@@ -18,7 +19,7 @@
   form {
     display: flex;
     flex-direction: column;
-    gap: 1.125rem;
+    gap: 1.25rem;
 
     input {
       width: 100%;
@@ -86,3 +87,38 @@
     }
   }
 }
+
+
+@mixin title-text($font-size: 3rem) {
+  font-family: $titlefont;
+  font-size: $font-size;
+  color: $blueviolet;
+  display: inline-block;
+}
+
+@mixin gradient-text($direction: to right, $color1: $supernova, $color2: $grenadier, $color3: $pizazz) {
+  background: linear-gradient($direction, $color1, $color2, $color3);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+
+@mixin google-button-style {
+  display: flex;
+  align-items: center !important;
+  justify-content: center;
+  background-color: #fff !important;
+  color: rgba(0, 0, 0, 0.54);
+  border: 1px solid #ccc;
+
+  &:hover {
+    background-color: #f8f8f8;
+  }
+
+  .google-logo {
+    width: 18px;
+    height: 18px;
+    margin-right: 8px;
+  }
+}

src/partials/_variables.scss

@@ -1,6 +1,7 @@
 $bodyfont: "Rubik",sans-serif;
 $titlefont:  "kelsons";
 $campton:"campton";
+$age: "age";
 
 $whisper: #F5F6FA;
 $oxfordblue: #334253;
@@ -10,3 +11,5 @@ $blueviolet: #5357B6;
 $burntsienna: #ED6368;
 $spindle: #C5C6EF;
 $grenadier: #DD2C00;
+$pizazz: #FF9701;
+$supernova: #FFC501;

src/styles.scss

@@ -47,6 +47,10 @@ $fireblog-app-theme: mat.define-light-theme((
   font-family: "kelsons";
   src: url("./assets/Fonts/KelsonSans-Normal.woff2");
 }
+@font-face{
+  font-family: "age";
+  src: url("./assets/Fonts/Age-Normal.woff2");
+}
 
 
 *{