dslak
/
iolovolio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

register form

feature/register
Dslak 4 years ago
parent
2f84f17475
commit
ce7bf0918c
8 changed files with 246 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      api/user_add.php
  2. 106
      components/account/account.html
  3. 76
      components/account/account.js
  4. 20
      components/account/account.scss
  5. 2
      components/header/header.html
  6. 4
      pages/index.ejs
  7. 11
      src/js/index.js
  8. 23
      src/scss/global.scss

36
api/user_add.php
View File

@ -15,21 +15,37 @@ $conn = $databaseService->getConnection();
$data = json_decode(file_get_contents("php://input"));
$query = "INSERT INTO `users`
$query = "SELECT * FROM `users` WHERE email = '".trim($data->email)."'";
$stmt = $conn->prepare($query);
if($stmt->execute()) {
if($stmt->rowCount()) {
http_response_code(400);
echo json_encode(
array(
"status" => 400,
"message" => "User exists"
));
} else {
$query = "INSERT INTO `users`
(`id`, `first_name`, `last_name`, `email`, `phone`, `address`, `city`, `zip_code`, `province`, `password`)
VALUES (NULL, '".trim($data->first_name)."', '".trim($data->last_name)."', '".trim($data->email)."',
'".trim($data->phone)."', '".trim($data->address)."', '".trim($data->city)."',
'".trim($data->zip_code)."', '".trim($data->province)."', '".md5(trim($data->password))."')";
$stmt = $conn->prepare($query);
if($stmt->execute()) {
http_response_code(200);
echo json_encode(
array(
"status" => 200,
"id" => $conn->lastInsertId()
));
$stmt = $conn->prepare($query);
if($stmt->execute()) {
http_response_code(200);
echo json_encode(
array(
"status" => 200,
"id" => $conn->lastInsertId()
));
}
}
} else {
http_response_code(400);
echo json_encode(

106
components/account/account.html
View File

@ -50,28 +50,96 @@
}
?>
<div class="content col-12 col-md-8 mr-auto order-1 order-md-0">
<?php
if(!isset($_SESSION['AUTH'])) {
?>
<form class="login-form" action="/account/ordini" method="POST">
<div class="row">
<div class="col-12 col-md-6">
<span class="label">E-mail</span>
<input type="email" name="login_usr" class="input-text">
</div>
<div class="col-12 col-md-6">
<span class="label">Password</span>
<input type="password" name="login_pwd" class="input-text">
</div>
<div class="col-12 mt-4">
<button class="button button-brown button-big ml-auto">Accedi</button>
<div class="content col-12">
<div class="row">
<div class="col-12 col-md-4 mr-auto mb-5">
<span class="title">Sei già registrato?</span>
<form class="login-form" action="/account/ordini" method="POST">
<div class="row">
<div class="col-12">
<span class="label">E-mail</span>
<input type="email" name="login_usr" class="input-text">
</div>
<div class="col-12">
<span class="label">Password</span>
<input type="password" name="login_pwd" class="input-text">
</div>
<div class="col-12 mt-4">
<button class="button button-brown button-big ml-auto">Accedi</button>
</div>
</div>
</form>
</div>
<div class="col-12 col-md-7">
<span class="title">Non sei registrato?</span>
<div class="row new-user-form">
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">Nome *</span>
<input type="text" name="first_name" class="input input-text" required>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">Cognome *</span>
<input type="text" name="last_name" class="input input-text" required>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">E-mail *</span>
<input type="email" name="email" class="input input-text" required>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">Telefono</span>
<input type="tel" name="phone" class="input input-text">
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">Indirizzo *</span>
<input type="text" name="address" class="input input-text" required>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">Città *</span>
<input type="text" name="city" class="input input-text" required>
</div>
<div class="col-12 col-md-4 pr-2 pr-md-4 mr-auto">
<span class="label">CAP *</span>
<input type="text" name="zip_code" class="input input-text" required>
</div>
<div class="col-12 col-md-4 pr-2 pr-md-4 mr-auto">
<span class="label">Provincia *</span>
<select name="province" class="input input-select" required>
<?php
foreach($PROV as $k => $p) {
echo "<option value=\"".$k."\">".$p."</option>";
}
?>
</select>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">Scegli una password *</span>
<input type="password" name="password" class="input input-text" required>
<span class="font-10">deve essere di almeno 8 caratteri contenere almeno un numero, un carattere maiuscolo, uno minuscolo, sono consentiti i seguenti caratteri speciali: @$!%*#?&^+-</span>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">Conferma password *</span>
<input type="password" name="password_confirm" class="input input-text" required>
</div>
<div class="col-12 mt-4">
<button class="register button button-brown button-big ml-auto">Registrati</button>
</div>
</div>
</div>
</form>
</div>
</div>
<?php
} else {
?>
<div class="content col-12 col-md-8 mr-auto order-1 order-md-0">
<?php
if($getQ[1] == 'indirizzo') {
?>
<form method="post">
@ -201,7 +269,8 @@
$p = mysqli_fetch_array($qp);
?>
<div class="row no-gutters detail-row">
<div class="col-12">Prodotto: <?= $p['type'].' - '.$p['name'];?></div>
<div class="col-12 row-title"><?= $p['name'];?></div>
<!--<div class="col-12"><?= $p['type'];?></div>-->
<div class="col-12">Quantità: <?= $item->qty;?></div>
<div class="col-12">Prezzo: <?= money_format('%.2n', $item->price);?></div>
</div>
@ -211,13 +280,8 @@
</div>
</div>
<?php
}
?>
<?php
}
}
?>

76
components/account/account.js
View File

@ -7,6 +7,8 @@ $(document).ready( () => {
const pwdform = component.find('#pwdform')
const updatePassword = pwdform.find('.update-password')
const register = component.find('.register')
const registerForm = component.find('.new-user-form')
const orders = component.find('.order-row')
@ -35,6 +37,80 @@ $(document).ready( () => {
checkForm()
})
register.off('.click').on('click.click', () => {
const inputs = registerForm.find('.input')
const passwords = registerForm.find('.input[type="password"]')
let errors = 0
inputs.each( (i,e) => {
const input = $(e)
const type = input.prop('type')
const required = input.prop('required')
if(required) {
switch(type) {
case 'text':
case 'select-one':
if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(input.prop('name')) > -1) {
} else {
if(!input.val().length) {
input.addClass('error')
errors++
} else { input.removeClass('error') }
}
break;
case 'email':
if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
.test(input.val())) {
input.addClass('error')
errors++
} else { input.removeClass('error') }
break;
case 'password':
if(!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&^+-])[A-Za-z\d@$!%*#?&^+-]{8,}$/
.test(input.val())) {
input.addClass('error')
errors++
} else { input.removeClass('error') }
break;
case 'checkbox':
if(!input.is(':checked')) {
input.closest('.checkbox').addClass('error')
errors++
} else {
input.closest('.checkbox').removeClass('error')
}
break;
}
}
})
if(passwords[0].value != passwords[1].value) {
$(passwords[1]).addClass('error')
errors++
} else {
$(passwords[1]).removeClass('error')
}
if(!errors) {
let body = {}
inputs.each( (i,e) => {
const input = $(e)
const type = input.prop('type')
const name = input.prop('name')
body[name] = input.val()
})
Apis.addUser(body).then( (data) => {
Apis.notification("Account aggiunto correttamente!")
}).catch( (error) => {
console.error(error)
Apis.notification("ATTENZIONE: L'utente che stai cercando di inserire è già presente nel database")
})
}
})
const checkForm = () => {
console.log('checkForm')
const inputs = component.find('.input')

20
components/account/account.scss
View File

@ -81,6 +81,11 @@
border-bottom: 1px solid $black-alpha;
padding: 10px 0;
.row-title {
@include font-style($font-serif, 'bold', $font-18);
color: $brown;
}
&:last-of-type {
border: none;
}
@ -88,6 +93,10 @@
}
}
.new-user-form {
}
}
.sections {
@ -119,6 +128,17 @@
}
}
@media (min-width: map-get($grid-breakpoints, 'md')) {
.component-account {
.content {
.new-user-form {
//border-left: 1px dotted $gray;
}
}
}
}
@keyframes blinker {
0% { opacity: 1; }
25% { opacity: .5; }

2
components/header/header.html
View File

@ -18,7 +18,7 @@
if($_SESSION['AUTH']) {
echo $_SESSION['AUTH']['first_name'].' '.$_SESSION['AUTH']['last_name'];
} else {
echo "Log-in";
echo "Area utente";
}
?>
</span>

4
pages/index.ejs
View File

@ -66,5 +66,9 @@
<img src="/images/logoHeader.png" class="spinner">
</div>
<div class="notification">
aaa
</div>
</body>
</html>

11
src/js/index.js
View File

@ -180,3 +180,14 @@ window.Apis.saveOrder = (profile, cart, token, uid, total, paid = false) => {
})
})
}
window.Apis.notification = (text) => {
const notification = $('.notification')
notification.text(text).fadeIn(10, () => {
setTimeout(() => {
notification.fadeOut(300)
},5000)
})
}

23
src/scss/global.scss
View File

@ -27,6 +27,21 @@ body {
animation: spinner 2s linear infinite;
}
}
.notification {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px 20px;
@include font-style($font-sans, 'regular-italic', $font-16);
color: $white;
text-align: center;
background: $olive-dark;
animation: blink 3s linear;
z-index: 200;
}
}
@ -164,6 +179,14 @@ button {
100% {opacity: 1;}
}
@keyframes blink {
0% { opacity: 1; }
25% { opacity: .6; }
50% { opacity: 1; }
75% { opacity: .6; }
100% { opacity: 1; }
}
.debug-border {
border: 1px solid red;
}

Write Preview
Loading…
Cancel
Save