Optimized login page for oauth redirection

web/login.system

@@ -73,6 +73,13 @@
     .loginbtn{
         color:white !important;
         margin-top:4em;
+        background-color:#686c89 !important;
+    }
+
+    .oauthbtn{
+        color:white !important;
+        margin-top:1em;
+        background-color:#a45b6a !important;
     }
 
     </style>
@@ -87,6 +94,9 @@
 
             <div class="ts borderless basic segment">
                 <p><i class="key icon"></i> Sign in <span class="hostname">ArozOS</span> with your username and password</p>
+                <div class="oauthonly">
+                    <a class="ts fluid small button oauthbtn" href="system/auth/oauth/login">Sign In via OAuth 2.0</a><br>
+                </div>
                 <br>
                 <div class="ts fluid input textbox">
                     <input id="username" type="text" placeholder="Username">
@@ -101,13 +111,11 @@
                 </div>
                 
                 <br>
-                <button id="loginbtn" class="ts button loginbtn" style="background-color:#686c89 !important;">Sign In</button><br>
+                <button id="loginbtn" class="ts button loginbtn">Sign In</button><br>
                 <div class="ts breadcrumb" style="margin-top:12px;">
                     <a class="section signup" style="cursor:pointer; display:none;" href="public/register/register.system">Sign Up</a>
                     <div class="divider signup"> / </div>
                     <a  id="forgetpw" class="section" style="cursor:pointer" href="reset.system">Forgot Password</a>
-                    <div class="divider signin"> / </div>
-                    <a class="section signin" style="cursor:pointer; display:none;" href="system/auth/oauth/login">Signin via External account</a>
                 </div>
                 <p style="margin-top:18px;color:#ff7a70; display:none;font-size:1.2em;"><i class="remove icon"></i><span id="errmsg">Error. Incorrect username or password.</span></p>
                
@@ -181,9 +189,9 @@
             //OAuth related code, check if system is open for ext login
             $.getJSON("system/auth/oauth/checkoauth",function(data){
                 if (data.enabled == true){
-                    $(".signin").show();
+                    $(".oauthonly").show();
                 }else{
-                    $(".signin").remove();
+                    $(".oauthonly").hide();
                 }
                 //if auto redirect is on
                 if(data.auto_redirect == true) {
@@ -198,10 +206,10 @@
                     if(document.referrer != window.location.origin + "/desktop.system" && document.referrer != window.location.origin + "/mobile.system" && path.origin + path.pathname !=  window.location.origin + "/system/auth/oauth/authorize"){
                         $(".ts.borderless.basic.segment").attr("style","display: none;");
                         $(".ts.borderless.basic.segment").attr("id","aoLogin");
-                        $(".ts.borderless.basic.segment").after('<div id="autoRedirectSegment" class="ts borderless basic segment"><p><i class="key icon"></i>Redirecting to your organization sign in page...</p><br><a style="cursor: pointer;" onclick="stopAutoRedirect()">Cancel</a></div>');
+                        $(".ts.borderless.basic.segment").after('<div id="autoRedirectSegment" class="ts borderless basic segment"><p><i class="key icon"></i>Redirecting to organization sign-in page in 5 seconds...</p><br><a style="cursor: pointer;" onclick="stopAutoRedirect()">Cancel</a></div>');
                         autoRedirectTimer = setTimeout(function(){
                             window.location.href = "system/auth/oauth/login?redirect=" + redirectionAddress;
-                        }, 3000);
+                        }, 5000);
                     }
                 }
             });