My project is in Laravel 5.4, and the Login button beneath it is the original working login button, as you can see it posts and attempts to login correctly: Console when pushing Login button (Successful Login Attempt)
So as you can see I've added a slider to unlock and want to use that instead of the Login button.
Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>My site test</title>
<meta name="csrf-token" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<!-- <script src='js/slidetounlock.js'></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<style>
.fade-in{-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
h1 {
left: 0;
line-height: 200px;
margin-top: -100px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
img {
pointer-events: none;
}
/*pointer-events: none;*/
body {
background-repeat: no-repeat;
background-size: 100% 100%;
background-repeat:no-repeat;
}
div.a {
text-align: center;
text-decoration: none;
}
.a img {
width: 20px;
height: 20px;
}
}
body {
color: red;
}
h1 {
color: #00ff00;
}
p.ex {
color: rgb(0,0,255);
}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
margin-bottom: 7px;
width: 100%;
/* margin-left: auto;*/
/*margin-right: auto;*/
/*width: -moz-fit-content;*/
}
.icon {
padding: 10px;
background: black;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
outline: none;
margin-left: auto;
margin-right: auto;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
.btn1 {
background-color: black;
color: white;
padding: 5px 5px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
border-radius: 5px;
}
.btn1:hover {
opacity: 1;
}
input[type="password"]
{
-webkit-text-security: disc;
color: black;
}
.opera input[type="password"],
.webkit input[type="password"]
{
color:black;
}
label.error {
display: none !important;
}
.scale-up-ver-center {
-webkit-animation: scale-up-ver-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-ver-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-ver-center {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes scale-up-ver-center {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
.successfully-saved.hide-opacity{
opacity: 0;
}
.successfully-saved {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1;
}
.fade-in-right{-webkit-animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
.fade-in-left{-webkit-animation:fade-in-left .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-left .6s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
.bounce-in-fwd{-webkit-animation:bounce-in-fwd 1.1s both;animation:bounce-in-fwd 1.1s both;}
@-webkit-keyframes bounce-in-fwd{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:scale(.7);transform:scale(.7);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:scale(.84);transform:scale(.84);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}89%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-fwd{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:scale(.7);transform:scale(.7);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:scale(.84);transform:scale(.84);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}89%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
@keyframes spaceboots{
0% {
box-shadow:0 0 4px #f00;
transform: translate(2px, 0); }
10% {
transform: translate(-1px, 0); }
20% {
transform: translate(-3px, 0); }
30% {
transform: translate(0px, 0); }
40% {
transform: translate(1px, 0); }
50% {
transform: translate(-1px, 0); }
60% {
transform: translate(-3px, 0); }
70% {
transform: translate(2px, 0); }
80% {
transform: translate(-1px, 0); }
90% {
transform: translate(2px, 0); }
100% {
box-shadow:0 0 4px #800;
transform: translate(1px, 0);
}
}
.shake{
animation-name: spaceboots;
animation-duration:0.3s;
transform-origin:50% 50%;
animation-iteration-count: 1;
}
div.login-action{
margin-top:30px;
position:relative;
}
div.slider{
background:#fff;
overflow:hidden;
user-select:none;
position:relative;
padding:0px 20px;
border:1px solid #000;
box-shadow:inset 0px 0px 3px rgba(0,0,0,0.9);
height:auto;
opacity:1;
border-radius:0px;
transition:opacity 300ms;
}
div.slider.poof{
opacity:0;
}
div.slider p{
text-align:center;
}
div.slider .track{
position:absolute;
height:100%;
top:0px;
left:0px;
right:50px;
}
div.slider .ui-slider-handle{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
box-shadow:2px 0px 4px -2px rgba(0,0,0,0.9),-2px 0px 4px -2px rgba(0,0,0,0.9);
position:absolute;
border-radius:0px;
border:0px;
margin:0px;
background:#000;
padding-top:10px;
height:100%;
width:50px;
top:0px;
left:0px;
color:#fff;
font-size:28px;
text-align:center;
transition:left 300ms;
}
div.slider .ui-slider-handle.touched{
transition:none;
}
.spinner_gutter{
position:absolute;
width:100%;
min-height:50px;
height:100%;
top:0px;
left:0px;
display:none;
}
</style>
<body>
<div class="fade-in">
<div id="divMain" style="display: none">
<center>
<br>
<br>
<div class="container ">
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-4 mx-auto" style="margin-top: -59px;">
<div class="card card-signin my-4 ">
<div class="card-body">
<h3>My Logo</h3>
<br>
<br>
<form class="form-horizontal" id="loginInfo" method="POST" action="javascript:;">
<p class="alert alert-section alert-danger error-message scale-up-ver-center" style="display: none"></p>
<p class="alert alert-section alert-success success-message scale-up-ver-center" id="SuccessLogIn" style="display: none"></p>
<p class="alert alert-section alert-info scale-up-ver-center" id="loginMessage">
<p class="alert alert-section alert-info scale-up-ver-center">
<div class="input-container " >
<div class="input-container"> <i class="fa fa-user icon"></i>
<input id="username" type="text" name="username" value="" required autofocus placeholder=" Username" style="font-family:Arial, FontAwesome; width: 100%" />
</div>
</div>
<div class="input-container ">
<div class="input-container"><i class="fa fa-key icon"></i>
<input id="password" type="password" name="password" required placeholder=" Password" style="font-family:Arial, FontAwesome; width: 100%" />
</div>
<span class="help-block"><strong></strong></span>
</div>
<form class=".form" action="#" method="POST" >
<div class="inputs">
<!-- <span class="icon-user">
<input type="email" placeholder="Email" />
</span> -->
<!-- <span class="icon-key">
<input type="password" placeholder="Password" />
</span> -->
</div>
<div class="login-action">
<div class="slider">
<p class="placeholder">Slide to Login</p>
<div class="track">
<div class="ui-slider-handle icon-lock"></div>
</div>
</div>
<div class="spinner_gutter"></div>
</div>
<script type="text/javascript">
// Why i made this ?
// Seriously DONT KNOW !
// DISCLAIMER
// if( You.work.indexOf("Apple") > -1 ){
// Me.request.call(You,"Please Dont sue me , no copyright infrigmentation in mind pls dont sue me foolish mortal ");
// }
// This uses two amazing opensourced project
// JQuery UI Touch Punch [ jQuery UI is hateful but for a small demo it was good enough ] , But TouchPunch is a great Effort By Dave which allows using jQuery UI itself on touch enabled devices something what the jQuery Team has slept upon,
// Spin.js is a ui-library which is yet another good tool allows making spinners :D that are hw accelerated!
/*
* jQuery UI Touch Punch 0.2.2
*
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
//fgnass.github.com/spin.js#v1.2.7
!function(e,t,n){function o(e,n){var r=t.createElement(e||"div"),i;for(i in n)r[i]=n[i];return r}function u(e){for(var t=1,n=arguments.length;t<n;t++)e.appendChild(arguments[t]);return e}function f(e,t,n,r){var o=["opacity",t,~~(e*100),n,r].join("-"),u=.01+n/r*100,f=Math.max(1-(1-e)/t*(100-u),e),l=s.substring(0,s.indexOf("Animation")).toLowerCase(),c=l&&"-"+l+"-"||"";return i[o]||(a.insertRule("@"+c+"keyframes "+o+"{"+"0%{opacity:"+f+"}"+u+"%{opacity:"+e+"}"+(u+.01)+"%{opacity:1}"+(u+t)%100+"%{opacity:"+e+"}"+"100%{opacity:"+f+"}"+"}",a.cssRules.length),i[o]=1),o}function l(e,t){var i=e.style,s,o;if(i[t]!==n)return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(o=0;o<r.length;o++){s=r[o]+t;if(i[s]!==n)return s}}function c(e,t){for(var n in t)e.style[l(e,n)||n]=t[n];return e}function h(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)e[i]===n&&(e[i]=r[i])}return e}function p(e){var t={x:e.offsetLeft,y:e.offsetTop};while(e=e.offsetParent)t.x+=e.offsetLeft,t.y+=e.offsetTop;return t}var r=["webkit","Moz","ms","O"],i={},s,a=function(){var e=o("style",{type:"text/css"});return u(t.getElementsByTagName("head")[0],e),e.sheet||e.styleSheet}(),d={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative"},v=function m(e){if(!this.spin)return new m(e);this.opts=h(e||{},m.defaults,d)};v.defaults={},h(v.prototype,{spin:function(e){this.stop();var t=this,n=t.opts,r=t.el=c(o(0,{className:n.className}),{position:n.position,width:0,zIndex:n.zIndex}),i=n.radius+n.length+n.width,u,a;e&&(e.insertBefore(r,e.firstChild||null),a=p(e),u=p(r),c(r,{left:(n.left=="auto"?a.x-u.x+(e.offsetWidth>>1):parseInt(n.left,10)+i)+"px",top:(n.top=="auto"?a.y-u.y+(e.offsetHeight>>1):parseInt(n.top,10)+i)+"px"})),r.setAttribute("aria-role","progressbar"),t.lines(r,t.opts);if(!s){var f=0,l=n.fps,h=l/n.speed,d=(1-n.opacity)/(h*n.trail/100),v=h/n.lines;(function m(){f++;for(var e=n.lines;e;e--){var i=Math.max(1-(f+e*v)%h*d,n.opacity);t.opacity(r,n.lines-e,i,n)}t.timeout=t.el&&setTimeout(m,~~(1e3/l))})()}return t},stop:function(){var e=this.el;return e&&(clearTimeout(this.timeout),e.parentNode&&e.parentNode.removeChild(e),this.el=n),this},lines:function(e,t){function i(e,r){return c(o(),{position:"absolute",width:t.length+t.width+"px",height:t.width+"px",background:e,boxShadow:r,transformOrigin:"left",transform:"rotate("+~~(360/t.lines*n+t.rotate)+"deg) translate("+t.radius+"px"+",0)",borderRadius:(t.corners*t.width>>1)+"px"})}var n=0,r;for(;n<t.lines;n++)r=c(o(),{position:"absolute",top:1+~(t.width/2)+"px",transform:t.hwaccel?"translate3d(0,0,0)":"",opacity:t.opacity,animation:s&&f(t.opacity,t.trail,n,t.lines)+" "+1/t.speed+"s linear infinite"}),t.shadow&&u(r,c(i("#000","0 0 4px #000"),{top:"2px"})),u(e,u(r,i(t.color,"0 0 1px rgba(0,0,0,.1)")));return e},opacity:function(e,t,n){t<e.childNodes.length&&(e.childNodes[t].style.opacity=n)}}),function(){function e(e,t){return o("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',t)}var t=c(o("group"),{behavior:"url(#default#VML)"});!l(t,"transform")&&t.adj?(a.addRule(".spin-vml","behavior:url(#default#VML)"),v.prototype.lines=function(t,n){function s(){return c(e("group",{coordsize:i+" "+i,coordorigin:-r+" "+ -r}),{width:i,height:i})}function l(t,i,o){u(a,u(c(s(),{rotation:360/n.lines*t+"deg",left:~~i}),u(c(e("roundrect",{arcsize:n.corners}),{width:r,height:n.width,left:n.radius,top:-n.width>>1,filter:o}),e("fill",{color:n.color,opacity:n.opacity}),e("stroke",{opacity:0}))))}var r=n.length+n.width,i=2*r,o=-(n.width+n.length)*2+"px",a=c(s(),{position:"absolute",top:o,left:o}),f;if(n.shadow)for(f=1;f<=n.lines;f++)l(f,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(f=1;f<=n.lines;f++)l(f);return u(t,a)},v.prototype.opacity=function(e,t,n,r){var i=e.firstChild;r=r.shadow&&r.lines||0,i&&t+r<i.childNodes.length&&(i=i.childNodes[t+r],i=i&&i.firstChild,i=i&&i.firstChild,i&&(i.opacity=n))}):s=l(t,"animation")}(),typeof define=="function"&&define.amd?define(function(){return v}):e.Spinner=v}(window,document);
/* Okay now the actual whorey-ugly js that i do */
var touch = "ontouchstart" in window,
ev_init = touch?"touchstart":"mousedown",
ev_end = touch?"touchend":"mouseup",
ev_cancel = touch?"touchcancel":"mouseout",
ev_move = touch?"touchmove":"mousemove",
form = $("form"),
opts = {
lines: 12,
length: 5,
width: 2,
radius: 8,
corners: 1,
rotate: 0,
color: '#000',
speed: 0.6,
trail: 34,
shadow: false,
hwaccel: true,
className: 'spinner',
zIndex: 2e9,
top: 'auto',
left: 'auto'
};
var sliders = $(".slider");
sliders.each(function(index,element){
var unlocked = false,
authenticable = false,
element = $(element),
handle = element.find(".ui-slider-handle"),
placeholder = element.find(".placeholder"),
spinner = element.next();
handle.on(ev_init,function(event){
unlocked = true;
$(this).addClass("touched");
});
function handleSlide(event,ui){
if( !unlocked ){
return false;
}
var op = 1 - (ui.value/50);
placeholder.css({
opacity:op
});
}
function handleStart(event,ui){
var invalids = form[0].querySelectorAll("input");
invalids = Array.prototype.filter.call(invalids,function(element){ return !(element.value.length);
});
$.each(invalids,function(index,element){
var par = $(element).parent();
par.removeClass("shake");
setTimeout(function(){
par.addClass("shake");
},40);
});
authenticable = !(invalids.length);
return authenticable;
}
function handleSlideEnd(event,ui){
if( authenticable && ui.value > 90){
element.slider("value",100);
element.addClass("poof");
spinner.css("display","block");
setTimeout(function(){
new Spinner(opts).spin(spinner[0]);
},40);
}else{
element.slider("value",0);
placeholder.css({
opacity:1
});
}
handle.removeClass("touched");
unlocked = false;
}
element.slider({
start:handleStart,
slide:handleSlide,
stop:handleSlideEnd
});
});
</script>
<div class="">
<div class=" mx-auto ">
<button type="submit" class="btn1 bounce-in-fwd" style="width: 90px">
Login
</button>
<br>
<!-- <a class="btn btn-link text-secondary" href="">-->
<!-- Forgot Your Password?-->
<!--</a>-->
<a class="btn btn-link text-secondary" href="/register">
<font size="2.5px">Dont have an account? Sign Up</font>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
document.getElementById("divMain").style.display = "block";
</script>
</div>
</div>
</center>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script type="text/javascript">
setTimeout(function(){
$("#loginMessage").fadeOut(2000);
}, 3000);
</script>
<script type="text/javascript">
var manageLogin = "";
$(document).ready(function(){
$("#loginInfo").validate({
rules:{
username:{required: true},
password:{required: true}
},
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
submitHandler: function (form){
$(".success-message, .error-message").hide();
$("#loginInfo .btn-block").attr('disabled','disabled').html("Loading");
var formData = $("form#loginInfo").serialize();
$.ajax({
type: "POST",
url: manageLogin,
headers:
{
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data: formData,
statusCode:{
419:function(){
window.location.href = window.location.href;
}
},
success: function(response) {
if(response.IsSuccess){
$(".success-message").text(response.Message);
$(".success-message").show();
setTimeout(function(){
window.location.href = response.redirectURL;
},2000);
}else{
$(".error-message").text(response.Message);
$(".error-message").show();
setTimeout(function(){
$(".error-message").fadeOut(2000);
}, 3000);
}
}
});
}
})
});
</script>
<script>
setTimeout(function(){
$("SuccessLogIn").fadeOut(2000)
},3000)
</script>
Unfortunately I was not able to properly separate the sections in Stack Overflow Snippet inserter.
I want the Slider to Login or POST the same way the Login Button does & for it to be fully functional on mobile and desktop devices.
HERE IS THE ORIGINAL CODE I AM TAKING THE (SLIDER + JS + CSS) FROM:
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire