solved issue related to confirm dialog and better docker action file

Author: sunjay-dev

.github/workflows/docker-build-push.yml

@@ -8,65 +8,109 @@ on:
 
 jobs:
   changes:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
     outputs:
-      backend: ${{ steps.filter.outputs.backend }}
-      jobrunner: ${{ steps.filter.outputs.jobrunner }}
+      backend: ${{ steps.set-filters.outputs.backend }}
+      jobrunner: ${{ steps.set-filters.outputs.jobrunner }}
     steps:
-      - uses: actions/checkout@v2
-      - uses: dorny/paths-filter@v3
-        id: filter
+      - uses: actions/checkout@v4
+
+      - name: Run paths-filter only on push
+        if: github.event_name == 'push'
+        id: path-filter
+        uses: dorny/paths-filter@v3
         with:
           filters: |
             backend:
               - 'Backend/**'
             jobrunner:
               - 'job-runner/**'
 
+      - name: Force all outputs on manual run
+        if: github.event_name == 'workflow_dispatch'
+        id: force-filter
+        run: |
+          echo "backend=true" >> $GITHUB_OUTPUT
+          echo "jobrunner=true" >> $GITHUB_OUTPUT
+
+      - name: Set outputs depending on trigger
+        id: set-filters
+        run: |
+          echo "backend=${{ steps.path-filter.outputs.backend || 'true' }}" >> $GITHUB_OUTPUT
+          echo "jobrunner=${{ steps.path-filter.outputs.jobrunner || 'true' }}" >> $GITHUB_OUTPUT
+
   backend:
     needs: changes
     if: needs.changes.outputs.backend == 'true'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Prepare metadata
