feat(reset): added a better validator to the form

app/ui/static/css/main.css

@@ -51,17 +51,36 @@ a:hover>span {
     font-size: 32px;
 }
 
+#confirm-msg,
+#password-msg {
+    color: #d4d4d4;
+    font-size: small;
+    transition: color 225ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+#password-msg li {
+    list-style: none;
+    content: ""
+}
+
+#password-msg li::before {
+    content: "☑ ";
+}
+
 .errorinput {
     border-color: #f44246 !important;
 }
 
-#confirm-msg,
-#password-msg {
-    color: #f44246;
-    opacity: 0;
-    transition: opacity 225ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.errormsg {
+    color: #f44246 !important;
+    
 }
 
+li.errormsg::before {
+    content: "☒ " !important;
+}
+
+
 .errorinput:focus {
     box-shadow: 0 0 0 .10rem rgba(244, 66, 70, 0.50) !important;
     -webkit-box-shadow: 0 0 0 .10rem rgba(244, 66, 70, 0.50) !important;
@@ -77,8 +96,3 @@ a:hover>span {
     background: #4e4e4e;
     border-radius: .50rem;
 }
-
-.fade {
-    opacity: 1 !important;
-    transition: opacity 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
-}