Admin page auth added

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { authGuard } from './guards/auth/auth.guard';
 import { HomeComponent } from './components/home/home.component';
 import { NotFoundComponent } from './components/general/not-found/not-found.component';
 import { OauthButtonComponent } from './components/oauth/oauth-button/oauth-button.component';
+import { AdminLoginComponent } from './components/admin/auth/admin-login/admin-login.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent, pathMatch: 'full' },
@@ -29,14 +30,13 @@ const routes: Routes = [
     path: 'authentication',
     loadChildren: () => import('./components/oauth/oauth.module').then(m => m.OauthModule)
   },
-  {
-    path: 'admin',
-    loadChildren: () => import('./components/admin/admin.module').then(m => m.AdminModule)
-  },
   {
     path: 'other',
     loadChildren: () => import('./components/other-activity/other-activity.module').then(m => m.OtherActivityModule)
   },
+  {
+    path: "admin-login", component: AdminLoginComponent,
+  },
   { path: '404', component: NotFoundComponent },
   { path: '**', redirectTo: '/404', pathMatch: 'full' }
 ];

src/app/app.module.ts

@@ -45,6 +45,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatChipsModule } from '@angular/material/chips';
 import { GithubCallbackComponent } from './components/callback/github-callback/github-callback.component';
 import { AuthInterceptor } from './guards/auth/interceptor/auth-interceptor.service';
+import { AdminLoginComponent } from './components/admin/auth/admin-login/admin-login.component';
 
 // AOT compilation support
 export function HttpLoaderFactory(http: HttpClient) {
@@ -79,7 +80,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     FileUploadComponent,
     ConfirmDialogComponent,
     QuestionEditDialogComponent,
-    GithubCallbackComponent
+    GithubCallbackComponent,
+    AdminLoginComponent
   ],
   // ...
 

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

@@ -10,6 +10,8 @@ import { MarkdownRendererComponent } from './markdown-renderer/markdown-renderer
 import { FileUploadComponent } from '../general/file/file-upload/file-upload.component';
 import { CsharpInterviewQaComponent } from './topic/csharp-interview-qa/csharp-interview-qa.component';
 import { UserComponent } from './user/user/user.component';
