What is pterodactyl panel?

Pterodactyl® is a free, open-source game server management panel built with PHP, React, and Go. Designed with security in mind, Pterodactyl runs all game servers in isolated Docker containers while exposing a beautiful and intuitive UI to end users.

You can check out the pterodactyl panel in there github.
And this is their api documentation

Issue

I was using the pterodactyl panel api by POST method to create a new user in the panel. I tried it using Postman API platform for testing if it works and it actually worked all good. But when I implemented it in my ReactJS app using fetch function, it returned a very weird response with a 419 error. I am not sure if this type of error is common or not, also I faced this error first time so I have no idea. Would be very grateful if any help is received. 🙂

Code

    const currUser = auth.currentUser
    const pass = generatePassword()
    const userData = {
        email: currUser.email,
        first_name: currUser.displayName,
        last_name:'',
        username: currUser.email,
        password: pass
    };
    let reqOpts = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': api_key,
        },
        mode: 'no-cors',
        body: JSON.stringify(userData)
    }
    let uri = api_uri+"/api/application/users"
    await fetch(uri, reqOpts)
    .then(res=>{
        if(!res.ok) {
            throw new Error('Pterodactyl Panel API resonse is NOT OK nStatus : ' + res.status)
        }
        return res.json()
    })
    .catch(err=>{
        console.log(err)
        alert(err)
    })

Error and the response received
screenshot here

I tried to create an user with my app’s authorized user’s details in the pterodactyl panel. I expected a good 200 status response with the details of the created user in the panel.

User
I am facing and issue in which i am basically downloading a whole section into an image using html2canvas and image is also getting downloaded ,but in inside section i have a image with is blah and a css object-fit:cover is already applied via external css but when i am downloading the section i am not getting that css object-fit applied to it on downloaded image please give some solution, and if you want code tell me which code you want

on download i want to get image with object-fit:cover in downloaded iamge

currently I’m using Angular material datepicker and I allow user to select date from calendar or directly input in field manually.
Currently if user input “5-5-5” and click outside it will automatically converts date to “05/05/2005” but I want strict validation if user enter any format except dd/mm/yyyy or dd-mm-yyyy it should show my validations instead of converting it automatically

I tried finding a way in documentation but not much details found related to it

Installed node via powershell and created project, but cant run it.

creation of my project

enter image description here

i’m not in node REPL.
is the problem in the encoding?
there is a topic like this, but it didn’t help me Why Node.js cannot run my JavaScript code in the terminal?

So I’m using the javascript window on codepen and the d3.js tool for a brushable timeline to query my data based on year. I have it where it does work, but the timeline labels are decimals instead of the years. The data being query is a geojson about wildlife poaching reports, attributes including animal product, poaching estimate value, reporting country, and the year.

I tried to use the new date command for the date range of the data and that was successful in changing the labels. The downside though was then I lost all functionality, selecting anything on the timeline would eliminate all the points from view. Below I included the code block that I believe is the appropriate location to change the labels, I just don’t know the correct command/implementation.

  var x = d3
   .scaleTime()
    .domain(
      // ([new Date(1994, 1, 1), new Date(2023, 12, 31) -1 ]),
      d3.extent(data.features, function(d) {
      return d.properties.Year;
    x.ticks(d3.timeYear.every(1));
 }))
   .rangeRound([0, width]); 

  var svg = container
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate("+ margin.left + "," + margin.top + ")");

  svg
    .append("g") // https://github.com/d3/d3-time-format
    .attr("class", "axis axis--grid")
    .attr("transform", "translate(0," + height + ")")
    .call(
      d3
        .axisBottom(x)
        .ticks(d3.timeYear, 1)
        .tickSize(-height)
        .tickFormat(function() {
          return null;
        })
    )
    .selectAll(".tick")
    .classed("tick--minor", function(d) {
      return d.getFullYear();
    });

If that’s not sufficient, this is the link to the codepen: https://codepen.io/ecsizmad/pen/ZEZqXOe

Thank you in advance!!

Model.query() methods like User.find(“…”) returns a query object not a promise then how some people use await before this function as according to my knowledge await is used with promise
like
const user = await User.find()

i am confused plz help
hope someone will answer

This error I am getting while login to b2c with PKCE for SPA(Single page application) seems I am one step away from it.

core.mjs:10614 ERROR ServerError: server_error: AADB2C90075: The claims exchange ‘LookUpPermissionsWebHook’ specified in step ‘7’ returned HTTP error response with Code ‘BadRequest’ and Reason ‘Bad Request’.
Correlation ID: 5d0dd0c5-964a-4234-97f8-b5569fab5e7a
Timestamp: 2024-04-30 03:48:59Z

