mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-05 09:10:53 +01:00
wrap every character in a span
This commit is contained in:
parent
37616a148a
commit
9694d2922e
@ -1,20 +1,43 @@
|
|||||||
import { Pipe, PipeTransform } from '@angular/core';
|
import {
|
||||||
import { SafeHtml } from '@angular/platform-browser';
|
Pipe,
|
||||||
|
PipeTransform,
|
||||||
|
} from '@angular/core';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A pipe that sanitizes HTML and highlights numbers and special characters (in different colors each).
|
* A pipe that sanitizes HTML and highlights numbers and special characters (in different colors each).
|
||||||
*/
|
*/
|
||||||
@Pipe({ name: 'colorPassword' })
|
@Pipe({ name: 'colorPassword' })
|
||||||
export class ColorPasswordPipe implements PipeTransform {
|
export class ColorPasswordPipe implements PipeTransform {
|
||||||
transform(password: string): SafeHtml {
|
transform(password: string) {
|
||||||
return password
|
let colorizedPassword = '';
|
||||||
|
for (let i = 0; i < password.length; i++) {
|
||||||
|
let character = password[i];
|
||||||
|
let isSpecial = false;
|
||||||
// Sanitize HTML first.
|
// Sanitize HTML first.
|
||||||
.replace(/&/g, '&')
|
switch (character) {
|
||||||
.replace(/</g, '<')
|
case '&':
|
||||||
.replace(/>/g, '>')
|
character = '&';
|
||||||
// Replace special chars (since that will exclude numbers anyway).
|
isSpecial = true;
|
||||||
.replace(/((&|<|>|[^\w ])+)/g, `<span class="passwordSpecial">$1</span>`)
|
break;
|
||||||
// Finally replace the numbers.
|
case '<':
|
||||||
.replace(/(\d+)/g, `<span class="passwordNumber">$1</span>`);
|
character = '<';
|
||||||
|
isSpecial = true;
|
||||||
|
break;
|
||||||
|
case '>':
|
||||||
|
character = '>';
|
||||||
|
isSpecial = true;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
let type = 'letter';
|
||||||
|
if (isSpecial || character.match(/[^\w ]/)) {
|
||||||
|
type = 'special';
|
||||||
|
} else if (character.match(/\d/)) {
|
||||||
|
type = 'number';
|
||||||
|
}
|
||||||
|
colorizedPassword += '<span class="password-' + type + '">' + character + '</span>';
|
||||||
|
}
|
||||||
|
return colorizedPassword;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user