Commit 1ff11ddc authored by Alina Habibulina's avatar Alina Habibulina

+auth form

parent 9f10ee42
.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 {
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);
}
.login-form h3 {
line-height: 20px;
font-family: 'Myriad Pro', sans-serif;
font-size: 22px;
font-weight: normal;
color: #e4e4e4;
}
.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-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%);
}
.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%);
}
\ No newline at end of file
......@@ -11,20 +11,23 @@
<link rel ="stylesheet" href ="http://intern-dev.arta.kz/Synergy/js/form.player.css"/>
<script src ="http://intern-dev.arta.kz/Synergy/js/vendor.js" type ="text/javascript"></script>
<script src ="http://intern-dev.arta.kz/Synergy/js/form.player.js" type ="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src ="js/Player.js"></script>
<link href ="css/beau.css" rel ="stylesheet"/>
</head>
<body>
<div id ="form_player_container">
<div id ="form_player_container" align ="center">
<div id ="form_player_div" ></div>
</div>
<div class = "login-form">
<form id = "authorization" align="center" action="#">
<p><h3>Fill in the fields below: </h3>
<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>
<input type="submit" class="submit" align = "center" style = "color:blue" value = "Submit"></button>
<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>
</body>
......
......@@ -17,17 +17,38 @@ var portal = {
portal.player = AS.FORMS.createPlayer();
portal.player.showFormByCode(formCode);
portal.player.view.appendTo($('#form_player_div'));
},
showMessage : function(message) {
alert(message);
}
};
$(document).ready(function(){
AS.SERVICES.unAuthorized = function()
{
portal.showMessage("Authorization Error!");
location.reload();
};
jQuery(".submit").on( "click", function(event){
AS.OPTIONS.login = $("input#login").val();
AS.OPTIONS.password = $("input#password").val();
$("#authorization").remove();
$(".form_player_container").show();
portal.createPlayer("timesheet");
});
var existHandlers = false;
var addHandlers = 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();
$(".form_player_container").show();
portal.createPlayer("timesheet");
}
existHandlers = true;
});
}
$(document).ready(function(){
if (!existHandlers) addHandlers();
});
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment