Is Using Classes and Private Fields As An Alternative To Environment Variables A Bad Idea?

The way I handle sensitive information in my projects such as API keys is to create a file with a class that holds sensitive information in private fields. I then put that file name in my .gitignore file so I don’t accidentally push that file to my repository. Doing this I can create methods in that class that can access that data when necessary while keeping the data from being retrievable.

I am noticing however when I look up how to do things such as send an email from a web form for example that people in these examples tend to use environment variables and environment variable files for this. Is this a safer practice than what I have been doing and if so why?

What I have been doing so far seems to work to my liking however I would like to know whether or not I am using best practices.

connect my Ml built”python”to my JS how can i?

I built my ML in Python, and I need to integrate it into my website, “HTML, CSS, and JS.”, I use @tensorflow.tfjs in my prediction. Js page, and I added the path of the ML file, but it is not working. I tried several ways, but all of them are not working. Anyone can help me, please! My website is a prediction of medical insurance costs. I want help. How can I integrate them?

how to implement a drag and drop function in react js?

I am trying to implement a drag and drop functionality to the ButtonBeginningPages components with react-beautiful-dnd, when I drag a component to another place it does not change its place, it returns to its original place

/* eslint-disable */
import React from 'react'
import PropTypes from 'prop-types'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
// import {
//   FaFeatherAlt, FaPencilAlt, FaRegListAlt
// } from 'react-icons/fa'
// import { GiBookCover, GiSpellBook } from 'react-icons/gi'

import Tooltip from 'Components/Tooltip'
import Spinner from 'Components/Spinner'

import AccordionBox from './AccordionBox'
import AccordionSection from './AccordionSection'
import ButtonBeginningPages from './ButtonBeginningPages'
import ButtonEndingPages from './ButtonEndingPages'
import AddNewCta from './AddNewCta'

import css from './LeftNav.scss'
import TotalPageCount from "../_components/TotalPageCount";

