· Tutorial ·

How to integrate a SWPanel access form on your website

To integrate an access form to the SWPanel in your web page, you can use the following example code:

a) Using HTML code:

<html>
<head>
<script>
!function(a,b){"use strict";var c="undefined"!=typeof module;c&&(a=global);var e=("undefined"!=typeof Uint8Array,"0123456789abcdef".split("")),f=[-2147483648,8388608,32768,128],g=[24,16,8,0],h=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298],i=[],j=function(a){return k(a,!0)},k=function(b,c){var d="string"!=typeof b;d&&b.constructor==a.ArrayBuffer&&(b=new Uint8Array(b));var j,k,l,m,n,o,p,q,r,s,v,w,B,C,D,E,F,G,H,I,J,K,t=!0,u=!1,x=0,y=0,z=0,A=b.length;c?(j=3238371032,k=914150663,l=812702999,m=4144912697,n=4290775857,o=1750603025,p=1694076839,q=3204075428):(j=1779033703,k=3144134277,l=1013904242,m=2773480762,n=1359893119,o=2600822924,p=528734635,q=1541459225),r=0;do{if(i[0]=r,i[16]=i[1]=i[2]=i[3]=i[4]=i[5]=i[6]=i[7]=i[8]=i[9]=i[10]=i[11]=i[12]=i[13]=i[14]=i[15]=0,d)for(v=y;x<A&&v<64;++x)i[v>>2]|=b[x]<<g[3&v++];else for(v=y;x<A&&v<64;++x)s=b.charCodeAt(x),s<128?i[v>>2]|=s<<g[3&v++]:s<2048?(i[v>>2]|=(192|s>>6)<<g[3&v++],i[v>>2]|=(128|63&s)<<g[3&v++]):s<55296||s>=57344?(i[v>>2]|=(224|s>>12)<<g[3&v++],i[v>>2]|=(128|s>>6&63)<<g[3&v++],i[v>>2]|=(128|63&s)<<g[3&v++]):(s=65536+((1023&s)<<10|1023&b.charCodeAt(++x)),i[v>>2]|=(240|s>>18)<<g[3&v++],i[v>>2]|=(128|s>>12&63)<<g[3&v++],i[v>>2]|=(128|s>>6&63)<<g[3&v++],i[v>>2]|=(128|63&s)<<g[3&v++]);z+=v-y,y=v-64,x==A&&(i[v>>2]|=f[3&v],++x),r=i[16],x>A&&v<56&&(i[15]=z<<3,u=!0);var L=j,M=k,N=l,O=m,P=n,Q=o,R=p,S=q;for(w=16;w<64;++w)E=i[w-15],B=(E>>>7|E<<25)^(E>>>18|E<<14)^E>>>3,E=i[w-2],C=(E>>>17|E<<15)^(E>>>19|E<<13)^E>>>10,i[w]=i[w-16]+B+i[w-7]+C<<0;for(K=M&N,w=0;w<64;w+=4)t?(c?(H=300032,E=i[0]-1413257819,S=E-150054599<<0,O=E+24177077<<0):(H=704751109,E=i[0]-210244248,S=E-1521486534<<0,O=E+143694565<<0),t=!1):(B=(L>>>2|L<<30)^(L>>>13|L<<19)^(L>>>22|L<<10),C=(P>>>6|P<<26)^(P>>>11|P<<21)^(P>>>25|P<<7),H=L&M,D=H^L&N^K,G=P&Q^~P&R,E=S+C+G+h[w]+i[w],F=B+D,S=O+E<<0,O=E+F<<0),B=(O>>>2|O<<30)^(O>>>13|O<<19)^(O>>>22|O<<10),C=(S>>>6|S<<26)^(S>>>11|S<<21)^(S>>>25|S<<7),I=O&L,D=I^O&M^H,G=S&P^~S&Q,E=R+C+G+h[w+1]+i[w+1],F=B+D,R=N+E<<0,N=E+F<<0,B=(N>>>2|N<<30)^(N>>>13|N<<19)^(N>>>22|N<<10),C=(R>>>6|R<<26)^(R>>>11|R<<21)^(R>>>25|R<<7),J=N&O,D=J^N&L^I,G=R&S^~R&P,E=Q+C+G+h[w+2]+i[w+2],F=B+D,Q=M+E<<0,M=E+F<<0,B=(M>>>2|M<<30)^(M>>>13|M<<19)^(M>>>22|M<<10),C=(Q>>>6|Q<<26)^(Q>>>11|Q<<21)^(Q>>>25|Q<<7),K=M&N,D=K^M&O^J,G=Q&R^~Q&S,E=P+C+G+h[w+3]+i[w+3],F=B+D,P=L+E<<0,L=E+F<<0;j=j+L<<0,k=k+M<<0,l=l+N<<0,m=m+O<<0,n=n+P<<0,o=o+Q<<0,p=p+R<<0,q=q+S<<0}while(!u);var T=e[j>>28&15]+e[j>>24&15]+e[j>>20&15]+e[j>>16&15]+e[j>>12&15]+e[j>>8&15]+e[j>>4&15]+e[15&j]+e[k>>28&15]+e[k>>24&15]+e[k>>20&15]+e[k>>16&15]+e[k>>12&15]+e[k>>8&15]+e[k>>4&15]+e[15&k]+e[l>>28&15]+e[l>>24&15]+e[l>>20&15]+e[l>>16&15]+e[l>>12&15]+e[l>>8&15]+e[l>>4&15]+e[15&l]+e[m>>28&15]+e[m>>24&15]+e[m>>20&15]+e[m>>16&15]+e[m>>12&15]+e[m>>8&15]+e[m>>4&15]+e[15&m]+e[n>>28&15]+e[n>>24&15]+e[n>>20&15]+e[n>>16&15]+e[n>>12&15]+e[n>>8&15]+e[n>>4&15]+e[15&n]+e[o>>28&15]+e[o>>24&15]+e[o>>20&15]+e[o>>16&15]+e[o>>12&15]+e[o>>8&15]+e[o>>4&15]+e[15&o]+e[p>>28&15]+e[p>>24&15]+e[p>>20&15]+e[p>>16&15]+e[p>>12&15]+e[p>>8&15]+e[p>>4&15]+e[15&p];return c||(T+=e[q>>28&15]+e[q>>24&15]+e[q>>20&15]+e[q>>16&15]+e[q>>12&15]+e[q>>8&15]+e[q>>4&15]+e[15&q]),T};!a.JS_SHA256_TEST&&c?(k.sha256=k,k.sha224=j,module.exports=k):a&&(a.sha256=k,a.sha224=j)}(this);function validate(){var plainpasswd=document.getElementById("plainpasswd");document.getElementById("password").value=sha256(plainpasswd.value);plainpasswd.value='';document.getElementById('formLogin').action="https://www.swpanel.com/login/login.asp";document.getElementById("formLogin").submit()}
</script>
</head>
<body>
<form id="formLogin" action="#" method="POST" onSubmit="validate();">
	<input type="hidden" name="URLretFAIL" value="https://www.google.com/failed">
	<input type="hidden" name="URLret" value="https://www.google.com/logout">
	User or email address: <input type="text" id="usuario" name="usuario" placeholder="User or email address"><br><br>
	Password: <input type="password" id="plainpasswd" name="plainpasswd"  placeholder="Password"><input type="hidden" id="password" type="hidden" name="password"><br><br>
	<button type="submit">Login</button>
