Add in 12 character threshold and crypto checking

python-flask/smeserver-password-app/static/css/style.css

@@ -1,4 +1,4 @@
-/* SME Server Password Change Form Styles */
+/* SME Server Password Change Form Styles - Enhanced Version */
 
 body {
     font-family: Arial, sans-serif;
@@ -37,6 +37,20 @@ h1 {
     font-style: italic;
 }
 
+/* Password Requirements Display */
+.password-requirements {
+    background-color: #e8f4f8;
+    border: 1px solid #b8d4e0;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 4px;
+}
+
+.password-requirements p {
+    margin: 0;
+    font-size: 12px;
+}
+
 /* Flash Messages */
 .messages {
     margin-bottom: 20px;
@@ -91,6 +105,13 @@ h1 {
     vertical-align: middle;
 }
 
+/* Password Input Container */
+.password-input-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
 .form-table input[type="text"],
 .form-table input[type="password"] {
     width: 200px;
@@ -106,6 +127,39 @@ h1 {
     border-color: #666;
 }
 
+/* Password Toggle Button */
+.password-toggle {
+    background-color: #f0f0f0;
+    border: 1px solid #999;
+    padding: 2px 6px;
+    font-size: 10px;
+    font-family: Arial, sans-serif;
+    cursor: pointer;
+    border-radius: 2px;
+    min-width: 35px;
+    height: 24px;
+}
+
+.password-toggle:hover {
+    background-color: #e0e0e0;
+}
+
+.password-toggle:active {
+    background-color: #d0d0d0;
+}
+
+.password-toggle:focus {
+    outline: 1px dotted #666;
+}
+
+/* Password Strength Indicator */
+.password-strength-indicator {
+    font-size: 10px;
+    margin-top: 3px;
+    font-weight: bold;
+    color: #666;
+}
+
 .button-container {
     text-align: right;
     padding-top: 10px;
@@ -163,12 +217,22 @@ h1 {
         padding-bottom: 15px;
     }
     
+    .password-input-container {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 3px;
+    }
+    
     .form-table input[type="text"],
     .form-table input[type="password"] {
         width: 100%;
         max-width: 300px;
     }
     
+    .password-toggle {
+        align-self: flex-start;
+    }
+    
     .form-table tr {
         height: auto;
     }
@@ -178,3 +242,32 @@ h1 {
     }
 }
 
+/* Accessibility Improvements */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+    .password-toggle {
+        border: 2px solid #000;
+    }
+    
+    .form-table input[type="text"],
+    .form-table input[type="password"] {
+        border: 2px solid #000;
+    }
+    
+    .message.success {
+        border: 2px solid #000;
+    }
+    
+    .message.error {
+        border: 2px solid #000;
+    }
+}
+