Category: javascript

My email already exists because I signed in with google. I want to add additional login methods using email and password.

I use the function supabase.auth.signUp() but because the email already exists it fails.

Does anyone have a solution to this problem?

I was using node-browser 2.5 with javascript/typescript, based on this vue sample project.

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-browser-samples/vue3-sample-app

Then I upgraded to msal v3 and followed their upgrade guide which was simple, and it only had me add in await msalInstance.initialize(); right after making a new instance of PublicClientApplication. However, on this file now

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-browser-samples/vue3-sample-app/src/plugins/msalPlugin.ts

I am getting a typescript error.

Which leads me to think there was another breaking change. How can I fix this?

Thanks

When I go to another <router-link> I always return to top, because that is how I set up my router:

import { createRouter, createWebHistory } from 'vue-router';
import { routes } from '@/router/routes.js';

export const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        } else if (to.hash) {
            return { el: to.hash, behavior: 'smooth' };
        } else {
            return { top: 0 };
        }
    },
});

But because I have a transition in <RouterView/>, when I click on a <router-link>, I first see the return to top: 0, since the transition lasts 0.2s, I am able time to see it.

I want to see the return to top only when I am already on the <router-link> that I clicked, but at the same time I also want to see the transition. Maybe there’s a delay I can add or something else?

Here’s what I have in App.vue:

 <template>
    <main>
        <RouterView #="{ Component }">
            <transition mode="out-in" name="fade">
                <component :is="Component" />
            </transition>
        </RouterView>
    </main>
</template>

<script setup></script>

<style lang="scss">
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
    transition: 0.2s;
}
</style>

Please, give a solution.

I’m trying to separate the {Name}{Operator} and {Value} from filter. Since comma was used as default separator and if I have an input string value that contains special characters

Here’s the Expected output after getting the request from payload:

[0] name@=*Name_`~!@#$%^&*()_+-=[]{}|;':",./<>?,[1] status==Active

And here’s what I’m getting:

[0] name@=*Name_`~!@#$%^&*()_+-=[]{}|;':",[1]./<>?,[2] status==Active

Here’s where I tries to separate filter Value by {Name}{Operator}{Value}.

const filterTerms = sieveFilters
    .split(',')
    .filter((sieveFilter) => isSieveFilter(sieveFilter));

Instead of having 2 filterTerms value I’m having 3.

We are developing an AngularJS application and using Plotly.js for our scatter plot. We would like the data in the scatter plot to always take up as much of the available space in the plot as possible. We have lassoing and deleting points enabled. This means that if the user lassoes a bunch of points (say all the points in the upper half of the plot) and deletes them, we want the plot to rescale so that the remaining points take up the empty space left behind by the deleted points.

For example, I start with this:

Then I lasso the upper points:

Then I hit delete and the plot rescales:

I’ve implemented this and it works fine. But some users have reported that it’s a bit confusion because it’s not clear that after rescaling they are looking at the same data set. In other words, it looks like the first data set is being replaced by another rather than rescaling.

One solution we’ve been considering is animation. We’re wondering if it’s possible to animate the rescaling as a smooth transition so that the user can see that the initial data set is simply being rescaled. Is this possible?

artix-web server

use actix_web::{web, App, HttpServer, HttpResponse};
use serde::{Deserialize,Serialize};

#[actix_web::main] // or #[tokio::main]
async fn main() -> std::io::Result<()> {
    let app = move || {
        App::new().configure(test_routes)
    };


    HttpServer::new(app)
    .bind(("127.0.0.1", 7878))?
    .run()
    .await
}

pub fn test_routes(cfg: &mut web::ServiceConfig){
    cfg
        .service(
            web::scope("/test")
                .route("/post",web::post().to(test_post))
                .route("/get", web::get().to(test_get))
        );
}

pub async fn test_post(data: web::Json<MyRequest>) -> HttpResponse {
    println!(
        "{:?}", data.name
    );
    HttpResponse::Ok().append_header(("Access-Control-Allow-Origin","*")).json("Hello,world")
}


