kforney/gimm285-api-project
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Validation for forms.

Browse source
This commit is contained in:
Kaj Forney 2023-05-02 10:10:55 -06:00
parent 4100585a60
commit 88a2f045ca
Signed by: kforney
GPG key ID: 3AB4E2E04CEF656F
10 changed files with 217 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
server/index.js
View file

@ -143,7 +143,8 @@ app.post('/games', upload.single('coverArt'),
check('win', 'Invalid Windows option.').isIn([0, 1]),
check('mac', 'Invalid MacOS option.').isIn([0, 1]),
check('linux', 'Invalid Linux option.').isIn([0, 1]),
check('shortDescription', 'You must enter a description'),
check('shortDescription', 'You must enter a short description of a valid length.').isLength({min:5, max:300}),
check('longDescription', 'You must enter a long description.').isLength({min:5}),
checkSchema({
'coverArt': {
optional: true,
@ -186,7 +187,7 @@ app.post('/games', upload.single('coverArt'),
app.post('/developers', upload.none(),
check('name', 'You must enter a name.').isLength({min: 3}),
check('description', 'You must enter a description').isLength({min: 5}),
check('homepage', 'You must enter a homepage URL.').isURL(),
check('homepage', 'You must enter a valid homepage URL.').isURL(),
async (request, response) => {
@ -220,7 +221,7 @@ app.post('/developers', upload.none(),
app.post('/publishers', upload.none(),
check('name', 'You must enter a name.').isLength({min: 3}),
check('description', 'You must enter a description').isLength({min: 5}),
check('homepage', 'You must enter a homepage URL.').isURL(),
check('homepage', 'You must enter a valid homepage URL.').isURL(),
async (request, response) => {

41
server/public/css/main.css
View file

@ -116,8 +116,25 @@ body, html {
color: #d3dade;
}
h1,h2,h3,h4,h5{
font-family: "Oswald", "Impact";
}
p{
margin-bottom: 0;
font-family: Quicksand, "Segoe UI", Arial;
}
li {
font-family: Quicksand, "Segoe UI", Arial;
}
li > a {
font-family: "Oswald", "Impact";
}
div > a {
font-family: "Oswald", "Impact";
}
input, select, textarea {
@ -130,6 +147,11 @@ input, select, textarea {
.navbar-brand {
color: steelblue;
font-weight: bolder;
font-family: "Oswald", "Impact";
}
.navbar-brand:hover{
color: steelblue;
}
.dropdown-item {
@ -175,6 +197,14 @@ input, select, textarea {
min-width: 250px;
}
label {
font-family: "IBM Plex Mono", monospace;
}
button {
font-family: "Oswald", "Impact";
}
#submitButton {
border-radius: 5px;
border:0;
@ -182,6 +212,7 @@ input, select, textarea {
min-height: 50px;
background-image: linear-gradient(#5c7e10, #4c6b22);
color: #ffffff;
font-family: "Oswald", "Impact";
}
#submitButton:hover {
@ -229,6 +260,10 @@ input, select, textarea {
min-height: 30px;
}
.error-message {
color: #c51210;
}
.warning {
background-color: darkred;
color: #b3d4fc;
@ -303,6 +338,12 @@ tbody tr:nth-child(odd) {
src: url("../fonts/IBMPlexSans-Regular.ttf");
}
@font-face {
font-family: "Quicksand";
font-display: swap;
src: url("../fonts/Quicksand-Regular.ttf");
}
/* ==========================================================================
Helper classes

48
server/public/edit.html
View file

@ -90,6 +90,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='title-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>
@ -106,6 +110,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='developer-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>
@ -122,6 +130,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='publisher-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Release Date</label>
@ -132,6 +144,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='releaseDate-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Supported OSes</label>
@ -155,6 +171,16 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='win-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class='row'>
<div id='mac-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class='row'>
<div id='linux-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Cover Art</label>
@ -167,6 +193,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='coverArt-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Short Description</label>
@ -178,6 +208,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='shortDescription-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Long Description</label>
@ -189,6 +223,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='longDescription-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col-2 align-content-center">
<button id="submitButton" type="submit">Submit</button>
@ -389,6 +427,16 @@
let message = "Game submission successful!"
document.getElementById('outputMessage').hidden = false;
document.getElementById('outputMessage').innerHTML = message;
} else if (status === 400) {
let message = "There was a problem with your submission. Please check for errors and try again."
document.getElementById("errorMessage").hidden = false;
document.getElementById("errorMessage").innerHTML = message;
const elementErrorMessages = document.getElementsByClassName('error-message');
for(error of json.errors) {
const errorID = error.param + '-error';
document.getElementById(errorID).innerHTML = error.msg;
}
}
})
.catch(error => {

BIN
server/public/fonts/Quicksand-Light.ttf Normal file
View file

Binary file not shown.

BIN
server/public/fonts/Quicksand-Medium.ttf Normal file
View file

Binary file not shown.

BIN
server/public/fonts/Quicksand-Regular.ttf Normal file
View file

Binary file not shown.

2
server/public/index.html
View file

@ -137,7 +137,6 @@
gameListHTML += "<div class=\"row\">";
console.log(gameListData[0]);
for (let i = 0; i <= numberOfGames; i++) {
let currentCard = "";
currentCard += cardPt1;
@ -161,7 +160,6 @@
gameListHTML += currentCard;
}
gameListHTML += "</div>";
console.log(gameListHTML);
gameListDiv.innerHTML = gameListHTML;
}
})

48
server/public/insert.html
View file

@ -90,6 +90,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='title-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>
@ -106,6 +110,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='developer-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>
@ -122,6 +130,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='publisher-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Release Date</label>
@ -132,6 +144,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='releaseDate-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Supported OSes</label>
@ -155,6 +171,16 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='win-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class='row'>
<div id='mac-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class='row'>
<div id='linux-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Cover Art</label>
@ -166,6 +192,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='coverArt-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Short Description</label>
@ -177,6 +207,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='shortDescription-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Long Description</label>
@ -188,6 +222,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='longDescription-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col align-content-center">
<button id="submitButton" type="submit">Submit</button>
@ -336,6 +374,16 @@
let message = "Game submission successful!"
document.getElementById('successMessage').hidden = false;
document.getElementById('successMessage').innerHTML = message;
} else if (status === 400) {
let message = "There was a problem with your submission. Please check for errors and try again."
document.getElementById("errorMessage").hidden = false;
document.getElementById("errorMessage").innerHTML = message;
const elementErrorMessages = document.getElementsByClassName('error-message');
for(error of json.errors) {
const errorID = error.param + '-error';
document.getElementById(errorID).innerHTML = error.msg;
}
}
})
.catch(error => {

47
server/public/insertDeveloper.html
View file

@ -65,6 +65,18 @@
<hr/>
</div>
<div class="row mb-3">
<div class="col"></div>
<div class="col card" id="successMessage"></div>
<div class="col"></div>
</div>
<div class="row mb-3">
<div class="col"></div>
<div class="col card" id="errorMessage"></div>
<div class="col"></div>
</div>
<div id="form">
<div class="container">
@ -78,6 +90,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='name-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Description</label>
@ -89,6 +105,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='description-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Homepage</label>
@ -99,6 +119,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='homepage-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col-2 align-content-center">
<button id="submitButton" type="submit">Submit</button>
@ -112,12 +136,6 @@
<hr/>
</div>
<div class="row mb-3">
<div class="col"></div>
<div class="col card" id="outputMessage"></div>
<div class="col"></div>
</div>
</div>
@ -134,7 +152,8 @@
<script>
const isEmpty = (obj) => Object.keys(obj).length === 0;
document.getElementById("outputMessage").hidden = true;
document.getElementById("successMessage").hidden = true;
document.getElementById("errorMessage").hidden = true;
document.getElementById('backButton').addEventListener('click', (event) => {
history.back();
@ -173,8 +192,18 @@
.then(({status, json}) => {
if (status === 200) {
let message = "Submission successful!"
document.getElementById('outputMessage').hidden = false;
document.getElementById('outputMessage').innerHTML = message;
document.getElementById('successMessage').hidden = false;
document.getElementById('successMessage').innerHTML = message;
} else if (status === 400) {
let message = "There was a problem with your submission. Please check for errors and try again."
document.getElementById("errorMessage").hidden = false;
document.getElementById("errorMessage").innerHTML = message;
const elementErrorMessages = document.getElementsByClassName('error-message');
for(error of json.errors) {
const errorID = error.param + '-error';
document.getElementById(errorID).innerHTML = error.msg;
}
}
})
.catch(error => {

47
server/public/insertPublisher.html
View file

@ -65,6 +65,18 @@
<hr/>
</div>
<div class="row mb-3">
<div class="col"></div>
<div class="col card" id="successMessage"></div>
<div class="col"></div>
</div>
<div class="row mb-3">
<div class="col"></div>
<div class="col card" id="errorMessage"></div>
<div class="col"></div>
</div>
<div id="form">
<div class="container">
@ -78,6 +90,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='name-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Description</label>
@ -89,6 +105,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='description-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col">
<label>Homepage</label>
@ -99,6 +119,10 @@
<div class="col"></div>
</div>
<div class='row'>
<div id='homepage-error' class='col-12 error-message'>&nbsp;</div>
</div>
<div class="row mb-3">
<div class="col-2 align-content-center">
<button id="submitButton" type="submit">Submit</button>
@ -112,12 +136,6 @@
<hr/>
</div>
<div class="row mb-3">
<div class="col"></div>
<div class="col card" id="outputMessage"></div>
<div class="col"></div>
</div>
</div>
@ -134,7 +152,8 @@
<script>
const isEmpty = (obj) => Object.keys(obj).length === 0;
document.getElementById("outputMessage").hidden = true;
document.getElementById("successMessage").hidden = true;
document.getElementById("errorMessage").hidden = true;
document.getElementById('backButton').addEventListener('click', (event) => {
history.back();
@ -173,8 +192,18 @@
.then(({status, json}) => {
if (status === 200) {
let message = "Submission successful!"
document.getElementById('outputMessage').hidden = false;
document.getElementById('outputMessage').innerHTML = message;
document.getElementById('successMessage').hidden = false;
document.getElementById('successMessage').innerHTML = message;
} else if (status === 400) {
let message = "There was a problem with your submission. Please check for errors and try again."
document.getElementById("errorMessage").hidden = false;
document.getElementById("errorMessage").innerHTML = message;
const elementErrorMessages = document.getElementsByClassName('error-message');
for(error of json.errors) {
const errorID = error.param + '-error';
document.getElementById(errorID).innerHTML = error.msg;
}
}
})
.catch(error => {