Updated more UI. Enhanced login capabilities. Started work on querying data.
This commit is contained in:
parent
40a0e4046a
commit
052052d76b
GPG key ID:
0989A73D8C421174
29 changed files with 706 additions and 424 deletions
|
|
@ -9,29 +9,37 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="navbar"></div>
|
||||
|
||||
<div id="content-body">
|
||||
<div id="login-page" class="page">
|
||||
<div class="page-header">
|
||||
<p class="page-header-text">Achievements Project</p>
|
||||
<div class="page-header-separator"></div>
|
||||
</div>
|
||||
<div id="login-header">
|
||||
<p id="login-header-text" class="page-subheader-text">Login</p>
|
||||
<div class="page-subheader-separator"></div>
|
||||
</div>
|
||||
<div id="login-form">
|
||||
<p id="error-message" class="form-row top multiline">Egg</p>
|
||||
<input id="email" class="login-field form-row" type="text" placeholder="Email"></input>
|
||||
<input id="username" class="login-field form-row" type="text" placeholder="Username"></input>
|
||||
<input id="password" class="login-field form-row" type="password" placeholder="Password"></input>
|
||||
<input id="confirm" class="login-field form-row" type="password" placeholder="Confirm your password"></input>
|
||||
<div id="button-row" class="form-row">
|
||||
<div id="create-user-button" class="ap-button login">Create Account</div>
|
||||
<div id="guest-login-button" class="ap-button login">Continue as Guest</div>
|
||||
<div class="page-subsection">
|
||||
<div class="page-header">
|
||||
<p class="page-header-text">Achievements Project</p>
|
||||
<div class="page-header-separator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="login-flex">
|
||||
<div id="login-subsection" class="page-subsection">
|
||||
<div id="login-elements" class="page-subsection-wrapper">
|
||||
<div id="login-header" class="page-subheader">
|
||||
<p id="login-header-text" class="page-subheader-text">Login</p>
|
||||
<div class="page-subheader-separator"></div>
|
||||
</div>
|
||||
<div id="login-form">
|
||||
<p id="error-message" class="form-row top multiline">Egg</p>
|
||||
<input id="email" class="login-field form-row" type="text" placeholder="Email"></input>
|
||||
<input id="username" class="login-field form-row" type="text" placeholder="Username"></input>
|
||||
<input id="password" class="login-field form-row" type="password" placeholder="Password"></input>
|
||||
<input id="confirm" class="login-field form-row" type="password" placeholder="Confirm your password"></input>
|
||||
<div id="button-row" class="form-row">
|
||||
<div id="create-user-button" class="ap-button login">Create Account</div>
|
||||
<div id="guest-login-button" class="ap-button login">Continue as Guest</div>
|
||||
</div>
|
||||
<div id="login-button" class="ap-button login form-row">Login</div>
|
||||
<p id="warning" class="form-row">WARNING!</p>
|
||||
<p id="warning-message" class="form-row multiline">The security of this project is questionable at best. Please refrain from using any truly sensitive data.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="login-button" class="ap-button login form-row">Login</div>
|
||||
<p id="warning" class="form-row multiline">WARNING! The security of this project is questionable at best. Please refrain from using any truly sensitive data.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
let session = null;
|
||||
const loadSession = () => {
|
||||
session = JSON.parse(window.sessionStorage.getItem('session'));
|
||||
if (session) {
|
||||
document.querySelector(":root").style.setProperty('--accent-hue', session.hue);
|
||||
}
|
||||
};
|
||||
|
||||
const expandTemplates = async () => {
|
||||
template.apply("navbar").values([
|
||||
{ section: "left" },
|
||||
|
|
@ -7,9 +15,16 @@ const expandTemplates = async () => {
|
|||
{ item: "games", title: "Games" },
|
||||
{ item: "achievements", title: "Achievements" }
|
||||
]);
|
||||
template.apply("navbar-section-right").values([
|
||||
{ item: "profile", title: "Profile" }
|
||||
]);
|
||||
if (session) {
|
||||
template.apply("navbar-section-right").values([
|
||||
{ item: "profile", title: "Profile" },
|
||||
{ item: "logout", title: "Logout" }
|
||||
]);
|
||||
} else {
|
||||
template.apply("navbar-section-right").values([
|
||||
{ item: "login", title: "Login" }
|
||||
]);
|
||||
}
|
||||
template.apply("content-body").values([
|
||||
{ page: "games", title: "Games" },
|
||||
{ page: "achievements", title: "Achievements" },
|
||||
|
|
@ -18,7 +33,6 @@ const expandTemplates = async () => {
|
|||
template.apply("extern-games-page" ).values("games_page" );
|
||||
template.apply("extern-achievements-page").values("achievements_page");
|
||||
template.apply("extern-profile-page" ).values("profile_page" );
|
||||
template.apply("achievements-page-list" ).fetch("achievements", "https://localhost:4730/achievements");
|
||||
|
||||
await template.expand();
|
||||
};
|
||||
|
|
@ -32,22 +46,41 @@ const connectNavbar = () => {
|
|||
const navItems = document.querySelectorAll(".navbar-item");
|
||||
|
||||
for (const item of navItems) {
|
||||
item.addEventListener("click", (clickEvent) => {
|
||||
const navItemPageId = item.dataset.pageName + "-page"
|
||||
for (const page of pages) {
|
||||
if (page.id === navItemPageId) {
|
||||
page.style.display = "block";
|
||||
} else {
|
||||
page.style.display = "none";
|
||||
if (item.dataset.pageName === "logout") {
|
||||
item.addEventListener("click", (clickEvent) => {
|
||||
fetch('https://localhost:4730/logout', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ key: session.key })
|
||||
})
|
||||
.then(response => {
|
||||
window.sessionStorage.removeItem('session');
|
||||
window.location.href = "/login.html";
|
||||
});
|
||||
});
|
||||
} else if (item.dataset.pageName === "login") {
|
||||
item.addEventListener("click", (clickEvent) => window.location.href = "/login.html");
|
||||
} else {
|
||||
item.addEventListener("click", (clickEvent) => {
|
||||
const navItemPageId = item.dataset.pageName + "-page"
|
||||
for (const page of pages) {
|
||||
if (page.id === navItemPageId) {
|
||||
page.style.display = "block";
|
||||
} else {
|
||||
page.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const connectProfile = () => {
|
||||
const games = document.querySelector("#profile-games");
|
||||
const achievements = document.querySelector("#profile-achievements");
|
||||
const games = document.querySelector("#profile-games-header");
|
||||
const achievements = document.querySelector("#profile-achievements-header");
|
||||
|
||||
games.children[0].addEventListener("click", (clickEvent) => {
|
||||
for (const page of pages) {
|
||||
|
|
@ -84,6 +117,8 @@ const loadFilters = () => {
|
|||
}
|
||||
|
||||
window.addEventListener("load", async (loadEvent) => {
|
||||
loadSession();
|
||||
|
||||
await expandTemplates();
|
||||
|
||||
loadPages();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
window.addEventListener("load", (loadEvent) => {
|
||||
let session = window.sessionStorage.getItem('session');
|
||||
if (session) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
const fields = {
|
||||
email: document.querySelector("#email" ),
|
||||
username: document.querySelector("#username"),
|
||||
|
|
@ -27,6 +32,18 @@ window.addEventListener("load", (loadEvent) => {
|
|||
}
|
||||
|
||||
let frozen = false;
|
||||
const freeze = () => {
|
||||
frozen = true;
|
||||
createUser.classList.add("disabled");
|
||||
login.classList.add("disabled");
|
||||
guest.classList.add("disabled");
|
||||
};
|
||||
const unfreeze = () => {
|
||||
frozen = false;
|
||||
createUser.classList.remove("disabled");
|
||||
login.classList.remove("disabled");
|
||||
guest.classList.remove("disabled");
|
||||
};
|
||||
|
||||
const switchToCreateAction = (clickEvent) => {
|
||||
if (!frozen) {
|
||||
|
|
@ -39,6 +56,8 @@ window.addEventListener("load", (loadEvent) => {
|
|||
|
||||
login.removeEventListener("click", loginAction);
|
||||
login.addEventListener("click", switchToLoginAction);
|
||||
|
||||
activeAction = createUserAction;
|
||||
}
|
||||
};
|
||||
const createUserAction = (clickEvent) => {
|
||||
|
|
@ -52,7 +71,7 @@ window.addEventListener("load", (loadEvent) => {
|
|||
} else if (fields.password.value === '') {
|
||||
raiseError([ "password", "confirm" ], "Password cannot be empty");
|
||||
} else {
|
||||
frozen = true;
|
||||
freeze();
|
||||
fetch('https://localhost:4730/create_user', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
|
|
@ -65,8 +84,7 @@ window.addEventListener("load", (loadEvent) => {
|
|||
.then(response =>{
|
||||
const data = response.data;
|
||||
if (response.status === 200) {
|
||||
window.sessionStorage.setItem('sessionKey', data.key);
|
||||
window.sessionStorage.setItem('id', data.id );
|
||||
window.sessionStorage.setItem('session', JSON.stringify(data));
|
||||
window.location.href = "/";
|
||||
} else if (response.status === 500) {
|
||||
raiseError([], "Internal server error :(");
|
||||
|
|
@ -83,7 +101,7 @@ window.addEventListener("load", (loadEvent) => {
|
|||
.catch(error => {
|
||||
console.error(error);
|
||||
raiseError([], "Server error :(");
|
||||
}).then(() => frozen = false);
|
||||
}).then(unfreeze);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -100,6 +118,8 @@ window.addEventListener("load", (loadEvent) => {
|
|||
|
||||
login.removeEventListener("click", switchToLoginAction);
|
||||
login.addEventListener("click", loginAction);
|
||||
|
||||
activeAction = loginAction;
|
||||
}
|
||||
};
|
||||
const loginAction = (clickEvent) => {
|
||||
|
|
@ -109,7 +129,7 @@ window.addEventListener("load", (loadEvent) => {
|
|||
} else if (fields.password.value === '') {
|
||||
raiseError([ "password" ], "Password cannot be empty");
|
||||
} else {
|
||||
frozen = true;
|
||||
freeze();
|
||||
fetch('https://localhost:4730/login', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
|
|
@ -123,8 +143,7 @@ window.addEventListener("load", (loadEvent) => {
|
|||
const data = response.data;
|
||||
if (response.status === 200) {
|
||||
console.log(data);
|
||||
window.sessionStorage.setItem('sessionKey', data.key);
|
||||
window.sessionStorage.setItem('id', data.id );
|
||||
window.sessionStorage.setItem('session', JSON.stringify(data));
|
||||
window.location.href = "/";
|
||||
} else if (response.status === 500) {
|
||||
raiseError([], "Internal server error :(");
|
||||
|
|
@ -136,7 +155,7 @@ window.addEventListener("load", (loadEvent) => {
|
|||
.catch(error => {
|
||||
console.error(error);
|
||||
raiseError([], "Unknown error :(");
|
||||
}).then(() => frozen = false);
|
||||
}).then(unfreeze);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -144,34 +163,16 @@ window.addEventListener("load", (loadEvent) => {
|
|||
|
||||
guest.addEventListener("click", (clickEvent) => {
|
||||
if (!frozen) {
|
||||
frozen = true;
|
||||
fetch('https://localhost:4730/login?guest=true', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: "{}"
|
||||
})
|
||||
.then(async response => ({ status: response.status, data: await response.json() }))
|
||||
.then(response => {
|
||||
const data = response.data;
|
||||
if (response.status === 200) {
|
||||
console.log(data);
|
||||
window.sessionStorage.setItem('sessionKey', data.key);
|
||||
window.sessionStorage.setItem('id', data.id );
|
||||
window.location.href = "/";
|
||||
} else if (response.status === 500) {
|
||||
raiseError([], "Internal server error :(");
|
||||
} else {
|
||||
raiseError([ "email", "password" ], "Email or password is incorrect");
|
||||
fields.password.value = '';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
raiseError([], "Unknown error :(");
|
||||
}).then(() => frozen = false);
|
||||
window.location.href = '/';
|
||||
}
|
||||
});
|
||||
|
||||
let activeAction = loginAction;
|
||||
for (const field in fields) {
|
||||
fields[field].addEventListener("keydown", (keyEvent) => {
|
||||
if (keyEvent.key === "Enter") {
|
||||
activeAction();
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
|
@ -94,6 +94,21 @@ html, body {
|
|||
background-color: var(--accent-value1);
|
||||
}
|
||||
|
||||
.ap-button.disabled {
|
||||
background-color: var(--accent-value1);
|
||||
color: var(--accent-value0);
|
||||
}
|
||||
|
||||
.ap-button.disabled:hover {
|
||||
background-color: var(--accent-value1);
|
||||
color: var(--accent-value0);
|
||||
}
|
||||
|
||||
.ap-button.disabled:active {
|
||||
background-color: var(--accent-value1);
|
||||
color: var(--accent-value0);
|
||||
}
|
||||
|
||||
#content-body {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -109,8 +124,6 @@ html, body {
|
|||
}
|
||||
|
||||
.page {
|
||||
z-index: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 32px;
|
||||
|
|
@ -135,9 +148,6 @@ html, body {
|
|||
border-radius: 8px;
|
||||
|
||||
box-shadow: inset 0px 0px 8px 8px var(--shadow-color);
|
||||
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.page-subsection-wrapper {
|
||||
|
|
@ -290,12 +300,12 @@ html, body {
|
|||
}
|
||||
|
||||
.list-page-filter-checkbox {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
background-color: var(--foreground);
|
||||
|
||||
border: 3px solid var(--foreground-dark);
|
||||
border: 3px solid var(--foreground);
|
||||
border-radius: 8px;
|
||||
|
||||
transition-property: background-color, border-color;
|
||||
|
|
|
|||
|
|
@ -86,15 +86,27 @@ html, body {
|
|||
box-shadow: 0px 0px 8px 8px var(--shadow-color);
|
||||
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#profile-info-pfp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#profile-info-pfp-vignette {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
box-shadow: inset 0px 0px 50px 30px var(--shadow-color);
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#profile-info-pfp-img {
|
||||
|
|
@ -103,7 +115,6 @@ html, body {
|
|||
border-radius: 8px;
|
||||
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.profile-list {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
--element-spacing: 12px;
|
||||
|
||||
--error: #FA7575;
|
||||
--error: #F95959;
|
||||
}
|
||||
|
||||
#login-page {
|
||||
|
|
@ -12,21 +12,35 @@
|
|||
max-width: 1280px;
|
||||
}
|
||||
|
||||
#login-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#login-subsection {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#login-elements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#login-header {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 0 calc(25% - 64px);
|
||||
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin: 24px calc(25% - 64px) 0;
|
||||
padding: 24px 0;
|
||||
|
||||
width: 50%;
|
||||
height: max-content;
|
||||
|
||||
background-color: var(--distinction);
|
||||
|
|
@ -99,6 +113,15 @@
|
|||
}
|
||||
|
||||
#warning {
|
||||
color: var(--foreground);
|
||||
color: var(--error);
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
#warning-message {
|
||||
margin-top: 0;
|
||||
color: var(--foreground);
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="page-subsection">
|
||||
<div class="list-page-search page-subsection-chunk">
|
||||
<label for="achievement-search">Search</label>
|
||||
<input id="achievement-search" type="text" placeholder="Name, Keyword, etc..." name="achievement-search"/>
|
||||
<input id="achievement-search" type="text" placeholder="Name" name="achievement-search"/>
|
||||
</div>
|
||||
<div class="list-page-partitions">
|
||||
<div class="list-page-filter-partition">
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="page-subsection-wrapper">
|
||||
<div id="from-games-owned-filter" class="list-page-filter">
|
||||
<div class="list-page-filter-checkbox"></div>
|
||||
<p class="list-page-filter-name">From Games Owned</p>
|
||||
<p class="list-page-filter-name">My Games</p>
|
||||
</div>
|
||||
<div id="in-progress-filter" class="list-page-filter">
|
||||
<div class="list-page-filter-checkbox"></div>
|
||||
|
|
@ -51,4 +51,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="page-subsection">
|
||||
<div class="list-page-search page-subsection-chunk">
|
||||
<label for="game-search">Search</label>
|
||||
<input id="game-search" type="text" placeholder="Name, Keyword, etc..." game-name="game-search" name="game-search"/>
|
||||
<input id="game-search" type="text" placeholder="Name" game-name="game-search" name="game-search"/>
|
||||
</div>
|
||||
<div class="list-page-partitions">
|
||||
<div class="list-page-filter-partition">
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@
|
|||
<div class="page-subheader-separator"></div>
|
||||
</div>
|
||||
<div id="profile-info-pfp-border" class="page-subsection-chunk">
|
||||
<div id="profile-info-pfp-vignette">
|
||||
<div id="profile-info-pfp">
|
||||
<img id="profile-info-pfp-img" src="res/guest_pfp.png" alt="User's Profile Pictuer" />
|
||||
<div id="profile-info-pfp-vignette"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
<div id="profile-section-2">
|
||||
<div id="profile-games" class="page-subsection">
|
||||
<div class="page-subsection-wrapper">
|
||||
<div class="page-subheader">
|
||||
<div id="profile-games-header" class="page-subheader">
|
||||
<p class="page-subheader-text link">Games</p>
|
||||
<div class="page-subheader-separator"></div>
|
||||
</div>
|
||||
|
|
@ -95,7 +96,7 @@
|
|||
</div>
|
||||
<div id="profile-achievements" class="page-subsection">
|
||||
<div class="page-subsection-wrapper">
|
||||
<div class="page-subheader">
|
||||
<div id="profile-achievements-header" class="page-subheader">
|
||||
<p class="page-subheader-text link">Achievements</p>
|
||||
<div class="page-subheader-separator"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue