davejansen/flask-mongo-api-boilerplate
1
0
Fork 0
mirror of https://github.com/LukePeters/flask-mongo-api-boilerplate.git synced 2026-05-17 15:46:31 +09:00
Code Issues Activity

First push to GitHub

Browse Source
This commit is contained in:
Luke Peters
2019-02-17 17:04:03 -05:00
commit 6d77347505
18 changed files with 751 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/app.css Normal file
View File

@@ -0,0 +1,90 @@
* {
position: relative;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
color: #2C3A47;
background: #f4f4f4;
}
.centered {
text-align: center;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0 0 1em;
}
.app-wrapper {
margin: 0 auto;
padding: 60px 0 120px;
max-width: 400px;
}
.app-panel {
margin: 0 0 60px;
padding: 26px 30px 32px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
background: #ffffff;
}
.input-label {
margin: 0 0 4px;
font-size: 13px;
color: #777777;
display: block;
}
.input-field {
margin: 0 0 24px;
padding: 7px 12px 7px;
width: 100%;
font-size: 16px;
line-height: 1.5;
border: 1px solid #cccccc;
border-radius: 4px;
display: block;
transition: border-color .2s ease;
}
.input-field:focus {
border-color: #2C3A47;
}
.btn {
padding: 10px 20px 11px;
font-size: 16px;
color: #ffffff;
border: none;
border-radius: 4px;
outline: none;
box-shadow: none;
cursor: pointer;
display: inline-block;
background: #2bcbba;
transition: background-color .2s ease;
}
.btn:hover {
background: #10ddc9;
}
.btn[type="submit"] {
margin-top: 6px;
}
.success-message {
padding: 12px 30px 11px;
text-align: center;
color: #044e48;
border-radius: 4px;
display: none;
background: #e0f8f6;
}

71
web/app.js Normal file
View File

@@ -0,0 +1,71 @@
$(function() {
// Add User Submission
var $addUserForm = $("#add-user-form"),
$addUserSuccess = $("#add-user-success");
$addUserForm.on("submit", function(e) {
var data = {
first_name: $addUserForm.find("#first_name").val(),
last_name: $addUserForm.find("#last_name").val(),
email: $addUserForm.find("#email").val(),
password: $addUserForm.find("#password").val(),
};
console.log(data);
$.ajax({
url: "http://localhost:5000/user/",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function(resp) {
console.log(resp);
$addUserForm.hide();
$addUserSuccess.show();
},
error: function(error) {
console.error(error);
alert(error.responseJSON.message)
}
});
e.preventDefault();
});
// User Login Submission
var $loginForm = $("#login-form"),
$loginSuccess = $("#login-success");
$loginForm.on("submit", function(e) {
var data = {
email: $loginForm.find("#email").val(),
password: $loginForm.find("#password").val(),
};
console.log(data);
$.ajax({
url: "http://localhost:5000/user/login/",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function(resp) {
console.log(resp);
$loginForm.hide();
$loginSuccess.show();
},
error: function(error) {
console.error(error);
alert(error.responseJSON.message)
}
});
e.preventDefault();
});
});

76
web/index.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Front-End App</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="app-wrapper">
<!-- Add User Form -->
<div class="app-panel">
<h3 class="centered">Add User</h3>
<form id="add-user-form">
<label for="first_name" class="input-label">First Name</label>
<input type="text" name="first_name" id="first_name" class="input-field" required>
<label for="last_name" class="input-label">Last Name</label>
<input type="text" name="last_name" id="last_name" class="input-field" required>
<label for="email" class="input-label">Email Address</label>
<input type="email" name="email" id="email" class="input-field" required>
<label for="password" class="input-label">Password</label>
<input type="password" name="password" id="password" class="input-field" required>
<div class="centered">
<input type="submit" value="Submit" class="btn">
</div>
</form>
<div id="add-user-success" class="success-message">
User successfully added!
</div>
</div>
<!-- Add User Form -->
<div class="app-panel">
<h3 class="centered">Add User</h3>
<form id="login-form">
<label for="email" class="input-label">Email Address</label>
<input type="email" name="email" id="email" class="input-field" required>
<label for="password" class="input-label">Password</label>
<input type="password" name="password" id="password" class="input-field" required>
<div class="centered">
<input type="submit" value="Submit" class="btn">
</div>
</form>
<div id="login-success" class="success-message">
User successfully authenticated!
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="app.js"></script>
</body>
</html>

2
web/jquery.js vendored Normal file
View File

File diff suppressed because one or more lines are too long