OMKR-1 | Login with ext added

package.json

@@ -37,6 +37,7 @@
     "crypto-js": "^4.2.0",
     "firebase": "^10.7.1",
     "marked": "^11.1.0",
+    "ng-animate": "^2.0.1",
     "ngx-google-analytics": "^14.0.1",
     "rxjs": "~7.8.0",
     "swagger-ui": "^5.10.3",

src/app/components/general/header/header.component.html

@@ -9,24 +9,24 @@
     </button>
     <div [class.collapse]="isNavbarCollapsed" [class.navbar-collapse]="true" id="navbarNavAltMarkup">
       <div class="navbar-nav">
-        <a class="nav-link active" aria-current="page" href="#">Home</a>
-        <a class="nav-link" (click)='scroll("about")' href="#about">About me</a>
-        <a class="nav-link" (click)='scroll("jobs")' href="#jobs">Experience</a>
-        <a class="nav-link" (click)='scroll("projects")' href="/404">Projects</a>
-        <a class="nav-link" (click)='scroll("contact")' href="#footer">Contact me</a>
+        <a class="nav-link active" aria-current="page" (click)="toggleNavbar()" href="#">Home</a>
+        <a class="nav-link" (click)="scroll('about'); toggleNavbar()" href="#about">About me</a>
+        <a class="nav-link" (click)="scroll('jobs'); toggleNavbar()" href="#jobs">Experience</a>
+        <a class="nav-link" (click)="scroll('projects'); toggleNavbar()" href="/404">Projects</a>
+        <a class="nav-link" (click)="scroll('contact'); toggleNavbar()" href="#footer">Contact me</a>
       </div>
       <div class="navbar-nav ms-auto">
         <a class="navbar-brand" href="#">
           <img src="https://avatars3.githubusercontent.com/keshavsingh4522?size=400" height="22" alt="Profile image"
             class="profileImg" />
         </a>
-        <a class="nav-link" *ngIf="(authService.isLoggedIn() | async)" [routerLink]="['/setting']">Settings</a>
+        <a class="nav-link" *ngIf="(authService.isLoggedIn() | async)" [routerLink]="['/setting']" (click)="toggleNavbar()">Settings</a>
         <a class="nav-link" *ngIf="(authService.isLoggedIn() | async)" [routerLink]="['/']"
-          (click)="logout()">Logout</a>
+          (click)="logout(); toggleNavbar()">Logout</a>
         <a class="nav-link" *ngIf="(authService.isLoggedIn() | async) === false"
-          [routerLink]="['/authentication/login']">Login</a>
+          [routerLink]="['/authentication/login']" (click)="toggleNavbar()">Login</a>
         <a class="nav-link" *ngIf="(authService.isLoggedIn() | async) === false"
-          [routerLink]="['/authentication/signup']">Signup</a>
+          [routerLink]="['/authentication/signup']" (click)="toggleNavbar()">Signup</a>
       </div>
     </div>
   </div>

src/app/components/oauth/login-failure/login-failure.component.html

@@ -0,0 +1,7 @@
+<!-- src/app/login-failure/login-failure.component.html -->
+<div class="login-failure">
+  <h1>Login Failed</h1>
+  <p>Oops! Something went wrong with your login attempt.</p>
+  <a href="/authentication/login">Try again</a>
+  <!-- Provide a link to retry login or to contact support -->
+</div>

src/app/components/oauth/login-failure/login-failure.component.spec.ts

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

src/app/components/oauth/login-failure/login-failure.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-failure',
+  templateUrl: './login-failure.component.html',
+  styleUrls: ['./login-failure.component.css']
+})
+export class LoginFailureComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+    // Here you can access the query parameters from the URL to display error messages
+    // You might also provide options to retry the login or contact support
+    console.log('Login failure page loaded');
+  }
+
+}

src/app/components/oauth/login-success/login-success.component.html

