Skip to content

Commit

Permalink
Merge pull request #23 from fac-13/back-end
Browse files Browse the repository at this point in the history 
Added login and signup handlers + basic styling
  • Loading branch information
@iPhatty
iPhatty authored Apr 13, 2018
2 parents fac05e4 + 9158881 commit b98bd37
Show file tree
Hide file tree
Showing 12 changed files with 230 additions and 81 deletions.
3 changes: 1 addition & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 36 additions & 31 deletions public/comment.html
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add Comment</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<head>
<meta charset="utf-8">
<title>Add Comment</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>

<body>
<nav>
<a href="/">home</a>
<a href="/public/comment.html">Add Comment</a>
<a href="/public/signup.html">Sign Up</a>
<a href="/public/login.html">Login</a>
<nav class="nav__bar">
<button name="button" class="nav__button">
<a href="/">home</a>
</button>
<button name="button" class="nav__button">
<a href="/public/comment.html">Add Comment</a>
</button>
<button name="button" class="nav__button">
<a href="/public/signup.html">Sign Up</a>
</button>
<button name="button" class="nav__button">
<a href="/public/login.html">Login</a>
</button>
</nav>

<form id="comment-form" action="/add-comment" method="POST">
<label for="country-input">Select Country</label>
<input list="countries" name="country" id="country-input" required autocomplete="off">
<datalist id="countries">

</datalist>


<label for="city-input">Select City</label>
<input list="cities" name="city" id="city-input" required autocomplete="off">
<datalist id="cities">

</datalist>


<label for="comment-input">Write your comment</label>
<textarea name="comment" cols="30" rows="10" id="comment-input" required autocomplete="off"></textarea>

<input type="submit" id="commentBtn" value="Comment"/>
</form>

<section class="section__form">
<form id="comment-form" action="/add-comment" method="POST">
<label for="country-input">Select Country</label>
<input class="form__input" list="countries" name="country" id="country-input" required autocomplete="off">
<datalist id="countries"></datalist>
<label for="city-input">Select City</label>
<input class="form__input" list="cities" name="city" id="city-input" required autocomplete="off">
<datalist id="cities"></datalist>
<label for="comment-input">Write your comment</label>
<textarea class="form__textarea" name="comment" cols="30" rows="10" id="comment-input" required autocomplete="off"></textarea>
<p class="error" aria-live="polite"></p>
<input class="form__submit-button" type="submit" id="commentBtn" value="Comment" />
</form>
</section>

<script src="./comment.js"></script>
</body>
</html>

</html>
12 changes: 7 additions & 5 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@
<link rel="stylesheet" href="public/style.css">
</head>
<body>
<nav>
<a href="/">home</a>
<a href="/public/comment.html">Add Comment</a>
<a href="/public/signup.html">Sign Up</a>
<a href="/public/login.html">Login</a>
<nav class="nav__bar">
<button name="button" class="nav__button"><a href="/">home</a></button>
<button name="button" class="nav__button"><a href="/public/comment.html">Add Comment</a></button>
<button name="button" class="nav__button"><a href="/public/signup.html">Sign Up</a></button>
<button name="button" class="nav__button"><a href="/public/login.html">Login</a></button>
</nav>

<section class="section__results">

<script src="public/index.js" charset="utf-8"></script>
</body>
</html>
58 changes: 37 additions & 21 deletions public/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,50 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Log In</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<head>
<meta charset="utf-8">
<title>Log In</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>

<body>
<nav class="nav__bar">
<button name="button" class="nav__button">
<a href="/">home</a>
</button>
<button name="button" class="nav__button">
<a href="/public/comment.html">Add Comment</a>
</button>
<button name="button" class="nav__button">
<a href="/public/signup.html">Sign Up</a>
</button>
<button name="button" class="nav__button">
<a href="/public/login.html">Login</a>
</nav>
<section>
</button>
</nav>

<section class="section__form">

<form class="login__form" action="/login" method="POST">
<form class="login__form" action="/login" method="POST">

<label for="username">Username:</label>
<input class="form__input" id="username" type="text" required pattern="^[a-zA-Z0-9]+$" title="Please provide an alphanumeric name"
name="username" value="" />

<label for="password">Password:</label>
<input class="form__input" id="password" type="password" name="password" value="" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}"
title="Password should contain at least 9 characters, at least 1 capital letter, at least 1 lowercase letter, 1 number &amp a special character."
/>

<label for="username">Username:
<input id="username" type="text" required pattern="^[a-zA-Z0-9]+$" title="Please provide an alphanumeric name" name="username" value=""/>
</label>
<label for="password">Password:
<input id="password" type="password" name="password" value="" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}" title="Password should contain at least 9 characters, at least 1 capital letter, at least 1 lowercase letter, 1 number &amp a special character."/>
</label>

<p class="error" aria-live="polite"></p>

<input type="submit" id="loginButton" value="login"/>
</form>
<input class="form__submit-button" type="submit" id="loginButton" value="login" />
</form>

</section>
<script type="text/javascript" src="login.js"></script>
</body>

</section>
<script type="text/javascript" src="login.js"></script>
</body>
</html>
</html>
Empty file removed public/signup.css
View file
Empty file.
35 changes: 23 additions & 12 deletions public/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,41 @@
<meta charset="utf-8">
<title>Sign Up</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./signup.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<nav>
<a href="/">home</a>
<a href="/public/comment.html">Add Comment</a>
<a href="/public/signup.html">Sign Up</a>
<a href="/public/login.html">Login</a>
</nav>
<nav class="nav__bar">
<button name="button" class="nav__button">
<a href="/">home</a>
</button>
<button name="button" class="nav__button">
<a href="/public/comment.html">Add Comment</a>
</button>
<button name="button" class="nav__button">
<a href="/public/signup.html">Sign Up</a>
</button>
<button name="button" class="nav__button">
<a href="/public/login.html">Login</a>
</button>
</nav>

<section class="section__form">
<form id="signup-form" action="/signup" method="POST">
<label for="username">Username</label>
<input name="username" id="username" pattern="^[a-zA-Z0-9]+$" type="text" required>
<input class="form__input" name="username" id="username" pattern="^[a-zA-Z0-9]+$" type="text" required>
<label for="password">Password</label>
<input name="password" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}" type="password" required>
<input class="form__input" name="password" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}"
type="password" required>
<label for="confirm-password">Confirm Password</label>
<input id="confirm-password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}" type="password" required>
<button id="submit" type="submit">Submit</button>
<input class="form__input" id="confirm-password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}" type="password"
required>
<button class="form__submit-button" id="submit" type="submit">Submit</button>
<p class="error" aria-live="polite"></p>
</form>
</section>
<script src="./signup.js"></script>

</body>

</html>
</html>
104 changes: 104 additions & 0 deletions public/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
html {
margin: 0;
padding: 0;
color: #302f2f;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
background: radial-gradient(#fbfcfd, #e7e8ef, #d2d5e2);
height: 100vh;
margin: 0;
}

h1 {
font-size: 2rem;
}

.nav__bar {
height: 2rem;
width: 100%;
text-align: end;
}

a {
text-decoration: none;
color: white;
}

.nav__button {
font-size: 1.2rem;
padding: 0.5%;
margin: 0.5%;
text-align: center;
border: 2px solid black;
background: #302f2f;
color: #fbfcfd;
font-weight: 700;
border-radius: 0.6rem;
}

.header {
text-align: center;
padding-top: 35vh;
margin: 0 1%;
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin:auto;
}

label {
font-size: 1.2rem;
padding: 1rem;
font-weight: 700;
}

.form__submit-button {
font-size: 1.5rem;
text-transform: capitalize;
margin: 5%;
padding: 0.5%;
text-align: center;
border: 2px solid black;
background: #302f2f;
color: #fbfcfd;
font-weight: 700;
border-radius: 0.6rem;
}

.form__input {
height: 2rem;
padding: 0.2rem 0.5rem;
font-size: 1.5rem;
}

.form__textarea {
padding: 0.2rem 0.5rem;
font-size: 1.5rem;
}

.form__submit-button:hover {
color: #302f2f;
background: #fbfcfd;
border: 2px solid #302f2f;
outline: none;
}

.section__results {
display: flex;
align-items: center;
height: 100%;
margin:auto;
}

.section__form {
display: flex;
align-items: center;
height: 100%;
margin:auto;
}
2 changes: 1 addition & 1 deletion queries/check_user_password.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const check_user_password = (username, cb) => {
[username],
(err, res) => {
if (err) cb(err);
else cb(null, res);
else cb(null, res.rows[0].password);
}
);
};
Expand Down
1 change: 0 additions & 1 deletion queries/check_username.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

const dbConnection = require("../src/database/db_connection.js");

const check_user_exists = (username, cb) => {
Expand Down
14 changes: 14 additions & 0 deletions queries/get user_id.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const dbConnection = require("../src/database/db_connection.js");

const get_user_id = (username, cb) => {
dbConnection.query(
`SELECT id FROM users WHERE username = $1`,
[username],
(err, res) => {
if (err) cb(err);
else cb(null, res.rows);
}
);
};

module.exports = get_user_id;
7 changes: 2 additions & 5 deletions src/database/db_build.sql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,7 @@ CREATE TABLE comments (
PRIMARY KEY (userid, destid)
);

INSERT INTO users(username, password) VALUES ('johndoe', 'Password123!'), ('joedummy', 'Password234!'), ('joecopy', 'Password345!');

INSERT INTO destinations(country , city) VALUES ('United Kingdom', 'London'), ('United Kingdom', 'Southampton'), ('Cyprus', 'Nicosia');

INSERT INTO comments(comment, userid, destid) VALUES ('Great distination. Will visit again', 1, 1), ('Boring city. Not sure if I like it', 2, 2), ('So hot. Avoid in summer', 3, 3);
CREATE UNIQUE INDEX username_unique_idx ON users(username);
CREATE INDEX password_idx ON users(password);

COMMIT;
Loading

0 comments on commit b98bd37

Please sign in to comment.