Login Component Show Password

Radzen Studio Angular
1

I had a similar post earlier.

I wanted to add a text box to show the password to the user before they hit the Login button.

I can see login0 component and I can see the user name and password off the login event.

I there a way I can get at the password to show it in my text box before that event.

login0Login(event: any) {
this.security.login(${event.username}, ${event.password})
.subscribe((result: any) => {

}, (result: any) => {
  this.notificationService.notify({ severity: "error", summary: `Error`, detail: `${result.error.message}` });
});

}

image

2

Yes you can. Store the event.password in a page property and display that page property in the text box (by setting its Value).

3

Tried it, but got this error...

image
image1643×261 17 KB

image
image1582×496 26.4 KB

4

You have to use the Login event of your login component. Not sure why you trie the Load event of the page.

5

Yeah, I knew I could get at it on the login event,
Wanted to get at it while the user is typing it in.

6

In that case you can use custom login implementation as in our complete application tutorial. Then just bind the Value property of the password component and should update as the user types.

7

Thanks, we'll take that approach then.

8

Sharing, that we also found a way to show the password using notifications, using what we can get at out of the box login component, which is sufficient for one of our internal sites.

image
image1385×724 39 KB

9

What we ended up with for one of the sites using out of the box login, for quick and easy way....

image
image1525×569 31.6 KB 

  load() {
    this.showPassword = true;

    this.tempPasswordText = '';
  }

  login0Login(event: any) {
    if (this.showPassword) {
        this.tempPasswordText = event.password;
    }

    this.security.login(`${event.username}`, `${event.password}`)
    .subscribe((result: any) => {

    }, (result: any) => {
      this.notificationService.notify({ severity: "error", summary: `Error`, detail: `${result.error.message}`, duration: 10000 });

      if (this.showPassword) {
        this.notificationService.notify({ severity: "info", summary: `Password Entered =`, detail: `${this.tempPasswordText}`, duration: 10000 });
      }
    });
  }