Category: javascript

When a user logs in using their email and password, they retrieve an access token and a refresh token. The access token expires in 15 minutes, and is stored in localStorage on the client, whilst the refresh token is long-lived and is stord inside a httpOnly secure cookie.

In the scenario where a malicious user gains access to another users’s access or refresh token, the user should be able to change their password. The payload of the access token is currently the unique users Id number(which comes from a db)

After a user changes their password, I would like to update their user_id, therefore the payload of the access token the malicous user has is invalid, as it would not contain the new unique user ID

My question is does this mean the malicious users token would be invalid when making requests, as the payload contains invalid data? If not, are there any alternative methods of handling the issue of ensuring malicious users cannot use the refresh or access token to make requests once a user changes their password? Thanks.

LinkedIn have. Way to consume data from job postings descriptions?

I need current and historical data on published job descriptions to labor market analytics,

I currently maintain two packages, one is a library and the other is a craco app. Within the library, I want to preserve a dynamic import statement:

// library.js
export async function getExternalModule(expression) {
  const { stuff } = await import('http://someserver/' + expression)
  return stuff
}

// craco.tsx
import { getExternalModule } from 'library';

const x = await getExternalModule('some-code.js')

When I run this code in the browser, I always get a cannot find module 'http://someserver/some-code.js'.

I’ve already tried:

// craco.config.js
webpack.resolve.alias = {
  'http://someserver': false
}

webpack.plugins = [
  new webpack.IgnorePlugin({
    resourceRegExp: /http://someserver/
  })
]

webpack.externals = {
  'http://someserver': 'http://someserver'
}

I know that Webpack provides for ways to specify which import expressions to ignore using magic comments, but as far as I can tell those only work if the import statement is in the craco app itself and doesn’t work within dependencies

Is there some way I can get webpack to ignore that specific import statement, or perhaps is there a better way to go about what I am trying to do?

i have an array of objects inside an array that show the informations on a table with a ngFor. I put these informations inside a collapse to only show the table when i click and open that especific collapse. My problem is when i click on the others buttons of collapse, it just opens the first one again and again. How can i fix that?

html:

<ng-container *ngFor="let card of infoArr ; let i = index">
    <button data-toggle="collapse" data-target="#demo">
        <h3 class="box-title"> open </h3>
    </button>
    <div id="demo" class="collapse">
        <div class="row">
          <div class="col-md-12">
             <div class="table-responsive">
                <table class="table table-striped table-bordered full-data-table">
                   <thead>
                      <tr>
                         <th>Name</th>
                         <th>Age</th>
                         <th>Year</th>
                         <th>Subject</th>
                      </tr>
                   </thead>
                   <tbody>
                      <tr *ngFor="let item of card">
                         <td>{{item.name}}</td>
                         <td>{{item.age}}</td>
                         <td>{{item.year}}</td>
                         <td>{{item.subject}}</td>
                      </tr>
                   </tbody>
                </table>
              </div>
            </div>
          </div>
       </div>
</ng-container>

typescript:

export class AppComponent {
  name = 'Angular';
  infosArr = [
  [
   { name: "ana", age: 18, year: 2005, subject: 'math' },
   { name: "sofia", age: 15, year: 2008, subject: 'english'  },
   { name: "carlos", age: 17, year: 2006, subject: 'history'  },
   { name: "abgail", age: 12, year: 2011, subject: 'art'  }
  ],
  [
   { name: "susan", age: 18, year: 2005, subject: 'math' },
   { name: "lucas", age: 15, year: 2008, subject: 'english'  },
   { name: "jack", age: 17, year: 2006, subject: 'history'  },
   { name: "joseph", age: 12, year: 2011, subject: 'art'  }
  ],
  [
   { name: "mirla", age: 18, year: 2005, subject: 'math' },
   { name: "harry", age: 15, year: 2008, subject: 'english'  },
   { name: "paula", age: 17, year: 2006, subject: 'history'  },
   { name: "sandy", age: 12, year: 2011, subject: 'art'  }
  ]
 ]
}

the informations are showing and it’s everything ok with the table, but i can’t iterate in a proper way to make each collapse open

I’m using Next.js version 13.5.5 and when I run npm run build It gives me this error:

