Page 1 of 11
Forum moderator: bigblog 
uCoz Community » For Webmasters » Custom Solutions » Ajax Loginform (Help with uCoz)
Ajax Loginform
VZ
Posts: 189
Reputation: 3
Message # 1 | 1:28 AM


Code
function loginsub() {
    $(".login-progress").addClass("checking");
    usr = $("#usrnm").val();
    pswd = $("#pswd").val();
    $("#usrnm,#pswd").prop("disabled", true);
    $.ajax({
   type: "POST",
    url: "/index/sub",
    data: {user:usr, password:pswd, a:2, ajax:1, rnd:0},
    success: function(data) {
  var result = $(data).find("cmd[p=\"innerHTML\"]").text();
  $("#resultsappd").html(result).css("display","none");
  var errorc = $("#resultsappd div .myWinLoadSF").attr("title");
  var successc = $("#resultsappd div div").hasClass("myWinLoadSD");
  console.log(successc);
  if(successc == true) {
   $(".login-progress").removeClass("checking");
   $(".login-progress").addClass("success");
   location.reload();
  } else if(errorc == "Your IP address has been temporarily blocked" || "Wrong username or password") {
   $(".login-progress").removeClass("checking");
  } else {
   $(".login-progress").removeClass("checking");
  }
  $("#usrnm,#pswd").prop("disabled", false);
    },
    error: function(e) {
  $(".login-progress").removeClass("checking");
  console.log("Connection Issue");
    },
    dataType: "xml"
});
    return false;
}

The success uses response headers to know whether the action is a success or not, how would I be able to parse through the response header, I'll use the error to know whether their is a connection issue or not and success to parse the xml response...
Ok all I have to get is code to know whether its a success or not according to the xml response in cmd p="innerHTML" and using the title of div.myWinLoadSf

update: seems to work... check it at: http://test.days4god.com
Fixing the issue, sending two requests...
Update: Got it to work :)
Here is the html form
Code
<?if(!$USER_LOGGED_IN$)?><noindex>
<form action="/index/sub/" method="post" style="margin:0" onsubmit="return false;">
<div class="login-form hidden">
<div class="title-bar">
<span class="title">Login form</span>
<span class="login-bar"><span class="login-progress"></span></span>
</div>
<div id="resultsappd"></div>
<div class="login-content">
<input id="usrnm" name="user" placeholder="Username" onblur="if(this.value=='') this.value='Username';" onfocus="if(this.value=='Username') this.value='';" type="text">
<input id="pswd" name="password" placeholder="********" onblur="if(this.value=='') this.value='********';" onfocus="if(this.value=='********') this.value='';" type="password">
</div>
<div class="bottom-panel">
<button class="Btn-close" onclick="loginclose(); return false;">Close</button>
<button class="loginButton" name="sbm" type="submit" onclick="loginsub();">Log In</button>
</div>
</div>
<input name="a" value="2" type="hidden">
<input name="ajax" value="1" type="hidden">
<input name="rnd" value="0" type="hidden">
</form>
<div class="overlay hidden" onclick="loginclose(); return false;"></div>
</noindex><?endif?>
Attachments: 4372868.gif(461Kb)

Hit that "Thanks" button. :)
In life there's ALWAYS limits but do not plan above them.
Post edited by VZ - Monday, 2016-02-15, 0:38 AM
khen
Posts: 436
Reputation: 13
Message # 2 | 11:11 AM
great script VZ. Please add more useful uCoz scripts!
Xayaan
Posts: 555
Reputation: 14
Message # 3 | 9:19 PM
Excellent, Thank you for your contribution!
My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio
Cyberdasm
Posts: 599
Reputation: 6
Message # 4 | 6:55 AM
VZ, wow excellent....
1F4BF3B

admin@lizeal.tk
www.lizeal.tk
khen
Posts: 436
Reputation: 13
Message # 5 | 2:30 PM
yeah, good work bro.
VZ
Posts: 189
Reputation: 3
Message # 6 | 6:59 PM
Code
  } else if(errorc == "IP адрес временно заблокированa" || "Неправильный логин или пароль") {

You can replace those error with the language on yourwebsite...
IP адрес временно заблокированa = Ip address temporarily blocked
Неправильный логин или пароль = Wrong Username or Password
You can place these errors in any order you please :)
Sucks I can not edit to update :\

