Category: javascript

I’m experiencing a “401 Unauthorized” error when I try to access the /api/v1/users/verifyToken endpoint of my CMS app on mobile devices. This endpoint is supposed to verify the validity of a JSON Web Token (JWT) stored in cookies.

Key Details:
I have set the cookies with the SameSite=None and Secure attributes.
CORS is properly configured to allow credentials from the correct origin.
The issue happens on multiple Android devices, specifically using default browsers like Chrome and Samsung Internet.

In my error investigation:
It seems that the server is creating and sending the cookie correctly to the mobile browser.
However, when the server tries to retrieve that cookie, it comes back as undefined. This means that no valid token can be created, resulting in the unauthorized error.

Thanks in advance for your time and help.

I’m building a 3D application using Three.js, React Three Fiber, and React Rapier. My goal is to control the avatar using physics. I’ve tried various methods, but I can’t seem to get it working as expected.

Here’s what I’ve tried so far:

RigidBody for the avatar.
Applying forces to move the avatar forward, backward, and rotate.
Adjusting gravity and friction to simulate more realistic movement.
Despite this, the avatar doesn’t move as expected, and the physics either don’t apply correctly or don’t affect the movement at all. Ideally, I want the avatar to be fully controlled by physics, reacting to inputs like walking and jumping while maintaining realistic interactions with the environment.

What I expect:

The avatar should be able to walk, run, and jump using physics-based controls.
The movement should feel realistic with proper gravity, inertia, and friction applied.
Relevant Code Snippet:

// Apply movement, rotation, and jumping using Rapier's kinematicPosition
  useFrame((state, delta) => {
    const rb = rigidBodyRef.current;

    if (rb) {
      // Update the animation mixer
      mixer.update(delta);

      let rotationChanged = false;

      // Handle rotation based on input.left and input.right
      if (input.left || input.right) {
        const rotationDirection = input.left ? 1 : -1; // Left: positive rotation, Right: negative rotation
        const rotationAmount = rotationSpeed * delta * rotationDirection;

        // Update the avatar's rotation state
        avatarRotation.current.y += rotationAmount;
        rotationChanged = true;
      }

      // Calculate forward movement based on current rotation
      const forward = new THREE.Vector3(0, 0, 1).applyEuler(avatarRotation.current).normalize();

      // Determine movement direction
      let moveDirection = new THREE.Vector3();

      if (input.forward) moveDirection.add(forward);
      if (input.backward) moveDirection.sub(forward);

      if (moveDirection.length() > 0) {
        moveDirection.normalize().multiplyScalar(moveSpeed * delta);
        avatarPosition.current.add(moveDirection);
      }

      // Apply rotation if it has changed
      if (rotationChanged) {
        const quaternion = new THREE.Quaternion().setFromEuler(avatarRotation.current);
        rb.setNextKinematicRotation(quaternion, true);
      }

      // Handle Jump Initiation
      if (input.jump && !prevJump.current && !isJumping.current) {
        isJumping.current = true;
        jumpStartTime.current = state.clock.elapsedTime;
        // Play jump animation
        actions['jump']?.reset().fadeIn(0.2).play();
      }

      // Update the previous jump state
      prevJump.current = input.jump;

      // Handle Jump Animation and Y-Position
      if (isJumping.current) {
        const elapsed = state.clock.elapsedTime - jumpStartTime.current;
        if (elapsed < jumpDuration.current) {
          const t = elapsed / jumpDuration.current; // Progress from 0 to 1
          const jumpY = Math.sin(t * Math.PI) * jumpHeight; // Sine curve for smooth jump
          avatarPosition.current.y = groundY + jumpY;
        } else {
          // Jump has completed
          avatarPosition.current.y = groundY;
          isJumping.current = false;
        }
      } else {
        // Ensure the avatar stays on the ground
        avatarPosition.current.y = groundY;
      }

      // Apply the updated position to the RigidBody
      rb.setNextKinematicTranslation(avatarPosition.current, true);
    }

    // Ensure the model's Y-position remains zero to prevent conflicting Y movements
    if (avatarRef.current) {
      avatarRef.current.position.y = 0;
    }
  });