</form>
</body>
</html>

The variables included in the code block are:

URLretFAIL --> URL that will appear in case the login is incorrect.
**URL that will appear in case of SWPanel logout.
user --> Access user code
password --> Password of access encrypted with SHA256
post --> Destination URL https://www.swpanel.com/login/login.asp

The result of this HTML code block would be the following form:

enter image description here

b) Using the code created with the Bootstrap Framework (HTML, CSS, JavaScript):

<html>
<head>
<script>
!function(a,b){"use strict";var c="undefined"!=typeof module;c&&(a=global);var e=("undefined"!=typeof Uint8Array,"0123456789abcdef".split("")),f=[-2147483648,8388608,32768,128],g=[24,16,8,0],h=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298],i=[],j=function(a){return k(a,!0)},k=function(b,c){var d="string"!=typeof b;d&&b.constructor==a.ArrayBuffer&&(b=new Uint8Array(b));var j,k,l,m,n,o,p,q,r,s,v,w,B,C,D,E,F,G,H,I,J,K,t=!0,u=!1,x=0,y=0,z=0,A=b.length;c?(j=3238371032,k=914150663,l=812702999,m=4144912697,n=4290775857,o=1750603025,p=1694076839,q=3204075428):(j=1779033703,k=3144134277,l=1013904242,m=2773480762,n=1359893119,o=2600822924,p=528734635,q=1541459225),r=0;do{if(i[0]=r,i[16]=i[1]=i[2]=i[3]=i[4]=i[5]=i[6]=i[7]=i[8]=i[9]=i[10]=i[11]=i[12]=i[13]=i[14]=i[15]=0,d)for(v=y;x<A&&v<64;++x)i[v>>2]|=b[x]<<g[3&v++];else for(v=y;x<A&&v<64;++x)s=b.charCodeAt(x),s<128?i[v>>2]|=s<<g[3&v++]:s<2048?(i[v>>2]|=(192|s>>6)<<g[3&v++],i[v>>2]|=(128|63&s)<<g[3&v++]):s<55296||s>=57344?(i[v>>2]|=(224|s>>12)<<g[3&v++],i[v>>2]|=(128|s>>6&63)<<g[3&v++],i[v>>2]|=(128|63&s)<<g[3&v++]):(s=65536+((1023&s)<<10|1023&b.charCodeAt(++x)),i[v>>2]|=(240|s>>18)<<g[3&v++],i[v>>2]|=(128|s>>12&63)<<g[3&v++],i[v>>2]|=(128|s>>6&63)<<g[3&v++],i[v>>2]|=(128|63&s)<<g[3&v++]);z+=v-y,y=v-64,x==A&&(i[v>>2]|=f[3&v],++x),r=i[16],x>A&&v<56&&(i[15]=z<<3,u=!0);var L=j,M=k,N=l,O=m,P=n,Q=o,R=p,S=q;for(w=16;w<64;++w)E=i[w-15],B=(E>>>7|E<<25)^(E>>>18|E<<14)^E>>>3,E=i[w-2],C=(E>>>17|E<<15)^(E>>>19|E<<13)^E>>>10,i[w]=i[w-16]+B+i[w-7]+C<<0;for(K=M&N,w=0;w<64;w+=4)t?(c?(H=300032,E=i[0]-1413257819,S=E-150054599<<0,O=E+24177077<<0):(H=704751109,E=i[0]-210244248,S=E-1521486534<<0,O=E+143694565<<0),t=!1):(B=(L>>>2|L<<30)^(L>>>13|L<<19)^(L>>>22|L<<10),C=(P>>>6|P<<26)^(P>>>11|P<<21)^(P>>>25|P<<7),H=L&M,D=H^L&N^K,G=P&Q^~P&R,E=S+C+G+h[w]+i[w],F=B+D,S=O+E<<0,O=E+F<<0),B=(O>>>2|O<<30)^(O>>>13|O<<19)^(O>>>22|O<<10),C=(S>>>6|S<<26)^(S>>>11|S<<21)^(S>>>25|S<<7),I=O&L,D=I^O&M^H,G=S&P^~S&Q,E=R+C+G+h[w+1]+i[w+1],F=B+D,R=N+E<<0,N=E+F<<0,B=(N>>>2|N<<30)^(N>>>13|N<<19)^(N>>>22|N<<10),C=(R>>>6|R<<26)^(R>>>11|R<<21)^(R>>>25|R<<7),J=N&O,D=J^N&L^I,G=R&S^~R&P,E=Q+C+G+h[w+2]+i[w+2],F=B+D,Q=M+E<<0,M=E+F<<0,B=(M>>>2|M<<30)^(M>>>13|M<<19)^(M>>>22|M<<10),C=(Q>>>6|Q<<26)^(Q>>>11|Q<<21)^(Q>>>25|Q<<7),K=M&N,D=K^M&O^J,G=Q&R^~Q&S,E=P+C+G+h[w+3]+i[w+3],F=B+D,P=L+E<<0,L=E+F<<0;j=j+L<<0,k=k+M<<0,l=l+N<<0,m=m+O<<0,n=n+P<<0,o=o+Q<<0,p=p+R<<0,q=q+S<<0}while(!u);var T=e[j>>28&15]+e[j>>24&15]+e[j>>20&15]+e[j>>16&15]+e[j>>12&15]+e[j>>8&15]+e[j>>4&15]+e[15&j]+e[k>>28&15]+e[k>>24&15]+e[k>>20&15]+e[k>>16&15]+e[k>>12&15]+e[k>>8&15]+e[k>>4&15]+e[15&k]+e[l>>28&15]+e[l>>24&15]+e[l>>20&15]+e[l>>16&15]+e[l>>12&15]+e[l>>8&15]+e[l>>4&15]+e[15&l]+e[m>>28&15]+e[m>>24&15]+e[m>>20&15]+e[m>>16&15]+e[m>>12&15]+e[m>>8&15]+e[m>>4&15]+e[15&m]+e[n>>28&15]+e[n>>24&15]+e[n>>20&15]+e[n>>16&15]+e[n>>12&15]+e[n>>8&15]+e[n>>4&15]+e[15&n]+e[o>>28&15]+e[o>>24&15]+e[o>>20&15]+e[o>>16&15]+e[o>>12&15]+e[o>>8&15]+e[o>>4&15]+e[15&o]+e[p>>28&15]+e[p>>24&15]+e[p>>20&15]+e[p>>16&15]+e[p>>12&15]+e[p>>8&15]+e[p>>4&15]+e[15&p];return c||(T+=e[q>>28&15]+e[q>>24&15]+e[q>>20&15]+e[q>>16&15]+e[q>>12&15]+e[q>>8&15]+e[q>>4&15]+e[15&q]),T};!a.JS_SHA256_TEST&&c?(k.sha256=k,k.sha224=j,module.exports=k):a&&(a.sha256=k,a.sha224=j)}(this);function validate(){var plainpasswd=document.getElementById("plainpasswd");document.getElementById("password").value=sha256(plainpasswd.value);plainpasswd.value='';document.getElementById('formLogin').action="https://www.swpanel.com/login/login.asp";document.getElementById("formLogin").submit()}
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <div id="login">
    <div class="row justify-content-center p-5"><h3 class="text-center pt-5">Login to SWPanel</h3></div>
        <div class="container">
            <div id="login-row" class="row justify-content-center align-items-center">
                <div id="login-column" class="col-md-6">
                    <div id="login-box" class="col-md-12">
			<form id="formLogin" action="#" method="POST" onSubmit="validate();">
				<input type="hidden" id="password" name="password">
	                        <input type="hidden" id="URLretFAIL" name="URLretFAIL" value="https://www.google.com/failed">
	                        <input type="hidden" id="URLret"  name="URLret" value="https://www.google.com/logout">
	                        <div class="form-group">
	                                <label for="usuario" class="text-info">User or email address</label><br>
	                                <input type="text" name="usuario" id="usuario" class="form-control" placeholder="User or email address">
	                       </div>
	                       <div class="form-group">
				       <label for="plainpasswd" class="text-info">Password:</label><br>
	                               <input type="text" name="plainpasswd" id="plainpasswd" class="form-control" placeholder="Password">
	                       </div>
	                       <div class="form-group pt-4">
	                               <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button>
	                      </div>
			</form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

The variables included in the code block are:

URLretFAIL --> URL that will appear in case the login is incorrect.
**URL that will appear when logging out from SWPanel.
user --> Login user code
password --> Password of access encrypted with SHA256
post --> Destination URL https://www.swpanel.com/login/go/

The result of this code block would be the following form:

enter image description here

i