Update color-password.pipe.js to handle Unicode/Emoji correctly accro…

…ss platforms. (#354)

src/angular/pipes/color-password.pipe.ts

@@ -3,15 +3,20 @@ import {
     PipeTransform,
 } 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' })
 export class ColorPasswordPipe implements PipeTransform {
     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 = '';
-        for (let i = 0; i < password.length; i++) {
-            let character = password[i];
+        for (let i = 0; i < passwordArray.length; i++) {
+            let character = passwordArray[i];
             let isSpecial = false;
             // Sanitize HTML first.
             switch (character) {
@@ -35,7 +40,9 @@ export class ColorPasswordPipe implements PipeTransform {
                     break;
             }
             let type = 'letter';
-            if (isSpecial || character.match(/[^\w ]/)) {
+            if (character.match(regexpEmojiPresentation)) {
+                type = 'emoji';
+            } else if (isSpecial || character.match(/[^\w ]/)) {
                 type = 'special';
             } else if (character.match(/\d/)) {
                 type = 'number';