./build/types/app/layout.ts:8:13
Type error: Type 'OmitWithTag<typeof import("D:/nodeprogs/br-books-frontend/src/app/layout"), "metadata" | "default" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | "preferredRegion" | "runtime" | "maxDuration" | "generateMetadata", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'MyApp' is incompatible with index signature.
    Type '({ children }: { children: React.ReactNode; }) => React.JSX.Element' is not assignable to type 'never'.

   6 |
   7 | // Check that the entry is a valid entry
>  8 | checkFields<Diff<{
     |             ^
   9 |   default: Function
  10 |   config?: {}
  11 |   generateStaticParams?: Function

Here’s some relevant code:

export const MyApp = ({ children }: { children: React.ReactNode }) => {
  const theme = ThemeSettings();

  // const customizer = useSelector((state: AppState) => state.customizer);

  return (
    <>
    <SpeedInsights />
      <NextTopLoader color="#ee7b48" />
      {/* <NextAppDirEmotionCacheProvider options={{ key: "flexy" }}> */}
        <ThemeProvider theme={theme}>
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            {children}
        </ThemeProvider>
      {/* </NextAppDirEmotionCacheProvider> */}
    </>
  );
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [loading, setLoading] = React.useState(true);
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Provider store={store}>
        <ToastContainer
          position="top-right"
          autoClose={3000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          theme="light"
        />
          {loading ? (
            // eslint-disable-next-line react/no-children-prop
            <MyApp children={children as React.ReactNode} />
          ) : (
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
                height: "100vh",
              }}
            >
              <CircularProgress color="primary" />
            </Box>
          )}
        </Provider>
      </body>
    </html>
  );
}

It’s strange because the error comes from the build folder and I have no idea what’s causing this issue. Can anyone help me fix this problem? I don’t know why it says React.JSX element is not assignable to type ‘never’. Thanks.

I want to create this script that can block ads. I want to do this on a locally famous site in my country and looking in the inspect element of the site, I can see that there is a “div” that is generated every time an advertisement is generated. This DIV does not have an ID, but a class that changes its name every time the page and styling are updated. I had originally thought about working on this DIV, initially calling it and then deleting it in a setInterval. (Each time it checked to see if this div was there, with a very low range like 100). Unfortunately I cannot access this div, and I also saw that the site uses a certain “GTM” (Google Tag Manager) and I was also able to probably find the site with the API’s that they use to then be able to “import” advertisements. I won’t mention the name of the site, but this site has JS code written just for the API. Except it’s indecipherable because all the code appears to have been encrypted.
My question at this point is:
If GTM has anything to do with it
If I can work on it and if you have any idea where to start
If you have any useful advice to give me
And if you can disable the API’s locally, via JS.

I use a third party extension called TapperMonkey, to inject the JS script.

I would like to add a click listener that gives me a drop down menu below a marker once i click on that marker and gives me the option to delete the marker or to show its label, does anyone have an idea on how to realise that?

Iam trying to make a richtext editor in react. And i’am stuck due to problem.
The problem is that with every character i type the the insersion point is not with due to this the cursor is stuck to the left and charcters are being inseted on the left.
Also when i maually move the cursor at the end of a word to and try typing it again moves to the left.
this the screenshot of my texteditor
(https://i.stack.imgur.com/TnZNT.png)

import React from "react";
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faBold,
  faCode,
  faFileCode,
  faFilm,
  faImage,
  faItalic,
  faLink,
  faList,
  faListOl,
  faQuoteRight,
  faStrikethrough,
  faUnderline,
} from "@fortawesome/free-solid-svg-icons";
import "./textEditor.css";

