small login adjustements, finished unminimizing sha512.js

lib/css/login.css

@@ -2,10 +2,11 @@ body {
     overflow-x: hidden;
 }
 .login-container {
-    margin-top: 5%;
+    margin-top: 50px;
     margin-bottom: 5%;
 }
 .login-form-1 {
+    width: 100%;
     padding: 5%;
     box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
 }
@@ -16,21 +17,36 @@ body {
 .login-container form {
     padding: 10%;
 }
-.btnSubmit
+.btnSubmit, .btnForget {
-{
-    width: 40%;
     border-radius: 2rem;
     padding: 1.5%;
     border: none;
     cursor: pointer;
+    max-width: 49%;
+    outline: none;
 }
-.login-form-1 .btnSubmit{
+.login-form-1 .btnSubmit, .login-form-1 .btnForget {
     font-weight: 600;
     color: #fff;
     background-color: #0062cc;
 }
-.login-form-1 .ForgetPwd{
+.login-response {
-    color: #0062cc;
+    min-height: 24px;
+    color: darkcyan;
     font-weight: 600;
     text-decoration: none;
 }
+@media screen and (max-width: 768px) {
+    .login-container {
+        margin-top: 0;
+    }
+}
+@media screen and (max-width: 576px) {
+    .btnSubmit {
+        min-width: 100%;
+    }
+    .btnForget {
+        min-width: 100%;
+        margin-top: 5px;
+    }
+}

lib/js/login.js

@@ -5,21 +5,24 @@ function login ( ) {
     var xhr = new XMLHttpRequest ( );
     xhr.open ( "POST", 'login', true );
     xhr.onreadystatechange = function ( ) {
-        if ( xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200 ) {
         if ( xhr.status == 200 ) {
+            if ( xhr.readyState == XMLHttpRequest.DONE ) {
                 var response = xhr.responseText;
                 response = JSON.parse ( response );
                 if ( response [ 'status' ] == 200 ) {
                     window.location.href = script_name;
                 }
-                else {
-                    console.log ( response [ 'error_message' ] );
-                }
             }
             else {
                 console.log ( 'Server communication error: ' + xhr.statusText );
             }
         }
+        else {
+            document.getElementById ( 'login-response' ).innerHTML = JSON.parse ( xhr.responseText ) [ 'error_message' ];
+            setTimeout( function( ) {
+                document.getElementById ( 'login-response' ).innerHTML = ""
+            }, 1500 );
+        }
     }
     data = new FormData ( );
     data.append('username', username);

lib/js/sha512.js

@@ -143,15 +143,62 @@ function SHA512 ( str )
         highOrder = ( ( msw & 0xFFFF ) << 16 ) | ( lsw & 0xFFFF );
         return new int64 ( highOrder, lowOrder );
     } 
-    function safe_add_5(a,b,c,d,e){var lsw,msw,lowOrder,highOrder;lsw=(a.lowOrder&0xFFFF)+(b.lowOrder&0xFFFF)+(c.lowOrder&0xFFFF)+(d.lowOrder&0xFFFF)+(e.lowOrder&0xFFFF);msw=(a.lowOrder>>>16)+(b.lowOrder>>>16)+(c.lowOrder>>>16)+(d.lowOrder>>>16)+(e.lowOrder>>>16)+(lsw>>>16);lowOrder=((msw&0xFFFF)<<16)|(lsw&0xFFFF);lsw=(a.highOrder&0xFFFF)+(b.highOrder&0xFFFF)+(c.highOrder&0xFFFF)+(d.highOrder&0xFFFF)+(e.highOrder&0xFFFF)+(msw>>>16);msw=(a.highOrder>>>16)+(b.highOrder>>>16)+(c.highOrder>>>16)+(d.highOrder>>>16)+(e.highOrder>>>16)+(lsw>>>16);highOrder=((msw&0xFFFF)<<16)|(lsw&0xFFFF);return new int64(highOrder,lowOrder);} 
+    function safe_add_5 ( a, b, c, d, e ) {
-    function maj(x,y,z){return new int64((x.highOrder&y.highOrder)^(x.highOrder&z.highOrder)^(y.highOrder&z.highOrder),(x.lowOrder&y.lowOrder)^(x.lowOrder&z.lowOrder)^(y.lowOrder&z.lowOrder));} 
+        var lsw, msw, lowOrder, highOrder;
-    function ch(x,y,z){return new int64((x.highOrder&y.highOrder)^(~x.highOrder&z.highOrder),(x.lowOrder&y.lowOrder)^(~x.lowOrder&z.lowOrder));} 
+        lsw = ( a.lowOrder & 0xFFFF ) + ( b.lowOrder & 0xFFFF ) + ( c.lowOrder & 0xFFFF ) + ( d.lowOrder & 0xFFFF ) + ( e.lowOrder & 0xFFFF );
-    function rotr(x,n){if(n<=32){return new int64((x.highOrder>>>n)|(x.lowOrder<<(32-n)),(x.lowOrder>>>n)|(x.highOrder<<(32-n)));}else{return new int64((x.lowOrder>>>n)|(x.highOrder<<(32-n)),(x.highOrder>>>n)|(x.lowOrder<<(32-n)));}} 
+        msw = ( a.lowOrder >>> 16 ) + ( b.lowOrder >>> 16 ) + ( c.lowOrder >>> 16 ) + ( d.lowOrder >>> 16 ) + ( e.lowOrder >>> 16 ) + ( lsw >>> 16 );
-    function sigma0(x){var rotr28=rotr(x,28);var rotr34=rotr(x,34);var rotr39=rotr(x,39);return new int64(rotr28.highOrder^rotr34.highOrder^rotr39.highOrder,rotr28.lowOrder^rotr34.lowOrder^rotr39.lowOrder);} 
+        lowOrder = ( ( msw & 0xFFFF ) << 16 ) | ( lsw & 0xFFFF );
-    function sigma1(x){var rotr14=rotr(x,14);var rotr18=rotr(x,18);var rotr41=rotr(x,41);return new int64(rotr14.highOrder^rotr18.highOrder^rotr41.highOrder,rotr14.lowOrder^rotr18.lowOrder^rotr41.lowOrder);} 
+        lsw = ( a.highOrder & 0xFFFF ) + ( b.highOrder & 0xFFFF ) + ( c.highOrder & 0xFFFF ) + ( d.highOrder & 0xFFFF ) + ( e.highOrder & 0xFFFF ) + ( msw >>> 16 );
-    function gamma0(x){var rotr1=rotr(x,1),rotr8=rotr(x,8),shr7=shr(x,7);return new int64(rotr1.highOrder^rotr8.highOrder^shr7.highOrder,rotr1.lowOrder^rotr8.lowOrder^shr7.lowOrder);} 
+        msw = ( a.highOrder >>> 16 ) + ( b.highOrder >>> 16 ) + ( c.highOrder >>> 16 ) + ( d.highOrder >>> 16 ) + ( e.highOrder >>> 16 ) + ( lsw >>> 16 );
-    function gamma1(x){var rotr19=rotr(x,19);var rotr61=rotr(x,61);var shr6=shr(x,6);return new int64(rotr19.highOrder^rotr61.highOrder^shr6.highOrder,rotr19.lowOrder^rotr61.lowOrder^shr6.lowOrder);} 
+        highOrder = ( ( msw & 0xFFFF ) << 16 ) | ( lsw & 0xFFFF );
-    function shr(x,n){if(n<=32){return new int64(x.highOrder>>>n,x.lowOrder>>>n|(x.highOrder<<(32-n)));}else{return new int64(0,x.highOrder<<(32-n));}} 
+        return new int64 ( highOrder, lowOrder );
+    } 
+    function maj ( x, y, z ) {
+        return new int64 ( ( x.highOrder & y.highOrder ) ^ ( x.highOrder & z.highOrder ) ^ ( y.highOrder & z.highOrder ), ( x.lowOrder & y.lowOrder ) ^ ( x.lowOrder & z.lowOrder ) ^ ( y.lowOrder & z.lowOrder ) );
+    } 
+    function ch ( x, y, z ) {
+        return new int64 ( ( x.highOrder & y.highOrder ) ^ ( ~ x.highOrder & z.highOrder ), ( x.lowOrder & y.lowOrder ) ^ ( ~ x.lowOrder & z.lowOrder ) );
+    }
+    function rotr ( x, n ) {
+        if ( n <= 32 ) {
+            return new int64 ( ( x.highOrder >>> n ) | ( x.lowOrder << ( 32 - n ) ), ( x.lowOrder >>> n ) | ( x.highOrder << ( 32 - n ) ) );
+        }
+        else {
+            return new int64 ( ( x.lowOrder >>> n ) | ( x.highOrder << ( 32 - n ) ), ( x.highOrder >>> n ) | ( x.lowOrder << ( 32 - n ) ) );
+        }
+    } 
+    function sigma0 ( x ) {
+        var rotr28 = rotr ( x, 28 );
+        var rotr34 = rotr ( x, 34 );
+        var rotr39 = rotr ( x, 39 );
+        return new int64 ( rotr28.highOrder ^ rotr34.highOrder ^ rotr39.highOrder, rotr28.lowOrder ^ rotr34.lowOrder ^ rotr39.lowOrder );
+    }
+    function sigma1 ( x ) {
+        var rotr14 = rotr ( x, 14 );
+        var rotr18 = rotr ( x, 18 );
+        var rotr41 = rotr ( x, 41 );
+        return new int64 ( rotr14.highOrder ^ rotr18.highOrder ^ rotr41.highOrder, rotr14.lowOrder ^ rotr18.lowOrder ^ rotr41.lowOrder );
+    }
+    function gamma0 ( x ) {
+        var rotr1 = rotr ( x, 1 );
+        var rotr8 = rotr ( x, 8 );
+        var shr7 = shr ( x, 7 );
+        return new int64 ( rotr1.highOrder ^ rotr8.highOrder ^ shr7.highOrder, rotr1.lowOrder ^ rotr8.lowOrder ^ shr7.lowOrder );
+    } 
+    function gamma1 ( x ) {
+        var rotr19 = rotr ( x, 19 );
+        var rotr61 = rotr ( x, 61 );
+        var shr6 = shr ( x, 6 );
+        return new int64 ( rotr19.highOrder ^ rotr61.highOrder ^ shr6.highOrder, rotr19.lowOrder ^ rotr61.lowOrder ^ shr6.lowOrder );
+    } 
+    function shr ( x, n ) {
+        if ( n <= 32 ) {
+            return new int64 ( x.highOrder >>> n, x.lowOrder >>> n | ( x.highOrder << ( 32 - n ) ) );
+        }
+        else {
+            return new int64 ( 0, x.highOrder << ( 32 - n ) );
+        }
+    } 
     str = utf8_encode ( str );
     strlen = str.length * charsize;
     str = str2binb ( str );

lib/php/login.php

@@ -49,22 +49,23 @@
         <link href="<?=$GLOBALS['config']['installation_path']?>/favicon.ico" rel="icon" type="image/x-icon">
     </head>
     <body>
-    <div class="container login-container">
+    <div class="container col-lg-6 col-md-8 col-sm-12 col-xs-12 login-container" id="login-container">
         <div class="row">
-            <div class="col-md-6 login-form-1">
+            <div class="col-xs-12 login-form-1">
                 <h3>Login</h3>
                 <form>
                     <div class="form-group">
-                        <input type="text" class="form-control" placeholder="Username" value="" id="form-username" />
+                        <input type="text" class="form-control" placeholder="Username" value="" id="form-username" required />
                     </div>
                     <div class="form-group">
-                        <input type="password" class="form-control" placeholder="Password" value="" id="form-password" />
+                        <input type="password" class="form-control" placeholder="Password" value="" id="form-password" required />
                     </div>
                     <div class="form-group">
-                        <input type="button" class="btnSubmit" value="Login" onclick="login()" />
+                        <input type="button" class="col-md-6 btnSubmit" value="Login" onclick="login()" />
+                        <input type="button" class="col-md-6 btnForget" value="Forgot Password?" onclick="window.location.href='<?=$GLOBALS['config']['installation_path']."/login/forgot"?>'">
                     </div>
                     <div class="form-group">
-                        <a href="<?=substr($_SERVER[ 'SCRIPT_NAME' ],0,-10)."/login/forgot"?>" class="ForgetPwd">Forgot Password?</a>
+                        <div id="login-response" class="login-response"></div>
                     </div>
                 </form>
             </div>