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 { SafeHtml } from '@angular/platform-browser';
import {
Pipe,
PipeTransform,
} from '@angular/core';
/**
* A pipe that sanitizes HTML and highlights numbers and special characters (in different colors each).
*/
@Pipe({ name: 'colorPassword' })
export class ColorPasswordPipe implements PipeTransform {
transform(password: string): SafeHtml {
return password
transform(password: string) {
let colorizedPassword = '';
for (let i = 0; i < password.length; i++) {
let character = password[i];
let isSpecial = false;
// Sanitize HTML first.
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
// Replace special chars (since that will exclude numbers anyway).
.replace(/((&amp;|&lt;|&gt;|[^\w ])+)/g, `<span class="passwordSpecial">$1</span>`)
// Finally replace the numbers.
.replace(/(\d+)/g, `<span class="passwordNumber">$1</span>`);
switch (character) {
case '&':
character = '&amp;';
isSpecial = true;
break;
case '<':
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;
}
}