Bcryptjs.compare always returning false in React App

I am having trouble with Bcrypjs.compare() when run on a handle submit of a login form. The form is created using formik.
As the code below displays, when submitting username and passkey, it first finds the user in the databass, along with the stored hashed passkey and then also the stored salt.
The stored salt is used in the handlesubmit to hash the passkey input from the form before using bcrypt.compare() to compare the hashed input and the stored hashed passkey.
I console log both parts and recieve an identical code in each cases.
However our compare method still returns false.
Any ideas on what is gong wrong?

const handleSubmit = async(e) => {
    e.preventDefault()
    if (Object.keys(errors).length > 0){
        alert("please fill out all fields")
        setFailedValidation(true)
    } else {
        setFailedValidation(false)
        console.log("running hansdlesubmit") //need to destructur
        const username = values.username;
        let storedUser = await axios.get(`http://localhost:3001/users/${username}`)
        console.log("stored user is", storedUser.data)
        const hashedPW = await bcrypt.hash(values.password, storedUser.data.salt)
        console.log(hashedPW, storedUser.data.passkey)
        bcrypt.compare(hashedPW, storedUser.data.passkey, function(err, res) {
            if (err){
              // handle error
              console.log(err)
            }
            if (res) {
              // Send JWT
              console.log("its a match")
            } else {
            console.log("did not match")
              // response is OutgoingMessage object that server response http request
            }
          });

      
      
  
    }    

Manipulate import urls after build in ViteJS

I have a react application configured with ViteJs (vite and @vitejs/plugin-react).
I Managed to change base path and it works correctly (I see <script src="/panel/client/assets/index-BHlWjozO.js"></script> inside index.html after build)

const config = {
    ...,
    base: `/panel/customer`,
    .
    .
    .
}

But for the imported stuff it doesn’t work.
For example, inside my css files i have imported fonts like url(/fonts/font.ttf) and after build i expect it to be url(/panel/customer/fonts/font.ttf) instead.

I know that i can handle this inside my source codes. But i don’t want to do that for some reasons.

I have to handle import links after build time by one of these ways:

  1. some rollup plugins that can do this
  2. some vite plugins that can do this
  3. iterate over all import links and change them manually by some rollup or vite plugins
  4. some rollup or vite options for that
  5. anything but changing source code (i can change vite config only)

Flicker(blink) on zooming-in and zooming-out

I’m rendering a world map on a dashboard, and also displaying a pie chart(using leaflet mini-chart) on each continent which displays the percentage of males and females on that continent. Until I rendered only the map, everything was as expected, but as I rendered the pie charts, there is flicker(blink) coming when we zoom-in and zoom-out.

I used leaflet mini chart for displaying the pie charts on the map. Here is the link to the leaflet mini chart – https://github.com/JiniyaGupta/minichart_testing

Cannot removing the event listener

I’m trying to add a mousemove event when mousedown and remove it when mouseup, it adds the move event but don’t remove it. It succesfuly triggers the mouseup event but don’t remove the mousemove.

 zoomDiv.addEventListener("mousedown", ()=>{
            console.log("mousedown");
            zoomDiv.addEventListener("mousemove", e => mouseDown(e))
        })
        zoomDiv.addEventListener("mouseup", ()=>{
            console.log("mouseup")
            zoomDiv.removeEventListener("mousemove", e => mouseDown(e))
        })

I’m trying to add a mousemove event when mousedown and remove it when mouseup, it adds the move event but don’t remove it. It succesfuly triggers the mouseup event but don’t remove the mousemove.

I want to Chance a Text more than one time i Click on the Button

but nothing happens. what i habe to chance in this Code?
can u help me..
this is for a TextAdventure Game that talks to you and change the text after your answer in the input field.

function functionfirstAnswer() 
    {

    let storyLine = new Array();
    let nextStoryLine = 0;
    storyLine[0] = "Hallo, " + userInput.value + " weist du noch was passiert ist?";
    storyLine[1] = "text one.";
    storyLine[2] = "text two.";
    storyLine[3] = "";
    storyLine[4] = "";
    storyLine[5] = "";
    storyLine[6] = "";
    storyLine[7] = "";
    storyLine[8] = "";
    storyLine[9] = "";



    let userInput = document.querySelector("#userInput01");
    let message = document.getElementById("#messageFirst");

    message.innerHTML = [++nextStoryLine]; 

    }

here is the HTML

 <input type="text" id="userInput01" placeholder="">
    <button id="firstButton" onclick="functionfirstAnswer()">Antwort</button>

function functionfirstAnswer() {
  let storyLine = new Array();
  let nextStoryLine = 0;
  storyLine[0] = "Hallo, " + userInput.value + " weist du noch was passiert ist?";
  storyLine[1] = "text one.";
  storyLine[2] = "text two.";
  storyLine[3] = "";
  storyLine[4] = "";
  storyLine[5] = "";
  storyLine[6] = "";
  storyLine[7] = "";
  storyLine[8] = "";
  storyLine[9] = "";



  let userInput = document.querySelector("#userInput01");
  let message = document.getElementById("#messageFirst");

  message.innerHTML = [++nextStoryLine];

}
<input type="text" id="userInput01" placeholder="">
<button id="firstButton" onclick="functionfirstAnswer()">Antwort</button>

Adyen javascript call function after component mount

We have an application that uses Adyen as PSP. To start payments, we mount the components for the payment methods using javascript with checkout.create('directEbanking').mount('#sofort-container') for example. When the components (in our case for directEbanking and bcmc_mobile) have been mounted, I want to call a different function. I want to slightly modify the mounted Adyen component when it has been rendered, but searching the event directly after calling the mount function gives no result, because the components have not been rendered yet.

I can’t seem to find a solution for something like onMount configuration where I can feed a function that will be called when a component has been mounted and rendered. Any ideas?

Why browser waits for images to load still after you click to another page?

I’m trying to understand some basic HTML / HTTP behavior.

Given the following very simple HTML code:

<html>
        <head></head>
        <body>
                <a href="page2.php" >Page 2</a>     
                <img src="sample.jpg" />
        </body>
</html>

If the image takes around 20 seconds to load, and during that time you click on the link to another page, the browser does not immediately navigate away but waits for sometime. The situation becomes more extreme if there many images on the page.

Why is that? Is this correct behavior or am I missing something?

I can solve this problem by calling window.stop() on click event but I just can’t believe this is actually required!

Dexie `useLiveQuery` keeps re-rendering with [int[]] as deps

I have a Dexie useLiveQuery hook like this:

export const useDexieCompetitions = (competitionIds) => {
  return useLiveQuery(async () => {
    const competitions = await db.competitions
      .where("id")
      .anyOf(...competitionIds)
      .toArray();
    return competitions;
  }, [competitionIds]);
};

I just found that it would keep re-rendering when using the hook like this:

  const competitions = useDexieCompetitions([competitionId]);

I have to change the deps to avoid re-rendering:

export const useDexieCompetitions = (competitionIds) => {
  return useLiveQuery(async () => {
    const competitions = await db.competitions
      .where("id")
      .anyOf(...competitionIds)
      .toArray();
    return competitions;
      // No extra array
  }, competitionIds);
};


Do you know why the deps is seen as different and keep re-rendering?

Angular 17 Di class interceptor does not handle asynchronous operation

I added firebase auth in my angular app. For authorization purpose I created interceptor and called firebase getToken stream(asynchronous).I tried every solutions from youtube tutorial ,they store the token in localStorage then used it inside the interceptor i think it maybe cause a security issues.The problem i faced is infinite loading app in browser or it prevent all http api calls from backend(exclude firebase auth calls).

AuthService:

import { Injectable, inject, signal } from '@angular/core';
import { Auth, 
         createUserWithEmailAndPassword, 
         sendEmailVerification, 
         sendPasswordResetEmail, 
         signInWithEmailAndPassword, 
         signInWithPopup, 
         signOut, 
         updateProfile,

type here


         user,
        
         idToken
        
        } from '@angular/fire/auth';
import { Observable, from, switchMap } from 'rxjs';
import { User } from '../models/user.model';
import { GoogleAuthProvider } from '@angular/fire/auth';


@Injectable({
  providedIn: 'root'
})
export class AuthService {
  firebaseAuth=inject(Auth);
  user$ = user(this.firebaseAuth);
  currentUserSig = signal<User | null | undefined>(undefined);
  authToken$ = idToken(this.firebaseAuth);
  register(email:string,username:string,password:string):Observable<void>{
    const promise = createUserWithEmailAndPassword(this.firebaseAuth,email,password).then(
      response => 
        {
          sendEmailVerification(response.user)
          updateProfile(response.user,{displayName:username})
        }
    );
    return from(promise);
  }

  logIn(email:string,password:string):Observable<void>{
     const promise = signInWithEmailAndPassword(
      this.firebaseAuth,
      email,
      password,
      
      ).then(()=>{});
      return from (promise);
  }


  logOut():Observable<void>{
    const promise = signOut(this.firebaseAuth).then(response=> console.log(response));
    
    return from (promise);
  }

  forgetPassword(email:string):Observable<void>{
     const promise = sendPasswordResetEmail(this.firebaseAuth,email);
     return from (promise);
  }

  googleSignIn():Observable<void>{
        const provider = new GoogleAuthProvider();
        provider.addScope('profile');
        provider.addScope('email');
        provider.setCustomParameters({
          prompt: 'select_account'
        });
   const promise = signInWithPopup(this.firebaseAuth,provider).then(
    response =>{
      console.log(response);
    }
   )

   return from (promise);
  }

 

  
}

AuthInterceptor

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, switchMap, take } from 'rxjs';
import { AuthService } from '../../services/auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return this.authService.authToken$.pipe(
      take(1),
      switchMap(token => {
        const authReq = request.clone({
          setHeaders: {
            Authorization: token ? `Bearer ${token}` : ''
          }
        });
        return next.handle(authReq);
      })
    );
  }

}

Any solutions for fix this problem?

Use JavaScript module as local access

I try to use chart.js with this code :

  <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3/dist/chartjs-adapter-date-fns.bundle.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource-prometheus@2/dist/chartjs-plugin-datasource-prometheus.umd.min.js" crossorigin="anonymous"></script>
  <script>

How can I change the https link to a local access for chart.umd.min.js and the 2 others ?

I want to run it under raspberry, with flask server.
Thank you so much.

change dimensions of imported model in react-three-fiber / drei

I am making a custom configurator using react-three-fiber for my webapp. I’m taking in input dimensions from the user and need to alter my imported model size based on the data entered by the user.

suppose I have a model of a cardboard box but I need to change its size based on the user input data.
how can I do it???

Below is the link to the configurator I’m using as reference.(I am recreating it)

Original Configurator website

I have tried just basic scaling but cannot figure out how to change the specific dimensions

and also how will it affect the simulation.

Maildev starts without CSS and JS in Red Hat Enterprise Linux 8.9 Ootpa

I use putty to acces to remote VM for my php project and i want to install maidev

whoami : root

OS : Red Hat Enterprise Linux 8.9 Ootpa

trace:

  • npm install -g maildev

  • npm list -g maildev => /root/.nvm/versions/node/v22.2.0/lib
    └── [email protected]

