|
|
Forum moderator: bigblog |
uCoz Community » For Webmasters » Custom Solutions » Ajax Loginform (Help with uCoz) |
Ajax Loginform |
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
(460.7 Kb)
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
|
Excellent, Thank you for your contribution!
My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio |
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
|
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); 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
|
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) 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
(3.7 Kb)
·
0906283.png
(64.2 Kb)
1F4BF3B
|
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
|
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
Post edited by Cyberdasm - Friday, 2016-04-01, 11:45 PM
|
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
|
| |||
| |||