login fixed

Author: Lukecsharpwalker

package-lock.json

@@ -57,8 +57,9 @@
     "prettier": "3.4.2",
     "supabase": "^2.22.6",
     "tailwindcss": "^3.4.4",
+    "tsx": "^4.19.4",
     "typescript": "~5.7.3",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4"
   }
-}
+}

package.json

@@ -0,0 +1,45 @@
+/**********************************************************************
+ * reset-password.ts
+ * -------------------------------------------------
+ * Resets a Supabase user’s password via the Admin API.
+ * -------------------------------------------------
+ * USAGE (bash):
+ *   export SUPABASE_URL="https://aqdbdmepncxxuanlymwr.supabase.co"
+ *   export SERVICE_ROLE_KEY="YOUR_SERVICE_ROLE_KEY_HERE"
+ *   npx ts-node reset-password.ts \
+ *        a3b3cf93-6956-41c7-bec0-1qwqwd42f26 'N3w-Pa$$w0rd!'
+ *********************************************************************/
+
+import { createClient } from '@supabase/supabase-js';
+
+const [, , userId, newPassword] = process.argv;
+
+if (!userId || !newPassword) {
+  console.error('Usage: ts-node reset-password.ts <userId> <newPassword>');
+  process.exit(1);
+}
+
+const SUPABASE_URL = process.env.SUPABASE_URL;
+const SERVICE_ROLE_KEY = process.env.SERVICE_ROLE_KEY;
+
+if (!SUPABASE_URL || !SERVICE_ROLE_KEY) {
+  console.error('Set SUPABASE_URL and SERVICE_ROLE_KEY environment variables.');
+  process.exit(1);
+}
+
+(async () => {
+  const admin = createClient(SUPABASE_URL, SERVICE_ROLE_KEY, {
+    auth: { autoRefreshToken: false, persistSession: false },
+  });
+
+  const { data, error } = await admin.auth.admin.updateUserById(userId, {
+    password: newPassword,
+  });
+
+  if (error) {
+    console.error('❌ Failed to reset password:', error.message);
+    process.exit(1);
+  }
+
+  console.log(`✅ Password updated for user ${data?.id}`);
+})();

reset-password.ts

@@ -6,29 +6,42 @@ import { AuthService } from '../auth.service';
 =======
 >>>>>>> 34e7e50 (supabase added, firebase removed)
 import { Roles } from '../../shared/_enums/roles';
+<<<<<<< HEAD
 =======
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { AuthService } from '../auth.service';
 >>>>>>> 2ca65a2 (auth guard moved to auth folder)
+=======
+import { SupabaseService } from '../../services/supabase.service';
+>>>>>>> 793fe4a (login fixed)
 
 export const authGuard: CanMatchFn = (): boolean => {
-  // const authService = inject(AuthService);
+  const supabaseService = inject(SupabaseService);
   const router = inject(Router);
 <<<<<<< HEAD
 
+<<<<<<< HEAD
 <<<<<<< HEAD
   if (authService.user$()?.roles?.includes(Roles.ADMIN)) {
 =======
   console.log('GUARD', authService.isAdmin$());
   if (authService.isAdmin$()) {
 >>>>>>> 2ca65a2 (auth guard moved to auth folder)
+=======
+  const session = supabaseService.getSession();
+
+  // For now, just check if the user is authenticated
+  // In a real application, you would check for specific roles in the user's metadata
+  if (session) {
+>>>>>>> 793fe4a (login fixed)
     return true;
   } else {
     router.navigate(['/posts']);
     return false;
   }
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 
 >>>>>>> 2ca65a2 (auth guard moved to auth folder)
@@ -41,4 +54,6 @@ export const authGuard: CanMatchFn = (): boolean => {
   // }
   return true;
 >>>>>>> 34e7e50 (supabase added, firebase removed)
+=======
+>>>>>>> 793fe4a (login fixed)
 };

src/app/auth/_guards/auth.guard.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { DynamicDialogService } from '../../shared/dynamic-dialog/dynamic-dialog.service';
+import { SupabaseService } from '../../services/supabase.service';
 import { Credentials } from '../../shared/_models/credentials.interface';
 import {
   ModalCloseStatusEnum,
@@ -32,27 +33,39 @@ export class LoginCompontent {
   loginError: WritableSignal<boolean> = signal(false);
 
   private dynamicDialogService = inject(DynamicDialogService);
+  private supabaseService = inject(SupabaseService);
 
   onSubmit(): void {
     this.isSubmitted = true;
-    // this.authService.loginWithEmail(this.form.value as Credentials)
-    //   .then(() => {
-    //     this.loginError.set(false);
-    //     const status = {
-    //       closeStatus: ModalCloseStatusEnum.ACCEPTED
-    //     } as ModalStatus;
-    //     this.dynamicDialogService.closeDialog(status);
-    //   })
-    //   .catch(() => {
-    //     this.loginError.set(true);
-    //   });
+    const credentials = this.form.value as Credentials;
+
+    this.supabaseService.signInWithPassword(credentials.email, credentials.password)
+      .then(({ data, error }) => {
+        if (error) {
+          this.loginError.set(true);
+          return;
+        }
+
+        this.loginError.set(false);
+        const status = {
+          closeStatus: ModalCloseStatusEnum.ACCEPTED
+        } as ModalStatus;
+        this.dynamicDialogService.closeDialog(status);
+      })
+      .catch(() => {
+        this.loginError.set(true);
+      });
   }
 
   onGoogleLogin() {
-    // this.authService.loginGoogle();
-    // const status = {
-    //   closeStatus: ModalCloseStatusEnum.ACCEPTED
-    // } as ModalStatus;
-    // this.dynamicDialogService.closeDialog(status);
+    this.supabaseService.signInWithProvider('google')
+      .then(({ data, error }) => {
+        if (!error) {
+          const status = {
+            closeStatus: ModalCloseStatusEnum.ACCEPTED
+          } as ModalStatus;
+          this.dynamicDialogService.closeDialog(status);
+        }
+      });
   }
 }

src/app/auth/login/login.component.ts

@@ -7,7 +7,7 @@ <h2 class="text-xl font-semibold mb-4">Comments</h2>
         <p class="text-gray-800 mb-2">{{ comment.content }}</p>
         <p class="text-sm text-gray-600">- {{ comment.author?.username }}</p>
       </div>
-      <button (click)="deleteComment(comment.id!)" class="text-red-500 hover:text-red-700">
+      <button *hasRole="'Admin'" (click)="deleteComment(comment.id!)" class="text-red-500 hover:text-red-700">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
         </svg>

src/app/reader/_components/main-page/post/comments/comments.component.html

@@ -9,6 +9,7 @@ import {
 import { ReaderApiService } from '../../../../_services/reader-api.service';
 import { Comment } from '../../../../../types/supabase';
 import { CommentsStore } from './comments.store';
+import { HasRoleDirective } from '../../../../../shared/_directives/has-role.directive';
 
 @Component({
   selector: 'comments',
@@ -17,6 +18,7 @@ import { CommentsStore } from './comments.store';
   templateUrl: './comments.component.html',
   styleUrl: './comments.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [HasRoleDirective],
 })
 export class CommentsComponent {
   @Input() postId!: string;

src/app/reader/_components/main-page/post/comments/comments.component.ts

@@ -5,30 +5,35 @@ import {
   ViewContainerRef,
   inject,
 } from '@angular/core';
+import { SupabaseService } from '../../services/supabase.service';
 
 @Directive({
   selector: '[hasRole]',
   standalone: true,
 })
 export class HasRoleDirective {
-  @Input() set hasRole(roles: string[]) {
-    this.updateView(roles);
+  @Input() set hasRole(role: string) {
+    this.updateView(role);
   }
 
   private templateRef = inject(TemplateRef);
   private viewContainer = inject(ViewContainerRef);
+  private supabaseService = inject(SupabaseService);
 
-  private updateView(roles: string[]): void {
-    // const user = this.authService.user$();
-    // if (user?.roles) {
-    //   const hasRole = user.roles.some(role => roles.includes(role));
-    //   if (hasRole) {
-    //     this.viewContainer.createEmbeddedView(this.templateRef);
-    //   } else {
-    //     this.viewContainer.clear();
-    //   }
-    // } else {
-    //   this.viewContainer.clear();
-    // }
+  private updateView(role: string): void {
+    const session = this.supabaseService.getSession();
+
+    if (session?.user?.app_metadata?.['role']) {
+      const userRole = session.user.app_metadata?.['role'] as string;
+      const hasRole = userRole === role;
+
+      if (hasRole) {
+        this.viewContainer.createEmbeddedView(this.templateRef);
+      } else {
+        this.viewContainer.clear();
+      }
+    } else {
+      this.viewContainer.clear();
+    }
   }
 }

src/app/shared/_directives/has-role.directive.ts

@@ -14,6 +14,7 @@ import {
 import { DynamicDialogService } from '../dynamic-dialog/dynamic-dialog.service';
 import { LoginCompontent } from '../../auth/login/login.component';
 import { RouterLink } from '@angular/router';
+import { SupabaseService } from '../../services/supabase.service';
 
 @Component({
   selector: 'blog-navbar',
@@ -33,6 +34,7 @@ export class NavbarComponent implements AfterViewInit {
 
   private dynamicDialogService = inject(DynamicDialogService);
   private viewContainerRef = inject(ViewContainerRef);
+  private supabaseService = inject(SupabaseService);
 
   constructor() {
     afterNextRender(() => {