Deactivate the button permanently upon a single click

In the project I'm working on, there is a verification page for e-mail addresses. When new users register, they are sent an e-mail with a link to verify their e-mail. If the link is not clicked within a certain time frame, a button appears on the page that they must click in order to receive a new e-mail. I want this button to be disabled permanently after it is clicked, even if the user returns to the original link.

I attempted to add the [disabled] property to the button and set it to true after it is clicked. However, I noticed that when the page is refreshed or revisited, the button is not actually disabled.

Here is the HTML code I have so far:

<button type="button" 
    class="btn btn-primary" 
    [disabled]="clicked" 
    (click)=resendEmail()>
        Resend Verification E-mail
</button>

And in my TypeScript file:

resendEmail() {
  this.clicked = true;
}

Answer №1

If you need a quick solution, consider utilizing localStorage

this.verified = localStorage.getItem('verificationStatus') !== null;
if (! this.verified) {
    localStorage.setItem('verificationStatus', true);
    this.verified = true;
}

It’s important to remember that any essential or security-focused functionality should be handled on the server side. JavaScript code can be easily manipulated by users.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered during execution of tests involving reactive forms

Having some issues with the code below and looking for a solution. The tests pass when mocking the form for ts tests, but encounter an error when mocking the same form for html: No value accessor for form control with name: 'Enable' If I remov ...

Bug in auto compilation in Typescript within the Visual Studios 2015

Currently, I am utilizing Visual Studio Pro 2015 with auto compile enabled on save feature. The issue arises in the compiled js file when an error occurs within the typescript __extends function. Specifically, it states 'Cannot read property prototyp ...

Implementing React custom component with conditional typing

My goal is to enable other developers to set a click handler for a button only if the button's type is set to button. Users can only set the type to either button or submit. I want to restrict developers from setting the onClick property on the comp ...

Tips for updating routerlink in navigation bar in Angular 4

I'm encountering an issue with routing to the wrong routelink. How can I prevent this from happening? My apologies for my lack of experience. The error message displayed in the Chrome console is: ERROR Error: Uncaught (in promise): Error: Cannot mat ...

Implementing Expand/Collapse functionality for multiple TableRow components in Material-UI

Using a Material UI table and attempting to expand the `TableRow` inside a collapse table, but encountering an issue. Currently, all collapses are connected to one state for "open," causing all lists to open if one is clicked. What is the optimal approach ...

What is the process for specifying an input for a component?

When defining an input for a component like this: @Input() person: Person, some encountered the error message saying, "property 'person' has no initializer and is not definitely assigned in the constructor" even though the Person model has been i ...

What is the best way to hide certain buttons from specific users in Angular using the If condition?

I am facing an issue with my array of blocked_users, where I need to hide certain buttons if a user is in the blocked_users list. Below is the code snippet from my angualr.component.html: <div *ngIf="!(userId in event.blocked_users)"> ...

The combination of Autodesk Forge Viewer and React with TypeScript provides a powerful platform for developing

I'm brand new to React and Typescript, and I have a very basic question. In the viewer documentation, extensions are defined as classes. Is it possible to transform that class into a typescript function? Does that even make sense? For example, take th ...

How can I open the Ion-datetime view for the current year without allowing the selection of a specific day?

I am currently troubleshooting an issue with an Ionic date-time picker component. Upon opening the datepicker, it defaults to showing May 2021. As I scroll to the present date, I notice a circle highlighting today's date indicating that it selects th ...

What is the most effective method to retrieve the current browser URL in Angular 2 with TypeScript?

Is there a way for me to retrieve the current URL from the browser within my Angular 2 application? Usually in JavaScript, we would use the window object for this task. Can anyone guide me on how to achieve this in Angular 2 using TypeScript? Appreciate a ...

Tips on obtaining checkbox values other than "true"

Having trouble retrieving the values of selected checkboxes instead of displaying "Custom Category"? I've attempted to access the values and attributes with no success. I'm aiming to display the values of the selected checkbox. app.component.ht ...

Utilizing Angular 2 with Bootstrap's popup modal feature

Is it possible to implement a popup modal in my Angular 2 application without relying on popular packages like ng2-opd-pop or similar solutions? I have included Bootstrap by importing it in my styles.css using '@import '../../../Content/bootstra ...

Issue connecting database with error when combining TypeORM with Next.js

I am attempting to use TypeORM with the next.js framework. Here is my connection setup: const create = () => { // @ts-ignore return createConnection({ ...config }); }; export const getDatabaseConnection = async () => { conso ...

Strange occurrences with HTML image tags

I am facing an issue with my React project where I am using icons inside img tags. The icons appear too big, so I tried adjusting their width, but this is affecting the width of other elements as well. Here are some screenshots to illustrate: The icon wit ...

Unable to run 'ng serve -o', however 'ng serve' functions correctly

Encountering an issue with Angular when attempting to configure the Micro frontend Framework (module federation) for both the remote and host applications. They are not located in the same workspace. When running the remote app with "ng serve -o", an error ...

Encountering a JSON error while attempting to login through an API on the Ionic platform

While implementing the login functionality through API in Ionic, I encountered the following error: Error: Property 'json' does not exist on type '{}'. Below is my loginpage.html code: <ion-header> <ion-navbar> & ...

Tips for getting a 'yes' or 'no' response with ngx-bootstrap modal

I have been utilizing ngx-bootstrap modal for my project, but I am considering implementing a custom confirm dialog with the following structure: confirmDialog(message: string, note: string, onOk, onCancel) { // Open modal // Perform certain actions ...

Remove a specific NgRx node using LazyLoading technique

I am currently developing an Angular 9 application utilizing NgRx with lazy loading functionality. Upon initial app load, the state appears as follows: https://i.sstatic.net/C7C7P.jpg However, when navigating to the '/account-config' route, th ...

Ways to ensure that your Angular component.ts file is executed only after the body has completely loaded without relying on any external

I am attempting to add an event listener to an element created with a unique identifier using uuid, but I keep getting an error that states "Cannot read properties of null (reading 'addEventListener')" export class CommentItemComponent implements ...

extract the text content from an object

I am trying to add an object to the shopping cart. The item contains a key/value pair as shown in the following image: https://i.stack.imgur.com/5inwR.png Instead of adding the title with its innerText using p and style, I would like to find another ...