Skip to content

Commit

Permalink
Merge pull request #22 from harley616/app-improvements
Browse files Browse the repository at this point in the history 
App ui improvements & bug fixes
  • Loading branch information
@sumo43
sumo43 authored Apr 25, 2023
2 parents 8e34cfb + b8e397d commit 362560a
Show file tree
Hide file tree
Showing 11 changed files with 249 additions and 115 deletions.
Binary file added All_Project_Code_Components/src/.DS_Store
View file
Binary file not shown.
142 changes: 69 additions & 73 deletions All_Project_Code_Components/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

// *****************************************************
// <!-- Section 1 : Import Dependencies -->
// *****************************************************
Expand All @@ -8,9 +9,8 @@ const app = express();
const pgp = require('pg-promise')(); // To connect to the Postgres DB from the node server
const bodyParser = require('body-parser');
const session = require('express-session'); // To set the session object. To store or access session data, use the `req.session`, which is (generally) serialized as JSON by the store.
const axios = require('axios');
const bcrypt = require('bcryptjs'); // To hash passwords
var path = require('path');




Expand Down Expand Up @@ -60,6 +60,7 @@ db.connect()
app.set('view engine', 'ejs'); // set the view engine to EJS
app.use(bodyParser.json()); // specify the usage of JSON for parsing request body.


// initialize session variables

app.use(
Expand All @@ -71,20 +72,25 @@ app.use(
})
);



app.use(
bodyParser.urlencoded({
extended: true,
})
);

app.use( express.static( "public" ) );


// TODO - Include your API routes here

app.get('/', (req, res) => {
res.render('pages/login')
});

app.get('/welcome', (req, res) => {
res.json({ status: 'success', message: 'Welcome!' });
res.json({status: 'success', message: 'Welcome!'});
});


Expand Down Expand Up @@ -200,16 +206,15 @@ app.get('/friend_calendar', async (req, res) => {


app.get('/register', (req, res) => {
res.render('pages/register', { usernameExists: false, passwordNoMatch: false });
res.render('pages/register')
});


// Register
app.post('/register', async (req, res) => {
console.log('username: ', req.body.username);
console.log('password: ', req.body.password);
console.log('confirmedPassword: ', req.body.confirmPassword);
const username = req.body.username;
const username= req.body.username;
//hash the password using bcrypt library
const hash = await bcrypt.hash(req.body.password, 10);
// To-DO: Insert username and hashed password into 'users' table
Expand All @@ -219,99 +224,67 @@ app.post('/register', async (req, res) => {
const checker = await db.query('SELECT * FROM users WHERE username = $1', [username]);

//If username is not taken (i.e. check.length === 0):
if (checker.length === 0 && req.body.password === req.body.confirmPassword) {
if(checker.length === 0){
const insertion = await db.query('INSERT INTO users (username, password) VALUES ($1, $2)', [username, hash]);
console.log('hash: ', hash);
await res.render('pages/home', {data: null});
} else if (checker.length !== 0) {
await res.redirect('/login');
} else {

//If username is already taken (i.e. check.length != 0)
//If username is already taken (i.e. check.length != 0)
console.log('username already exists');
await res.render('pages/register', { usernameExists: true, passwordNoMatch: false });
} else if (req.body.password != req.body.confirmPassword) {
// If the two passwords do not match, throw an error
console.log('Entered passwords do not match');
await res.render('pages/register', { usernameExists: false, passwordNoMatch: true });
await res.redirect('/register');
}
} catch (error) {

//General catch-all for errors
console.error(error);
await res.redirect('/register');
//General catch-all for errors
console.error(error);
await res.redirect('/register');
}

});


app.get('/home', (req, res) => {
res.render('pages/home', { data: null });
});

app.post('/home', async (req, res) => {
const request = `http://api.weatherapi.com/v1/forecast.json?key=${process.env.WEATHER_API_KEY}&q=${req.body.location}&days=7`;
await axios({
url: request,
method: 'GET',
dataType: 'json',
})
.then(results => {
console.log("query results", results.data); // the results will be displayed on the terminal if the docker containers are running // Send some parameters
res.render('pages/home', {
data: results.data,
})
})
.catch(error => {
console.log("There was and error!", error);
res.render('pages/home', {
error: error,
data: null
})
});
})
//--------------------------------------------- L O G I N ---------------------------------------------------------//

app.get('/login', (req, res) => {
res.render('pages/login', { loginFailed: false })
res.render('pages/login')
});

// Login
app.post('/login', async (req, res) => {
console.log('username: ', req.body.username);
console.log('password: ', req.body.password);
//console.log('hashed password: ', await bcrypt.hash(req.body.password, 10));
const username = req.body.username;
const username= req.body.username;
try {
const user = await db.query('SELECT * FROM users WHERE username = $1', [username]); //Checking if username exists in the table
if (user.length === 0) { //if username does not exist:
console.log('Username not found.');
res.render('pages/login', { loginFailed: true }); //redirect to registration page
} else { //if username does exist:
console.log('Username found. Matching passwords...');
console.log('Inputted password: ', req.body.password);
console.log('Stored password: ', user[0].password);
const match = await bcrypt.compare(req.body.password, user[0].password); //checking is password matches the user's stored password
console.log('Match Value: ', match);
if (match === true) { //if the passwords match
console.log('Username and password match. Setting user.');
req.session.user = user; //set user, redirect to discover
req.session.save();
res.render('pages/home', {data: null});
} else { //if passwords do not match
//console.error(error); //throw error, incorrect username/password
console.log('Incorrect username or password.');
res.render('pages/login', { loginFailed: true });

}

const user = await db.query('SELECT * FROM users WHERE username = $1', [username]); //Checking if username exists in the table
if(user.length === 0){ //if username does not exist:
console.log('Username not found.');
await res.redirect('/register'); //redirect to registration page
} else { //if username does exist:
console.log('Username found. Matching passwords...');
console.log('Inputted password: ', req.body.password);
console.log('Stored password: ', user[0].password);
const match = await bcrypt.compare(req.body.password, user[0].password); //checking is password matches the user's stored password
console.log('Match Value: ', match);
if(match === true){ //if the passwords match
console.log('Username and password match. Setting user.');
req.session.user = user; //set user, redirect to discover
req.session.save();
await res.redirect('/home');
} else { //if passwords do not match
//console.error(error); //throw error, incorrect username/password
console.log('Incorrect username or password.');
await res.redirect('/login');
}
}

} catch (error) {
//General catch-all for errors
console.error(error);
await res.redirect('/login');
//General catch-all for errors
console.error(error);
await res.redirect('/login');
}
});


app.post("/addFriendRequest", (req, res) => {
const query = "INSERT INTO friend_add_queue (username, friend_username) VALUES ($1, $2)";
const values = [req.session.user[0]['username'], req.body.friend_username];
Expand Down Expand Up @@ -558,10 +531,33 @@ app.get('/getEvents', async (req, res) => {
console.log('successfully got events for user: ' + owner);
return res.status(200).json(get_event_result);
})


//same as acceptFriend, except we don't add the relationship into user_friends
app.get("/declineFriend", async (req, res) => {
console.log('accepting friend : ' + req.query.username + ' as ' + req.session.user[0]['username'])
const friend_username = req.session.user[0]['username'];
const username = req.query.username
console.log('deleting add_friend_queue')
// because this is from the perspective of the other person, we swap $2 and $1
const query = "DELETE FROM friend_add_queue WHERE username = $1 AND friend_username = $2;";
const values = [username, friend_username];
const query_result = await db.any(query, values);
console.log('successfully deleted.')
console.log(query_result);
res.redirect("/home");
});

app.get("/logout", (req, res) => {
req.session.destroy();
res.render("pages/login");
});


// *****************************************************
// <!-- Section 5 : Start Server-->
// *****************************************************
// starting the server and keeping the connection open to listen for more requests

module.exports = app.listen(3000);
console.log('Server is listening on port 3000');
console.log('Server is listening on port 3000');
2 changes: 1 addition & 1 deletion All_Project_Code_Components/src/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,4 @@
"author": "",
"license": "ISC",
"description": ""
}
}
Binary file added All_Project_Code_Components/src/public/scuuber_large.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added All_Project_Code_Components/src/public/scuuber_small.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions All_Project_Code_Components/src/resources/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

input[type=text], input[type=password] {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
Expand Down Expand Up @@ -8502,3 +8503,5 @@ input[type=text], input[type=password] {

.error-input {
border-color: #cd4dcc; }


59 changes: 53 additions & 6 deletions All_Project_Code_Components/src/views/pages/calendar.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,32 @@
<%- include ('../partials/menu') %>

<main>

<style>
.scuuber-menu {
color: black; font-size: 19px;font-family: 'IBM Plex Mono', monospace;text-decoration: underline;
}
.scuuber-title {
color: black; font-size: 19px;font-family: 'IBM Plex Mono', monospace; font-weight: semibold;
}
.scuuber-text {
color: black; font-size: 15px;font-family: 'IBM Plex Mono', monospace; text-decoration: none;
}
.scuuber-btn {
color: black; font-size: 15px;font-family: 'IBM Plex Mono', monospace;
}
.scuuber-cal-text {
color: black; font-size: 10px;font-family: 'IBM Plex Mono', monospace;
margin-top: 0;
margin-bottom: 0;
margin-left:10px;
}
</style>


<script>
const CALENDAR_DAYS = [
Expand Down Expand Up @@ -325,6 +351,12 @@ function updateTooltips() {
setTimeout(()=>{
initializeContent();
for (let i = 0; i < 7; i++) {
const element = document.getElementById("calendar-div-" + i);
element.setAttribute('onclick', `openEventModal()`);
}
const element = document.getElementById("calendar-div-0");
element.setAttribute('onclick', `openEventModal()`);
var event_div = document.createElement('div')
Expand All @@ -348,23 +380,38 @@ function updateTooltips() {
<div class="container">
<!-- print the ejs object called calendarData -->
<%= JSON.stringify(calendarData) %>
<div class="container">
<div class="row" style="height: 100vh;border-radius:10px">
<div class="container" style="border-radius: 30px;">
<div class="row" style="height: 100vh;">
<!-- ejs loop for 7 days of calendarData-->
<% for (let i = 0; i < 7; i++) { %>
<!-- header: todo add weather thing -->
<div id="calendar-div-<%=i%>" class="col-sm" style="border: 1px solid grey;height: 85vh;margin:0px;padding:0px;margin-top:10px">
<div class="weather_and_day text-center align-middle" style="border: 1px solid blue;height: 10vh;margin:0px;padding:0px;background-color:cyan">
<div id="calendar-div-<%=i%>" class="col-sm" style="position:relative;border: 0.5px solid grey;height: 85vh;margin:0px;padding:0px;margin-top:10px;">
<div class="weather_and_day text-center align-middle" style="border: 1px solid white;height: 10vh;margin:0px;padding:0px;background-color:rgba(56, 206, 239, 1);border-radius: 5px;">
<h1 class="align-middle" style="color: white;margin-top:20px;">
<%= new Date((Date.now() + (i * 24 * 60 * 60 * 1000))).getDate() %>
</h1>
</div>
<!-- ejs loop for 24 hours of calendarData-->
<% for (let j = 0; j < 23; j++) { %>
<hr style="margin-top:3.125vh;z-index:0">
<% } %>
<% for (let j = 0; j < calendarData[i].length; j++) { %>
<div class="calendarItem text-center align-middle" style="position:absolute;border: 1px solid blue;height:6.25vh;margin:0px;margin-top:<%=calendarData[i][j].padding %>;background-color:grey">
<p class="align-middle" style="color: black;">
<div class="calendarItem" style="border-radius:10px; width: 100%;position:absolute;height:10vh;margin:0px;top:<%=calendarData[i][j].padding %>;background-color:rgb(246, 241, 241)">
<p class="align-middle scuuber-cal-text" style=""> title:
<%= calendarData[i][j].title %>
</p>
<p class="align-middle scuuber-cal-text" style=""> owner:
<%= calendarData[i][j].owner %>
</p>
<p class="align-middle scuuber-cal-text" style=""> location:
<%= calendarData[i][j].location %>
</p>
<p class="align-middle scuuber-cal-text" style=""> event id:
<%= calendarData[i][j].event_id %>
</p>
</div>
Expand Down
Loading

0 comments on commit 362560a

Please sign in to comment.