Hit that "Thanks" button. :)
In life there's ALWAYS limits but do not plan above them.
Post edited by VZ - Saturday, 2016-02-27, 7:01 PM
bigblog
REEEEEE
Posts: 1349
Reputation: 65
Message # 7 | 8:39 PM
VZ, updated wink
i breathe... sometimes
VZ
Posts: 189
Reputation: 3
Message # 8 | 9:08 PM
If anyone wanted to use the old notify whether it was a success or not just use this
Where it says MSG Put your message in their but if you use a single(') your code will not work, thus you either have to escape it by putting a backward slash before the single quote or change the single quotes to double quotes and use single quotes within the string.
Some parameters
Quote
h:height in pixels of the popout
w: same as height but for width
pad: padding in css
tm: is time in milliseconds for how long it should appear before disappearing.
----------------------------------------------------
where it is
Code
   setTimeout(function() {location.reload();}, 3000);
3000 is time in milliseconds before the page reload request is sent/function gets executed, no units are needed.

Example with the quote escaping:
Code
_uWnd.alert('<div class="myWinError"> You\'re successfully logged in. </div>','',{w:250,h:90,tm:3000,pad:'15px'});

or
Code
_uWnd.alert("<div class=\"myWinError\"> You're logged in. </div>",'',{w:250,h:90,tm:3000,pad:'15px'});

Replace this with the if statement in your script.
Code

if(successc == true) {
   $(".login-progress").removeClass("checking");
   $(".login-progress").addClass("success");
   _uWnd.alert('<div class="myWinError"> MSG </div>','',{w:250,h:90,tm:3000,pad:'15px'});
   setTimeout(function() {location.reload();}, 3000);
    } else if(errorc == "Your IP address has been temporarily blocked" || "Wrong username or password") {
   _uWnd.alert('<div class="myWinError">' + errorc + '</div>','',{w:250,h:90,tm:3000,pad:'15px'});
   $(".login-progress").removeClass("checking");
  } else {
   $(".login-progress").removeClass("checking");
  }

For ex. or copy and paste this:
Code
function loginsub() {
    $(".login-progress").addClass("checking");
    usr = $("#usrnm").val();
    pswd = $("#pswd").val();
    $("#usrnm,#pswd").prop("disabled", true);
    $.ajax({
   type: "POST",
    url: "/index/sub",
    data: {user:usr, password:pswd, a:2, ajax:1, rnd:0},
    success: function(data) {
  var result = $(data).find("cmd[p=\"innerHTML\"]").text();
  $("#resultsappd").html(result).css("display","none");
  var errorc = $("#resultsappd div .myWinLoadSF").attr("title");
  var successc = $("#resultsappd div div").hasClass("myWinLoadSD");
  console.log(successc);
if(successc == true) {
   $(".login-progress").removeClass("checking");
   $(".login-progress").addClass("success");
   _uWnd.alert('<div class="myWinError"> MSG </div>','',{w:250,h:90,tm:3000,pad:'15px'});
   setTimeout(function() {location.reload();}, 3000);
    } else if(errorc == "Your IP address has been temporarily blocked" || "Wrong username or password") {
   _uWnd.alert('<div class="myWinError">' + errorc + '</div>','',{w:250,h:90,tm:3000,pad:'15px'});
   $(".login-progress").removeClass("checking");
  } else {
   $(".login-progress").removeClass("checking");
  }
  $("#usrnm,#pswd").prop("disabled", false);
    },
    error: function(e) {
  $(".login-progress").removeClass("checking");
  console.log("Connection Issue");
    },
    dataType: "xml"
});
    return false;
}

Hit that "Thanks" button. :)
In life there's ALWAYS limits but do not plan above them.
Post edited by VZ - Saturday, 2016-03-26, 9:13 PM
Cyberdasm
Posts: 599
Reputation: 6
Message # 9 | 1:43 AM
VZ, kindly check if I've done it correctly?
Here is the link; www.testprogress.ucoz.com


The code

Added (2016-03-27, 1:43 AM)
---------------------------------------------
I put that in the body section.