const LeftNav = ({
  coverPageIsUpdating,
  titlePageIsUpdating,
  dedicationPageIsUpdating,
  introductionPageIsUpdating,
  isContributor, displayedScreen,
  selectedSectionId, sectionsOrder, sectionsList, updateCurrentPage,
  contentNavProps, toggleBeginningNav, toggleRecipesNav
}) => {
  const { beginningPagesIsOpen, recipesIsOpen } = contentNavProps
  // const beginningPagesScreenNameList = ['coverPage', 'titlePage', 'dedicationPage', 'introductionPage', 'tocPage']
  // const beginningPagesOpen = beginningPagesScreenNameList.includes(displayedScreen)

  const sectionsArray = sectionsOrder.map(_sectionId => ({
    id: _sectionId,
    name: sectionsList[_sectionId].title
  }))

  return (
    <div className={css.nav}>
      <TotalPageCount />
        <DragDropContext>
          <Droppable droppableId="beginningPages">
          {(provided) => (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              <AccordionBox
                text="Beginning Pages"
                isOpen={beginningPagesIsOpen}
                toggle={toggleBeginningNav}
                rightCta={<div className={css.tooltip}><Tooltip /></div>}
              >
                <Draggable draggableId="frontCover" index={0}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Front Cover"
                        icon={coverPageIsUpdating ? <Spinner size="small" /> : null}
                        active={displayedScreen === 'coverPage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'coverPage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
                <Draggable draggableId="titlePage" index={1}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Title Page"
                        icon={titlePageIsUpdating ? <Spinner size="small" /> : null}
                        active={displayedScreen === 'titlePage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'titlePage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
                <Draggable draggableId="dedicationPage" index={2}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Dedication"
                        isUpdating={dedicationPageIsUpdating}
                        icon={dedicationPageIsUpdating ? <Spinner size="small" /> : null}
                        active={displayedScreen === 'dedicationPage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'dedicationPage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
                <Draggable draggableId="introductionPage" index={3}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Introduction"
                        isUpdating={introductionPageIsUpdating}
                        icon={introductionPageIsUpdating ? <Spinner size="small" /> : null}
                        active={displayedScreen === 'introductionPage' || displayedScreen === 'introductionSubpage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'introductionPage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
                <Draggable draggableId="tocPage" index={4}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Table of Contents"
                        active={displayedScreen === 'tocPage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'tocPage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
              </AccordionBox>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
        </DragDropContext>
      
      <AccordionBox
        text="Recipes"
        rightCta={<AddNewCta sectionsArray={sectionsArray} />}
        isOpen={recipesIsOpen}
        toggle={toggleRecipesNav}
      >
        {sectionsOrder && sectionsOrder.map(sectionId => (
          <AccordionSection
            id={sectionId}
            sectionsArray={sectionsArray}
            key={`section-list-item-${sectionId}`}
          />
        ))}
      </AccordionBox>
      <ButtonEndingPages
        text="Index"
        active={displayedScreen === 'indexPage'}
        onClick={() => { updateCurrentPage({ type: 'indexPage' }) }}
      />
      <ButtonEndingPages
        text="Back Cover"
        active={displayedScreen === 'backCoverPage'}
        onClick={() => { updateCurrentPage({ type: 'backCoverPage' }) }}
      />
    </div>
  )
}

LeftNav.propTypes = {
  coverPageIsUpdating: PropTypes.bool.isRequired,
  titlePageIsUpdating: PropTypes.bool.isRequired,
  dedicationPageIsUpdating: PropTypes.bool.isRequired,
  introductionPageIsUpdating: PropTypes.bool.isRequired,
  displayedScreen: PropTypes.string.isRequired,
  isContributor: PropTypes.bool,
  selectedSectionId: PropTypes.string,
  sectionsOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
  sectionsList: PropTypes.shape({}).isRequired,
  updateCurrentPage: PropTypes.func.isRequired
}

LeftNav.defaultProps = {
  isContributor: false,
  selectedSectionId: null
}

export default LeftNav

I am trying to implement a drag and drop functionality to the ButtonBeginningPages components with react-beautiful-dnd, when I drag a component to another place it does not change its place, it returns to its original place

Can’t call function to send email using EmailJS

So I have a project that displays upcoming baby vaccinations. I am trying to send the upcoming vaccines outcome to any email requested. But for some reason I cannot even call the function.
HTML code for button:

<button id="mail" type="button" onclick="checkupFutureEmail()"> E-posta gönder </button>

Javascript:

enter image description here

enter image description here

I tried a lot of things asked AI for help but unfortunately really couldn’t get any help. The main issue is the checkupFutureEmail() Function not even being called. Because I put console.log and when I click the button nothing happens.

JS to C# rsa encrypt function

I need to use an API that uses RSA encryption in C#. The encrypt.js file contains the necessary codes but uses jquery. I think I need to make a few changes to the code to run the function with a JS engine. I don’t have enough JS knowledge. I couldn’t get it to work with Jurassic.

!function($){$.rsa=$.rsa||{},$.rsa.encrypt=function(val,nn,ee,rsaBits,flag){var dbits;function BigInteger(a,b,c){null!=a&&("number"==typeof a?this.fromNumber(a,b,c):null==b&&"string"!=typeof a?this.fromString(a,256):this.fromString(a,b))}function nbi(){return new BigInteger(null)}dbits="Microsoft Internet Explorer"==navigator.appName?(BigInteger.prototype.am=function(i,x,w,j,c,n){for(var xl=32767&x,xh=x>>15;0<=--n;){var l=32767&this[i],h=this[i++]>>15,m=xh*l+h*xl;c=((l=xl*l+((32767&m)<<15)+w[j]+(1073741823&c))>>>30)+(m>>>15)+xh*h+(c>>>30),w[j++]=1073741823&l}return c},30):"Netscape"!=navigator.appName?(BigInteger.prototype.am=function(i,x,w,j,c,n){for(;0<=--n;){var v=x*this[i++]+w[j]+c;c=Math.floor(v/67108864),w[j++]=67108863&v}return c},26):(BigInteger.prototype.am=function(i,x,w,j,c,n){for(var xl=16383&x,xh=x>>14;0<=--n;){var l=16383&this[i],h=this[i++]>>14,m=xh*l+h*xl;c=((l=xl*l+((16383&m)<<14)+w[j]+c)>>28)+(m>>14)+xh*h,w[j++]=268435455&l}return c},28),BigInteger.prototype.DB=dbits,BigInteger.prototype.DM=(1<<dbits)-1,BigInteger.prototype.DV=1<<dbits;BigInteger.prototype.FV=Math.pow(2,52),BigInteger.prototype.F1=52-dbits,BigInteger.prototype.F2=2*dbits-52;var rr,vv,BI_RM="0123456789abcdefghijklmnopqrstuvwxyz",BI_RC=new Array;for(rr="0".charCodeAt(0),vv=0;vv<=9;++vv)BI_RC[rr++]=vv;for(rr="a".charCodeAt(0),vv=10;vv<36;++vv)BI_RC[rr++]=vv;for(rr="A".charCodeAt(0),vv=10;vv<36;++vv)BI_RC[rr++]=vv;function int2char(n){return BI_RM.charAt(n)}function intAt(s,i){var c=BI_RC[s.charCodeAt(i)];return null==c?-1:c}function nbv(i){var r=nbi();return r.fromInt(i),r}function nbits(x){var t,r=1;return 0!=(t=x>>>16)&&(x=t,r+=16),0!=(t=x>>8)&&(x=t,r+=8),0!=(t=x>>4)&&(x=t,r+=4),0!=(t=x>>2)&&(x=t,r+=2),0!=(t=x>>1)&&(x=t,r+=1),r}function Classic(m){this.m=m}function Montgomery(m){this.m=m,this.mp=m.invDigit(),this.mpl=32767&this.mp,this.mph=this.mp>>15,this.um=(1<<m.DB-15)-1,this.mt2=2*m.t}function Arcfour(){this.i=0,this.j=0,this.S=new Array}Classic.prototype.convert=function(x){return x.s<0||0<=x.compareTo(this.m)?x.mod(this.m):x},Classic.prototype.revert=function(x){return x},Classic.prototype.reduce=function(x){x.divRemTo(this.m,null,x)},Classic.prototype.mulTo=function(x,y,r){x.multiplyTo(y,r),this.reduce(r)},Classic.prototype.sqrTo=function(x,r){x.squareTo(r),this.reduce(r)},Montgomery.prototype.convert=function(x){var r=nbi();return x.abs().dlShiftTo(this.m.t,r),r.divRemTo(this.m,null,r),x.s<0&&0<r.compareTo(BigInteger.ZERO)&&this.m.subTo(r,r),r},Montgomery.prototype.revert=function(x){var r=nbi();return x.copyTo(r),this.reduce(r),r},Montgomery.prototype.reduce=function(x){for(;x.t<=this.mt2;)x[x.t++]=0;for(var i=0;i<this.m.t;++i){var j=32767&x[i],u0=j*this.mpl+((j*this.mph+(x[i]>>15)*this.mpl&this.um)<<15)&x.DM;for(x[j=i+this.m.t]+=this.m.am(0,u0,x,i,0,this.m.t);x[j]>=x.DV;)x[j]-=x.DV,x[++j]++}x.clamp(),x.drShiftTo(this.m.t,x),0<=x.compareTo(this.m)&&x.subTo(this.m,x)},Montgomery.prototype.mulTo=function(x,y,r){x.multiplyTo(y,r),this.reduce(r)},Montgomery.prototype.sqrTo=function(x,r){x.squareTo(r),this.reduce(r)},BigInteger.prototype.copyTo=function(r){for(var i=this.t-1;0<=i;--i)r[i]=this[i];r.t=this.t,r.s=this.s},BigInteger.prototype.fromInt=function(x){this.t=1,this.s=x<0?-1:0,0<x?this[0]=x:x<-1?this[0]=x+this.DV:this.t=0},BigInteger.prototype.fromString=function(s,b){var k;if(16==b)k=4;else if(8==b)k=3;else if(256==b)k=8;else if(2==b)k=1;else if(32==b)k=5;else{if(4!=b)return void this.fromRadix(s,b);k=2}this.t=0,this.s=0;for(var i=s.length,mi=!1,sh=0;0<=--i;){var x=8==k?255&s[i]:intAt(s,i);x<0?"-"==s.charAt(i)&&(mi=!0):(mi=!1,0==sh?this[this.t++]=x:sh+k>this.DB?(this[this.t-1]|=(x&(1<<this.DB-sh)-1)<<sh,this[this.t++]=x>>this.DB-sh):this[this.t-1]|=x<<sh,(sh+=k)>=this.DB&&(sh-=this.DB))}8==k&&0!=(128&s[0])&&(this.s=-1,0<sh&&(this[this.t-1]|=(1<<this.DB-sh)-1<<sh)),this.clamp(),mi&&BigInteger.ZERO.subTo(this,this)},BigInteger.prototype.clamp=function(){for(var c=this.s&this.DM;0<this.t&&this[this.t-1]==c;)--this.t},BigInteger.prototype.dlShiftTo=function(n,r){var i;for(i=this.t-1;0<=i;--i)r[i+n]=this[i];for(i=n-1;0<=i;--i)r[i]=0;r.t=this.t+n,r.s=this.s},BigInteger.prototype.drShiftTo=function(n,r){for(var i=n;i<this.t;++i)r[i-n]=this[i];r.t=Math.max(this.t-n,0),r.s=this.s},BigInteger.prototype.lShiftTo=function(n,r){var i,bs=n%this.DB,cbs=this.DB-bs,bm=(1<<cbs)-1,ds=Math.floor(n/this.DB),c=this.s<<bs&this.DM;for(i=this.t-1;0<=i;--i)r[i+ds+1]=this[i]>>cbs|c,c=(this[i]&bm)<<bs;for(i=ds-1;0<=i;--i)r[i]=0;r[ds]=c,r.t=this.t+ds+1,r.s=this.s,r.clamp()},BigInteger.prototype.rShiftTo=function(n,r){r.s=this.s;var ds=Math.floor(n/this.DB);if(ds>=this.t)r.t=0;else{var bs=n%this.DB,cbs=this.DB-bs,bm=(1<<bs)-1;r[0]=this[ds]>>bs;for(var i=ds+1;i<this.t;++i)r[i-ds-1]|=(this[i]&bm)<<cbs,r[i-ds]=this[i]>>bs;0<bs&&(r[this.t-ds-1]|=(this.s&bm)<<cbs),r.t=this.t-ds,r.clamp()}},BigInteger.prototype.subTo=function(a,r){for(var i=0,c=0,m=Math.min(a.t,this.t);i<m;)c+=this[i]-a[i],r[i++]=c&this.DM,c>>=this.DB;if(a.t<this.t){for(c-=a.s;i<this.t;)c+=this[i],r[i++]=c&this.DM,c>>=this.DB;c+=this.s}else{for(c+=this.s;i<a.t;)c-=a[i],r[i++]=c&this.DM,c>>=this.DB;c-=a.s}r.s=c<0?-1:0,c<-1?r[i++]=this.DV+c:0<c&&(r[i++]=c),r.t=i,r.clamp()},BigInteger.prototype.multiplyTo=function(a,r){var x=this.abs(),y=a.abs(),i=x.t;for(r.t=i+y.t;0<=--i;)r[i]=0;for(i=0;i<y.t;++i)r[i+x.t]=x.am(0,y[i],r,i,0,x.t);r.s=0,r.clamp(),this.s!=a.s&&BigInteger.ZERO.subTo(r,r)},BigInteger.prototype.squareTo=function(r){for(var x=this.abs(),i=r.t=2*x.t;0<=--i;)r[i]=0;for(i=0;i<x.t-1;++i){var c=x.am(i,x[i],r,2*i,0,1);(r[i+x.t]+=x.am(i+1,2*x[i],r,2*i+1,c,x.t-i-1))>=x.DV&&(r[i+x.t]-=x.DV,r[i+x.t+1]=1)}0<r.t&&(r[r.t-1]+=x.am(i,x[i],r,2*i,0,1)),r.s=0,r.clamp()},BigInteger.prototype.divRemTo=function(m,q,r){var pm=m.abs();if(!(pm.t<=0)){var pt=this.abs();if(pt.t<pm.t)return null!=q&&q.fromInt(0),void(null!=r&&this.copyTo(r));null==r&&(r=nbi());var y=nbi(),ts=this.s,ms=m.s,nsh=this.DB-nbits(pm[pm.t-1]);0<nsh?(pm.lShiftTo(nsh,y),pt.lShiftTo(nsh,r)):(pm.copyTo(y),pt.copyTo(r));var ys=y.t,y0=y[ys-1];if(0!=y0){var yt=y0*(1<<this.F1)+(1<ys?y[ys-2]>>this.F2:0),d1=this.FV/yt,d2=(1<<this.F1)/yt,e=1<<this.F2,i=r.t,j=i-ys,t=null==q?nbi():q;for(y.dlShiftTo(j,t),0<=r.compareTo(t)&&(r[r.t++]=1,r.subTo(t,r)),BigInteger.ONE.dlShiftTo(ys,t),t.subTo(y,y);y.t<ys;)y[y.t++]=0;for(;0<=--j;){var qd=r[--i]==y0?this.DM:Math.floor(r[i]*d1+(r[i-1]+e)*d2);if((r[i]+=y.am(0,qd,r,j,0,ys))<qd)for(y.dlShiftTo(j,t),r.subTo(t,r);r[i]<--qd;)r.subTo(t,r)}null!=q&&(r.drShiftTo(ys,q),ts!=ms&&BigInteger.ZERO.subTo(q,q)),r.t=ys,r.clamp(),0<nsh&&r.rShiftTo(nsh,r),ts<0&&BigInteger.ZERO.subTo(r,r)}}},BigInteger.prototype.invDigit=function(){if(this.t<1)return 0;var x=this[0];if(0==(1&x))return 0;var y=3&x;return 0<(y=(y=(y=(y=y*(2-(15&x)*y)&15)*(2-(255&x)*y)&255)*(2-((65535&x)*y&65535))&65535)*(2-x*y%this.DV)%this.DV)?this.DV-y:-y},BigInteger.prototype.isEven=function(){return 0==(0<this.t?1&this[0]:this.s)},BigInteger.prototype.exp=function(e,z){if(4294967295<e||e<1)return BigInteger.ONE;var r=nbi(),r2=nbi(),g=z.convert(this),i=nbits(e)-1;for(g.copyTo(r);0<=--i;)if(z.sqrTo(r,r2),0<(e&1<<i))z.mulTo(r2,g,r);else{var t=r;r=r2,r2=t}return z.revert(r)},BigInteger.prototype.toString=function(b){if(this.s<0)return"-"+this.negate().toString(b);var k;if(16==b)k=4;else if(8==b)k=3;else if(2==b)k=1;else if(32==b)k=5;else{if(4!=b)return this.toRadix(b);k=2}var d,km=(1<<k)-1,m=!1,r="",i=this.t,p=this.DB-i*this.DB%k;if(0<i--)for(p<this.DB&&0<(d=this[i]>>p)&&(m=!0,r=int2char(d));0<=i;)p<k?(d=(this[i]&(1<<p)-1)<<k-p,d|=this[--i]>>(p+=this.DB-k)):(d=this[i]>>(p-=k)&km,p<=0&&(p+=this.DB,--i)),0<d&&(m=!0),m&&(r+=int2char(d));return m?r:"0"},BigInteger.prototype.negate=function(){var r=nbi();return BigInteger.ZERO.subTo(this,r),r},BigInteger.prototype.abs=function(){return this.s<0?this.negate():this},BigInteger.prototype.compareTo=function(a){var r=this.s-a.s;if(0!=r)return r;var i=this.t;if(0!=(r=i-a.t))return this.s<0?-r:r;for(;0<=--i;)if(0!=(r=this[i]-a[i]))return r;return 0},BigInteger.prototype.bitLength=function(){return this.t<=0?0:this.DB*(this.t-1)+nbits(this[this.t-1]^this.s&this.DM)},BigInteger.prototype.mod=function(a){var r=nbi();return this.abs().divRemTo(a,null,r),this.s<0&&0<r.compareTo(BigInteger.ZERO)&&a.subTo(r,r),r},BigInteger.prototype.modPowInt=function(e,m){var z;return z=e<256||m.isEven()?new Classic(m):new Montgomery(m),this.exp(e,z)},BigInteger.ZERO=nbv(0),BigInteger.ONE=nbv(1),Arcfour.prototype.init=function(key){var i,j,t;for(i=0;i<256;++i)this.S[i]=i;for(i=j=0;i<256;++i)j=j+this.S[i]+key[i%key.length]&255,t=this.S[i],this.S[i]=this.S[j],this.S[j]=t;this.i=0,this.j=0},Arcfour.prototype.next=function(){var t;return this.i=this.i+1&255,this.j=this.j+this.S[this.i]&255,t=this.S[this.i],this.S[this.i]=this.S[this.j],this.S[this.j]=t,this.S[t+this.S[this.i]&255]};var rng_state,rng_pool,rng_pptr,rng_psize=256;function rng_seed_time(){var x;x=(new Date).getTime(),rng_pool[rng_pptr++]^=255&x,rng_pool[rng_pptr++]^=x>>8&255,rng_pool[rng_pptr++]^=x>>16&255,rng_pool[rng_pptr++]^=x>>24&255,rng_psize<=rng_pptr&&(rng_pptr-=rng_psize)}if(null==rng_pool){var t;if(rng_pool=new Array,rng_pptr=0,window.crypto&&window.crypto.getRandomValues){var ua=new Uint8Array(32);for(window.crypto.getRandomValues(ua),t=0;t<32;++t)rng_pool[rng_pptr++]=ua[t]}if("Netscape"==navigator.appName&&navigator.appVersion<"5"&&window.crypto){var z=window.crypto.random(32);for(t=0;t<z.length;++t)rng_pool[rng_pptr++]=255&z.charCodeAt(t)}for(;rng_pptr<rng_psize;)t=Math.floor(65536*Math.random()),rng_pool[rng_pptr++]=t>>>8,rng_pool[rng_pptr++]=255&t;rng_pptr=0,rng_seed_time()}function rng_get_byte(){if(null==rng_state){for(rng_seed_time(),(rng_state=new Arcfour).init(rng_pool),rng_pptr=0;rng_pptr<rng_pool.length;++rng_pptr)rng_pool[rng_pptr]=0;rng_pptr=0}return rng_state.next()}function SecureRandom(){}function RSAKey(){this.n=null,this.e=0,this.d=null,this.p=null,this.q=null,this.dmp1=null,this.dmq1=null,this.coeff=null}function calculateRsaValue(val,strEnlen,flag){var rsaObj=new RSAKey,n=nn,e=ee;rsaObj.setPublic(n,e);var result=rsaObj.encrypt(val,flag);if(result.length!=strEnlen)for(var l=Math.abs(strEnlen-result.length),i=0;i<l;i++)result="0"+result;return result}return SecureRandom.prototype.nextBytes=function(ba){var i;for(i=0;i<ba.length;++i)ba[i]=rng_get_byte()},RSAKey.prototype.doPublic=function(x){return x.modPowInt(this.e,this.n)},RSAKey.prototype.setPublic=function(N,E){null!=N&&null!=E&&0<N.length&&0<E.length?(this.n=new BigInteger(N,16),this.e=parseInt(E,16)):alert("Invalid RSA public key")},RSAKey.prototype.encrypt=function(text,flag){if(flag)var m=function(s,n){if(n<s.length+11)return null;for(var ba=new Array,i=s.length-1;0<=i&&0<n;){var c=s.charCodeAt(i--);c<128?ba[--n]=c:127<c&&c<2048?(ba[--n]=63&c|128,ba[--n]=c>>6|192):(ba[--n]=63&c|128,ba[--n]=c>>6&63|128,ba[--n]=c>>12|224)}ba[--n]=0;for(var rng=new SecureRandom,x=new Array;2<n;){for(x[0]=0;0==x[0];)rng.nextBytes(x);ba[--n]=x[0]}return ba[--n]=2,ba[--n]=0,new BigInteger(ba)}(text,this.n.bitLength()+7>>3);else m=function(s,n){if(n<s.length)return alert("Message too long for RSA"),null;for(var ba=new Array,i=0,j=0;i<s.length&&j<n;){var c=s.charCodeAt(i++);c<128?ba[j++]=c:127<c&&c<2048?(ba[j++]=63&c|128,ba[j++]=c>>6|192):(ba[j++]=63&c|128,ba[j++]=c>>6&63|128,ba[j++]=c>>12|224)}for(;j<n;)ba[j++]=0;return new BigInteger(ba)}(text,this.n.bitLength()+7>>3);if(null==m)return null;var c=this.doPublic(m);if(null==c)return null;var h=c.toString(16);return 0==(1&h.length)?h:"0"+h},function(data,RSA_BIT,flag){for(var STR_EN_LEN=RSA_BIT/4,STR_DE_LEN=RSA_BIT/8,step=flag?STR_DE_LEN-11:STR_DE_LEN,startlength=0,endlength=step,tmpen="";startlength<data.length;)endlength=endlength<data.length?endlength:data.length,tmpen+=calculateRsaValue(data.substring(startlength,endlength),STR_EN_LEN,flag),startlength+=step,endlength+=step;return tmpen}(val,rsaBits||512,null!=flag?flag:1)},$.des=function(key,message,encrypt,mode,iv,padding){encrypt&&(message=unescape(encodeURIComponent(message)));var i,j,temp,right1,right2,left,right,looping,cbcleft,cbcleft2,cbcright,cbcright2,endloop,loopinc,spfunction1=new Array(16843776,0,65536,16843780,16842756,66564,4,65536,1024,16843776,16843780,1024,16778244,16842756,16777216,4,1028,16778240,16778240,66560,66560,16842752,16842752,16778244,65540,16777220,16777220,65540,0,1028,66564,16777216,65536,16843780,4,16842752,16843776,16777216,16777216,1024,16842756,65536,66560,16777220,1024,4,16778244,66564,16843780,65540,16842752,16778244,16777220,1028,66564,16843776,1028,16778240,16778240,0,65540,66560,0,16842756),spfunction2=new Array(-2146402272,-2147450880,32768,1081376,1048576,32,-2146435040,-2147450848,-2147483616,-2146402272,-2146402304,-2147483648,-2147450880,1048576,32,-2146435040,1081344,1048608,-2147450848,0,-2147483648,32768,1081376,-2146435072,1048608,-2147483616,0,1081344,32800,-2146402304,-2146435072,32800,0,1081376,-2146435040,1048576,-2147450848,-2146435072,-2146402304,32768,-2146435072,-2147450880,32,-2146402272,1081376,32,32768,-2147483648,32800,-2146402304,1048576,-2147483616,1048608,-2147450848,-2147483616,1048608,1081344,0,-2147450880,32800,-2147483648,-2146435040,-2146402272,1081344),spfunction3=new Array(520,134349312,0,134348808,134218240,0,131592,134218240,131080,134217736,134217736,131072,134349320,131080,134348800,520,134217728,8,134349312,512,131584,134348800,134348808,131592,134218248,131584,131072,134218248,8,134349320,512,134217728,134349312,134217728,131080,520,131072,134349312,134218240,0,512,131080,134349320,134218240,134217736,512,0,134348808,134218248,131072,134217728,134349320,8,131592,131584,134217736,134348800,134218248,520,134348800,131592,8,134348808,131584),spfunction4=new Array(8396801,8321,8321,128,8396928,8388737,8388609,8193,0,8396800,8396800,8396929,129,0,8388736,8388609,1,8192,8388608,8396801,128,8388608,8193,8320,8388737,1,8320,8388736,8192,8396928,8396929,129,8388736,8388609,8396800,8396929,129,0,0,8396800,8320,8388736,8388737,1,8396801,8321,8321,128,8396929,129,1,8192,8388609,8193,8396928,8388737,8193,8320,8388608,8396801,128,8388608,8192,8396928),spfunction5=new Array(256,34078976,34078720,1107296512,524288,256,1073741824,34078720,1074266368,524288,33554688,1074266368,1107296512,1107820544,524544,1073741824,33554432,1074266112,1074266112,0,1073742080,1107820800,1107820800,33554688,1107820544,1073742080,0,1107296256,34078976,33554432,1107296256,524544,524288,1107296512,256,33554432,1073741824,34078720,1107296512,1074266368,33554688,1073741824,1107820544,34078976,1074266368,256,33554432,1107820544,1107820800,524544,1107296256,1107820800,34078720,0,1074266112,1107296256,524544,33554688,1073742080,524288,0,1074266112,34078976,1073742080),spfunction6=new Array(536870928,541065216,16384,541081616,541065216,16,541081616,4194304,536887296,4210704,4194304,536870928,4194320,536887296,536870912,16400,0,4194320,536887312,16384,4210688,536887312,16,541065232,541065232,0,4210704,541081600,16400,4210688,541081600,536870912,536887296,16,541065232,4210688,541081616,4194304,16400,536870928,4194304,536887296,536870912,16400,536870928,541081616,4210688,541065216,4210704,541081600,0,541065232,16,16384,541065216,4210704,16384,4194320,536887312,0,541081600,536870912,4194320,536887312),spfunction7=new Array(2097152,69206018,67110914,0,2048,67110914,2099202,69208064,69208066,2097152,0,67108866,2,67108864,69206018,2050,67110912,2099202,2097154,67110912,67108866,69206016,69208064,2097154,69206016,2048,2050,69208066,2099200,2,67108864,2099200,67108864,2099200,2097152,67110914,67110914,69206018,69206018,2,2097154,67108864,67110912,2097152,69208064,2050,2099202,69208064,2050,67108866,69208066,69206016,2099200,0,2,69208066,0,2099202,69206016,2048,67108866,67110912,2048,2097154),spfunction8=new Array(268439616,4096,262144,268701760,268435456,268439616,64,268435456,262208,268697600,268701760,266240,268701696,266304,4096,64,268697600,268435520,268439552,4160,266240,262208,268697664,268701696,4160,0,0,268697664,268435520,268439552,266304,262144,266304,262144,268701696,4096,64,268697664,4096,266304,268439552,64,268435520,268697600,268697664,268435456,262144,268439616,0,268701760,262208,268435520,268697600,268439552,268439616,0,268701760,266240,266240,4160,4160,262208,268435456,268701696),keys=$.des_createKeys(key),m=0,len=message.length,chunk=0,iterations=32==keys.length?3:9;looping=3==iterations?encrypt?new Array(0,32,2):new Array(30,-2,-2):encrypt?new Array(0,32,2,62,30,-2,64,96,2):new Array(94,62,-2,32,64,2,30,-2,-2),2==padding?message+="        ":1==padding?encrypt&&(temp=8-len%8,message+=String.fromCharCode(temp,temp,temp,temp,temp,temp,temp,temp),8===temp&&(len+=8)):padding||(message+="");var result="",tempresult="";for(1==mode&&(cbcleft=iv.charCodeAt(m++)<<24|iv.charCodeAt(m++)<<16|iv.charCodeAt(m++)<<8|iv.charCodeAt(m++),cbcright=iv.charCodeAt(m++)<<24|iv.charCodeAt(m++)<<16|iv.charCodeAt(m++)<<8|iv.charCodeAt(m++),m=0);m<len;){for(left=message.charCodeAt(m++)<<24|message.charCodeAt(m++)<<16|message.charCodeAt(m++)<<8|message.charCodeAt(m++),right=message.charCodeAt(m++)<<24|message.charCodeAt(m++)<<16|message.charCodeAt(m++)<<8|message.charCodeAt(m++),1==mode&&(encrypt?(left^=cbcleft,right^=cbcright):(cbcleft2=cbcleft,cbcright2=cbcright,cbcleft=left,cbcright=right)),left^=(temp=252645135&(left>>>4^right))<<4,left^=(temp=65535&(left>>>16^(right^=temp)))<<16,left^=temp=858993459&((right^=temp)>>>2^left),left^=temp=16711935&((right^=temp<<2)>>>8^left),left=(left^=(temp=1431655765&(left>>>1^(right^=temp<<8)))<<1)<<1|left>>>31,right=(right^=temp)<<1|right>>>31,j=0;j<iterations;j+=3){for(endloop=looping[j+1],loopinc=looping[j+2],i=looping[j];i!=endloop;i+=loopinc)right1=right^keys[i],right2=(right>>>4|right<<28)^keys[i+1],temp=left,left=right,right=temp^(spfunction2[right1>>>24&63]|spfunction4[right1>>>16&63]|spfunction6[right1>>>8&63]|spfunction8[63&right1]|spfunction1[right2>>>24&63]|spfunction3[right2>>>16&63]|spfunction5[right2>>>8&63]|spfunction7[63&right2]);temp=left,left=right,right=temp}right=right>>>1|right<<31,right^=temp=1431655765&((left=left>>>1|left<<31)>>>1^right),right^=(temp=16711935&(right>>>8^(left^=temp<<1)))<<8,right^=(temp=858993459&(right>>>2^(left^=temp)))<<2,right^=temp=65535&((left^=temp)>>>16^right),right^=temp=252645135&((left^=temp<<16)>>>4^right),left^=temp<<4,1==mode&&(encrypt?(cbcleft=left,cbcright=right):(left^=cbcleft2,right^=cbcright2)),tempresult+=String.fromCharCode(left>>>24,left>>>16&255,left>>>8&255,255&left,right>>>24,right>>>16&255,right>>>8&255,255&right),512==(chunk+=8)&&(result+=tempresult,tempresult="",chunk=0)}if(result=(result+=tempresult).replace(/*$/g,""),!encrypt){if(1===padding){var paddingChars=0;(len=result.length)&&(paddingChars=result.charCodeAt(len-1)),paddingChars<=8&&(result=result.substring(0,len-paddingChars))}result=decodeURIComponent(escape(result))}return result},$.des_createKeys=function(key){for(var lefttemp,righttemp,temp,pc2bytes0=new Array(0,4,536870912,536870916,65536,65540,536936448,536936452,512,516,536871424,536871428,66048,66052,536936960,536936964),pc2bytes1=new Array(0,1,1048576,1048577,67108864,67108865,68157440,68157441,256,257,1048832,1048833,67109120,67109121,68157696,68157697),pc2bytes2=new Array(0,8,2048,2056,16777216,16777224,16779264,16779272,0,8,2048,2056,16777216,16777224,16779264,16779272),pc2bytes3=new Array(0,2097152,134217728,136314880,8192,2105344,134225920,136323072,131072,2228224,134348800,136445952,139264,2236416,134356992,136454144),pc2bytes4=new Array(0,262144,16,262160,0,262144,16,262160,4096,266240,4112,266256,4096,266240,4112,266256),pc2bytes5=new Array(0,1024,32,1056,0,1024,32,1056,33554432,33555456,33554464,33555488,33554432,33555456,33554464,33555488),pc2bytes6=new Array(0,268435456,524288,268959744,2,268435458,524290,268959746,0,268435456,524288,268959744,2,268435458,524290,268959746),pc2bytes7=new Array(0,65536,2048,67584,536870912,536936448,536872960,536938496,131072,196608,133120,198656,537001984,537067520,537004032,537069568),pc2bytes8=new Array(0,262144,0,262144,2,262146,2,262146,33554432,33816576,33554432,33816576,33554434,33816578,33554434,33816578),pc2bytes9=new Array(0,268435456,8,268435464,0,268435456,8,268435464,1024,268436480,1032,268436488,1024,268436480,1032,268436488),pc2bytes10=new Array(0,32,0,32,1048576,1048608,1048576,1048608,8192,8224,8192,8224,1056768,1056800,1056768,1056800),pc2bytes11=new Array(0,16777216,512,16777728,2097152,18874368,2097664,18874880,67108864,83886080,67109376,83886592,69206016,85983232,69206528,85983744),pc2bytes12=new Array(0,4096,134217728,134221824,524288,528384,134742016,134746112,16,4112,134217744,134221840,524304,528400,134742032,134746128),pc2bytes13=new Array(0,4,256,260,0,4,256,260,1,5,257,261,1,5,257,261),iterations=8<key.length?3:1,keys=new Array(32*iterations),shifts=new Array(0,0,1,1,1,1,1,1,0,1,1,1,1,1,1,0),m=0,n=0,j=0;j<iterations;j++){var left=key.charCodeAt(m++)<<24|key.charCodeAt(m++)<<16|key.charCodeAt(m++)<<8|key.charCodeAt(m++),right=key.charCodeAt(m++)<<24|key.charCodeAt(m++)<<16|key.charCodeAt(m++)<<8|key.charCodeAt(m++);left^=(temp=252645135&(left>>>4^right))<<4,left^=temp=65535&((right^=temp)>>>-16^left),left^=(temp=858993459&(left>>>2^(right^=temp<<-16)))<<2,left^=temp=65535&((right^=temp)>>>-16^left),left^=(temp=1431655765&(left>>>1^(right^=temp<<-16)))<<1,left^=temp=16711935&((right^=temp)>>>8^left),temp=(left^=(temp=1431655765&(left>>>1^(right^=temp<<8)))<<1)<<8|(right^=temp)>>>20&240,left=right<<24|right<<8&16711680|right>>>8&65280|right>>>24&240,right=temp;for(var i=0;i<shifts.length;i++)right=shifts[i]?(left=left<<2|left>>>26,right<<2|right>>>26):(left=left<<1|left>>>27,right<<1|right>>>27),right&=-15,lefttemp=pc2bytes0[(left&=-15)>>>28]|pc2bytes1[left>>>24&15]|pc2bytes2[left>>>20&15]|pc2bytes3[left>>>16&15]|pc2bytes4[left>>>12&15]|pc2bytes5[left>>>8&15]|pc2bytes6[left>>>4&15],temp=65535&((righttemp=pc2bytes7[right>>>28]|pc2bytes8[right>>>24&15]|pc2bytes9[right>>>20&15]|pc2bytes10[right>>>16&15]|pc2bytes11[right>>>12&15]|pc2bytes12[right>>>8&15]|pc2bytes13[right>>>4&15])>>>16^lefttemp),keys[n++]=lefttemp^temp,keys[n++]=righttemp^temp<<16}return keys},$.genkey=function(key,start,end){return{key:$.pad(key.slice(start,end)),vector:1}},$.pad=function(key){for(var i=key.length;i<24;i++)key+="0";return key},$.DES3={encrypt:function(input){var genKey=$.genkey("PKCS5Padding",0,24);return btoa($.des(genKey.key,input,1,1,"26951234",1))},decrypt:function(input){var genKey=$.genkey("PKCS5Padding",0,24);return $.des(genKey.key,atob(input),0,1,"26951234",1)}}}(jQuery);
var nn = "010001";
var ee = "DA3485CBD045AC458F5EC2535211251499C33FC6B459823265C9701E21AA8869EB3FAE524B035AC47EC700D588DB384B2EBD24313D2DA9B01E3339BAE5393B55";
plaintText = "key=1711381471070313&iv=1711381472448865&h=c93ccd78b2076528346216b3b2f701e6&s=852441957"
rsaEncrypt(plaintText, nn, ee, 512, 0)
expected = "d213e5ba10114b95127f8ef426891ab1ece7763cbc2def2ddcd246c49de733907c440561844aa7c1fa975afbe1d005391d5864dd612ed6084fb3891d209316ba0955a166e8e07e19abddabfdfa085f7a66679caee0d37acd64a139e28b71d41df9925732aee16c4e918767f46f07d3b7578b54381dd666d9d445ab523bbe5449"
var JsVars = File.ReadAllText("encrypt.js");
var engine = new Jurassic.ScriptEngine();
var result = engine.Evaluate(_JsVars);
var jsResult = engine.CallGlobalFunction("$.rsa.encrypt", plaintText, nn, ee, 512, 0);
string cipher = jsResult.ToString();

ASP.NET Core Null Value Insertion – Ajax Post – Fluent Validation

I am developing an ASP.NET Core project. I am using MSSQL as a database. In my database, there is a Explanation column in my table named Inventory and this column can be left nullable. But I get an error when I leave this field blank while adding data through the project.

FluentValidation – InventoryAdditionValidator.cs,

public class InventoryAdditionValidator : AbstractValidator<CreateInventoryDto>
{
    public InventoryAdditionValidator()
    {
        RuleFor(x => x.InventoryID).NotEmpty().WithMessage("Demirbaş No Boş Bırakılamaz");
        RuleFor(x => x.Brand).NotEmpty().WithMessage("Marka Boş Bırakılamaz");
        RuleFor(x => x.Model).NotEmpty().WithMessage("Model Boş Bırakılamaz");
        RuleFor(x => x.Type).NotEmpty().WithMessage("Demirbaş Tipi Boş Bırakılamaz");
        RuleFor(x => x.SerialNo).NotEmpty().WithMessage("Seri Numarası Boş Bırakılamaz");
        RuleFor(x => x.UsageCondition).NotEmpty().WithMessage("Kullanım Durumu Boş Bırakılamaz");
        RuleFor(x => x.Condition).NotEmpty().WithMessage("Demirbaş Durumu Boş Bırakılamaz");
        RuleFor(x => x.Ownership).NotEmpty().WithMessage("Mülkiyet Durumu Boş Bırakılamaz");
    }
}

InventoryController.cs,

[HttpPost]
public async Task<IActionResult> AddInventory(CreateInventoryDto createInventoryDto)
{
    var user = await _userManager.FindByNameAsync(User.Identity.Name);
    var id = user.Id;

    InventoryAdditionValidator validationRules = new InventoryAdditionValidator();
    ValidationResult validationResult = validationRules.Validate(createInventoryDto);
    if (validationResult.IsValid)
    {
        createInventoryDto.CreateUser = id;
        createInventoryDto.CreateDate = DateTime.Now;

        var client = _httpClientFactory.CreateClient();
        var jsonData = JsonConvert.SerializeObject(createInventoryDto);
        StringContent stringContent = new StringContent(jsonData, Encoding.UTF8, "application/json");
        var responseMessage = await client.PostAsync("https://localhost:7198/api/Inventory", stringContent);
        if (responseMessage.IsSuccessStatusCode)
        {
            return Json(createInventoryDto);
        }
        else
        {
            return BadRequest();
        }
    }
    else
    {
        var errors = validationResult.Errors.Select(e => e.ErrorMessage).ToList();
        return BadRequest(new { Errors = errors });
    }
}

InventoryAddition.cshtml – Ajax code,

<script>
    $(document).ready(function () {
        $("#btnAddInventory").click(function () {
            let value = {
                InventoryID: $("#input-qr-result").val(),
                Brand: $("#choices-single-brand").val(),
                Model: $("#txtModel").val(),
                Type: $("#choices-single-type").val(),
                SerialNo: $("#txtSerialNo").val(),
                UsageCondition: $("#choices-single-usage").val(),
                Condition: $("#choices-single-condition").val(),
                Ownership: $("#choices-single-ownership").val(),
                Explanation: $("#txtExplanation").val()
            }

            $.ajax({
                type: "POST",
                url: "/Inventory/AddInventory",
                data: value,
                success: function () {
                    $("#order-tab").removeClass("active");
                    $("#order-tab-pane").removeClass("show active");
                    $("#delivery-tab").addClass("active");
                    $("#delivery-tab-pane").addClass("show active");

                    setTimeout(function () {
                        window.location.href = "/Inventory/Index";
                    }, 3000);
                },
                error: function (xhr) {
                    var errors = xhr.responseJSON && xhr.responseJSON.errors;

                    if (!errors) {
                        var errorMessage = xhr.responseText;
                        showToast(errorMessage);
                    } else {
                        showValidationErrors(errors);
                    }
                }
            });
        });

        function showValidationErrors(errors) {
            if (Array.isArray(errors) && errors.length > 0) {
                errors.forEach((error) => {
                    showToast(error);
                });
            }
        }

        function showToast(error) {
            Toastify({
                text: error,
                duration: 3000,
                gravity: "top",
                position: 'right',
                backgroundColor: "#f64e60",
                stopOnFocus: true,
            }).showToast();
        }
    });
</script>

CreateInventoryDto.cs,

public class CreateInventoryDto
{
    public int InventoryID { get; set; }
    public int Brand { get; set; }
    public string Model { get; set; }
    public int Type { get; set; }
    public string SerialNo { get; set; }
    public int UsageCondition { get; set; }
    public int Condition { get; set; }
    public int Ownership { get; set; }
    public int CreateUser { get; set; }
    public DateTime CreateDate { get; set; }
    public string Explanation { get; set; }
}

I don’t check this field with Fluent validation, how can I solve this problem?

Thanks,
Kind regards.

How to filter multiple columns in an HTML table?

I want to implement a filtering function similar to the one in excel, however I want two options “All” and “None”, “None” hides all rows if a certain column has empty/blank cells and “All” hides all rows if a certain column has non-empty/non-blank cells. It is just like the excel filter functionality but a bit more generalized.

How can I implement this?

my first approach was to simply see if the cell is empty or not and based on the selection i would either hide it or not, that did not work as removing filters would affect different unrelated columns.

my second approach was to have a huge hashmap of arrays with values “All”, “None”. each column had its own array in the hashmap. “All” and “None” would be removed/added based on if they are checkedunchecked in that column. then it checks if either “All” or “None” are unchecked and if the cells is not blank or blank respectively for every row and every column

this is a jsfiddle to showcase what my code looks like
https://jsfiddle.net/7ng4adfh/

This is my code

function filter_rows(index, parentID) {
    let rows = tableid.rows;
    let options = document.getElementById(parentID).getElementsByTagName('label')
    let checkboxes = document.getElementById(parentID).getElementsByTagName('input')
    for (let i = 0; i < options.length; i++) {
        if (checkboxes[i].checked) {
            if (!hashmapOfoptions[index].includes(options[i].innerText)) {
                hashmapOfoptions[index].push(options[i].innerText)
            }
        } else {
            hashmapOfoptions[index] = hashmapOfoptions[index].filter(item => item !== options[i].innerText)
        }
    }


    for (let row = 1; row < rows.length; row++) {
        let cols = rows[row].cells;
        willHideRow = false
        for (let j = 0; j < cols.length; j++) {
            if (!hashmapOfoptions[j].includes("None")) {
                if (cols[j].innerText == "" || cols[j].innerText == "-" || cols[j].innerText == "n") {
                    willHideRow = true
                }
            }
            if (!hashmapOfoptions[j].includes("All")) {
                if (cols[j].innerText != "" || cols[j].innerText != "-" || cols[j].innerText != "n") {
                    willHideRow = true
                }
            }
        }
        if (willHideRow) {
            rows[row].style.display = 'none'
        } else {
            rows[row].style.display = ''
        }
    }
}

How can i make it work?

How to get a postMessage message from Duda into the embedded iframe?

From what I have read, having a client-side code read the message from the iframe outside of the sandboxed one seems impossible. I can only have it sent if to the iframe outside the sandboxed. What would be the solutions, then?
Here is what I have tried so far:

 document.addEventListener("DOMContentLoaded", function() {
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
   const signupToken = urlParams.get('token');
   //const iframe = document.getElementById('myiframe'); //Most outter iframe not reachable
   //const iframe = document.getElementById('sandboxed'); //Outter iframe not reachable
   const iframe = document.getElementById('userHtmlFrame'); //This would be the ideal, but not reachable
   if (iframe && signupToken) {
     console.log("WebApp iframe found and here is the token " + signupToken)
     iframe.contentWindow.postMessage({
       signupToken: signupToken
     }, "*");
   }
 });

Then, to read the message, I have:

let urlToken = '';
document.addEventListener("DOMContentLoaded", () => {
  window.addEventListener('message', (event) => {
    console.log("Received message:", event);
    if (event.origin === "https://www.kshkjfhkajhfd.com") {
      console.log("Correct origin");
      if (event.data && event.data.signupToken) {
        urlToken = event.data.signupToken;
        console.log("Token received from parent:", urlToken);
      } else {
        console.log("Message does not contain expected data:", event.data);
      }
    } else {
      console.error("Message from unknown or incorrect origin:", event.origin);
    }
  }, false);
});

Renaming a file – Google API direct download link

I am using an external API to create and download a data extract. After the extract has been created, the API response includes a url. This url is a direct download link – I click it and a new browser tab opens, which automatically downloads the file to my downloads folder. I am trying to automate this process so I don’t have to manually download and rename the file. Everything is working, except the file is always downloaded with a default name. We’ll say this is “123456123456.csv.gz” to keep it ambiguous.

The link I follow is formatted like this-

https://storage.googleapis.com/(custom storage name)/(data extract id)/123456123456.csv.gz?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=(google service account credentials)&X-Goog-Date=(date)&X-Goog-Expires=(time until expiration)&X-Goog-SignedHeaders=host&X-Goog-Signature=(long string of number and letters)

I am currently using puppeteer to just open a new browser tab to that url, which downloads the file, and then close puppeteer-

async function downloadFile (url) {
  try {
    const browser = await puppeteer.launch(
      {headless: false}
    );
    const page = await browser.newPage();
    await page.goto(`${url}`);
    await page.waitForTimeout(3000); // just in case it takes a second
    await browser.close();
  }
  catch (error) {
    console.error(error);
  }
}

I tried to directly edit the link with a custom file name like this-

...
  const autoFileName = '000000000000.csv.gz';
  const customFileName = `${date}-${reportingLevel}.csv.gz`;
  for (let i = 0; i < urls.length; i++) {
    const newUrl = url.replace(autoFileName, customFileName);
    downloadFile(newUrl);
...

But when I open the new url in a browser, instead of downloading a file it gives me a page like this-

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>SignatureDoesNotMatch</Code>
<Message>Access denied.</Message>
<Details>The request signature we calculated does not match the signature you provided. Check your Google secret key and signing method.</Details>
<StringToSign>(sensitive information)</StringToSign>
<CanonicalRequest>GET (sensitive information) UNSIGNED-PAYLOAD</CanonicalRequest>
</Error>

I can’t find any documentation from google about these links – if anyone can find any I would love it!

At first I thought the ‘123456123456.csv.gz’ section of the url was just the name to download the file as, but now I’m realizing the file is most likely stored in their google storage as ‘123456123456.csv.gz’.

Does anyone have ideas on how I can have this automatically rename my files so I don’t have to do it manually? I did try using axios/fs to download instead, but had no luck even downloading the file, not to mention renaming it. I haven’t used axios much before so it’s possible I was doing it wrong.

Thanks in advance!

What is the correct way to mock my function using Jest?

I am new to React/TypeScript and need help with my unit testing. I need full line coverage for the code in ReactErrorBoundary.tsx but my test is not able to correctly mock the objects.

ReactErrorBoundary.tsx:

export default function ReactErrorBoundary(props: { readonly children?: ReactNode }) {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorPage}
      onError={(error) => {
        console.log("Error caught!");
        logger(error)
      }}
      onReset={() => {
        console.log("reloading the page...");
        window.location.reload();
      }}
    >
      {props.children}
    </ErrorBoundary>
  );
}

This is my logger (logService.tsx):

export const logger = (message: any) => {
    console.log("This is the logger service " +
      (message?.message ? message.message : message));
}

These are the tests I have so far, in which only the first two pass:

import ReactErrorBoundary from '../../components/ReactErrorBoundary';
import { ErrorBoundary } from 'react-error-boundary';
import { logger } from '../../services/logService';
import ErrorPage from '../../components/ErrorPage';

jest.mock('../../services/logService', () => ({
  logger: jest.fn(),
}));

jest.mock('react-error-boundary', () => {
  const React = require('react');
  const ErrorPage = require('../../components/ErrorPage').default;

  return {
    ...jest.requireActual('react-error-boundary'),
    ErrorBoundary: jest.fn(({ onError, onReset, FallbackComponent }) => {
      onError && onError(new Error());
      onReset && onReset();

      return {
        FallbackComponent: ErrorPage,
      };
    }),
  };
});

describe('ReactErrorBoundary', () => {
  test('renders ErrorBoundary with ErrorPage as FallbackComponent', () => {
    render(<ReactErrorBoundary />);
    expect(ErrorBoundary).toHaveBeenCalledWith({
        FallbackComponent: expect.any(Function),
        onError: expect.any(Function),
        onReset: expect.any(Function),
        children: undefined,
      }, {});            
  });

  test('passes children to ErrorBoundary', () => {
    const children = <div>Hello World</div>;

    render(<ReactErrorBoundary>{children}</ReactErrorBoundary>);
    expect(ErrorBoundary).toHaveBeenCalledWith({
      FallbackComponent: expect.any(Function),
      onError: expect.any(Function),
      onReset: expect.any(Function),
      children: <div>Hello World</div>,
    }, {});  
  });

  test('logs error message when onError is triggered', () => {
    const spy = jest.spyOn(console, 'log').mockImplementation();
    const error = new Error("Test error message");

    render(<ReactErrorBoundary><div>Error occurred!</div></ReactErrorBoundary>);
    
    expect(spy).toHaveBeenCalled();
    expect(spy).toHaveBeenCalledWith('Error caught!', error);

    spy.mockRestore();
  });
});

When I run the third test, I get the following error:

ReactErrorBoundary › logs error message when onError is triggered
expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

I think it is because I am mocking react-error-boundary but even when I modify that mock it does not work. I would appreciate any help!

Mouse pointer after some html elements

I created paragraph input element. I typed some text and then I added some html element(mjx-container) via MathJax external library. When I added some text after mjx-container, mouse pointer automatically moves before mjx-container and in result I cannot add any text after mjx-container.

How can I allow mouse pointer after any element added to input element?

I added some text via code after mjx-container and then I could type new text after mjx-container, but when I deleted text after mjx-container, again mouse pointers moves back before mjx-container

I want have cursor after mjx-container

enter image description here

Sum multiple items in 2D array based on condition (javascript)

I have a 2D array:

[ [ 1, 2, 43, 5 ],
  [ 1, 5, 12, 1 ],
  [ 2, 3, 6, 77 ],
  [ 2, 1, 48, 94 ],
  [ 3, 3, 15, 85 ],
  [ 3, 7, 97, 86 ],
  [ 4, 0, 9, 54 ],
  [ 4, 1, 83, 16 ]]

This is the result I’m after:

[ [ 1, 7, 55, 6 ],
  [ 2, 4, 54, 171 ],
  [ 3, 10, 112, 171 ],
  [ 4, 1, 92, 70 ]]

Match the first index within each array, and sum the other indexes.

My first thought was to use reduce and findIndex to find the index of the first item, add item to array if not found, otherwise sum the values.

But I really don’t know what I’m doing.

array.reduce((acc,e) => 
      { let index = acc.findIndex(inner => inner[0] === e[0]);
      (index === -1) ? [...acc,e] : (acc[index][1] += e[1]) && (acc[index][2] += e[2]) && (acc[index][3] += e[3]);
      return acc},[]);

Help please!

this javascript function is not executing and no amount of searching answers my question [closed]

Please, do not say this has already been answered. It doesn’t work and I’d like some help with it.

javascript test on codebeautify.org

function setTimer() {
  setTimeout(stopTimer, 10000);
}

function stopTimer() {
    alert('stopTimer');
}

setTimer();

This code executes perfectly at online javascript test site.

MY CODE

in my .xhtml

<h:inputText id="raceTimeId" styleClass="bodyTextMediumLeft" size="8" value="#{hhraMain.racePostTime}" />
<h:commandButton id="reminderId" style="margin: 5px; width: 20px" onclick="clickDateMath()" value="R" />

in my .js file

function clickDateMath() {
    let raceHour = document.getElementById('hhraFormId:postHourId').value;
    var hourArray = raceHour.split(':');
    var intHour = parseInt(hourArray[0]);
    if (intHour < 12)
    intHour += 12;
    const nowDate = new Date();
    var nowYear = nowDate.getFullYear();
    var nowMonth = nowDate.getMonth();
    var nowDayOfMonth = nowDate.getDate();
    var nowHour = nowDate.getHours();
    const futureDate = new Date(nowYear,nowMonth,nowDayOfMonth,intHour,hourArray[1],1);
    var  delay = futureDate - nowDate - 60000;

    alert('This sets the timeout ' + delay);

    setTimeout(displayWarning, delay);
}

function displayWarning() {
    alert('displayWarning');
    document.getElementById('hhraFormId:warningId').click();    
}

The alert in the checkDateMath function executes, but for whatever reason,the function displayWarning does not fire after the expected time delay. The delay specified in the alert is correct for what I’m trying to do. I’m taking the milliseconds difference between two times and then subtracting an extra minute. I want a warning 1 minute before the time submitted to the function.

Improving the visibility of an App based on artificial intelligence [closed]

I’m Alex, the developer of the AiSpica App for Android.
AiSpica is based on multiple AI models, including GPT4, Mistral, Gemini, Stable Diffusion, and others.

We have already implemented many features such as Voice Chat, Image Creation, AI-powered Voice Translation, Image and Document Analysis, OCR, food nutritional values through scanning, and many more.

What else can we do to make AiSpica the best AI App?
I hope to receive your valuable advice, thank you for your time.

We are doing everything we can to improve AiSpica, We have already added dozens of features that users might find interesting, all features related to artificial intelligence, solved dozens of bugs and optimized the interface, our current main problem is marketing and the total absence of funds to advertise, we are obviously doing everything we can to improve the quality of AiSpica and are looking for ways to invite users to share it with their friends.

CSS styles not applying to React component unless explicitly included in parent component

I’m encountering an issue with CSS styles not being applied to a React component unless those styles are explicitly included in its parent component. Here’s the setup:

I have a Sidebar component and a DashboardLayout component in my React application. The Sidebar component is rendered within the DashboardLayout component.

In the Sidebar component (sidebar.tsx), I have certain CSS classes applied to elements, such as:

<Link 
  key={route.href} 
  href={route.href}
  className={cn ("text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-black hover:bg-white rounded-xl transition",
 pathname === route.href ? "text-white bg-white/10":"text-white-400")}>
  <div className="py-2 space-x-1"></div>
   <div className='flex items-center flex-1'>
     <route.icon className={cn("h-4 w-4 mr-2", route.color)} />
      {route.label}
   </div>
  </Link>

and in my DashboardLayout component (layout.tsx), I have the following structure:

const DashboardLayout = ({ children }: { children: React.ReactNode; }) => {
  return (
      <div className="h-full relative flex">
          {/* Sidebar */}
          <div className="hidden md:flex md:flex-col md:fixed inset-y-0 z-50
           text-sm p-3 w-72
           transition
           text-sky-500
           py-4 space-x-1
           text-white
           cursor-pointer hover:text-black          
           bg-black 
           ">
              <Sidebar />
          </div>
          {/* Vertical Divider */}
          <div className="md:hidden w-px bg-gray-300"></div>
          <div className="hidden md:block h-full w-px bg-gray-300 absolute inset-y-0 left-72"></div> {/* Desktop divider */}
          {/* Main Content */}
          <main className="flex-1 md:pl-72 relative z-40">
              <Navbar />
              {children}
          </main>
      </div>
  );
};

The issue I’m facing is that the CSS classes applied within the Sidebar component (sidebar.tsx) do not take effect unless I also include them in the parent DashboardLayout component (layout.tsx). If I remove these classes from layout.tsx, the styles defined in sidebar.tsx are not applied to the Sidebar component.

Here are the specific CSS properties I had to include in the parent DashboardLayout component from the Sidebar:

transition
text-sky-500
py-4 space-x-1
text-white
cursor-pointer hover:text-black

How can I ensure that these CSS styles defined in the Sidebar component apply properly to the Sidebar component without needing to duplicate them in the DashboardLayout component?