Membuat Fitur Login dan Password Sederhana di Blog
Login adalah suatu Proses untuk masuk ke dalam sebuah layanan online yang berisi nama dan password. Saat ini halaman login bisa dilakukan pada halaman website maupun aplikasi. Secara teknis pun saat ini dalam melakukan login bisa dilakukan secara variatif mulai dari menggunakan email dan no hp, atau bisa juga menggunakan social media yang terintegrasi pada sistem tersebut.
Login disebut juga “logon” atau “sign in” adalah istilah dalam hal keamanan komputer, yakni berupa proses pintu masuk bagi pengguna untuk mengakses sistem komputer. Login dimaksudkan untuk mengatur proses identifikasi. Proses Login minimal terdiri dari username/akun pengguna dan password untuk mendapatkan hak akses.
/* login fitur blog-ahref */
.bahrefloginwrap{width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;background:linear-gradient(-45deg,#23a6d5,#23d5ab,#f09800,#e6af19);background-size:400% 400%;animation:gradient 10s ease infinite}
@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.bahrefloginwrap.hidden{display: none}
#bahreflogin{position:absolute;border-radius:8px;width:400px;padding:30px;display:block;transform:translate(-50%,-50%);top:50%;left:50%;background:rgba(255,255,255,0.1);backdrop-filter:blur(5px);border-radius:10px;box-shadow:0 25px 45px rgba(0,0,0,0.2);color:#fff}
.bahrefjudul{font-size:25px;font-weight: bold;}
#bahreflogin input[type="text"],#bahreflogin input[type="password"]{padding:10px;border-radius:5px;margin:10px 0;width:95%;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.2);color:#fff}
#username::-webkit-input-placeholder,#password::-webkit-input-placeholder{color:#fff;}
#bahreflogin input[type="text"]:focus,#bahreflogin input[type="password"]:focus{outline:none}
button.login{color:#000;font-weight:bold;padding:10px;border-radius:5px;border:none;outline:none;border: 1px solid rgba(255, 255, 255, 0.2);background:#fff;transition: 1.5s}
button.login:hover{background: rgba(255, 255, 255, 0.2);color:#fff;transition: .5s}
.icon1{position:absolute;margin-top:20px;right:55px;z-index: 1}
.icon2{position:absolute;margin-top:20px;right:55px;opacity: 0}
svg.bahref{width:24px;height::24px;fill:#fff}
@media screen and (max-width:480px){#bahreflogin{width:350px}}
<script>
//<![CDATA[
// login fitur blog-ahref.blogspot.com
// last update 04-09-2023 + localStroge
var storeS = localStorage.getItem("users");
if(storeS==null){
var users = [
{ username: "blogahref", password: "123456" }];
localStorage.setItem("users",JSON.stringify(users));
}
function getUserUsername(username) {
return JSON.parse(localStorage.getItem('users')).filter(users => users.username === username)
}
function ceklog(){
var login = localStorage.getItem("login");
if(login!=null && login=="true"){
document.querySelector(".bahrefloginwrap").classList.add("hidden");
}
}
ceklog();
function startlog(){
var username= document.querySelector("#username").value;
var password= document.querySelector("#password").value;
if(getUserUsername(username.trim()).length>0){
var user = getUserUsername(username.trim())[0];
if(user.password == password.trim()){
document.querySelector(".bahrefloginwrap").classList.add("hidden");
localStorage.setItem("login","true");
}else{
document.querySelector("#akses").innerHTML = "username atau password salah!";
}
}else{
document.querySelector("#akses").innerHTML = "user tidak terdaftar";
}
}
const show = () =>{
var password = document.querySelector("#password");
var sandi = document.querySelector(".icon1");
var sandidua = document.querySelector(".icon2");
if (password.type === "password"){
password.type = "text";
sandidua.style.opacity = "1";
sandi.style.opacity = "0";
}else{
password.type = "password";
sandidua.style.opacity = "0";
sandi.style.opacity = "1";
}
}
//]]>
</script>
Bagian yang saya tandai pada script javascript diatas adalah username dan password. silahkan ganti dengan username dan password yang Anda inginkan.
<dv class="bahrefloginwrap">
<div id='bahreflogin'>
<div class='bahrefjudul'>Login</div>
<input id='username' type='text' placeholder='Username'/><br/>
<input id='password' type='password' placeholder='Password'/>
<svg class="icon1" viewBox="0 0 24 24" onclick="show()">
<path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>
<svg class="icon2" viewBox="0 0 24 24">
<path d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
</svg>
<br/>
<button class='login' onclick='startlog()'>Login</button>
<p id='akses'></p>
</div>
</dv>
Gabung dalam percakapan