Login sign up

JavaScript
1

Can anyone make this code remember the user and logs them in when they created an account here is my code? LINK IF NEEDED IS THERE TOO if you use the link please click remix to edit or editing is not possible then send me the remix or you can create an account then tell me your username and you are invited to edit.

LINK: [https://glitch.com/edit/#!/helpsaveme?path=pages%2Flogin+and+sign-up.html%3A84%3A55] and paste this in the tab https://helpsaveme.glitch.me/pages/login%20and%20sign-up.html (reload to show the latest preview) why? that’s because you will have to go through the directory tree again to get the preview noticing that is a live preview.

code: (you might need more than one file link is suggested)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="google-site-verification" content="9Gaq0_lSCli4P9lSUB0j6MsIc1O0yDmBPqIMflYVb80" />
    <title>Help Save Me</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's javascript file -->
    <script rel="preload" src="/script.js" defer></script>


    <link
      rel="icon"
      type="image/png"
      href="https://cdn.glitch.com/841efe4d-c99e-4353-b174-31ecd5da8ae5%2Fe4d9ac98-eec7-416c-8ba4-c8d559b44c0f_200x200.png?v=1614467165979"
    />
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Stick&display=swap" rel="stylesheet">
  </head>
  <body>

   <noscript>
         <style>html{display:none;}</style>
         <meta http-equiv="refresh" content="0.0;url=nojs/index.html">
  </noscript>      
  
<div class="powr-mailing-list" id="c0a08fd8_1614880566"></div><script src="https://www.powr.io/powr.js?platform=html"></script>
  
    <div id="fb-root"></div>
    <script
      async
      defer
      crossorigin="anonymous"
      src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v9.0"
      nonce="nKLbPpBi"
    ></script>

    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.wpcc.io/lib/1.0.2/cookieconsent.min.css"
    /><script
      src="https://cdn.wpcc.io/lib/1.0.2/cookieconsent.min.js"
      defer
    ></script>

    <script>
      window.addEventListener("load", function() {
        window.wpcc.init({
          border: "thick",
          corners: "large",
          colors: {
            popup: {
              background: "#222222",
              text: "#ffffff",
              border: "#b4eae4"
            },
            button: { background: "#b4eae4", text: "#000000" }
          },
          position: "bottom",
          content: {
            button: "ACCEPT ALL COOKIES",
            href:
              "https://www.cookiepolicygenerator.com/live.php?token=TVonZHcNqABe2yOO6Pwsit8SwRHtXekF"
          },
          padding: "large",
          margin: "large",
          fontsize: "large"
        });
      });
    </script>


<div class="navbar">
  <a href="/home.html"><i class="fa fa-fw fa-home"></i> Home</a> 
  <a href="#"><i class="fa fa-book"></i> about</a> 
  <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> 
  <a  class="active" href="/pages/login%20and%20sign-up.html"><i class="fa fa-fw fa-user"></i> Login / sign-up</a>
  <a href="#"><i class="fa fa-calendar"></i> Past Dates</a>
  <a href="#"><i class="fa fa-shopping-bag"></i> Shop</a>
  <a href="#"><i class="fa fa-credit-card-alt"></i> Donate</a>
  <a href="#"><i class="fa fa-map-marker"></i> Events</a>
  <a href="#"><i class="fa fa-download"></i> Download</a>
</div>
  <head>
<style>

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>

<button onclick="topFunction()" id="myBtn" title="Menu">Menu</button>


<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>


  
  <header>
	<div class="overlay">
<h1 class="h1">We Can Make A Change</h1>
<h3 class="h3">How You can make one</h3>
    <p class="p"><li>By planting a tree</li> <li>using solar panels</li> <li>turning off the faucet while you brush</li> <li>turning down the heat while your away</li> <br>........</p>
	<br>
	<button>READ MORE</button>
		</div>
</header>
  
  <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  
    
    <div class="form-modal">
    
    <div class="form-toggle">
        <button id="login-toggle" onclick="toggleLogin()">log in</button>
        <button id="signup-toggle" onclick="toggleSignup()">sign up</button>
    </div>

    <div id="login-form">
        <form>
            <input type="text" placeholder="Enter email or username"/>
            <input type="password" placeholder="Enter password"/>
            <button type="button" class="btn login">login</button>
            <p><a href="javascript:void(0)">Forgot password</a> </p>
          <p><a href="javascript:void(0)" onclick="toggleSignup()">Register Account</a> </p>
          
        </form>
    </div>

    <div id="signup-form">
        <form>
            <input type="email" placeholder="Enter your email"/>
            <input type="text" placeholder="Choose username"/>
            <input type="password" placeholder="Create password"/>
            <button type="button" class="btn signup"><i class="fa fa-spinner fa-pulse"></i> create account
          </button> 
            
        </form>
    </div>

</div>
<head>
    <style>
@import url('https://fonts.googleapis.com/css?family=Montserrat|Quicksand');

*{
    font-family: 'quicksand',Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}


.form-modal{
    position:relative;
    width:450px;
    height:auto;
    margin-top:4em;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow:0 20px 300px 0px grey;
}

.form-modal button{
    cursor: pointer;
    position: relative;
    text-transform: capitalize;
    font-size:1em;
    z-index: 2;
    outline: none;
    background:#fff;
    transition:0.2s;
}

.form-modal .btn{
    border-radius: 5px;
    border:none;
    font-weight: bold;
    font-size:1.2em;
    padding:0.8em 1em 0.8em 1em!important;
    transition:0.5s;
    border:1px solid #ebebeb;
    margin-bottom:0.5em;
    margin-top:0.5em;
}

.form-modal .login , .form-modal .signup{
    background:#57b846;
    color:#fff;
}

.form-modal .login:hover , .form-modal .signup:hover{
    background:#222;
}

.form-toggle{
    position: relative;
    width:100%;
    height:auto;
}

.form-toggle button{
    width:50%;
    float:left;
    padding:1.5em;
    margin-bottom:1.5em;
    border:none;
    transition: 0.2s;
    font-size:1.1em;
    font-weight: bold;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.form-toggle button:nth-child(1){
    border-bottom-right-radius: 5px;
}

.form-toggle button:nth-child(2){
    border-bottom-left-radius: 5px;
}

#login-toggle{
    background:#57b846;
    color:#ffff;
}

.form-modal form{
    position: relative;
    width:90%;
    height:auto;
    left:50%;
    transform:translateX(-50%);  
}

#login-form , #signup-form{
    position:relative;
    width:100%;
    height:auto;
    padding-bottom:1em;
}

