Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-23 11:56:00 +01:00
Code Issues Projects Releases Wiki Activity

wrap every character in a span

Browse Source
This commit is contained in:
Kyle Spearrin 2018-12-08 13:48:10 -05:00
parent 37616a148a
commit 9694d2922e
1 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/angular/pipes/color-password.pipe.ts
View File

@ -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, '&amp;') switch (character) {
.replace(/</g, '&lt;') case '&':
.replace(/>/g, '&gt;') character = '&amp;';
// Replace special chars (since that will exclude numbers anyway). isSpecial = true;
.replace(/((&amp;|&lt;|&gt;|[^\w ])+)/g, `<span class="passwordSpecial">$1</span>`) break;
// Finally replace the numbers. case '<':
.replace(/(\d+)/g, `<span class="passwordNumber">$1</span>`); character = '&lt;';
isSpecial = true;
break;
case '>':
character = '&gt;';
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;
} }
} }