+auth form v3

src/main/webapp/css/beau.css

-.submit {
-background-color: #e7e7e7; 
-color: black;
-border: none;
-padding: 15px 32px;
-text-align: center;
-text-decoration: none;
-border-radius: 5px;
-display: inline-block;
-font-size: 16px;
+.login-form{
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 320px;
+    height: 230px;
+    background-color: white;
+    position: absolute;
+    border-color: #24282B;
+    border-style: none solid solid;
+    border-width: 1px;
+    top: 150px;
 }
 
-.login-form {
-position: relative; 
-width: 200px;
-height: 250px;
-margin-left: auto;
-margin-right: auto;
-padding: 15px 25px 0 25px;
-margin-top: 15px;
-cursor: default;
-background-color: #141517;
--webkit-border-radius: 5px;
--moz-border-radius: 5px;
-border-radius: 5px;
--webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
--moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
+.header{
+    background-color: #4C5256;
+	position: relative;
+    padding: 12px;
+    color: white;
+    font-family: arial, tahoma, sans-serif;
+    font-size: 13pt;
+    font-weight: bold;
+    cursor: pointer;
 }
 
-.login-form h3 {
-line-height: 20px;
-font-family: 'Myriad Pro', sans-serif;
-font-size: 22px;
-font-weight: normal;
-color: #e4e4e4;
+.error{
+	margin-top: 5px;
+	color: red;
+	font-family: arial, tahoma, sans-serif;
+    font-size: 15pt;
 }
 	
-.login-form input[type=text],
-.login-form input[type=password]{
-line-height: 14px;
-margin: 10px 0;
-padding: 6px 15px;
-border: 0;
-outline: none;
-font-family: Helvetica, sans-serif;
-font-size: 12px;
-font-weight: bold;
-text-shadow: 0px 1px 1px rgba(255,255,255, .2);
--webkit-border-radius: 26px;
--moz-border-radius: 26px;
-border-radius: 26px;
--webkit-transition: all .15s ease-in-out;
--moz-transition: all .15s ease-in-out;
-transition: all .15s ease-in-out;
+.login{
+	position: static;
+    margin-top: 25px;
+    width: 250px;
+    display: inline-block;
+    height: 20px;
+	size: 50px;
 }
 
-.login-form input[type=text],
-.login-form input[type=password]{
-color: #686868;
-width: 170px;
--webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
--moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
-background: #989898;
-background: -moz-linear-gradient(top,  #ffffff 0%, #989898 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));
-background: -webkit-linear-gradient(top,  #ffffff 0%,#989898 100%);
-background: -o-linear-gradient(top,  #ffffff 0%,#989898 100%);
-background: -ms-linear-gradient(top,  #ffffff 0%,#989898 100%);
-background: linear-gradient(top,  #ffffff 0%,#989898 100%);
+.password {
+	position: static;
+    margin-top: 15px;
+    width: 250px;
+    display: inline-block;
+    height: 20px;
 }
 
-.login-form input[type=text]:hover,
-.login-form input[type=password]:hover {
--webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
--moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
-}
-
-.login-form input[type=text]:focus,
-.login-form input[type=password]:focus {
-background: #e1e1e1;
-background: -moz-linear-gradient(top,  #ffffff 0%, #e1e1e1 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
-background: -webkit-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
-background: -o-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
-background: -ms-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
-background: linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
+.submit{
+	margin-top: 15px;
+    width: 100px;
+	position: relative;
+	height: 35px;
+    border-radius: 5px;
+    background-color: #49b785;
+    border-color: #49b785;
+    color: #ffffff;	
 }
\ No newline at end of file

src/main/webapp/index.html

@@ -18,16 +18,6 @@
 	<div id ="form_player_container" align ="center">
 		<div id ="form_player_div" ></div>
 	</div>
-	
-	<div class ="login-form" align ="center">
-		<form id ="authorization">
-			<p><h3>Please, log in: </h3>
-			<div class ="infoInput">
-				<p><input type ="text" id ="login" name ="login" placeholder ="Username" size ="20" required></p>
-				<p><input type ="password" id ="password" name ="password" placeholder ="Password" size ="20" required></p>
-			</div>
-			<input type ="submit" id ="submit" class ="submit" align ="center" value ="Submit"></button>
-		</form>  
-	</div>
+	<div id="authForm"></div>
 </body>
 </html>
\ No newline at end of file

src/main/webapp/js/Player.js

@@ -17,36 +17,83 @@ var portal = {
         portal.player = AS.FORMS.createPlayer();
         portal.player.showFormByCode(formCode);
 	    portal.player.view.appendTo($('#form_player_div'));
-    },
-	
-	showMessage : function(message) {
-        alert(message);
     }	
 };
 
 AS.SERVICES.unAuthorized = function()
 {
-	portal.showMessage("Authorization Error!");
-	location.reload();
+	CreateAuthForm();
 };
 
+function CreateAuthForm(){
+
+	var forma = document.createElement("form");
+	forma.className = "login-form";
+	forma.setAttribute('id',"login-form");
+	forma.setAttribute('align',"center");
+	
+	var authHeader = document.createTextNode('Введите логин и пароль');
+	var authErr = document.createTextNode('Неверный логин или пароль');
+	
+	var Hdiv = document.createElement("div");
+	Hdiv.className = "header";
+	Hdiv.appendChild(authHeader);
+	
+	var Ediv = document.createElement("div");
+	Ediv.className = "error";
+	Ediv.appendChild(authErr);
+	Ediv.setAttribute('id',"error");
+	
+	var textInp = document.createElement("input");
+	textInp.className = "login";
+	textInp.setAttribute('type',"text");
+	textInp.setAttribute('name',"login");
+	textInp.setAttribute('id',"login");
+	textInp.setAttribute('placeholder',"Логин");
+	textInp.setAttribute('align',"center");
+	
+	var pasInp = document.createElement("input");
+	pasInp.className = "password";
+	pasInp.setAttribute('type',"password");
+	pasInp.setAttribute('name',"password");
+	pasInp.setAttribute('id',"password");
+	pasInp.setAttribute('placeholder',"Пароль");
+	pasInp.setAttribute('align',"center");
+
+	var submitBtn = document.createElement("input");
+	submitBtn.className = "submit";
+	submitBtn.setAttribute('type',"submit");
+	submitBtn.setAttribute('value',"Войти");
+	submitBtn.setAttribute('id',"submit");
+	submitBtn.setAttribute('align',"center");
 
-var addHandlers = function(){
+	forma.appendChild(Hdiv);
+	forma.appendChild(Ediv);
+	forma.appendChild(textInp);
+	forma.appendChild(pasInp);
+	forma.appendChild(submitBtn);
+
+	document.getElementById("authForm").appendChild(forma);
+	authFunc();
+};
+
+var authFunc = function(){
 	jQuery(".submit").on( "click", function(event){
         AS.OPTIONS.login = $("input#login").val();
         AS.OPTIONS.password = $("input#password").val();
 		var xhr = new XMLHttpRequest();
 		AS.FORMS.ApiUtils.simpleAsyncGet('rest/api', xhr);
-		if (xhr.status == "401") {
-			AS.SERVICES.unAuthorized();
-		} else {
-			$(".login-form").remove();
+		if (xhr.status != 200) {
 			$(".form_player_container").show();
 			portal.createPlayer("timesheet");
+			$(".login-form").remove();
+		} else {
+			CreateAuthForm();
 		}	
     });
-}
+};
 
 $(document).ready(function(){
-	addHandlers();
- });
+	CreateAuthForm();
+	$(".error").hide();
\ No newline at end of file
+});