const TextEditor = () => {
  const [content, setContent] = useState("");
  const [isBold, setIsBold] = useState(false);
  const [isItalic, setIsItalic] = useState(false);
  const [isUnderline, setIsUnderline] = useState(false);
  const [isStrikeThrough, setStrikeThrough] = useState(false);
  const [isBlockquote, setIsBlockquote] = useState(false);
  const [isHeading1, setIsHeading1] = useState(false);
  const [isHeading2, setIsHeading2] = useState(false);
  const [isOrderedList, setIsOrderedList] = useState(false);
  const [isUnorderedList, setIsUnorderedList] = useState(false);
  const [isInlineCode, setIsInlineCode] = useState(false);
  const [isCodeBlock, setIsCodeBlock] = useState(false);

  const handleFormat = (style, value = null) => {
    // Toggle the state for the corresponding style
    switch (style) {
      case "bold":
        setIsBold(!isBold);
        break;
      case "italic":
        setIsItalic(!isItalic);
        break;
      case "underline":
        setIsUnderline(!isUnderline);
        break;
      case "strikeThrough":
        setStrikeThrough(!isStrikeThrough);
        break;
      case "formatBlock":
        // Handle specific cases for formatBlock
        if (value === "<blockquote>") {
          setIsBlockquote(!isBlockquote);
          value = isBlockquote ? "<p>" : "<blockquote>";
        } else if (value === "<h1>") {
          setIsHeading1(!isHeading1);
          value = isHeading1 ? "<p>" : "<h1>";
        } else if (value === "<h2>") {
          setIsHeading2(!isHeading2);
          value = isHeading2 ? "<p>" : "<h2>";
        } else if (value === "<pre>") {
          setIsCodeBlock(!isCodeBlock);
          value = isCodeBlock ? "<p>" : "<pre>";
        }
        break;
      case "insertOrderedList":
        setIsOrderedList(!isOrderedList);
        break;
      case "insertUnorderedList":
        setIsUnorderedList(!isUnorderedList);
        break;
      case "code":
        setIsInlineCode(!isInlineCode);
        break;

      case "createLink":
        const url = prompt("Enter the link URL:");
        document.execCommand("createLink", false, url);
        break;

      default:
        break;
    }

    // Check the current state before applying the style
    document.execCommand(style, false, value);


    
  };
  return (
    <div className="editor-wrapper">
      <div className="editor">
        <div className="toolbar">
          <button className="editor-btn" onClick={() => handleFormat("bold")}>
            <FontAwesomeIcon icon={faBold} />
          </button>

          <button
            className="editor-btn"
            onClick={() => handleFormat("underline")}
          >
            <FontAwesomeIcon icon={faUnderline} />
          </button>

          <button className="editor-btn" onClick={() => handleFormat("italic")}>
            <FontAwesomeIcon icon={faItalic} />
          </button>

          <button
            className="editor-btn"
            onClick={() => handleFormat("strikeThrough")}
          >
            <FontAwesomeIcon icon={faStrikethrough} />
          </button>

          <button
            className="editor-btn"
            onClick={() => handleFormat("formatBlock", "<blockquote>")}
          >
            <FontAwesomeIcon icon={faQuoteRight} />
          </button>

          <button
            className="editor-btn"
            style={{ fontWeight: "bold" }}
            onClick={() => handleFormat("formatBlock", "<h1>")}
          >
            H1
          </button>

          <button
            className="editor-btn"
            style={{ fontWeight: "bold" }}
            onClick={() => handleFormat("formatBlock", "<h2>")}
          >
            H2
          </button>

          <button
            className="editor-btn"
            onClick={() => handleFormat("insertUnorderedList")}
          >
            <FontAwesomeIcon icon={faList} />
          </button>

          <button
            className="editor-btn"
            onClick={() => handleFormat("insertOrderedList")}
          >
            <FontAwesomeIcon icon={faListOl} />
          </button>

          <button className="editor-btn" onClick={() => handleFormat("code")}>
            <FontAwesomeIcon icon={faCode} />
          </button>

          <button
            className="editor-btn"
            onClick={() => handleFormat("formatBlock", "<pre>")}
          >
            <FontAwesomeIcon icon={faFileCode} />
          </button>

          <button
            className="editor-btn"
            onClick={() => handleFormat("createLink")}
          >
            <FontAwesomeIcon icon={faLink} />
          </button>
          <button
            className="editor-btn"
            onClick={() =>
              handleFormat("insertImage", prompt("Enter image URL:"))
            }
          >
            <FontAwesomeIcon icon={faImage} />
          </button>

          <button
            className="editor-btn"
            onClick={() =>
              handleFormat(
                "insertHTML",
                '<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>'
              )
            }
          >
            <FontAwesomeIcon icon={faFilm} />
          </button>
        </div>
        <div
          className="text-editor"
          contentEditable="true"
          dir="ltr"
          dangerouslySetInnerHTML={{ __html: content }}
          onInput={(e) => {
            setContent(e.target.innerHTML);
            e.target.focus();
          }}
        />
        <br />
      </div>
    </div>
  );
};

export default TextEditor;

CSS

.editor-wrapper {
  width: 100%;
  height: 500px;
  display: flex;

  flex-direction: column;
  align-items: center;
}

.editor {
  width: 70%;
  
}

.toolbar {
  border: 1px solid black;
}
.text-editor {
  border: 1px solid black;
  padding-left: 2px;
  min-height: 100px;

  resize: vertical;
  overflow: auto;
}

.editor:focus {
  border: none;
}

.editor-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #414141;
}

.editor-btn:hover {
  color: blue;
}

.text-editor blockquote {
  border-left: 4px solid #414141;
  margin-right: 2px;
}

.text-editor pre {
  background-color: #dbdbdb;
  word-wrap: break-word;
}

.text-editor code {
  background-color: #dbdbdb;
}

Please help, I want to show date and Live Clock using JQuery on input field.

My expectation dd-mm-yyyy, H:i:s but what I get is d-m-yyyy H:i:s

setInterval(function() {
    var date = new Date();
    $('#dateTime').val(
      date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() + ", " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
    );
  }, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="tanggal">Date, Time</label>
  <input type="text" class="form-control" name="dateTime" id="dateTime" readonly>
</div>

My Expectation : 08-01-2024
Input field : 8-0-2024

Something wrong with my code ?

Date and Realtime Clock

I have TradingView chart implementation, and for 30 minutes chart it’s skipping some candles on render, however, all other timeframes working properly. Also, it skipping candles if I zoom out fast.

Where should I look to handle this behaviour?

The response from backend is correct, and I have those candles in response.

class DataFeedService implements IBasicDataFeed {
  static config = {
    supported_resolutions: Object.values(
      supportedResolutions
    ) as ResolutionString[],
    supports_search: false,
    supports_group_request: false,
    supports_marks: false,
    supports_timescale_marks: false,
  };

  activeSession: HubConnection;
  stream: StreamingService;
  instruments: IActiveInstrument[];
  nextTimeTries: number;

  constructor(
    activeSession: HubConnection,
    instrumentId: string,
    instruments: IActiveInstrument[]
  ) {
    this.activeSession = activeSession;
    this.stream = new StreamingService(this.activeSession, instrumentId);
    this.instruments = instruments;
    this.nextTimeTries = 0;
  }

  onReady = (callback: OnReadyCallback) => {
    setTimeout(() => callback(DataFeedService.config), 0);
  };

  resolveSymbol = (
    symbolName: string,
    onResolve: ResolveCallback,
    onError: ErrorCallback
  ) => {
    const symbol_stub: LibrarySymbolInfo = {
      full_name: symbolName,
      listed_exchange: '',
      name: symbolName,
      description: '',
      type: 'forex',
      session: '24x7',
      timezone: 'Etc/UTC',
      ticker: symbolName,
      exchange: symbolName,
      minmov: 1,
      pricescale:
        10 **
        (this.instruments.find((item) => item.instrumentItem.id === symbolName)
          ?.instrumentItem.digits || 2),
      has_intraday: true,
      intraday_multipliers: [
        supportedResolutions['1 minute'],
        supportedResolutions['1 hour'],
      ],
      has_weekly_and_monthly: true,
      has_daily: true,
      has_no_volume: true,
      has_empty_bars: false,
      supported_resolutions: Object.values(
        supportedResolutions
      ) as ResolutionString[],
      data_status: 'streaming',
      format: 'price',
    };

    setTimeout(function () {
      onResolve(symbol_stub);
      console.log('Resolving that symbol....', symbolName);
    }, 0);
  };

  getBars = async (
    symbolInfo: LibrarySymbolInfo,
    resolution: ResolutionString,
    rangeStartDate: number,
    rangeEndDate: number,
    onResult: HistoryCallback,
    onError: ErrorCallback
  ) => {
    try {
      let bars = await historyProvider.getBars(
        resolution,
        rangeStartDate * 1000,
        rangeEndDate * 1000,
        symbolInfo.name
      );

      bars = bars.sort((a, b) => a.time - b.time);

      if (bars.length) {
        historyProvider.history[`${symbolInfo.name}${resolution}`] = {
          lastBar: bars[bars.length - 1],
        };
        onResult(bars, { noData: false });
        this.nextTimeTries = 0;
      } else {
        switch (resolution) {
          case supportedResolutions['1 minute']:
          case supportedResolutions['5 minutes']:
          case supportedResolutions['30 minutes']:
          case supportedResolutions['1 hour']:
          case supportedResolutions['4 hours']:
            this.nextTimeTries = this.nextTimeTries + 1;
            onResult(bars, {
              noData: true,
              nextTime: moment(rangeStartDate * 1000)
                .subtract(this.nextTimeTries, 'hour')
                .valueOf(),
            });

            break;

          default:
            onResult(bars, {
              noData: true,
            });
            break;
        }
      }
    } catch (err) {
      onError(`${err}`);
    }
  };
  subscribeBars = (
    symbolInfo: LibrarySymbolInfo,
    resolution: ResolutionString,
    onTick: SubscribeBarsCallback,
    listenerGuid: string,
    onResetCacheNeededCallback: () => void
  ) => {
    this.stream.subscribeBars(
      symbolInfo,
      resolution,
      onTick,
      listenerGuid,
      onResetCacheNeededCallback
    );
  };
  unsubscribeBars = (subscriberUID: string) => {
    this.stream.unsubscribeBars(subscriberUID);
  };
  calculateHistoryDepth = (
    resolution: ResolutionString,
    resolutionBack: ResolutionBackValues,
    intervalBack: number
  ) => {
    switch (resolution) {
      case supportedResolutions['30 minutes']:
        return {
          resolutionBack: 'D' as ResolutionBackValues,
          intervalBack: 1,
        };
      case supportedResolutions['1 week']:
        return {
          resolutionBack: 'D' as ResolutionBackValues,
          intervalBack: 14,
        };

      case supportedResolutions['1 month']:
        return {
          resolutionBack: 'M' as ResolutionBackValues,
          intervalBack: 2,
        };
    }
  };

}

export default DataFeedService;

I have django project, but the question is about workflow or approach, rather than technical part

currently i have a structure like this:

src/
├── apps/
│   ├── authapp/
│   │   ├── templates/
│   │   │   └── authapp/
│   │   │       ├── login.html
│   │   │       └── signup.html
│   │   ├── views.py
│   │   └── *other files*
│   └── anotherapp/
│       ├── templates/
│       │   └── anotherapp/
│       │       └── another_page.html
│       ├── views.py
│       └── *other files*
├── project/
│   ├── settings.py
│   └── *other files*
├── static/
│   ├── scss/
│   │   ├── layout/
│   │   │   ├── _header.scss
│   │   │   └── _footer.scss
│   │   ├── components/
│   │   │   └── _buttons.scss
│   │   └── main.scss
│   └── js/
│       ├── auth.js
│       └── another.js
├── staticfiles/
│   └── *here must be bundled files*
└── templates/
    └── base.html

According to django documentation and to common sense, it’s recommended to store static, which is specific for particular app – within the app itself. So, in my base.html i have common header and footer blocks that are shared across (almost) all apps. So, it turns out, in fact i have base.html with base.scss

So, i really am being confused how to deal with files properly, while following DRY principle, i mean that’s not a good idea to have multiple bundled css files (bundled with base.scss) and if each of them has the same code with header and footer and obviously it’s absoulutely crazy to have a single giant css across the whole site. Sometimes perhaps i don’t even need to have my base layouts (for example if my login page is completely standalone – it doesn’t have neither header nor footer) and actually the same goes for js files – i wouldn’t like to have a giant bundled.js in my login.html if my auth js logic just handles the single form (but maybee that’s ok to have it)

I hope i described that correctly, so generally i’m just looking for the best approach to deal with multiple assets files or the way i need to bundle them. It,s not a pet project, it’s a real one and it’s gonna be huge, therefore the question of clear and proper workflow is so important at this point.

I really was trying to find best practices similar to this issue, but they all are about the same thing – take WebPack, bundle everything into bundle.js and huge.scss attach them in and be happy. Ideally, i would like to have my apps as independent as possible with their own assets and bundle them with the bases ones. By the way – (If I understand everything correctly) by splitting my code i also solve an issue with caching – when editing something in particular scss, the other ones are not going to be touched – which is fine, but as i meantioned, each of my scss files has the the same imports from base.scss which is not DRY at all i guess

https://github.com/Sayrix/Ticket-Bot?tab=CC-BY-4.0-1-ov-file

In this bot idk how i can remove footer

let footer = locale.getSubValue(“embeds”, “openTicket”, “footer”, “text”).replace(“ticket.pm”, “”);
// Please respect the project by keeping the credits, (if it is too disturbing you can credit me in the “about me” of the bot discord)
footer = ticket.pm ${footer.trim() !== "" ? – ${footer} : ""}; // Please respect the LICENSE 😀
// Please respect the project by keeping the credits, (if it is too disturbing you can credit me in the “about me” of the bot discord)

i found there but idk what i need to do

I tried to remove ticket.pm

here in localStorage.getItem(‘ansbooklet’) getting pdf url.

var pdfUrl = localStorage.getItem('ansbooklet');
var pdf = new PDFAnnotate("pdf-container", encodeURI(pdfUrl), {
  onPageUpdated(page, oldData, newData) {
    console.log(page, oldData, newData);
 
  },
  ready() {
    console.log("Plugin initialized successfully");
  },
  scale: 1.5,
  pageImageCompression: "MEDIUM",
});

I am getting below error

Access to fetch at ‘https://abcs.kbcsthiland.edu.in/bcs360/2022-2023/AnswerBooklet/H/B/BIT%20221/0037845805101.pdf’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

can you help me to fix this error?

//This code is attached. Only the broken links on the provided url are displayed to us; I required it for the entire website. I’m getting the broken links on the specified single page. Is there a way to find the broken links on the sitemap.xml file using node.js?

const express = require('express')
 
const {exec} = require('child_process')
 
const app = express ()
 
const bodyparser = require('body-parser')
 
app.use(bodyparser.json())
app.use(bodyparser.urlencoded({extended:false}))
 
app.set('view engine','ejs')
 
app.get('/',(req,res)=>{
    res.render('brokenlinkchecker',{title:'broken link checker',info:''})
})
 
app.post('/brokenlinkchecker',(req,res)=>{
 
exec('brkn '+ req.body.url + ' --verbose',(err,stdout,stderr) => {
    if(err){
        res.send(err)
    }
    
    console.log(stdout)
 
    res.render('brokenlinkchecker',{title:'broken link checker',info:stdout})
})
})
app.listen(5000)

//Front End Part

<!DOCTYPE html>
<html>
    <head>
        <title>Broken Link Checker</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <h1 class="text-center" style="color: #fe620a;">
                Broken Link checker
            </h1>
            <br>
            <form action="/brokenlinkchecker" method="post">
                <div class="form-group">
                    <label for="url">Website URL:</label>
                    <input type="text" name="url" required placeholder="Enter URL" class="form-control">
                </div>
                <div class="form-group">
                    <button class="btn btn-danger btn-block" style="background-color: #fe620a;">
                        Get Broken Links
                    </button>                 
                </div>
                <div class="form-group">
                    <label for="links">Broken Links:</label>
                    <textarea readonly class="form-control" placeholder="broken links" cols="30" rows="10"> <%= info %></textarea>
                </div>
            </form>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>

Say I have an object like the following:

myObject{
   name: '...',
   label: '...',
   menuSettings: {
      rightAlignment: true,
      colours: [...],
   },
}

I would like to change the rightAlignment value to be false. I’m having quite a bit of trouble trying to access and modify just this value, without having to rewrite the rest of the object. I tried myObject.find(…) which didn’t quite suit, and now was trying

Object.assign(this.myObject, {menuSettings: {rightAlignment: false}});

Which wasn’t working because I’m guessing I didn’t access the property correctly. Is there any way to cleanly do this?