Update color-password.pipe.js to handle Unicode/Emoji correctly accross platforms. (#354)

This commit is contained in:
Chad Griffis 2021-04-23 04:56:36 +08:00 committed by GitHub
parent 090ad790f5
commit b6f102938f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 6 deletions

View File

@ -3,15 +3,20 @@ import {
PipeTransform, PipeTransform,
} from '@angular/core'; } from '@angular/core';
/** /*
* A pipe that sanitizes HTML and highlights numbers and special characters (in different colors each). An updated pipe that sanitizes HTML, highlights numbers and special characters (in different colors each)
*/ and handles Unicode / Emoji characters correctly.
*/
@Pipe({ name: 'colorPassword' }) @Pipe({ name: 'colorPassword' })
export class ColorPasswordPipe implements PipeTransform { export class ColorPasswordPipe implements PipeTransform {
transform(password: string) { transform(password: string) {
// Regex Unicode property escapes for checking if emoji in passwords.
const regexpEmojiPresentation = /\p{Emoji_Presentation}/gu;
// Convert to an array to handle cases that stings have special characters, ie: emoji.
const passwordArray = Array.from(password);
let colorizedPassword = ''; let colorizedPassword = '';
for (let i = 0; i < password.length; i++) { for (let i = 0; i < passwordArray.length; i++) {
let character = password[i]; let character = passwordArray[i];
let isSpecial = false; let isSpecial = false;
// Sanitize HTML first. // Sanitize HTML first.
switch (character) { switch (character) {
@ -35,7 +40,9 @@ export class ColorPasswordPipe implements PipeTransform {
break; break;
} }
let type = 'letter'; let type = 'letter';
if (isSpecial || character.match(/[^\w ]/)) { if (character.match(regexpEmojiPresentation)) {
type = 'emoji';
} else if (isSpecial || character.match(/[^\w ]/)) {
type = 'special'; type = 'special';
} else if (character.match(/\d/)) { } else if (character.match(/\d/)) {
type = 'number'; type = 'number';