+        id: meta
+        run: |
+          msg=$(echo "${{ github.event.head_commit.message }}" | head -n1)
+          msg=${msg// /_}
+          echo "short_msg=$msg" >> $GITHUB_OUTPUT
+          echo "short_sha=$(echo ${{ github.sha }} | cut -c1-7)" >> $GITHUB_OUTPUT
 
       - name: Docker Hub Login
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
       - name: Build & Push Backend
-        run: |
-          cd Backend
-          docker buildx build \
-            --platform linux/arm64 \
-            -t sunjay195/cron-job-backend:latest \
-            --push .
+        uses: docker/build-push-action@v5
+        with:
+          context: ./Backend
+          platforms: linux/arm64
+          push: true
+          tags: sunjay195/cron-job-backend:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          labels: |
+            git_commit_sha=${{ github.sha }}
+            git_commit_short=${{ steps.meta.outputs.short_sha }}
+            git_commit_msg=${{ steps.meta.outputs.short_msg }}
 
   job-runner:
     needs: changes
     if: needs.changes.outputs.jobrunner == 'true'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Prepare metadata
+        id: meta
+        run: |
+          msg=$(echo "${{ github.event.head_commit.message }}" | head -n1)
+          msg=${msg// /_}
+          echo "short_msg=$msg" >> $GITHUB_OUTPUT
+          echo "short_sha=$(echo ${{ github.sha }} | cut -c1-7)" >> $GITHUB_OUTPUT
 
       - name: Docker Hub Login
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
       - name: Build & Push Job Runner
-        run: |
-          cd job-runner
-          docker buildx build \
-            --platform linux/arm64 \
-            -t sunjay195/cron-job-runner:latest \
-            --push .
+        uses: docker/build-push-action@v5
+        with:
+          context: ./job-runner
+          platforms: linux/arm64
+          push: true
+          tags: sunjay195/cron-job-runner:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          labels: |
+            git_commit_sha=${{ github.sha }}
+            git_commit_short=${{ steps.meta.outputs.short_sha }}
+            git_commit_msg=${{ steps.meta.outputs.short_msg }}

Backend/.env.example

@@ -37,4 +37,7 @@ EMAIL_SERVICE_URL=http://localhost:3001
 EMAIL_SERVICE_SECRET=
 
 # Qstash token (only if working with email queueing)
-QSTASH_TOKEN=
+QSTASH_TOKEN=
+
+# REDIS CONFIGURATION
+REDIS_URL=

Backend/src/controllers/user.controllers.ts

@@ -280,7 +280,7 @@ export const handleForgotPassword = async (req: Request, res: Response, next: Ne
 
 export const handleResetPassword = async (req: Request, res: Response, next: NextFunction): Promise<void> => {
     const { token } = req.body;
-    const { password } = req.body.trim();
+    const password = req.body.password.trim();
 
     try {
         const email = await redis.get(`otptoken:${token}`);

Frontend/src/components/settings/Preference.tsx

@@ -1,8 +1,8 @@
-import type { User } from '../../types'
+import type { UserWithoutEmail } from '../../types'
 
 interface Props {
-  details:User;
-  setDetails: React.Dispatch<React.SetStateAction<User>>
+  details: UserWithoutEmail;
+  setDetails: React.Dispatch<React.SetStateAction<UserWithoutEmail>>
 }
 export default function Preference({ details, setDetails }: Props) {
 

Frontend/src/hooks/useConfirmExit.ts

@@ -1,30 +1,30 @@
 import { useEffect } from "react";
 import { useBlocker } from "react-router-dom";
 
-export function useConfirmExit(isFilled: boolean) {
+export function useConfirmExit(isFilled: boolean, shouldBlock: boolean = true) {
 
   useEffect(() => {
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (!isFilled) return;
+      if (!isFilled || !shouldBlock) return;
       e.preventDefault();
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
     return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-  }, [isFilled]);
+  }, [isFilled, shouldBlock]);
 
    const blocker = useBlocker(
     ({ currentLocation, nextLocation }) =>
-      isFilled && currentLocation.pathname !== nextLocation.pathname,
+      isFilled && shouldBlock && currentLocation.pathname !== nextLocation.pathname,
   );
 
   useEffect(() => {
-    if (blocker.state === "blocked") {
+    if (shouldBlock && blocker.state === "blocked") {
       const ok = window.confirm("You have unsaved changes. Are you sure you want to leave this page?");
       if (ok) {
         blocker.proceed();
       } else {
         blocker.reset();
       }
     }
-  }, [blocker]);
+  }, [blocker, shouldBlock]);
 }

Frontend/src/pages/CreateJob.tsx

@@ -32,9 +32,7 @@ export default function CreateJob() {
   const [jobDetails, setJobDetails] = useState<JobDetails>(initialJobDetails);
 
   const isFilled = JSON.stringify(jobDetails) !== JSON.stringify(initialJobDetails);
-  useConfirmExit(isFilled);
-
-  
+  useConfirmExit(isFilled, !isLoading);
 
   const navigate = useNavigate();
 

Frontend/src/pages/EditJob.tsx

@@ -32,7 +32,7 @@ export default function EditJob() {
     });
 
     const isFilled = JSON.stringify(jobDetails) !== JSON.stringify(initialJobDetails);
-    useConfirmExit(isFilled);
+    useConfirmExit(isFilled, !isLoading);
 
     useEffect(() => {
         setIsLoading(true)

Frontend/src/pages/Settings.tsx

@@ -2,19 +2,20 @@ import { useEffect, useState } from 'react';
 import { Pencil, Save } from "lucide-react";
 import { useAppDispatch, useAppSelector } from '../hooks';
 import { setAuth } from '../slices/authSlice';
-import type { User } from '../types';
-import { ConfirmMenu, Preference } from '../components';
+import type { User, UserWithoutEmail } from '../types';
+import { ConfirmMenu, Loader, Preference } from '../components';
 import { useConfirmExit } from '../hooks/useConfirmExit';
 
 export default function SettingsPage() {
   const user = useAppSelector(state => state.auth.user);
   const [isEditingName, setIsEditingName] = useState(false);
   const dispatch = useAppDispatch();
   const [confirmUpdate, setConfirmUpdate] = useState(false);
-  const [initialDetails, setInitialDetails] = useState<User | null>(null);
-  const [details, setDetails] = useState<User>({
+  const [initialDetails, setInitialDetails] = useState<UserWithoutEmail | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [details, setDetails] = useState<UserWithoutEmail>({
     name: '',
-    email: '',
     timezone: 'UTC',
     emailNotifications: true,
     pushAlerts: true,
@@ -23,25 +24,25 @@ export default function SettingsPage() {
   });
 
   useEffect(() => {
-    if (!user)
-      return
+    if (!user) return;
     const value = {
       name: user.name,
-      email: user.email,
       timezone: user.timezone,
       emailNotifications: user.emailNotifications,
       pushAlerts: user.pushAlerts,
       mode: user.mode,
       timeFormat24: user.timeFormat24
-    }
+    };
     setDetails(value);
     setInitialDetails(value);
   }, [user]);
 
   const isDirty = JSON.stringify(details) !== JSON.stringify(initialDetails);
-  useConfirmExit(isDirty);
+  useConfirmExit(isDirty, !isLoading);
 
   const handleSaveChanges = () => {
+    setIsLoading(true);
+    if (!user) return;
 
     fetch(`${import.meta.env.VITE_BACKEND_URL}/`, {
       method: "PUT",
@@ -61,6 +62,8 @@ export default function SettingsPage() {
       .then(data => {
         const userDetails: User = data.user;
         setDetails(userDetails);
+        setInitialDetails(userDetails);
+        setIsEditingName(false);
         dispatch(setAuth({
           user: {
             name: userDetails.name,
@@ -71,16 +74,18 @@ export default function SettingsPage() {
             emailNotifications: userDetails.emailNotifications,
             pushAlerts: userDetails.pushAlerts
           }
-        }))
+        }));
       })
       .catch(err => console.error(err))
+      .finally(() => setIsLoading(false));
   }
 
   if (!user) return <div>Loading user info...</div>;
 
 
   return (
     <>
+      {isLoading && <Loader />}
       <h1 className="text-3xl text-purple-600 mb-6">Settings</h1>
 
       <form onSubmit={e => {
@@ -89,43 +94,43 @@ export default function SettingsPage() {
       }} className="space-y-10 bg-white p-6 rounded-xl shadow">
 
         <div className='border border-gray-200 rounded-lg px-4 py-6 space-y-6'>
-            <h2 className="text-lg font-semibold text-gray-800 mb-4">Profile</h2>
-
-            <div className="space-y-4">
-              <div>
-                <label className="block mb-1 font-medium text-gray-700">Full Name</label>
-                <div className="flex items-center gap-2">
-                  <input
-                    type="text"
-                    value={details.name}
-                    onChange={e => setDetails({ ...details, name: e.target.value })}
-                    readOnly={!isEditingName}
-                    className={`flex-1 rounded-md px-3 py-2 border transition
-      ${isEditingName
-                        ? 'bg-white border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500'
-                        : 'bg-gray-100 text-gray-500 cursor-not-allowed border-gray-200'
-                      }`}
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setIsEditingName(!isEditingName)}
-                    className="px-3 py-2.5 bg-gray-100 border border-gray-300 rounded hover:text-purple-600 transition"
-                    title={isEditingName ? "Lock" : "Edit Name"}
-                  >
-                    {isEditingName ? <Save className="w-4 h-4" /> : <Pencil className="w-4 h-4" />}
-                  </button>
-                </div>
-                </div>
-                <div>
-                <label className="block mb-1 font-medium text-gray-700">Email</label>
+          <h2 className="text-lg font-semibold text-gray-800 mb-4">Profile</h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block mb-1 font-medium text-gray-700">Full Name</label>
+              <div className="flex items-center gap-2">
                 <input
-                  type="email"
-                  value={details.email}
-                  readOnly
-                  className="w-full mt-1 bg-gray-100 border border-gray-300 rounded px-3 py-2 text-gray-500 cursor-not-allowed"
+                  type="text"
+                  value={details.name}
+                  onChange={e => setDetails({ ...details, name: e.target.value })}
+                  readOnly={!isEditingName}
+                  className={`flex-1 rounded-md px-3 py-2 border transition
+      ${isEditingName
+                      ? 'bg-white border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500'
+                      : 'bg-gray-100 text-gray-500 cursor-not-allowed border-gray-200'
+                    }`}
                 />
-                </div>
+                <button
+                  type="button"
+                  onClick={() => setIsEditingName(!isEditingName)}
+                  className="px-3 py-2.5 bg-gray-100 border border-gray-300 rounded hover:text-purple-600 transition"
+                  title={isEditingName ? "Lock" : "Edit Name"}
+                >
+                  {isEditingName ? <Save className="w-4 h-4" /> : <Pencil className="w-4 h-4" />}
+                </button>
+              </div>
             </div>
+            <div>
+              <label className="block mb-1 font-medium text-gray-700">Email</label>
+              <input
+                type="email"
+                value={user.email}
+                readOnly
+                className="w-full mt-1 bg-gray-100 border border-gray-300 rounded px-3 py-2 text-gray-500 cursor-not-allowed"
+              />
+            </div>
+          </div>
 
         </div>