Code
function loginsub() {
    $(".login-progress").addClass("checking");
    usr = $("#usrnm").val();
    pswd = $("#pswd").val();
    $("#usrnm,#pswd").prop("disabled", true);
    $.ajax({
   type: "POST",
    url: "/index/sub",
    data: {user:usr, password:pswd, a:2, ajax:1, rnd:0},
    success: function(data) {
  var result = $(data).find("cmd[p=\"innerHTML\"]").text();
  $("#resultsappd").html(result).css("display","none");
  var errorc = $("#resultsappd div .myWinLoadSF").attr("title");
  var successc = $("#resultsappd div div").hasClass("myWinLoadSD");
  console.log(successc);
  if(successc == true) {
   $(".login-progress").removeClass("checking");
   $(".login-progress").addClass("success");
   location.reload();
  } else if(errorc == "Your IP address has been temporarily blocked" || "Wrong username or password") {
   $(".login-progress").removeClass("checking");
  } else {
   $(".login-progress").removeClass("checking");
  }
  $("#usrnm,#pswd").prop("disabled", false);
    },
    error: function(e) {
  $(".login-progress").removeClass("checking");
  console.log("Connection Issue");
    },
    dataType: "xml"
});
    return false;
}
Attachments: 6263246.png(4Kb) · 0906283.png(64Kb)

1F4BF3B

admin@lizeal.tk
www.lizeal.tk
VZ
Posts: 189
Reputation: 3
Message # 10 | 0:42 AM
Cyberdasm, remove hidden from class property/attribute.
Like this:
Code
<div class="login-form">
...
You do not need the overlay...
Code
<div class="overlay hidden">

that is the part where it darks the screen and on top is the login form.

Added (2016-03-28, 0:42 AM)
---------------------------------------------

Code
.login-form {
    background-color: #fff;
    position: fixed;
    margin: auto;
    width: 300px;
    height: 198px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    right: 0px;
    z-index: 4;
    border-radius: 5px;
    overflow: hidden;
}
.title-bar {
    height: 50px;
    background-color: #333;
    line-height: 50px;
    padding: 0 5px;
    border-bottom: 2px solid #199eff;
}
.login-form .login-content {
    padding: 5px;
}
.login-form .bottom-panel {
    padding: 5px;
    border-top: 2px solid #ccc;
}
.btn-close {
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
    color: #ccc;
    background: none;
    transition: all 0.5s;
}
.loginButton {
    float: right;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #199eff;
    background: none;
    color: .login-form {
    background-color: #fff;
    position: fixed;
    margin: auto;
    width: 300px;
    height: 198px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    right: 0px;
    z-index: 4;
    border-radius: 5px;
    overflow: hidden;
}
.title-bar {
    height: 50px;
    background-color: #333;
    line-height: 50px;
    padding: 0 5px;
    border-bottom: 2px solid #199eff;
}
.login-form .login-content {
    padding: 5px;
}
.login-form .bottom-panel {
    padding: 5px;
    border-top: 2px solid #ccc;
}
.btn-close {
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
    color: #ccc;
    background: none;
    transition: all 0.5s;
}
.loginButton {
    float: right;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #199eff;
    background: none;
    color: #ff9119;
    transition: all 0.5s;
}
.login-form.hidden {
    display: none;
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .75;
    z-index: 3;
}
.overlay.hidden {
    display: none;
};
    transition: all 0.5s;
}
.login-form.hidden {
    display: none;
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .75;
    z-index: 3;
}
.overlay.hidden {
    display: none;
}
.login-bar {
    width: 75px;
    height: 5px;
    position: relative;
    border-radius: 5px;
    margin: 5px;
    float: right;
    background-color: #444;
    top: 16px;
}
.login-bar .login-progress {
    width: 25px;
    height: 5px;
    background-color: #cf0000;
    display: block;
    border-radius: 5px;
    transition: all 0.5s;
}
.login-bar .login-progress.checking {
    width: 50px;
    background-color: #ff9119;
}
.login-bar .login-progress.success {
    width: 75px;
    background-color: #00d10f;
}

Also if you have that stylesheet you will need a button for the the popup/window to look nice and a function(that is a script/written in js or jquery) to make it open.
Code
// Login Dialog
var open_form = false;
function logindialog(e) {
if(!open_form) {
$(".overlay,.login-form").removeClass("hidden");
e.keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
open_form = true;
} else {
loginclose();
};
}
function loginclose() {
$(".overlay,.login-form").addClass("hidden");
open_form = false;
}

That is the stylesheet(changed the colors up), I expected people to have a little knowledge, my mistake...

Hit that "Thanks" button. :)
In life there's ALWAYS limits but do not plan above them.
Post edited by VZ - Monday, 2016-03-28, 0:32 AM
Cyberdasm
Posts: 599
Reputation: 6
Message # 11 | 1:08 PM
VZ, sorry I'm just trying to test if the code will override the jquery I use... but I have no luck on it so maybe I will try to fix my mess first... BTW thanks for the demo it can help alot to modify the code correctly...
1F4BF3B

admin@lizeal.tk
www.lizeal.tk
Post edited by Cyberdasm - Friday, 2016-04-01, 11:45 PM
VZ
Posts: 189
Reputation: 3
Message # 12 | 5:15 AM
Little Demostration

Live Here: http://www.flatdesign101.cf/
Username: test
Password: 12345A
Updated Version:
Submit Data to Server
Code
function loginsub() {
    $(".login-form,.login-msg").removeClass("err");
    $(".login-msg").html("");
    $(".login-progress").addClass("checking");

    $("#usrnm,#pswd,#logButact").prop("disabled", true);
    $.ajax({
   type: "POST",
    url: "/index/sub",
    data: {
  user:$("#usrnm").val(),
  password:$("#pswd").val(),
  rem: $("#remember-me").prop("checked") == true ? 1 : undefined,
  hidden: $("#hide-me").prop("checked") == true ? 1 : undefined,
  a:2,
  ajax:1,
  rnd:0},
    success: function(data) {
  var result = $(data).find("cmd[p=\"innerHTML\"]").text();
  var htmlresp = $.parseHTML(result);
  var errorc = $.map(htmlresp, function(n, i) {
   return $.map($.parseHTML(n.innerHTML), function(n, i) {
    return [n.title,n.className];
   });
  });
  var successc = errorc[1] == "myWinLoadSD" ? true : false;
  console.log(successc,errorc);
  if(successc == true) {
   $(".login-progress").removeClass("checking");
   $(".login-progress").addClass("success");
   $(".login-content").fadeIn("slow").append("<div class=\"success-animation\"><div class=\"icon icon--order-success svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"72px\" height=\"72px\"><g fill=\"none\" stroke=\"#00d10f\" stroke-width=\"2\"><circle cx=\"36\" cy=\"36\" r=\"35\" style=\"stroke-dasharray:240px, 240px; troke-dashoffset: 480px;\"></circle><path d=\"M17.417,37.778l9.93,9.909l25.444-25.393\" style=\"stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;\"></path></g></svg></div></div>")
   setTimeout(function() {location.reload();}, 1500);
  } else if(errorc[0] != "" || undefined || null) {
   $(".login-msg").addClass("err").html("<span class=\"msg\">" + errorc[0] + "</span>").slideDown(0).delay(2000).slideUp(0);
   $(".login-progress").removeClass("checking");
  } else {
   $(".login-progress").removeClass("checking");
  }
  $("#usrnm,#pswd,#logButact").prop("disabled", false);
    },
    error: function(e) {
  $(".login-progress").removeClass("checking");
  $("#usrnm,#pswd,#logButact").prop("disabled", false);
  console.log("Connection Issue");
    },
    dataType: "xml"
});
    return false;
}

Open Login Dialog
Code
// Login Dialog
var open_form = false;
function logindialog() {
if(!open_form) {
$(".overlay,.login-form").removeClass("hidden");
open_form = true;
} else {
loginclose();
};
}
function loginclose() {
$(".overlay,.login-form").addClass("hidden");
open_form = false;
}

HTML
Code
<div class="login-form hidden">
<div class="title-bar">
<span class="title">Форма входа</span>
<span class="login-bar"><span class="login-progress"></span></span>
</div>
<div class="login-msg"></div>
<div class="login-content">
<input id="usrnm" name="user" placeholder="Введите логин" onblur="if(this.value=='') this.value='Введите логин';" onfocus="if(this.value=='Введите логин') this.value='';" type="text" style="margin-bottom:5px;width:100%;">
<input id="pswd" name="password" placeholder="********" onblur="if(this.value=='') this.value='********';" onfocus="if(this.value=='********') this.value='';" type="password" style="width:100%;">
<span class="login-opts"><input type="checkbox" id="remember-me" name="rem" value="1" checked=""/><label for="remember-me">Запомнить</label><input value="1" type="checkbox" id="hide-me" name="hidden"/><label for="hide-me">Скрыть </label></span>
</div>
<div class="bottom-panel">
<button type="button" class="Btn-close" onclick="loginclose(); return false;">Закрыть</button>
<button id="logButact" class="loginButton" name="sbm" type="submit" onclick="loginsub();">Войти</button>
</div>
</div>
<!-- rem: 1;hidden: 1; for hidden and remember input(both are true) -->
<input name="a" value="2" type="hidden">
<input name="ajax" value="1" type="hidden">
<input name="rnd" value="0" type="hidden">
</form>
<div class="overlay hidden" onclick="loginclose(); return false;"></div>

