xfarrow
/
blink
mirror of https://github.com/xfarrow/blink
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

First registering code

This commit is contained in:
xfarrow 2023-10-18 13:03:41 +02:00
parent 3902fd387b
commit 37aa4268b4
5 changed files with 78 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
backend/apis/nodejs/api.js
View File

@ -12,11 +12,14 @@
*/
const express = require('express');
const cors = require('cors');
const api_controller = require('./api_controller.js');
require('dotenv').config();
const app = express();
app.use(express.json()); // Middleware which parses JSON for POST requests
// Enable CORS for all routes
app.use(cors());
app.post('/blinkapi/register', api_controller.registerPerson); // Register a Person
app.post('/blinkapi/login', api_controller.login); // Login
app.get('/blinkapi/person/:id', api_controller.verifyToken, api_controller.getPerson); // Obtain Person's details

1
frontend/html/constants.js Normal file
View File

@ -0,0 +1 @@
const apiUrl = "http://localhost:3000/blinkapi";

6
frontend/html/css/login.css → frontend/html/css/login-register.css
View File

@ -48,7 +48,7 @@ a:active:hover {
padding: 0 60px;
}
input {
input, button {
display: block;
box-sizing: border-box;
width: 100%;
@ -130,7 +130,7 @@ input[type="email"]:valid ~ .validation span:last-child {
top: 0px;
}
input[type="submit"] {
button[type="button"] {
border: none;
display: block;
background-color: #3ca9e2;
@ -146,7 +146,7 @@ input[type="submit"] {
cursor: pointer;
text-align: center;
}
input[type="submit"]:hover {
button[type="button"]:hover {
background-color: #329dd5;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;

4
frontend/html/html/login.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>HTML5 Login Form with validation Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="../css/login.css">
<link rel="stylesheet" href="../css/login-register.css">
</head>
<body>
@ -26,7 +26,7 @@
</p>
</form>
<div id="create-account-wrap">
<p>Not a member? <a href="#">Create Account</a><p>
<p>Not a member? <a href="./register.html">Create Account</a><p>
</div><!--create-account-wrap-->
</div><!--login-form-wrap-->
<!-- partial -->

69
frontend/html/html/register.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 Login Form with validation Example</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> -->
<link rel="stylesheet" href="../css/login-register.css">
<script src=""></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="login-form-wrap">
<h2>Sign Up</h2>
<form id="login-form">
<p>
<input type="text" id="displayname" name="displayname" placeholder="Your name" required><i class="validation"><span></span><span></span></i>
</p>
<p>
<input type="email" id="email" name="email" placeholder="Email Address" required><i class="validation"><span></span><span></span></i>
</p>
<p>
<input type="password" id="password" name="password" placeholder="Password" required><i class="validation"><span></span><span></span></i>
</p>
<p>
<button type="button" onclick="register()">Register</button>
</p>
</form>
<div id="create-account-wrap">
<p>Already a member? <a href="./login.html">Login</a><p>
</div>
</div>
<script>
function register(){
const display_name = document.getElementById("displayname").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
if(!display_name || !email || !password){
return;
}
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ display_name, email, password }),
};
alert(JSON.stringify({ display_name, email, password }));
fetch('http://localhost:3000/blinkapi/register', options)
.then(response => {
if (response.ok) {
alert('You successfully registered an account')
}
})
.catch(err => {
console.error(err);
alert("An error has occurred. Try again later");
});
}
</script>
</body>
</html>