#signup-form{
    display: none;
}


#login-form button , #signup-form button{
    width:100%;
    margin-top:0.5em;
    padding:0.6em;
}

.form-modal input{
    position: relative;
    width:100%;
    font-size:1em;
    padding:1.2em 1.7em 1.2em 1.7em;
    margin-top:0.6em;
    margin-bottom:0.6em;
    border-radius: 5px;
    border:none;
    background:#ebebeb;
    outline:none;
    font-weight: bold;
    transition:0.4s;
}

.form-modal input:focus , .form-modal input:active{
    transform:scaleX(1.02);
}

.form-modal input::-webkit-input-placeholder{
    color:#222;
}


.form-modal p{
    font-size:16px;
    font-weight: bold;
}

.form-modal p a{
    color:#57b846;
    text-decoration: none;
    transition:0.2s;
}

.form-modal p a:hover{
    color:#222;
}


.form-modal i {
    position: absolute;
    left:10%;
    top:50%;
    transform:translateX(-10%) translateY(-50%); 
}

.fa-google{
    color:#dd4b39;
}

.fa-linkedin{
    color:#3b5998;
}

.fa-windows{
    color:#0072c6;
}

.-box-sd-effect:hover{
    box-shadow: 0 4px 8px hsla(210,2%,84%,.2);
}

@media only screen and (max-width:500px){
    .form-modal{
        width:100%;
    }
}

@media only screen and (max-width:400px){
    i{
        display: none!important;
    }
}
    </style>
    </head>
 
 
<script>
    function toggleSignup(){
   document.getElementById("login-toggle").style.backgroundColor="#fff";
    document.getElementById("login-toggle").style.color="#222";
    document.getElementById("signup-toggle").style.backgroundColor="#57b846";
    document.getElementById("signup-toggle").style.color="#fff";
    document.getElementById("login-form").style.display="none";
    document.getElementById("signup-form").style.display="block";
}

function toggleLogin(){
    document.getElementById("login-toggle").style.backgroundColor="#57B846";
    document.getElementById("login-toggle").style.color="#fff";
    document.getElementById("signup-toggle").style.backgroundColor="#fff";
    document.getElementById("signup-toggle").style.color="#222";
    document.getElementById("signup-form").style.display="none";
    document.getElementById("login-form").style.display="block";
}

    </script>

   
  
  </body>
</html>

Thanks for your help!!!

2

Sorry, but JavaScript tends to be the wrong solution when it comes to creating and managing user accounts.

2 Likes
3

Javascript runs on the user’s computer. It also means that the user can manipulate it. This is why Paul says that Javascript is probably the wrong solution (or at least, it’s not the complete picture. There’s certainly applicable uses of Javascript as part of a login solution [AJAX, etc], but not as the secure/retentive component.)

2 Likes
4

I changed it to PHP my dad built one out of it maybe you can help?

5

Well, you’ll need to show us your PHP code then.

6

ok wait

7

It would be better to start a new thread in the PHP forum, if the question is now about PHP.

8

ok ill do it

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.