Add safe password checklist

semantic.json

@@ -27,31 +27,32 @@
     "grid",
 
     "button",
+    "calendar",
     "card",
-    "divider",
     "dimmer",
+    "divider",
     "dropdown",
+    "form",
     "header",
     "icon",
     "image",
     "input",
     "label",
-    "loader",
     "list",
+    "list",
+    "loader",
+    "menu",
+    "message",
     "modal",
+    "popup",
     "progress",
     "segment",
     "sidebar",
     "statistic",
+    "step",
+    "tab",
     "text",
     "toast",
-    "form",
-    "menu",
-    "calendar",
-    "popup",
-    "message",
-    "list",
-    "tab",
 
     "api",
     "transition"

src/assets/js/profile.js

@@ -25,6 +25,39 @@ $(function() {
         }
     });
 
+    $(document).on('change', '[name="user-password"]', function() {
+        var password = $(this).val();
+
+        if (password.length > 8) {
+            $('.step.long')
+            .removeClass('disabled')
+            .addClass('completed');
+        } else {
+            $('.step.long')
+            .removeClass('completed')
+            .addClass('disabled');
+        }
+
+        var hasSpecialCharacter = false;
+
+        password.split('').forEach(character => {
+            if (character.match(/\W/)) {
+                hasSpecialCharacter = true;
+                return;
+            }
+        });
+
+        if (hasSpecialCharacter) {
+            $('.step.special')
+            .addClass('completed')
+            .removeClass('disabled');
+        } else {
+            $('.step.special')
+            .removeClass('completed')
+            .addClass('disabled');
+        }
+    });
+
     $('.ui.dropdown.channel').dropdown();
     $('.ui.dropdown.locale').dropdown({
         sortSelect : 'natural',

src/pages/profile.php

@@ -228,6 +228,30 @@ $page->navigation();
                                 title="<?= __('Save') ?>"
                             />
                         </form>
+                    </div>
+
+                    <h3 class="ui header"><?= __('Safe password checklist') ?></h3>
+
+                    <div class="ui basic fitted segment">
+                        <div class="ui three steps">
+                            <div class="disabled step long">
+                                <i class="times icon"></i>
+                                <div class="content">
+                                    <div class="title"><?= __('Long') ?></div>
+                                    <div class="description"><?= __('Over eight characters in length.') ?></div>
+                                </div>
+                            </div>
+
+                            <div class="disabled step special">
+
+                                <i class="times icon"></i>
+                                <div class="content">
+                                    <div class="title"><?= __('Special') ?></div>
+                                    <div class="description"><?= __('Contains special characters.') ?></div>
+                                </div>
+
+                            </div>
+                        </div>
 
                     </div>
                 </div>