I’ve looked into the documentation, but I’m still stuck. Does anyone have suggestions for how to properly control the avatar using physics in this setup?

Tools I’m using:

Three.js
React Three Fiber
React Rapier
Any help would be greatly appreciated!

I used this following codes before to detect to click out of an element:

let ignoreClickOnMeElement = document.getElementById('userNameTd');
document.addEventListener('click', function(event) {
    let isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
    if (!isClickInsideElement) {
        document.getElementById("profileMenu").style.display="none";
        document.getElementById("profileMenuContent").style.display="none";
    }
});

and it was working correctly. but now i change my site structure to grid and above codes don’t work. and when i click out of element i take the following error:

header.js:71 Uncaught TypeError: Cannot read properties of null (reading ‘contains’)

this is my html codes (the header tag have grid display):

<header class="header">
        <div class="gradiantBar"></div>
<div class="onlineUser">
    <table border="0px" >
        <tr>
            <td class="userImageContainer" colspan="2">
                <img class="userImage" src="icons/user_icon.png"/>
            </td>
        </tr>
        <tr>
            <td id="userNameTd" onclick="showProfileMenu();" >
                <label class="userNameContainer">
                    <img src="icons/downDropDown_icon.png">                          
                </label>
                <input type="hidden" id="hiddenUserType" value=""/>                    
            </td>
        </tr>
    </table>
    <!-- ---------- drop down menu ---------- -->
    <div class="dropdown" id="profileMenu" on="hideProfileMenu();">
        <div class="dropdown-content" id="profileMenuContent">
            <a href="#" onclick="showUserProfile('<?php echo $_SESSION["typeSession"] ;?>','<?php echo $_SESSION["userIDSession"] ;?>');">
                <img src="../icons/profile_icon.png"/>show profile
            </a>
            <a href="#" onclick="changePassword('<?php echo $_SESSION["userIDSession"] ;?>')">
                <img src="../icons/password_icon.png"/>change password
            </a>
            <a href="#" onclick="logout()"><img src="../icons/logout_icon.png"/>logout</a>
        </div>
    </div>
    <!-- -------------------------------------- -->
</div>
<div class="logo"></div>
<div class="timeContainer">
    <table border="0px">
        <tr>
            <td><img src="icons/calendar_icon.png"/></td>
            <td id="nowWeekDayContainer"></td>
            <td id="nowDateContainer"></td>
        </tr>
        <tr>
            <td><img src="icons/clock_icon.png"/></td>
            <td colspan="2" id="nowTimeContainer"></td>
        </tr>
    </table>
</div><!-- timeContainer -->
</header> <!-- set header class to use it in multi place-- -->

I’m working with the Word JavaScript API and have set up an event handler to detect changes in paragraphs. However, it seems that the paragraphChanged function is never being called. Here’s the code I’m using:

await Word.run(async (context) => {
  const eventContext = context.document.onParagraphChanged.add(paragraphChanged);
  await context.sync();

  console.log("Added event handler for when content is changed in paragraphs.");
});

async function paragraphChanged() {
  await Word.run(async (context) => {
    console.log('event detected');
  });
}

I never see logs in the console from the paragraphChanged function when I write text in Word or change paragraph settings
What am I doing wrong?

Thanks in advance

How to properly chain HTTP calls; I have an issue with the NEKDASH webservice.

vue-general.ts

export class VueGeneralComponent implements OnInit {
  private unsubscribe$ = new Subject<void>();

  vueGenerale: {
    preaPerimes: Number;
    preaNonTraiter: Number;
    clientDebiteurTit: Number;
  }


  constructor(private service: VueGeneralService, private router : Router) {
    this.vueGenerale = {
      preaPerimes : -1,
      preaNonTraiter : -1,
      clientDebiteurTit : -1
    }
   }

  ngOnInit(): void {
    this.getVueGeneral();
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }


  getVueGeneral(): void {
    this.service.getVueGeneral().pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      this.vueGenerale.preaNonTraiter = res.PREANONTRAITER;
      this.vueGenerale.preaPerimes = res.PREAVISPERIME;
      this.vueGenerale.clientDebiteurTit = res.CLIENTDEBITIT;
    })
  }
  
  getClass(value) {
    if (value == 0) {
      return 'green-alert-card';
    } else if (value > 0) {
      return 'red-alert-card';
    } else {
      return 'gray-alert-card';
    }
  }

  goTo(dest: string) {
    this.router.navigateByUrl(`/dashboard/${dest}`);
  }
}

vue-general.service.ts

@Injectable()

export class VueGeneralService {
  private readonly api: string = environment.api;

  constructor(private http: HttpClient, private store: Store) { }



  getPreavisPerime(): Observable<PreavisResponse> {
    return this.http.post<PreavisResponse>(this.api + `/NEKPREP`,{
      FILTRE:{
        STATUT: 2,
        MODE : 'PREAP',
      }

    }, {});
  }

  getPreavisNonTraiter(): Observable<PreavisResponse> {
    return this.http.post<PreavisResponse>(this.api + `/NEKPREP`,{
      FILTRE:{
        STATUT: 1,
      }

    }, {});
  }

  getPreavisNonTraiterListe(client: string): Observable<PreavisATraiterResponse> {
    return this.http.post<PreavisATraiterResponse>(this.api + `/NEKPREL`,{
      CUSTOMER:{
        REFERENCE : client
      },
      FILTRE:{
        STATUT: 1,
        MODE: ""
      }

    }, {});
  }

  getClientsDebiteursTitres(): Observable<ClientDebiteurTitre> {
    return this.http.post<ClientDebiteurTitre>(this.api + `/NEKCLDT`,{
      PAGEIN: {
        NTH: 1,
        SIZE: 999
  }

    }, );
  }

  getVueGeneral(): Observable<VueGenerResponse> {
    return this.http.post<VueGenerResponse>(this.api + `/NEKDASH`,{});
  }
}

Thank you in advance for your help.

Here is my problem: I have radio buttons in a loop, in a form (in spring boot) and I would like the radio button that was checked to remain checked after submitting the form and especially when we return to the choice page , just to not be able to recheck the same choice (in JS). Basically, I make a choice, I submit => it sends me to another page but when I return to my page of choice, the previous choice must be disabled.
Form:

<form action="#" th:action="@{/piece}" modelAttribute="piece"  method="post"
     id="formP" onsubmit="">
        <tr th:each="piece: ${pieces}">
            <input type="submit" name="submit" value="${piece.nom}" th:value="'Valider : '+ ${piece.nom}"
             onclick="saveform()"  />
            <label class="radio-image">
                <input type="radio" name="img" th:value="${piece.img}" onclick="check()"  required>
                <img th:src="@{${'/images/'+ piece.img}}" />
            </label>
            <br>
        </tr>
    </form>

Function to retrieve the choice in localStorage:

function check() {
    
    var btnPieceRad = document.getElementsByName('img');
    for (i = 0; i < btnPieceRad.length; i++) {
        if ((btnPieceRad[i].checked)) {
            var valeur = btnPieceRad[i].value;
            localStorage.setItem("radPiece", valeur);
        }
    }
}

I try:

function saveform() {
    var radPiece = localStorage.getItem("radPiece") ;
    radPiece.getElementsByTagName('radio')[radPiece].disabled = true;   
}

Without result
Then I got inspired by the subject How do I disable and check which option that I chose in the radio buttons after form submission?
And I do :

function saveform() {
    var formPiece = document.getElementsByTagName("form");
    formPiece.addEventListener("submit",function(){
        var inputs = formPiece[0].getElementsByTagName("input");
        for(var i=0; i<inputs.length; i++){
            var this_input = inputs[i];
            if( this_input.type=="radio") {
            this_input.disabled = true;
          
        }
        }
    });
}

