CODEWITHSUNDEEP
htmlangular
omkar musale
omkar musale

Reputation: 118

how to hide incoming text to password?

im working on a angular project in a certain field im getting password and displaying it on front end i want to hide that text into password field eg "****" like this can anyone help me with the code please ?

Upvotes: 1

Views: 100

Answers (3)

Shashan Sooriyahetti
Shashan Sooriyahetti

Reputation: 878

  • first it is not a good thing to fetch a password from server to front-end because anyone can know it if you take a look to the network request tab
  • even if you are encoding it if you are decoding it on front-end it is still vulnerable
  • Because of this as your requirement you can return password to available or not available from the back-end and return it to frontend

or you can pass a boolean and valid it on front-end as below,

 {{agentdata?.password?agentdata?.password === true? '******' :"Notavailable"}}

Upvotes: 0

N.F.
N.F.

Reputation: 4182

If you do not want input box, you can do it with pipe.

mask-value.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'maskValue'
})
export class MaskValuePipe implements PipeTransform {

  transform(value: string): any {
    if (value == null || value.length === 0) {
      return value;
    }

    return '*'.repeat(value.length);
  }

}

html

<div class="ui-g-6 ui-md-6 ui-md-nopad ui-g-nopad"  style="text-transform:none"> 
{{agentdata?.password?agentdata?.password | maskValue }}</div>

Upvotes: 0

Jins Thomas Shaji
Jins Thomas Shaji

Reputation: 877

You may have to use an input element for hiding password.

<input type="password" value="Password">

Provide your password text to the value attribute of input element.

Upvotes: 1

Related Questions