CSS | Styling
Code
/*-- Login Form --*/
.login-form.hidden {
    display:none;
}
.login-form {
    position:fixed;
    margin:auto;
    width:300px;
    height:189px;
    left:0px;
    bottom:0px;
    top:0px;
    right:0px;
    z-index:4;

}
.login-form .login-msg {
    display:none;
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
    padding: 5px 0;
}
.login-msg .msg{
    border-radius: 5px;
    border: 2px solid rgb(255, 0, 0);
    background: rgb(255, 84, 84) none repeat scroll 0% 0%;
    color: rgb(255, 255, 255);
    padding: 5px;
    margin:0 5px;
    display: block;
}
.success-animation {
    position: absolute;
    width: 100%;
    display: block;
    top: 50px;
    left: 0px;
    height: 139px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius:5px;
}
.icon.icon--order-success.svg {
    height: 72px;
    width: 72px;
    margin: 28px auto auto;
}
.overlay.hidden {
    display:none;
}
.overlay {
    position:fixed;
    width:100%;
    height:100%;
    background-color:#000;
    opacity:.75;
    z-index:3;
}
.title-bar {
    height:50px;
    background-color:#fff;
    line-height:50px;
    padding:0 5px;
    border-bottom:2px solid #ff9119;
    border-radius:5px 5px 0 0;
}
.title-bar .title {
    color: #555;
    font-weight: bold;
    padding:0 5px;
}
.login-bar {
    width: 75px;
    height: 5px;
    position: relative;
    border-radius: 5px;
    margin: 5px;
    float: right;
    background-color: #ccc;
    top: 16px;   
    }
.login-bar .login-progress {
    width: 25px;
    height: 5px;
    background-color: #cf0000;
    display: block;
    border-radius: 5px;
    transition: all 0.5s;
}
.login-bar .login-progress.checking {
    width:50px;
    background-color: #ff9119;
}
.login-bar .login-progress.success {
    width:75px;
    background-color: #00d10f;
}
.login-form .login-content {
    padding:5px;
    background-color:#fff;
}
.login-form .bottom-panel {
    padding:5px;
    border-top:2px solid #ccc;
    background-color:#fff;
    border-radius:0 0 5px 5px;
}
.login-opts label {
    margin-left:5px;
}
.btn-close {
    padding:5px 10px;
    border-radius:5px;
    border:2px solid #ccc;
    color:#ccc;
    background:none;
    transition: all 0.5s;
}
.btn-close:hover {
    color:#777;
    background-color:#ccc;
}
.loginButton {
    float:right;
    padding:5px 10px;
    border-radius:5px;
    border:2px solid #ff9119;
    background:none;
    color:#ff9119;
    transition: all 0.5s;
}
.loginButton:hover {
    color:#fff;
    background-color:#ff9119;   
}
input[type="text"],input[type="password"],textarea {
    border-radius:5px;
    border:2px solid #f1f1f1;
    padding:5px;
    height:30px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
input[type="text"]:hover,input[type="password"]:hover,textarea:hover {
    border:2px solid #cccccc;
}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus {
    border:2px solid #ff9119;
}

Button - to open login dialog
Code
<button class="loginButton" onclick="logindialog(); return false;" style="margin:10px 0;">Войти</button>

PS: If someone knowns how to add it then please write a little description for beginners.
Thank You!

Hit that "Thanks" button. :)
In life there's ALWAYS limits but do not plan above them.
Post edited by VZ - Friday, 2017-01-20, 5:22 AM
Cyberdasm
Posts: 599
Reputation: 6
Message # 13 | 6:20 AM
VZ, cool man....
1F4BF3B

admin@lizeal.tk
www.lizeal.tk
uCoz Community » For Webmasters » Custom Solutions » Ajax Loginform (Help with uCoz)
Page 1 of 11
Search: