xMerge branch 'zouhir-auth' into feat-streaks

Author: medyo

public/auth.js

@@ -0,0 +1,6 @@
+window.addEventListener('message', (event) => {
+  if (event.data.type === 'TOKEN_RECEIVED') {
+    // Forward to content script
+    window.postMessage(event.data, '*')
+  }
+})

public/background.js

@@ -1,9 +1,4 @@
-/*chrome.browserAction.onClicked.addListener(function (tab) {
-  chrome.tabs.create({ url: "chrome://newtab" });
-}
-);*/
-
 const uninstallUrl = `https://hackertab.dev/uninstall.html`
 if (chrome.runtime.setUninstallURL) {
   chrome.runtime.setUninstallURL(uninstallUrl)
-}
+}

public/base.manifest.json

@@ -1,10 +1,19 @@
 {
+  "manifest_version": 3,
   "name": "Hackertab.dev - developer news",
   "description": "All developer news in one tab",
   "version": "1.20.1",
   "chrome_url_overrides": {
     "newtab": "index.html"
   },
+  "host_permissions": ["https://*.hackertab.dev/*"],
+  "content_scripts": [
+    {
+      "matches": ["http://127.0.0.1:5173/*", "http://localhost:5173/*", "https://hackertab.dev/*"],
+      "run_at": "document_start",
+      "js": ["content.js"]
+    }
+  ],
   "icons": {
     "16": "/logos/logo16.png",
     "32": "/logos/logo32.png",

public/chrome.manifest.json

@@ -1,7 +1,5 @@
 {
-  "manifest_version": 3,
   "background": {
     "service_worker": "background.js"
-  },
-  "host_permissions": ["https://*.hackertab.dev/*"]
+  }
 }

public/content.js

@@ -0,0 +1,12 @@
+const script = document.createElement('script')
+script.src = chrome.runtime.getURL('auth.js')
+document.documentElement.appendChild(script)
+
+// Listen for messages from the injected script
+window.addEventListener('message', (event) => {
+  if (event.source !== window || !event.data || event.data.type !== 'TOKEN_RECEIVED') {
+    return
+  }
+
+  chrome.runtime.sendMessage({ ...event.data })
+})

public/firefox.manifest.json

@@ -1,17 +1,5 @@
 {
-    "manifest_version": 2,
-    "background": {
-      "scripts": [
-        "background.js"
-      ]
-    },
-    "permissions": [
-      "https://*.hackertab.dev/*"
-    ],
-    "content_security_policy": "script-src 'self' object-src 'self'",
-    "applications": {
-      "gecko": {
-        "id": "{f8793186-e9da-4332-aa1e-dc3d9f7bb04c}"
-      }
-    }
-  }
+  "background": {
+    "scripts": ["background.js"]
+  }
+}

src/assets/App.css

@@ -1361,6 +1361,19 @@ Producthunt item
   color: var(--primary-text-color);
   border-radius: 10px;
 }
+
+.dangerToast {
+  background-color: #ff4d4f;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 10px;
+}
+.successToast {
+  background-color: #52c41a;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 10px;
+}
 .capitalize {
   text-transform: capitalize;
 }
@@ -1381,7 +1394,7 @@ Modal
   box-shadow: 0 0 20px #00000052;
   z-index: 3;
   max-height: 80vh;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .Overlay {

src/components/Elements/Button/Button.css

@@ -32,6 +32,12 @@
     padding: 1rem 2rem;
     font-size: 1.25rem;
   }
+
+  &.loading {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.8;
+  }
 }
 
 .circle-button {

src/components/Elements/Button/Button.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
+import { Spinner } from '../Spinner'
 import './Button.css'
-
 const sizes = {
   small: 'small',
   medium: 'medium',
@@ -14,6 +14,7 @@ type ButtonProps = {
   size?: keyof typeof sizes
   startIcon?: React.ReactNode
   endIcon?: React.ReactNode
+  isLoading?: boolean
 }
 export const Button = ({
   size = 'medium',
@@ -22,10 +23,14 @@ export const Button = ({
   startIcon,
   endIcon,
   children,
+  isLoading = false,
 }: ButtonProps) => {
   return (
-    <button className={clsx('button', sizes[size], className)} onClick={onClick}>
-      {startIcon}
+    <button
+      className={clsx('button', isLoading && 'loading', sizes[size], className)}
+      onClick={onClick}
+      disabled={isLoading}>
+      {isLoading ? <Spinner size="small" /> : startIcon}
       {children}
       {endIcon}
     </button>

src/components/Elements/Spinner/Spinner.css

@@ -0,0 +1,32 @@
+.spinner {
+  position: relative;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-right-color: currentColor;
+  border-bottom-color: currentColor;
+  animation: spin 1.5s linear infinite;
+  &.small {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.medium {
+    width: 40px;
+    height: 40px;
+  }
+
+  &.large {
+    width: 50px;
+    height: 50px;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}