the maildev folder is in : /root/.nvm/versions/node/v22.2.0/lib/node_modules/maildev :
the maildev folder contain :

-index.js
-app/ —
scripts/
styles

MailDev webapp running at http://0.0.0.0:1080/
MailDev SMTP Server running at 0.0.0.0:1025

appache file :

<VirtualHost *:80>
ServerName xxxxxxxxxxxxxxxxxxx
DocumentRoot “/var/www/groomrhv2/public/”

<Directory "/var/www/groomrhv2/public/">
    AllowOverride All
    Require all granted
</Directory>

DirectoryIndex index.php

<FilesMatch ".php$">
    Require all granted
    SetHandler proxy:fcgi://127.0.0.1:9000
</FilesMatch>

# Proxy configuration for MailDev web interface
ProxyPass "/maildev" "http://127.0.0.1:1080/"
ProxyPassReverse "/maildev" "http://127.0.0.1:1080/"

when i start the projet on xxxxxx:/maildev i get in console

GET http://xxxxxxxxxxxxx/components/angular-route/angular-route.min.js net::ERR_ABORTED 404 (Not Found)
maildev:163

Blockquote GET http://xxxxxxxxxxxxxxxxxx/components/angular-resource/angular-resource.min.js net::ERR_ABORTED 404 (Not Found)
maildev:165

Blockquote GET http://xxxxxxxxxxxxxxxxxxxxxxxxxx/components/angular-sanitize/angular-sanitize.min.js net::ERR_ABORTED 404 (Not Found)
maildev:162

Blockquote

GET http://xxxxxxxxxxxxxxxxxxxxxxx/components/angular/angular.min.js net::ERR_ABORTED 404 (Not Found)
maildev:9

Blockquote

GET http://xxxxxxxxxxxxxxxxxxxxxx/styles/style.css net::ERR_ABORTED 404 (Not Found)