Make a login/sign up system with lots of accounts's game | AI game creator

Click here for free DL of the app version that can save data.

No:30192

69

Make a login/sign up system with lots of accounts
Developer User14724｜Date and time 23/12/21 1:20:37
Build time 38.087 sec｜Game capacity 5.688KB｜

Sure! Here's an example of a simple login/sign up system implemented as a single HTML file using JavaScript. Please note that this is a basic implementation and should not be used for any secure or production-level systems.

Login/Sign Up

Login

Don't have an account? Sign Up

To use this system, the user can enter their username and password in the login form and click the "Login" button. If the credentials are correct, a success message will be displayed, and the user will be considered logged in. If the credentials are incorrect, an error message will be shown. The user can also switch to the Sign Up form by clicking the "Sign Up" link. They can then enter a new username and password, and clicking the "Sign Up" button will create a new account. If the username already exists, an error message will be displayed. Please note that this implementation uses `localStorage` to store account information, which is not secure or suitable for production environments. It is recommended to use a proper backend with database storage for a production-level login/sign up system.

→ 　

0　

0　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

Sure! Here's an example of a simple login/sign up system implemented as a single HTML file using JavaScript. Please note that this is a basic implementation and should not be used for any secure or production-level systems.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Login/Sign Up System</title>
    <style>
      * {
        font-family: Arial, sans-serif;
      }
      .container {
        margin: 0 auto;
        text-align: center;
      }
      input[type="text"],
      input[type="password"] {
        margin: 10px;
        padding: 8px;
        width: 200px;
      }
      button {
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        cursor: pointer;
      }
      .error {
        color: red;
        margin: 10px;
      }
      .success {
        color: green;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Login/Sign Up</h2>
      <div id="loginForm">
        <h3>Login</h3>
        <input type="text" id="loginUsername" placeholder="Username" />
        <br />
        <input type="password" id="loginPassword" placeholder="Password" />
        <br />
        <button onclick="login()">Login</button>
        <p id="loginError" class="error"></p>
      </div>
      <div id="signupForm" style="display: none;">
        <h3>Sign Up</h3>
        <input type="text" id="signupUsername" placeholder="Username" />
        <br />
        <input type="password" id="signupPassword" placeholder="Password" />
        <br />
        <button onclick="signup()">Sign Up</button>
        <p id="signupSuccess" class="success"></p>
        <p id="signupError" class="error"></p>
      </div>
      <p id="switchText">
        Don't have an account? <a href="#" onclick="toggleForm()">Sign Up</a>
      </p>
    </div>
    <script>
      let loggedInUser;

function login() {
        const username = document.getElementById("loginUsername").value;
        const password = document.getElementById("loginPassword").value;

// Check if username and password match any existing account
        if (localStorage.getItem(username) === password) {
          loggedInUser = username;
          document.getElementById("loginError").innerText = "";
          document.getElementById("signupSuccess").innerText = "";
          document.getElementById("signupError").innerText = "";
          displayMessage("loginSuccess", "Logged in successfully");
        } else {
          displayMessage("loginError", "Invalid username or password");
        }

// Prevent form from submitting
        return false;
      }

function signup() {
        const username = document.getElementById("signupUsername").value;
        const password = document.getElementById("signupPassword").value;

// Check if username already exists
        if (localStorage.getItem(username)) {
          displayMessage("signupError", "Username already taken");
        } else {
          // Store new account credentials in local storage
          localStorage.setItem(username, password);
          document.getElementById("signupSuccess").innerText =
            "Account created successfully";
          document.getElementById("signupError").innerText = "";
          displayMessage("loginSuccess", "Logged in successfully");
          loggedInUser = username;
        }

// Prevent form from submitting
        return false;
      }

function toggleForm() {
        const loginForm = document.getElementById("loginForm");
        const signupForm = document.getElementById("signupForm");
        const switchText = document.getElementById("switchText");

// Toggle between login and signup forms
        if (loginForm.style.display === "none") {
          loginForm.style.display = "block";
          signupForm.style.display = "none";
          switchText.innerHTML = "Don't have an account? <a href='#' onclick='toggleForm()'>Sign Up</a>";
        } else {
          loginForm.style.display = "none";
          signupForm.style.display = "block";
          switchText.innerHTML = "Already have an account? <a href='#' onclick='toggleForm()'>Login</a>";
        }

// Clear existing error/success messages
        document.getElementById("loginError").innerText = "";
        document.getElementById("signupError").innerText = "";
        document.getElementById("signupSuccess").innerText = "";
      }

function displayMessage(elementId, message) {
        const element = document.getElementById(elementId);
        element.innerHTML = message;
        setTimeout(() => {
          element.innerHTML = "";
        }, 3000);
      }
    </script>
  </body>
</html>
```

To use this system, the user can enter their username and password in the login form and click the "Login" button. If the credentials are correct, a success message will be displayed, and the user will be considered logged in. If the credentials are incorrect, an error message will be shown.

The user can also switch to the Sign Up form by clicking the "Sign Up" link. They can then enter a new username and password, and clicking the "Sign Up" button will create a new account. If the username already exists, an error message will be displayed.

Please note that this implementation uses `localStorage` to store account information, which is not secure or suitable for production environments. It is recommended to use a proper backend with database storage for a production-level login/sign up system.