@@ -0,0 +1,6 @@
+<!-- src/app/login-success/login-success.component.html -->
+<div class="login-success">
+  <h1>Login Successful</h1>
+  <p>Welcome back! You have successfully logged in.</p>
+  <!-- Add any additional information or links the user might need -->
+</div>

src/app/components/oauth/login-success/login-success.component.spec.ts

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

src/app/components/oauth/login-success/login-success.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-success',
+  templateUrl: './login-success.component.html',
+  styleUrls: ['./login-success.component.css']
+})
+export class LoginSuccessComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+    // You can access the query parameters from the URL here and perform actions accordingly
+    // For example, you might want to store an authentication token, redirect to a dashboard, etc.
+    console.log('Login success page loaded');
+  }
+
+}

src/app/components/oauth/login/login.component.html

@@ -34,15 +34,27 @@ <h4 class="card-title text-center">Sign in</h4><br />
               <div class="col-sm-12">
                 <button class="btn btn-outline-primary btn-block" type="submit">Sign
                   in</button>
+                <button class="btn  btn-outline-primary btn-block" [routerLink]="['/authentication/signup']"
+                  style="cursor: pointer;">
+                  Sign up
+                </button>
               </div>
             </div>
           </form>
           <hr>
-          <button class="btn btn-link btn-block" [routerLink]="['/authentication/signup']" style="cursor: pointer;">
-            Sign up >
-          </button>
+
+          <!-- Existing code... -->
+
+          <!-- External login options -->
+          <div class="text-center">
+            <app-oauth-button service="GitHub" iconClass="fab fa-github"></app-oauth-button>
+            <app-oauth-button service="LinkedIn" iconClass="fab fa-linkedin"></app-oauth-button>
+            <app-oauth-button service="Hackerrank" iconClass="fab fa-hackerrank"></app-oauth-button>
+            <app-oauth-button service="LeetCode" iconClass="fab fa-leetcode"></app-oauth-button>
+            <app-oauth-button service="Google" iconClass="fab fa-google"></app-oauth-button>
+            <hr>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>

src/app/components/oauth/oauth-button/oauth-button.component.css

@@ -0,0 +1,60 @@
+a.btn-oauth {
+  display: inline-block;
+  width: 80px; /* Fixed width */
+  height: 30px; /* Fixed height */
+  line-height: 50px; /* Center the text vertically */
+  margin: 0.5rem;
+  padding: 0 1rem; /* Adjust horizontal padding as needed */
+  text-align: center;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  transition: transform 0.3s ease;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); /* Optional: adds a shadow for depth */
+}
+
+a.btn-oauth:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Optional: more pronounced shadow on hover */
+}
+a.btn-oauth.btn-google {
+  background-color: #db4437; /* Google's brand color */
+  color: #fff;
+}
+
+a.btn-oauth.btn-google:hover {
+  background-color: #c1351d; /* A darker shade of Google's brand color for hover effect */
+}
+
+a.btn-oauth.btn-github {
+  background-color: #333;
+  color: #fff;
+}
+
+a.btn-oauth.btn-github:hover {
+  background-color: #1a1a1a; /* Darkened #333 by 5% */
+}
+
+a.btn-oauth.btn-linkedin {
+  background-color: #0077b5;
+  color: #fff;
+}
+
+a.btn-oauth.btn-linkedin:hover {
+  background-color: #006699; /* Darkened #0077b5 by 5% */
+}
+
+/* Add more styles for other services as needed */
+
+a.btn-oauth i {
+  margin-right: 8px; /* Space between icon and text */
+}
+
+a.btn-oauth i {
+  margin-right: 8px; /* Space between icon and text */
+  font-size: 0.5rem; /* Halve the size of the icon */
+}
+
+a.btn-oauth .fa {
+  margin-right: 8px; /* Space between icon and text */
+  font-size: 0.5rem; /* Halve the size of the icon */
+}

src/app/components/oauth/oauth-button/oauth-button.component.html