pub async fn test_get() -> HttpResponse {
    HttpResponse::Ok().append_header(("Access-Control-Allow-Origin","*")).json("Hello,world")
}

#[derive(Serialize, Deserialize)]
pub struct MyRequest {
    name: String,
}

the post js code

/*POST*/
        let xhr = new XMLHttpRequest()
        xhr.open("post","http://localhost:7878/test/post",true)

        xhr.setRequestHeader("Content-Type", "application/json")
        xhr.onload = function() {
            console.log("success")
        }
        let data = {
            name:"zack"
        }
        xhr.send(JSON.stringify(data))

/*GET*/
        let xhr = new XMLHttpRequest()
        xhr.open("get","http://localhost:7878/test/get",true)

        xhr.onload = function() {
            console.log("success")
        }

        xhr.send()

the frontend error message is as follows:

Access to XMLHttpRequest at ‘http://localhost:7878/test/post’ from origin ‘null’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have try all Access-Control-Allow-Headers, Access-Control-Allow-Credentials, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Expose-Headers

node:internal/errors:496
ErrorCaptureStackTrace(err);
^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module
servercontrollersauthController.js
at new NodeError (node:internal/errors:405:5)
at finalizeResolution (node:internal/modules/esm/resolve:224:11)
at moduleResolve (node:internal/modules/esm/resolve:836:10)
at defaultResolve (node:internal/modules/esm/resolve:1034:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:375:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:344:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:220:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36) {
url: URL {},
code: ‘ERR_MODULE_NOT_FOUND’
}

I’m building a mern stack app and I faced this problem. I reinstalled node and made sure all the dependensies are installed

i have to seperate sending request and checking user`s permission

i`m developing a process that deals with location and map

