Web Front‐End HW 06 MAK - TheEvergreenStateCollege/upper-division-cs-23-24 GitHub Wiki
Using computer space
https://firtman.github.io/authentication/lessons/classic-login/form-accessibility
increase usability, add labels, remove placeholders, and connect labels to input, add autocomplete
index.html
<form id="formRegister">
<fieldset>
<input placeholder="You Name" id="register_name"
required>
<input placeholder="Your email" id="register_email"
required type="email">
<label>Your Password</label>
<input type="password" id="register_password"
required>
</fieldset>
<button>Register Account</button>
</form>
updated code
index.html
<form id="formRegister">
<fieldset>
<label for="register_name">Your Name</label>
<input id="register_name"
required autocomplete="name">
<label for="register_email">Your Email</label>
<input placeholder="Your email" id="register_email"
required type="email" autocomplete="username">
<label for="register_password">Your Password</label>
<input type="password" id="register_password"
required autocomplete="new-password">
</fieldset>
<button>Register Account</button>
</form>
do the same for login
index.html
<form id="formLogin">
<fieldset>
<input placeholder="email" id="login_email"
required>
<label for="login_password">Password</label>
<input type="password" id="login_password"
>
</fieldset>
<button>Continue</button>
<p>
<a href="/register" class="navlink">Register a new account instead</a>
</p>
</fieldset>
</form>
updated code
index.html
<form id="formLogin">
<fieldset>
<label for="login_email">Your email</label>
<input placeholder="email" id="login_email"
required autocomplete="username">
<label for="login_password">Password</label>
<input type="password" id="login_password"
autocomplete="current-password">
</fieldset>
<button>Continue</button>
<p>
<a href="/register" class="navlink">Register a new account instead</a>
</p>
</fieldset>
</form>https://firtman.github.io/authentication/lessons/classic-login/server-endpoints
code to call the server open server.js
new code server.js
function findUser(email){
const results = db.data.users.filter(u=>u.email==email);
if (results.length==0) return undefined;
return results[0];
}
// ADD HERE THE REST OF THE ENDPOINTS
app.post("/auth/register", (req, res) =>{
//TODO: Data Validation
const user = {
name: req.body.name,
email: req.body.email,
password: req.body.password
}
const userFound = findUser(user.email);
if (userFound){
//user alread exists/taken
res.send({ok: false, message: "User already exists/taken"})
}else{
//new user
db.data.users.push(user);
db.write();
res.send({ok: true});
}
});https://firtman.github.io/authentication/lessons/classic-login/server-endpoints
change password from plain text to hash and add salt server.js
// ADD HERE THE REST OF THE ENDPOINTS
app.post("/auth/register", (req, res) =>{
const salt = bcrypt.genSaltSync(10);
const hashedPass = bcrypt.hashSync(req.body.password, salt);
//TODO: Data Validation
const user = {
name: req.body.name,
email: req.body.email,
password: hashedPass
}
const userFound = findUser(user.email);
if (userFound){
//user already exists/taken
res.send({ok: false, message: "User already exists/taken"})
}else{
//new user
db.data.users.push(user);
db.write();
res.send({ok: true});
}
});add endpoints
server.js
// ADD HERE THE REST OF THE ENDPOINTS
app.post("/auth/login", (req, res) =>{
const userFound = findUser(req.body.email);
if (userFound){
//User found next check password
if (bcrypt.conpareSync(req.body.password, userFound.password)) {
res.ok({ok: true, name: userFound.name, email: userFound.email });
}else{
res.send({ok: false, message: "Credential are wrong"});
}
}else{
//User not found
res.send({ok: false, message: "Credential are wrong"});
}
});connect the client API.js
// ADD HERE ALL THE OTHER API FUNCTIONS
login: async (user) => {
return await API.makePostRequest(API.endpoint + "login", user)
},
register: async (user) => {
return await API.makePostRequest(API.endpoint + "register", user)
},https://firtman.github.io/authentication/lessons/classic-login/calling-apis
add onsubmit to forms
index.html
77 <form id="formLogin" onsubmit="Auth.login(event)">
56 <form id="formRegister" onsubmit="Auth.register(event)">add register and login to Auth Auth.js
register: async (event) => {
event.preventDefault();
const user = {
name: document.getElementById("register_name").value,
email: document.getElementById("register_email").value,
password: document.getElementById("register_password").value
}
const response = await API.register(user);
console.log(response);
},
login: async (event) =>{
event.preventDefault();
const credentials = {
email: document.getElementById("login_email").value,
password: document.getElementById("login_password").value
}
const response = await API.login(credentials);
console.log(response);
},https://firtman.github.io/authentication/lessons/classic-login/calling-apis
add postLogin Auth.js
PostLogin: (response, user) => {
if (response.ok) {
Auth.isLoggedIn = true;
Auth.account = user;
Auth.updateStatus();
Router.go("/account");
} else {
alert(response.message);
}
},
register: async (event) => {
event.preventDefault();
const user = {
name: document.getElementById("register_name").value,
email: document.getElementById("register_email").value,
password: document.getElementById("register_password").value
}
const response = await API.register(user);
//console.log(response);
Auth.PostLogin(response, {
name: user.name,
email: user.email
});
},
login: async (event) =>{
event.preventDefault();
const credentials = {
email: document.getElementById("login_email").value,
password: document.getElementById("login_password").value
}
const response = await API.login(credentials);
//console.log(response);
Auth.PostLogin(response, {
...credentials,
name: response.name
});
},add logout
Auth.js
logout: () =>{
Auth.isLoggedIn = false;
Auth.account = null;
Auth.updateStatus();
Router.go("/");
},