Ask coding questions

← Back to all posts
How to make a password interface?
pythoncooluser (5)

I am trying to make a password interface but I can't because it is really hard and because I don't know how to do so. It would be relly kind if you answer the question and also I would like to make the thing have a result like when you log in to a site and it lets yo go into the site is what I want to know how to do.

Comments
hotnewtop
JWZ6 (654)

hmmmmmm lemme try. Say ur username is 10 and ur password is ten do

HTML:

  <div class="login-form-body">
      <div class="login-form-heading">
        <h1>login</h1>
        <br>
      </div>
      <div class="login-form-form">
        <form method="POST">
          <input class="login-form-input" placeholder="username" name="username" id="username>
          <input class="login-form-input" placeholder="password" id="password" type="password" name="password"><br>
          <button class="login-form-button" onclick="login()">submit</button>
        </form>
      </div>
    </div>

Javascript:

function login(){
  if (document.getElementById("username") == "10"){

    if (document.getElementById("password") == "ten"){

      alert("Welcome!");

    else {
       
      alert("You shall not pass")
     }
}
else {
       
      alert("You shall not pass")
     }
}
pythoncooluser (5)

@JWZ6 It works but when I put the username as 10 which you said is the username, it doesn't go onto the password.

GameDev46 (206)

If you are asking about an actual working login and sign up system, it gets a bit complicated XD! So as a basic you will need to know node.js and express, which you can learn by watching this:

https://www.youtube.com/watch?v=pKd0Rpw7O48

Then you can learn about the inbuilt URL extension here:

https://www.w3schools.com/nodejs/nodejs_url.asp

And then look at the side panel of your repl and go to database and add in a replit database where you can save users logins to and then if you build a simple API with the YouTube video then you can make requests to it to login and sign up!

ch1ck3n (2039)

You mean a login form

pythoncooluser (5)

@ch1ck3n yeah that is what I mean

ch1ck3n (2039)

@pythoncooluser so...

    <div class="login-form-body">
      <div class="login-form-heading">
        <h1>login</h1>
        <br>
      </div>
      <div class="login-form-form">
        <form method="POST">
          <input class="login-form-input" placeholder="username" name="username">
          <input class="login-form-input" placeholder="password" type="password" name="password"><br>
          <button class="login-form-button">submit</button>
        </form>
      </div>
    </div>

and css:

.login-form-body{
  height: 350px;
  width: 300px;
  background-color: #191919;
  border-radius: 30px;
  font-family: sans-serif;
  color: white;
  text-align: center;
  padding: 10px;
}


.login-form-body h1{
  font-weight: 500;
}


.login-form-body h1 {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.login-form-body .login-form-form{
  margin-top: 30px;
}

.login-form-body .login-form-form .login-form-input{
  padding: 10px;
  border-radius: 30px;
  border: 2px solid #3ed0ed;
  background-color: transparent;
  outline: none;
  font-size: 15px;
  transition: 0.2s;
  width: 200px;
  margin-bottom: 30px; 
}

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

.login-form-body .login-form-form .login-form-input:focus{
  border-color:#3c32cf;
  width: 250px;
}


.login-form-body .login-form-form .login-form-button{
  padding: 15px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 20px;
  background-color: transparent;
  color: white;
  cursor: pointer;
  border: 2px solid #68d696;
  transition: 0.2s;
}


.login-form-body .login-form-form .login-form-button:hover{
  border-color: rgb(108, 219, 155);
  color: white;
}
pythoncooluser (5)

@ch1ck3n It works but when I type the passwors, it doesn't log in so either soemthings wrong in the code or I need to know what the password is. So please tell me what the passcode is so I can test it.