+import { adminGuard } from 'src/app/guards/admin/admin.guard';
+import { AdminLoginComponent } from './auth/admin-login/admin-login.component';
 
 const routes: Routes = [{
   path: "", component: AdminComponent, children: [
@@ -22,7 +24,7 @@ const routes: Routes = [{
     { path: "file", component: FileUploadComponent },
     { path: "topic", component: CsharpInterviewQaComponent },
     { path: "user", component: UserComponent }
-  ]
+  ], canActivate: [adminGuard]
 }];
 
 @NgModule({

src/app/components/admin/auth/admin-login/admin-login.component.css

@@ -0,0 +1,193 @@
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background: linear-gradient(#141e30, #243b55);
+}
+
+button {
+  background: none;
+  border: none;
+  color: #03e9f4;
+}
+
+button:hover {
+  color: white;
+}
+
+.login-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  padding: 40px;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, .5);
+  box-sizing: border-box;
+  box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
+  border-radius: 10px;
+}
+
+.login-box h2 {
+  margin: 0 0 30px;
+  padding: 0;
+  color: #fff;
+  text-align: center;
+}
+
+.login-box .user-box {
+  position: relative;
+}
+
+.login-box .user-box input {
+  width: 100%;
+  padding: 10px 0;
+  font-size: 16px;
+  color: #fff;
+  margin-bottom: 30px;
+  border: none;
+  border-bottom: 1px solid #fff;
+  outline: none;
+  background: transparent;
+}
+
+.login-box .user-box label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px 0;
+  font-size: 16px;
+  color: #fff;
+  pointer-events: none;
+  transition: .5s;
+}
+
+.login-box .user-box input:focus~label,
+.login-box .user-box input:valid~label {
+  top: -20px;
+  left: 0;
+  color: #03e9f4;
+  font-size: 12px;
+}
+
+.login-box form button {
+  position: relative;
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  text-decoration: none;
+  text-transform: uppercase;
+  overflow: hidden;
+  transition: .5s;
+  margin-top: 40px;
+  letter-spacing: 4px
+}
+
+.login-box button:hover {
+  background: #03e9f4;
+  color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #03e9f4,
+    0 0 25px #03e9f4,
+    0 0 50px #03e9f4,
+    0 0 100px #03e9f4;
+}
+
+.login-box button span {
+  position: absolute;
+  display: block;
+}
+
+.login-box button span:nth-child(1) {
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #03e9f4);
+  animation: btn-anim1 1s linear infinite;
+}
+
+@keyframes btn-anim1 {
+  0% {
+    left: -100%;
+  }
+
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+.login-box button span:nth-child(2) {
+  top: -100%;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, #03e9f4);
+  animation: btn-anim2 1s linear infinite;
+  animation-delay: .25s
+}
+
+@keyframes btn-anim2 {
+  0% {
+    top: -100%;
+  }
+
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+.login-box button span:nth-child(3) {
+  bottom: 0;
+  right: -100%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(270deg, transparent, #03e9f4);
+  animation: btn-anim3 1s linear infinite;
+  animation-delay: .5s
+}
+
+@keyframes btn-anim3 {
+  0% {
+    right: -100%;
+  }
+
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+.login-box button span:nth-child(4) {
+  bottom: -100%;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(360deg, transparent, #03e9f4);
+  animation: btn-anim4 1s linear infinite;
+  animation-delay: .75s
+}
+
+@keyframes btn-anim4 {
+  0% {
+    bottom: -100%;
+  }
+
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+.form-control:focus {
+  /*Remove input blue border on click*/
+  outline: none !important;
+}

src/app/components/admin/auth/admin-login/admin-login.component.html

@@ -0,0 +1,20 @@
+<div class="login-box">
+  <h2>Admin Login</h2>
+  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+    <div class="user-box">
+      <input type="text" formControlName="userName" required>
+      <label for="userName">Username</label>
+    </div>
+    <div class="user-box">
+      <input type="password" formControlName="password" required>
+      <label for="password">Password</label>
+    </div>
+    <button type="submit">
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+      Submit
+    </button>
+  </form>
+</div>

src/app/components/admin/auth/admin-login/admin-login.component.spec.ts

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

src/app/components/admin/auth/admin-login/admin-login.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-admin-login',
+  templateUrl: './admin-login.component.html',
+  styleUrls: ['./admin-login.component.css']
+})
+export class AdminLoginComponent implements OnInit {
+  loginForm: FormGroup;
+  loginError!: string;
+  /**
+   *
+   */
+  constructor(private formBuilder: FormBuilder, private router: Router) {
+    this.loginForm = this.formBuilder.group({
+      userName: ['', [Validators.required]],
+      password: ['', [Validators.required]]
+    });
+  }
+  ngOnInit(): void {
+    console.log('AdminLogin page loaded');
+  }
+
+  onSubmit() {
+    // Log the form data to the console
+    console.log('Form Data:', this.loginForm.value);
+
+    if (this.loginForm.valid) {
+
+      // Implement your authentication logic here.
+      // If successful, navigate to the dashboard or appropriate page.
+      // On failure, set this.loginError to the error message.
+      const { userName, password } = this.loginForm.value;
+
+      if (userName !== 'admin' && password !== 'admin') {
+        console.log('Invalid username or password');
+        this.loginError = 'Invalid username or password';
+      }
+      else {
+        console.log('Form is valid.');
+
+        console.log("username: " + userName + '; password: ' + password);
+        // this.authService.login(organizationId, userName, password);
+        localStorage.setItem('isAdminLoggedIn', "true");
+        this.router.navigate(['/admin']);
+      }
+    }
+    else {
+      // If the form is invalid, you may want to log that as well
+      console.log('Form is not valid');
+    }
+  }
+}

src/app/components/other-activity/spotify/spotify-routing.module.ts

@@ -1,9 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { NowPlayingComponent } from './now-playing/now-playing.component';
+import { SpotifyComponent } from './spotify.component';
 
 const routes: Routes = [
-  { path: "now-playing", component: NowPlayingComponent }
+  {
+    path: "", component: SpotifyComponent, children: [
+      {
+        path: "now-playing",
+        component: NowPlayingComponent
+      }
+    ]
+  }
 ];
 
 @NgModule({

src/app/guards/admin/admin.guard.ts

@@ -1,5 +1,15 @@
-import { CanActivateFn } from '@angular/router';
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
 
 export const adminGuard: CanActivateFn = (route, state) => {
-  return true;
+  // return false;
+  const router = inject(Router);
+  const isLoggedIn =  localStorage.getItem('isAdminLoggedIn');
+
+  if (isLoggedIn) {
+    console.log("logged in successfully!");
+    return true;
+  }
+
+  return router.createUrlTree(['/']);
 };