@@ -0,0 +1,3 @@
+<a [@pulse] class="btn btn-outline-{{ service.toLowerCase() }}" href="/authentication/{{ service.toLowerCase() }}" (click)="login()" role="button">
+  <i class="{{ iconClass }}"></i> {{ service }}
+</a>

src/app/components/oauth/oauth-button/oauth-button.component.spec.ts

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

src/app/components/oauth/oauth-button/oauth-button.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { trigger, transition, useAnimation } from '@angular/animations';
+import { pulse } from 'ng-animate';
+
+@Component({
+  selector: 'app-oauth-button',
+  templateUrl: './oauth-button.component.html',
+  styleUrls: ['./oauth-button.component.css'],
+  animations: [
+    trigger('pulse', [
+      transition(':enter', useAnimation(pulse, { params: { timing: 1 } })),
+    ])
+  ]
+})
+export class OauthButtonComponent {
+  @Input() service = '';
+  @Input() iconClass = '';
+  @HostBinding('@pulse') pulse = true;
+  @Output() loginRequested = new EventEmitter<string>();
+
+  public login(): void {
+    console.log('Login requested for ' + this.service);
+    this.loginRequested.emit(this.service);
+  }
+}

src/app/components/oauth/oauth-routing.module.ts

@@ -5,6 +5,8 @@ import { ForgotPasswordComponent } from './password/forgot-password/forgot-passw
 import { ResetPasswordComponent } from './password/reset-password/reset-password.component';
 import { LoginComponent } from './login/login.component';
 import { SignupComponent } from './signup/signup.component';
+import { LoginSuccessComponent } from './login-success/login-success.component';
+import { LoginFailureComponent } from './login-failure/login-failure.component';
 
 const routes: Routes = [
   {
@@ -14,7 +16,9 @@ const routes: Routes = [
       { path: "forgot-password", component: ForgotPasswordComponent },
       { path: "reset-password", component: ResetPasswordComponent },
       { path: "login", component: LoginComponent },
-      { path: "signup", component: SignupComponent }
+      { path: "signup", component: SignupComponent },
+      { path: 'login-success', component: LoginSuccessComponent },
+      { path: 'login-failure', component: LoginFailureComponent },
     ]
   }];
 

src/app/components/oauth/oauth.component.ts

@@ -1,10 +1,15 @@
 import { Component } from '@angular/core';
+import { AuthService } from 'src/app/guards/auth/auth.service';
 
 @Component({
   selector: 'app-oauth',
   templateUrl: './oauth.component.html',
   styleUrls: ['./oauth.component.css']
 })
 export class OauthComponent {
-
+  constructor(private authService: AuthService) {}
+  public handleLoginRequest(service: string): void {
+    console.log(`Login requested for: ${service}`);
+    this.authService.loginWithOAuth(service);
+  }
 }

src/app/components/oauth/oauth.module.ts

@@ -11,13 +11,19 @@ import { MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatSelectModule } from '@angular/material/select';
 import { SignupComponent } from './signup/signup.component';
+import { OauthButtonComponent } from './oauth-button/oauth-button.component';
+import { LoginSuccessComponent } from './login-success/login-success.component';
+import { LoginFailureComponent } from './login-failure/login-failure.component';
 
 @NgModule({
   declarations: [
     ForgotPasswordComponent,
     ResetPasswordComponent,
     LoginComponent,
-    SignupComponent
+    SignupComponent,
+    OauthButtonComponent,
+    LoginSuccessComponent,
+    LoginFailureComponent
   ],
   imports: [
     CommonModule,

src/app/guards/auth/auth.service.ts

@@ -57,4 +57,12 @@ export class AuthService {
   getOrganizationId(): string | null {
     return localStorage.getItem('organizationId');
   }
+
+  // External OAuth login
+  loginWithOAuth(provider: string): void {
+    // Redirect to the backend endpoint that initiates the OAuth process
+    // The backend should redirect to the OAuth provider's login page
+    const oauthUrl = `/auth/${provider.toLowerCase()}`;
+    window.location.href = oauthUrl;
+  }
 }