Without result and I have a sneaky error in the console:Uncaught on this line:
formPiece.addEventListener("submit",function()
Thanks for your help

In Udemy or any other website the video get paused when the user switch the tab. After reading article I got to know that they have used onfocus functionality in Javascript can anyone tell me how to disable this using console on browser

I tried to use window.onfocus() functionality to pass the value but it did not worked

I am setting up a progressive Image loader (download and replacing an image with the same image in increasing quality). First I am making a cache check to see if the image is already cached. However, while this loads, I am downloading lower quality images in case there is no cache hit of the image I want to load. The code looks like this:

useEffect(() => {
  // checks if image exists in cache, sets it to imageSource if it does
  async function checkCache(); 

  // downloads 2 lower quality images and sets them to imageSource when their download finishes
  async function downloadAndSetSmallAndMediumImages(); 

  // downloads the highest quality image and stores it in cache
  async function handleFinalBigImageDownloadAndSet();

  async function handleRace() {
    const raceResult = await Promise.race([checkCache(), downloadAndSetSmallAndMediumImages()]);
    console.log('here', raceResult);
    if (isCacheChecked && !cacheHit) {
      console.log('cache miss');
      await downloadAndSetSmallAndMediumImages();
      await handleFinalBigImageDownloadAndSet();
    else {
      console.log('cache hit');
    }
  }

  handleRace();
  return () => {};
}, [imageSource]);

In the handleRace() function, the console log never appears – it seems then that the Promise.race() is not resolving. I have set up some console.log() at the end of the checkCache() function, and these are actually logged in the console. The next line executing should then be the Promise.race() resolving and the subsequent logging of the result. Thus, on the UI of the app, the loading indicator stays indefinitely (since imageSource needs to be set by these functions) until I refresh the page and then suddenly the images are visible, yet the console.log() after the Promise.race() still does not show.

I have a small intranet, in which I have complete control over its deployment. I can even do MiTM, packet inspection/injection, etc.

There is a router, and then there are 5 users behind the routers. The issue I am facing is that I cannot identify the traffic originator based on the IP address.

If I analyse the traffic after the router, I will always get the public IP. Hence, I cannot correlate and see if Person A is using google.com or who accessed X.com.

How can I resolve the problem through packet injection? I can use the Beef framework, but what would be the maximum amount of information that can be extracted using JavaScript? Normally, we can extract private IP, user Agent, etc., but what are some values that I can extract using JS that can help for correlation on the server side?

I’m trying to make a mobile app using expo and react native. I have two different layout’s and one of them is for stack route, the other is for tabs. But I keep getting the warning saying,

Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom . Update Layout Route at: “app/screens/(tabs)/_layout”

These are my files

Files

This is main layout route

import { Stack } from "expo-router";
import Login from "./../components/Login";

export default function RootLayout() {
  return (
    <Stack screenOptions={{
      headerShown: false
    }}>
     <Stack.Screen name="(tabs)" /> 
    </Stack>
  );
}

And this is tabs layout.

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import BookCategories from './BookCategories'
import ProfilePage from './ProfilePage'
import Search from './Search'



export default function TabsLayout() {
  const Tab = createBottomTabNavigator();
  return (
    <Tabs screenOptions={{headerShown:false}}>
      <Tab.Screen name="Search" component={Search} options={{
        title: 'Search1'
      }} />
      <Tab.Screen name="Book Categories" component={BookCategories} />
      <Tab.Screen name="Profile Page" component={ProfilePage} />
    </Tabs>
  );
}

const styles = StyleSheet.create({})

I would appreciate some help, I’m new to Expo

I’m trying to build a mobile app with expo. And I’m trying to make a tabs layout

In angular application, given the following code:

this.f55Service.getByFormDeif55Key(this.formDeif55Key).subscribe(data => {
          this.stiFormDeif55Dto = data.body; 
          console.log(data.body);
});

this.f55Service.getByFormDeif55Key(this.formDeif55Key) returns an Observable, I set an breakpoint in

console.log(data.body);

so to ensure that

this.stiFormDeif55Dto = data.body; 

is run, then in chrome debug console, I type this.stiFormDeif55Dto but it returns undefined, if I point the mouse cursor to stiFormDeif55Dto variable in the line

this.stiFormDeif55Dto = data.body; 

it also returns undefined.

So how to show the value of the variable this.stiFormDeif55Dto in debug mode console?

I’m working on a layout similar to this

.

I want to create a section on the left side of the screen using JavaScript. Any advice or guidance on how to structure and position it would be greatly appreciated.

I tried creating the section using JavaScript but couldn’t get it to display properly.

Thank you for your help!

I downloaded node js but it’s not installing instead I’m seeing it’s can’t run on my PC and my PC meets all the requirements

It showed app can’t run on your PC and my PC is 8gb ram 64bitzand it’s 200gb RAM so what do I do about it

So we are working on this project of a website using MERN stack with mongodb but everytime i tried running the code that my friend provides me it gives this error. Checked the vite dependencies but no luck so I am gonna drop the list of dependencies here.

The error:

PS C:UsersshishOneDriveDesktopWorking codes30 Sept codes24 Sep 2024virtualr-main> npm run dev

> [email protected] dev
> vite

failed to load config from C:UsersshishOneDriveDesktopWorking codes30 Sept codes24 Sep 2024virtualr-mainvite.config.js
error when starting dev server:
Error: ENOENT: no such file or directory, open 'C:UsersshishOneDriveDesktopWorking codes30 Sept codes24 Sep 2024virtualr-mainnode_modulesreact-refreshcjsreact-refresh-runtime.development.js'
    at Object.readFileSync (node:fs:448:20)
    at file:///C:/Users/shish/OneDrive/Desktop/Working%20codes/30%20Sept%20codes/24%20Sep%202024/virtualr-main/node_modules/@vitejs/plugin-react/dist/index.mjs:17:6
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadConfigFromBundledFile (file:///C:/Users/shish/OneDrive/Desktop/Working%20codes/30%20Sept%20codes/24%20Sep%202024/virtualr-main/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:66634:15)
    at async loadConfigFromFile (file:///C:/Users/shish/OneDrive/Desktop/Working%20codes/30%20Sept%20codes/24%20Sep%202024/virtualr-main/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:66475:24)
    at async resolveConfig (file:///C:/Users/shish/OneDrive/Desktop/Working%20codes/30%20Sept%20codes/24%20Sep%202024/virtualr-main/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:66083:24)
    at async _createServer (file:///C:/Users/shish/OneDrive/Desktop/Working%20codes/30%20Sept%20codes/24%20Sep%202024/virtualr-main/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:62701:18)
    at async CAC.<anonymous> (file:///C:/Users/shish/OneDrive/Desktop/Working%20codes/30%20Sept%20codes/24%20Sep%202024/virtualr-main/node_modules/vite/dist/node/cli.js:735:20)

Package.json:

{
  "name": "virtualr",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@google/generative-ai": "^0.17.0",
    "@mui/icons-material": "^5.16.7",
    "@mui/material": "^5.16.7",
    "axios": "^1.7.3",
    "bcryptjs": "^2.4.3",
    "bootstrap": "^5.3.3",
    "chart.js": "^4.4.4",
    "chartjs-plugin-datalabels": "^2.2.0",
    "chatgpt-api": "^0.0.6",
    "express": "^4.19.2",
    "html2canvas": "^1.4.1",
    "jsonwebtoken": "^9.0.2",
    "jspdf": "^2.5.1",
    "lucide-react": "^0.344.0",
    "mongoose": "^8.5.2",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.52.2",
    "react-hot-toast": "^2.4.1",
    "react-router-dom": "^6.26.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.18",
    "daisyui": "^4.12.10",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "vite": "^5.1.4"
  }
}

Tried everything that generically comes on web or gpt but getting these error continuously. Want the solution to run my code.

This is original image

output image
I want to this image format like line art vector format

I have used many line art sources but have not found the correct format.
I used Google filter, canvas, and PHP GD library, but I didn’t get any output.

And I also need a transparent image