import { MsalGuard, MsalInterceptor, MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
const isIE = window.navigator.userAgent.indexOf('MSIE') > -1
            || window.navigator.userAgent.indexOf('Trident/')
const tenant = encodeURIComponent('abb ability');`enter code here`

@NgModule({
 
   
  imports: [
    MsalModule.forRoot(new PublicClientApplication
      (
        {
          auth : {
           
            clientId: 'e0fa422a-c25a-4d09-8676-b7e652d56dfb',
            
            authority: `https://genb2cms01euwprod.b2clogin.com/genb2cms01euwprod.onmicrosoft.com/B2C_1A_AAD_RP`, 
            redirectUri: 'http://localhost:4200/paportal/',[`genb2cms01euwprod.b2clogin.com/genb2cms01euwprod.onmicrosoft.com/oauth2/v2.0/authorize`],
            knownAuthorities: [`genb2cms01euwprod.b2clogin.com`],
            
          },
          cache: 
          {
            cacheLocation: 'localStoarge',
            storeAuthStateInCookie: !!isIE
          }
        }
      ),
      {
        interactionType:InteractionType.Redirect,
        authRequest : {
          // scopes: ["openid", "offline_access", "https://genb2cms01euwprod.onmicrosoft.com/paportal.region/region"],
          scopes: ["openid", "offline_access", "https://genb2cms01euwprod.onmicrosoft.com/abb.ability/region"],
          extraQueryParameters: { 
            tenant: tenant,
          }
        }
      },
      {
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map(
          [
            ["https://graph.microsoft.com", ["openid", "offline_access"]]
          ]
        )
      }
      )
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [AppConfigService],
      useFactory: (appConfigService: AppConfigService) => async () =>
        await lastValueFrom(appConfigService.loadAppConfig())
    },
    {
      provide: HTTP_INTERCEPTORS, 
      useClass: MsalInterceptor,
      multi: true
    }, 
    ArtifactsService,
    MsalGuard
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

If I have a web app deployed to multiple sub-domains with the base domain being same (abc.example.com, def.example.com … xyz.example.com and so on), is it possible to detect when a user has multiple tabs opened with the different sub-domains in the same browser? e.g. if a user opens both abc.example.com and xyz.example.com in the same browser, it should detect that.

I looked into Broadcast Channel API but found that it doesn’t work cross-origin so that doesn’t seem to be an option.

I am trying to create the experience of playing a hand drum. The idea is that the user picks up the drum mallet, hovers it above the drum, and if the user clicks again the drum plays the audio. Is this possible? I have found a lot of resources about shapes, specifically ellipses, but not a lot of information about images.

var drum, mallet;
var x, y, w, h; // Location and size
let dragging = false;
let rollover = false;
let img;
let vel;
let pos;

function preload(){
  
  strike = loadSound('HandDrum.mp3');
  drum = loadImage('handdrum2.png');
  mallet = loadImage('drumMallet.png');
  
 
  
}
function setup() {
  createCanvas(750, 500);
  

  //Dimensions for Moving Stuff
  x = 400;
  y = 100;
  w = 300;
  h = 300;


}

function draw() {
  
  background(220);
  
  tint(219,69,69,250);
  image(drum,125,95,400,400);
  tint(82,217,198);
  //image(mallet,350,100,width/2,height/2);
  
   
  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + 2) {
    rollover = true;
  } else {
    rollover = false;
  }
  // Adjust location if being dragged
  if (dragging) {
    x = mouseX + offsetX;
    y = mouseY + offsetY;
   
  }
  image(mallet, x, y, w, h);
  
}
 

function mousePressed() {

  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
    dragging = true;
    offsetX = x - mouseX;
    offsetY = y - mouseY;
  }
}
function mouseReleased() {
   //Quit dragging
   dragging = false;

}

[![drum mallet image][1]][1]
[![Handdrum Image][2]][2]
[1]: https://i.sstatic.net/37AZH5lD.png
[2]: https://i.sstatic.net/Im5H1nWk.png

To verify that your business is collecting consent from end users in the EEA before sending personal data to Google for use in ads personalisation, implement ads personalisation consent signals. If personal data is not labelled with end-user consent, EEA-based visitors will not be included in the audience lists exported to Google Ads and will affect ads personalisation.

To verify that your business is collecting consent from end users in the EEA before sending personal data to Google for use in ads personalisation, implement ads personalisation consent signals. If personal data is not labelled with end-user consent, EEA-based visitors will not be included in the audience lists exported to Google Ads and will affect ads personalisation. To configure consent signals, use a consent management platform or the consent mode API.

I need to be able to draw in a canvas using JavaScript.
I have the following code:
.JS

  function CursorSign() {
      var canvas = document.getElementById("mycanvas");
      var ctx = canvas.getContext("2d");

      var isDrawing = false;
      var lastX, lastY;

      ctx.strokeStyle = "#000000";
      ctx.lineWidth = 2;

      canvas.addEventListener("mousedown", startDrawing);
      canvas.addEventListener("mousemove", draw);
      canvas.addEventListener("mouseup", stopDrawing);

      function startDrawing(e) {
          isDrawing = true;
          lastX = e.offsetX;
          lastY = e.offsetY;
      }

      function draw(e) {
          if (!isDrawing) return;
          var x = e.offsetX;
          var y = e.offsetY;
          ctx.beginPath();
          ctx.moveTo(lastX, lastY);
          ctx.lineTo(x, y);
          ctx.stroke();
          lastX = x;
          lastY = y;
      }

      function stopDrawing() {
          isDrawing = false;
          var imageData = canvas.toDataURL();
          var base64Data = imageData.replace(/^data:image/(png|jpeg);base64,/, '');
          document.getElementById('<%= HiddenField1.ClientID %>').value = base64Data;
     }
 }

.ASPX

            <table border="1" cellpadding="0">
                <tr>
                  <td>
                    <canvas id="mycanvas" name="cnv"></canvas>
                  </td>
                </tr>
            </table>
            

With the mouse cursor it works fine. But on mobile, like a tablet or a phone, it just moves the page around.
It also doesn’t work on chrome’s mobile version on the inspection console.

What other approach can I use?

I’m using ReactQuill to render textboxes on a whiteboard (created using TLDraw).
The toolbar needs to appear on top of all the shapes on the whiteboard and so its created as a top level component.

The quill editor is created inside the shapes and so is much deeper in the stack. The problem is that the “ql-tooltip” element is created with the quill editor element and so always appears under the toolbar.

Is there a way to re-create the tooltip element with the higher level toolbar?

What I tried:

Create a custom link and tooltip component as follows:

const SlideCanvasToolbar = () => {
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);

  const toggleTooltip = () => setIsTooltipVisible(!isTooltipVisible);

    return (
      <div>
        <CustomLinkTooltip
          isVisible={isTooltipVisible}
          onClose={() => setIsTooltipVisible(false)}
        />
        <div
          id={`toolbar_${cleanId}`}
          onClick={event => event.stopPropagation()}
        >
          <button className="ql-bold"></button>
          <button className="ql-italic"></button>
          <button className="ql-underline"></button>
          <button className="ql-strike"></button>
          <button className="ql-custom-link" onClick={toggleTooltip}>
            L
          </button>
        </div>
      </div>
    );
};

