CODEWITHSUNDEEP
javascriptjqueryhtmlcssauthentication
random1234
random1234

Reputation: 817

Log in system with jquery

I'm trying to make a website where you can sign up and log in to the created account(s) I don't want to save the usernames and passwords to a database or anything (this is a school project) so that is not of importance, I just want to be able to save an account through local storage if that is possible and be able to log in so:

1: how do i create an account that can be saved through localstorage.

2: how do i make it log in if the username and password are correct, and do the opposite if they are incorrect

how do i do this in Jquery? thanks in advance!

HTML:

<div id="log-in-modal">
    <div class="modal-content">
        <span class="close" id="close-log-in">x</span>
        <p><label>Username</label><input type="text" id="username"></p>
        <p><label>Password</label><input type="password" id="password"></p>
        <input type="submit" value="Log In" id="submit">
    </div>
</div>

<div id="sign-up-modal">
    <div class="modal-content">
        <span class="close" id="close-sign-up">x</span>
        <p><label>Username</label><input type="text" id="sign-username"></p>
        <p><label>Password</label><input type="password" id="sign-password"></p>
        <input type="submit" value="Sign Up" id="sign-submit">
    </div>
</div>

These are modals with username and password textfields, i open the modals by clicking a "Log In" button or "Sign Up" button on the website menu.

Upvotes: 1

Views: 320

Answers (1)

Chip Thrasher
Chip Thrasher

Reputation: 422

You could store 2 arrays in Local Storage and push/pull from them:

Step 1: Make username/password arrays if they don't exist

if(localStorage['usernames'] && localStorage['passwords']) { // see if they exist yet
    // code to execute if the arrays already exist
} else {
    var usernames = []; 
    var passwords = []; // create two empty arrays if nothing is in Local Storage
}

Step 2: Create Sign up function

function signUp(signUpUsername, signUpPassword) {
    usernames.push(signUpUsername); // adds username to the end of array
    passwords.push(signUpPassword); //  "   password "   "   "  "    "
}

Step 3: Create Login function

function logIn(loginUsername, loginPassword) {
    var cu = localStorage['usernames']; // correct usernames
    var cp = localStorage['passwords']; // correct passwords

Go through array to see if credentials are correct

    for(var i = 0; i < cu.length; i++) {
        if(cu[i] == loginUsername && cp[i] == loginPassword) {
            // you have been logged in!
        } else {
            // incorrect credentials (display message!)
        }
    }
}

Note: this example ignores security and uses local storage, stored directly in the browser! Make sure the data isn't valuable, in case someone steals the data.

Upvotes: 1

Related Questions