but i had to seperate sending request and checking user`s permission

so i wrote script with ‘navigator.geolocation’ and ‘navigator.permissions.query({name:”geolcation”})’

script written with permisssions api ran successfully with in the local environment but it failed in downloaded app with ios 17

so i want to find alternative of the script ‘navigator.permissions’

can i find solution to my problems?

For context, I have set up a Firebase database and received some date as input not gonna show full code of the form page because its simple I get some object:

{showDatePicker && (
        <DateTimePicker
          style={{ width: 200 }}
          value={state.date}
          mode="date"
          display="default"
          onChange={handleDateChange}
        />
      )}

My problem is here

import { useState } from "react";
import db from "../database/database";
import { collection, getDocs } from "firebase/firestore";
import { useEffect } from "react";
import { View, Text } from "react-native";
import { StyleSheet } from "react-native";

export function TaskCard({ ri, ci }) {
  const [cards, setCards] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const querySnapshot = await getDocs(collection(db, "tasks"));
      const taskList = querySnapshot.docs.map((doc) => doc.data());
      setCards(taskList);
    }
    fetchData();
  }, []);

  return (
    <View style={styles.container}>
      {cards.map((card) => {
        console.log(card.date);
        const options = { weekday: "long" };
        const new_date = card.date.toLocaleDateString("en-US", options);
        const day = new_date.split(",")[0];

        if (day == "Saturday") {
          day = 1;
        } else if (day == "Monday") {
          day = 2;
        } else if (day == "Tuesday") {
          day = 3;
        } else if (day == "Wednesday") {
          day = 4;
        } else if (day == "Thursday") {
          day = 5;
        } else if (day == "Friday") {
          day = 6;
        } else if (day == "Saturday") {
          day = 7;
        }

        if (card.hour >= 6 && card.hour <= 12) {
          card.hour = card.hour - 5;
        } else if (card.hour >= 1 && card.hour <= 5) {
          card.hour = card.hour + 7;
        }

        return card.hour === ri && day == ci ? (
          <View key={card.id}>
            <Text>{card.title}</Text>
            <Text>{card.description}</Text>
          </View>
        ) : (
          <View key={card.id}></View>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 90,
    height: 90,
    backgroundColor: "#fff",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#000",
  },
  description: {
    fontSize: 15,
    color: "#000",
  },
});

you see when I try to call card.date that is supposed to be a Date instance but when doing console.log I get:

Object {
  "nanoseconds": 141000000,
  "seconds": 1700447054,
}

why is that date not working seems like a firebase issue

I exported an excel file and I want that this text is in above the table. How to do that?
Here is the angular js code:

$scope.generateLedger = (supplier_id) => {
        $http({
            method: 'POST',
            url: '../reportsController/ledgerController/getLedger/' + supplier_id
        }).then(function successCallback(response) {
            if (response.data) {
                $scope.ledger = response.data;
                $scope.tableShow = true;
                $scope.sup_name = $scope.getSupName(supplier_id);

                $(document).ready(function () {
                    $('#supplierLedgerTable').DataTable({
                        dom: `<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pB>>`,
                        "lengthMenu": [10, 25, 50, 75, 100],
                        buttons: [
                            {
                                extend: 'excel',
                                text: 'Export to Excel',
                                exportOptions: {
                                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
                                },
                                title: 'Supplier Ledger - ' + $scope.sup_name
                            }
                        ]
                    });
                });
            } else {
                $scope.tableShow = false;
                Swal.fire({
                    title: 'No Data Found.'
                });
            }
        });
    };

Here is the generated excel with table and I manually place the text above it because Its not working when I place it in the angular js code:
Excel table

I want someone here to fix the code my code. Can you help me!

I’m building a simple form using Formik and Yup.

There are two dropdowns and two inputs. Model, unfortunately, must be nested the following way:

securityQuestions: {
    questions: {
        0: '',
        1: ''
    },
    answers: {
        0: '',
        1: ''
    }
}     

I’m doing something like this (not really, it’s a bit more complicated in the real code, I have to build a scheme dynamically from the config I get from the backend, but the result (the scheme) is exactly the same (I’ve checked) as if I’d done this that simple:

const schema = yup
  .object()
  .shape({
    securityQuestions: yup.object().shape({
      questions: yup.object().shape({
        0: yup.string().required(),
        1: yup.string().required()
      }),
      answers: yup.object().shape({
        0: yup.string().required(),
        1: yup.string().required()
      })
    })
  });

Inputs names in Formik are securityQuestions.questions[0], securityQuestions.answers[0] and so on. Formik works.

However, when trying to submit a form, I get this:

securityQuestions.answers must be a `object` type, but the final value was: `null` (cast from the value `[n  "undefined",n  "undefined"n]`).n If "null" is intended as an empty value be sure to mark the schema as `.nullable()`"

What am I doing wrong?
Thanks.

I try to compare two 2D dp solutions.

Particularly the “leftout_state”

sum_of_powers: dp[i-1][j - po] (use previous diagonal cell contribute to dp[i][j])

perfect_square: dp[i][j - i*i] (use previous col cell contribute to dp[i][j])

My question:

sum_of_powers: why we don’t use dp[i][j – po]?

perfect_square: why we don’t use dp[i-1][j – i*i]?

in general, is it a pattern?

I put an arrow, pointing to the state

https://leetcode.com/problems/ways-to-express-an-integer-as-sum-of-powers/

var numberOfWays = function(n, x) {
    const tar = n;

    const dp = new Array(1+n).fill(0).map((_, i) => {
        return new Array(1+n).fill(0);
    })

    for(let i=0; i<=n; ++i) {
        dp[i][0] = 1;
    }

    const MOD = 10 ** 9 + 7;

    // * b: each item
    for(let i=1; i<=n; ++i) {
        const po = i ** x;

        for(let j=1; j<=tar; ++j) {
            if(j >= po) {
                dp[i][j] = (dp[i-1][j] + dp[i-1][j - po]) % MOD; <---------
            } else {
                dp[i][j] = dp[i-1][j] % MOD;
            }
        }
    }

    return dp[n][tar];
};

https://leetcode.com/problems/perfect-squares/

var numSquares = function(tar) {
    const item_num = Math.floor(Math.sqrt(tar));

    // * b: item_num -> tar
    const dp = new Array(item_num+1).fill(Infinity).map((_, i) => {
        return new Array(tar+1).fill(Infinity);
    });

    for (let i = 0; i <= item_num; i++) {
        dp[i][0] = 0;
    }

    for(let i=1; i<=item_num; ++i) {
        for(j=1; j<=tar; ++j) {
            if(i*i <= j) {
                dp[i][j] = Math.min(1 + dp[i][j - i*i], dp[i-1][j]); <-------------
            } else {
                dp[i][j] = dp[i-1][j]; // working
            }
        }
    }

    return dp[item_num][tar];
};

I was wondering if there’s a way to change JSON Object type in Wix CMS to an image gallery. I change the field type but of course it doesn’t work. I’m trying to create a gallery based on that dynamic field values but can’t figure it out.

I tried switching field type and testing it on the dynamic gallery page but didn’t work.

I’ve built my website from scratch, and the image slider on the homepage is exactly how I want it – visually. It’s the right size, it’s responsive (resizes accurately, buttons in place), and the radio buttons and slider arrows are just how I want them.

THE PROBLEM: I am looking to add auto-play to the slideshow so that the slides alternate on a timer;

AND

I also want to add touch-swipe so that the slider reacts to touch on mobile devices.

I’m terrible with JavaScript, and spent hours making the current slider, even with a tutorial.

Would someone be able to help me include these functions to the slider?

My website is www.wildsidecocktails.co.uk

The JavaScript (which includes the functions for the menu on mobile devices) is:

var slidePosition = 1;
SlideShow(slidePosition);

function plusSlides(n) {
  SlideShow(slidePosition += n);
}

function currentSlide(n) {
  SlideShow(slidePosition = n);
}

function SlideShow(n) {
  var i;
  var slides = document.getElementsByClassName("Containers");
  var circles = document.getElementsByClassName("dots");
  if (n > slides.length) {slidePosition = 1}
  if (n < 1) {slidePosition = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < circles.length; i++) {
      circles[i].className = circles[i].className.replace(" enable", "");
  }
  slides[slidePosition-1].style.display = "block";
  circles[slidePosition-1].className += " enable";
} 

I’ve tried watching tutorials and guides teaching how to add autoplay, and others teaching how to add touch-sensitivity, but none of them seem exclusively Vanilla script, or are hard to integrate with the current slider setup.

I’m looking for a way to disable the transition when:

1. I refresh the page, so that it only works when I switch between routes

2. And when I go to a particular section. For example, I am at the Home and I want to go to the #about section on this route.

This is what I have inside <main>:

<template>
    <main>
       <RouterView #="{ Component }">
        <transition mode="out-in" name="fade">
            <component :is="Component" :key="$route.fullPath" />
        </transition>
    </RouterView>
    </main>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

<style lang="scss">
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}
</style>

Slight exception.
With this, let’s say I have 3 router-links: Search Recipes, Home, About, where About is a link that leads to the same URL as Home, but with a hash: '#about'. If I’m at Search Recipes right now and I click on About, I should be sent to Home and its #about section. In this case I want the transition to be applied. However, I don’t want the transition to be applied when I’m already on the Home and I just want to slide to the #about section. Hope you understand my explanation.

I use router-link for a link to the section:

<router-link
  class="nav__menu-link"
  :to="{ name: 'home', hash: '#about' }">
  About</router-link
>

This is my router setup:

import { createRouter, createWebHistory } from 'vue-router';
import { routes } from '@/router/routes.js';

export const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        } else if (to.hash) {
            return { el: to.hash, behavior: 'instant' };
        } else {
            return { top: 0 };
        }
    },
});

and my routes:

import ViewHome from '@/view/ViewHome.vue';
import ViewSearchRecipe from '@/view/ViewSearchRecipe.vue';

export const routes = [
    {
        path: '/',
        name: 'home',
        component: ViewHome,
    },
    {
        path: '/searchRecipes/:name?',
        name: 'searchRecipes',
        component: ViewSearchRecipe,
    },
];

Please, give a the solution and if possible, reproduce it with a similar to mine example.