While this shows the tooltip on top. I still can’t get the link formatting to show when a link is created. With this approach, I’ll also have to re-create the edit/remove functionality. When I tried adding a handler to the ReactQuill component, the editor text becomes empty (and there’s no console error):

<div
  ref={wrapperRef}
  style={{ pointerEvents: 'all', overflow: 'visible' }}
  tabIndex={0}
  data-text-editor={`ql_container_${cleanId}`}
>
  <ReactQuill
    value={rawHtmlContent}
    theme="snow"
    bounds={`[data-text-editor=ql_container_${cleanId}]`}
    ref={quillRef}
    modules={{
      toolbar: {
        container: `#toolbar_${cleanId}`,
        handlers: {
          'custom-link': function (value: string) {
            const editor = quillRef.current?.getEditor();
            if (!editor) return;
            console.log('custom-link clicked', value);
          },
        },
      },
    }}
  />
</div>

I’m using React/Vite/Express to build an app that is hosted in a subdirectory. As an example, let’s say it’s hosted at: https://example.com/my/app/

In my Vite config, I’ve set base to ./

export default defineConfig({
    base: './',
    build: {
        outDir: './public/build',
    },
    plugins: [react()],
    css: {
        preprocessorOptions: {
            scss: {
                implementation: sass,
            },
        },
    }
});

When I visit the page with the /, it works just fine, e.g. https://example.com/my/app/

However, if I remove the trailing app using https://example.com/my/app, Vite thinks that the base is the parent directory /my/ and uses that as the root. The React JS and CSS then throw 404s.

Is there a way in Vite to fix this without hard-coding the full path as base, or is this something I need to fix on the server to redirect to the URL with the trailing slash?

I’d rather not hard code the base because it will change depending on environments. If that’s the best-practice approach, though, I’ll go with that solution.

I expected that the application would assume that my/app was a directory. Instead, it seem to be using my/ as the directory. I’ve tried changing base to . and to an empty string, with no luck.

This is the case. I use blazor ssr written in .net7.0. There is a page composed of razor and razor.js. There are no exceptions in local debugging. After publishing to IIS, it prompts that the js file cannot be found. How to solve it. The browser console prompt is as follows: xxxx/xxxx.razor.js net::ERR_ABORTED 404 (Not Found)

How to solve, bother me

I am designing a random bug generator.I have two buttons in this code,”Generate Faulty Code” that replaces some symbol within code to other symbol and “Find faulty code” which shows the replaced symbol on clicking it.But here findSymbol() function is not working properly causing ‘Find Faulty code’ to generate the blank output.It is not showing anyoutput at all

import { Box, Button } from "@chakra-ui/react";
import React, { useRef, useState } from "react";
import Editor from "@monaco-editor/react";

const CodeEditor = () => {
  const editorRef = useRef();
  const [value, setValue] = useState("");
  const [output, setOutput] = useState("");
  const [showOutput, setShowOutput] = useState(false);
  const [replaceBtnDisabled, setReplaceBtnDisabled] = useState(false);
  const[findBtnDisabled , setfindBtnDisabled  ]  = useState(true)

  let outputDetails = ""; // String to hold replacement details
  const replaceSymbols = () => {
    const code = value;
    const lines = code.split("n");
    let newCode = ""; // Initialize variable to hold modified code
    let replacementCount = 0; // Counter for replaced symbols
    let outputDetails = ""; // String to hold replacement details, reset for each button click
  
    // Calculate total number of characters in the input
    const totalChars = code.length;
  
    // Calculate replacement probability based on the length of the input
    const replaceProbability = 0.001 * (totalChars / 1000); // Adjust the scaling factor as needed
  
    // Iterate through each line
    for (let i = 0; i < lines.length; i++) {
      let line = lines[i];
  
      // Iterate through each symbol in the line
      for (let j = 0; j < line.length; j++) {
        // Randomly choose symbols to replace
        const replaceChance = Math.random(); // Random number between 0 and 1
  
        if (replaceChance < replaceProbability && replacementCount < 4) {
          const originalSymbol = line.charAt(j);
          const replacedSymbol = generateRandomSymbol(); // Function to generate random symbol
  
          // Replace symbol
          const lineArray = line.split("");
          lineArray[j] = replacedSymbol;
          line = lineArray.join("");
  
          // Append replacement details
          outputDetails += `Line no: ${i + 1}, Place: ${j + 1}, Original Symbol: ${originalSymbol}, Replaced Symbol: ${replacedSymbol}n`;
          
          replacementCount++; // Increment replacement counter
        }
      }
  
      newCode += line + "n"; // Append the modified line to newCode
    }
  
    // Update the textarea with the modified code
    setValue(newCode);
  
    // Enable the Show Output button and disable the Replace Symbol button
    setShowOutput(true);
    setReplaceBtnDisabled(true);
    setfindBtnDisabled(false);
  };
  

  function findSymbol(){
    // Update output details
    setOutput(outputDetails);
  }

  const generateRandomSymbol = () => {
    const symbols = "!@#$%^&*( )_+-=[]{}|;:,.< >?";
    const randomIndex = Math.floor(Math.random() * symbols.length);
    return symbols.charAt(randomIndex);
  };

  return (
    <>
      <Box>
        <Editor
          height="75vh"
          defaultLanguage="javascript"
          defaultValue="// some comment"
          theme="vs-dark"
          ref={editorRef}
          value={value}
          onChange={(value) => setValue(value)}
        />
        <Button onClick={replaceSymbols} isDisabled={replaceBtnDisabled}>
          Generate Faulty Code
        </Button>
        <Button onClick={findSymbol} isDisabled={findBtnDisabled}>
          Find Faulty Code
        </Button>
        {showOutput && (
          <Box id="output" style={{ whiteSpace: "pre-wrap" }}>
            {output}
          </Box>
        )}
      </Box>
    </>
  );
};

export default CodeEditor;

Onclicking ” Find Faulty Code” button,the outputdetails has to be displayed.It is not displaying anything