feat: created a base form with some validators

app/ui/static/css/main.css

@@ -0,0 +1,84 @@
+html,
+body {
+    margin: 0;
+    height: 100%;
+    min-width: 310px;
+}
+
+body {
+    min-height: 100%;
+    font-family: 'Roboto Mono', monospace;
+    color: white;
+    background: rgb(0, 0, 0);
+    background: linear-gradient(8deg, rgb(35, 155, 21) 0%, rgba(14, 47, 11, 1) 40%, rgba(0, 0, 0, 1) 70%);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+.vcenter {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translateX(-50%) translateY(-50%);
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.container {
+    animation: fadein ease 3s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:link>span {
+    color: rgb(216, 216, 216);
+}
+
+a:visited>span {
+    color: rgb(216, 216, 216);
+}
+
+a:hover>span {
+    color: rgb(255, 255, 255);
+}
+
+.icon2x {
+    height: 32px;
+    width: 32px;
+    font-size: 32px;
+}
+
+.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);
+}
+
+.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;
+}
+
+.form-control:focus {
+    border-color: #5cb85c;
+    box-shadow: 0 0 0 .10rem rgba(92, 184, 92, 0.50);
+    -webkit-box-shadow: 0 0 0 .10rem rgba(92, 184, 92, 0.50);
+}
+
+#reset-form {
+    background: #4e4e4e;
+    border-radius: .50rem;
+}
+
+.fade {
+    opacity: 1 !important;
+    transition: opacity 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}

app/ui/static/js/validate.js

@@ -0,0 +1,37 @@
+function validate_form() {
+    var pass = validate_password();
+
+    return validate_confirm() && pass;
+}
+
+function validate_confirm() {
+    var password = document.getElementById("newpassword");
+    var confirm = document.getElementById("confirm_password");
+
+    if (password.value != confirm.value) {
+        confirm.classList.add("errorinput");
+        document.getElementById("confirm-msg").classList.add("fade");
+        return false;
+    }
+
+    confirm.classList.remove("errorinput");
+    document.getElementById("confirm-msg").classList.remove("fade");
+
+    return true;
+}
+
+function validate_password() {
+    var password = document.getElementById("newpassword");
+    var reg = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/;
+
+    if (reg.test(password.value) != true) {
+        password.classList.add("errorinput");
+        document.getElementById("password-msg").classList.add("fade");
+        return false;
+    }
+
+    password.classList.remove("errorinput");
+    document.getElementById("password-msg").classList.remove("fade");
+
+    return true;
+}