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

add user login

feature/cart
Dslak 4 years ago
parent
fc20369cef
commit
63fc31de49
6 changed files with 154 additions and 17 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. 94
      components/checkout/checkout.html
  2. 28
      components/checkout/checkout.js
  3. 11
      components/checkout/checkout.scss
  4. 4
      pages/index.ejs
  5. 8
      src/js/index.js
  6. 26
      src/scss/global.scss

94
components/checkout/checkout.html
View File

@ -5,6 +5,24 @@
if(count($_SESSION['CART']) <= 0) {
header("location: /acquistare");
}
if($_POST['login_usr'] && $_POST['login_pwd']) {
$q = mysqli_query($conn, "SELECT * FROM users WHERE email = '".trim($_POST['login_usr'])."' AND
password = '".md5(trim($_POST['login_pwd']))."'");
$r = mysqli_fetch_array($q);
if(mysqli_num_rows($q)) {
$_SESSION['AUTH'] = $r;
} else {
unset($_SESSION['AUTH']);
}
}
if($getQ[1] == 'logout') {
unset($_SESSION['AUTH']);
header("location: /checkout");
}
?>
@ -14,55 +32,101 @@
<div class="col-12 col-md-8 pb-5">
<span class="title">Dettagli fatturazione</span>
<span class="subtitle">Sei già nostro cliente? <span class="toggle-login">Accedi</span></span>
<span class="subtitle">
<span class="question <?= isset($_SESSION['AUTH']) ? 'd-none' : '';?>">Sei già nostro cliente?</span>
<span class="toggle-login <?= isset($_SESSION['AUTH']) ? 'd-none' : '';?>">Accedi</span>
</span>
<form class="login-form <?= isset($_SESSION['AUTH']) ? 'd-none' :'';?>" action="/checkout" 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>
</div>
</form>
<div class="row">
<div class="row new-user-form <?= isset($_SESSION['AUTH']) ? 'logged' :'';?>">
<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>
<input type="text" name="first_name" class="input input-text"
value="<?= $_SESSION['AUTH']['first_name'];?>"
<?= isset($_SESSION['AUTH']) ? 'disabled' : '';?> 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>
<input type="text" name="last_name" class="input input-text"
value="<?= $_SESSION['AUTH']['last_name'];?>"
<?= isset($_SESSION['AUTH']) ? 'disabled' : '';?> 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>
<input type="email" name="email" class="input input-text"
value="<?= $_SESSION['AUTH']['email'];?>"
<?= isset($_SESSION['AUTH']) ? 'disabled' : '';?> 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">
<input type="tel" name="phone" class="input input-text"
value="<?= $_SESSION['AUTH']['phone'];?>"
<?= isset($_SESSION['AUTH']) ? 'disabled' : '';?>>
</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>
<input type="text" name="address" class="input input-text"
value="<?= $_SESSION['AUTH']['address'];?>"
<?= isset($_SESSION['AUTH']) ? 'disabled' : '';?> 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>
<input type="text" name="city" class="input input-text"
value="<?= $_SESSION['AUTH']['city'];?>"
<?= isset($_SESSION['AUTH']) ? 'disabled' : '';?> 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>
<input type="text" name="zip_code" class="input input-text"
value="<?= $_SESSION['AUTH']['zip_code'];?>"
<?= isset($_SESSION['AUTH']) ? 'disabled' : '';?> 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
if(isset($_SESSION['AUTH'])) {
echo "<input type=\"text\" name=\"province\" class=\"input input-text\"
value=\"".$_SESSION['AUTH']['province']."\" disabled required>";
} else {
?>
<select name="province" class="input input-select"
<?= isset($_SESSION['AUTH']) ? 'disabled' : '';?> required>
<?php
foreach($PROV as $k => $p) {
echo "<option value=\"".$k."\">".$p."</option>";
echo "<option value=\"".$k."\" ".($_SESSION['AUTH']['province'] == $k ? 'selected' : '').">".
$p."</option>";
}
?>
</select>
<?php
}
?>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<div class="col-12 col-md-6 pr-2 pr-md-4 <?= isset($_SESSION['AUTH']) ? 'd-none' : '';?>">
<span class="label">Scegli una password *</span>
<input type="password" name="password" class="input input-text" required>
<input type="password" name="password" class="input input-text"
<?= !isset($_SESSION['AUTH']) ? 'required' : '';?>>
<span class="font-10">deve essere di almeno 8 caratteri contenere almeno un numero, un carattere maiuscolo, uno minuscolo</span>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<div class="col-12 col-md-6 pr-2 pr-md-4 <?= isset($_SESSION['AUTH']) ? 'd-none' : '';?>">
<span class="label">Conferma password *</span>
<input type="password" name="password_confirm" class="input input-text" required>
<input type="password" name="password_confirm" class="input input-text"
<?= !isset($_SESSION['AUTH']) ? 'required' : '';?>>
</div>
<div class="col-12 col-md-6 pr-2 pr-md-4">
<span class="label">Vuoi spedire ad un indirizzo diverso?</span>

28
components/checkout/checkout.js
View File

@ -8,9 +8,12 @@ $(document).ready( () => {
const place = component.find('.place-order')
const extraAddress = component.find('.different-address')
const extraAddressRadio = component.find('input[name="other_address"]')
const toggleLogin = $('.toggle-login')
const toggleLogin = component.find('.toggle-login')
const toggleQuestion = component.find('.question')
const loginForm = component.find('.login-form')
const newUserForm = component.find('.new-user-form')
let hasExtraAddress = false
let isNewUser = true
let isNewUser = newUserForm.hasClass('logged') ? false : true
place.off('.click').on('click.click', () => {
checkForm()
@ -18,6 +21,25 @@ $(document).ready( () => {
toggleLogin.off('.click').on('click.click', () => {
isNewUser = !isNewUser
if(isNewUser) {
toggleLogin.html('Accedi')
toggleQuestion.html('Sei già nostro cliente?')
loginForm.fadeOut( () => {
newUserForm.slideDown({
start: () => { newUserForm.css({ display: "flex" }) }
})
})
} else {
toggleLogin.html('Registrati')
toggleQuestion.html('Non sei nostro cliente?')
newUserForm.fadeOut( () => {
loginForm.slideDown({
start: () => { loginForm.css({ display: "flex" }) }
})
})
}
})
extraAddressRadio.off('.click').on('click.click', (e) => {
@ -116,6 +138,8 @@ $(document).ready( () => {
const placeOrder = (profile, isNewUser) => {
window.Spinner('show')
Apis.getCart().then( (data) => {
const cartItems = data.cart
let amount = 0

11
components/checkout/checkout.scss
View File

@ -23,6 +23,13 @@
cursor: pointer;
}
.login-form {
display: none;
padding-top: 50px;
width: 80%;
margin: auto;
}
.label {
display: block;
@include font-style($font-sans, 700, $font-16);
@ -65,6 +72,10 @@
&.error {
border: 1px solid $red;
}
&:disabled {
opacity: .5;
}
}
.different-address {

4
pages/index.ejs
View File

@ -44,5 +44,9 @@
${require('../components/footer/footer.html')}
<div class="loader">
<img src="/images/logoHeader.png" class="spinner">
</div>
</body>
</html>

8
src/js/index.js
View File

@ -26,6 +26,14 @@ window.siteUrl = ENV.SITE_URL
window.Apis = window.Apis || {}
window.Spinner = (action = 'show') => {
if(action == 'hide') {
$('body .loader').fadeOut()
} else {
$('body .loader').fadeIn()
}
}
window.Apis.addToCart = (pid, price, qty) => {
return new Promise((resolve, reject) => {
$.post(apiUrl + `/cart_add.php?buster=${new Date().getTime()}`, {pid: pid, price: price, qty: qty}).done( (data) => {

26
src/scss/global.scss
View File

@ -7,6 +7,26 @@ body {
background: $light-gray;
color: $dark-gray;
overflow-x: hidden;
.loader {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
z-index: 200;
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
animation: spinner 2s linear infinite;
}
}
}
@ -138,6 +158,12 @@ button {
}
@keyframes spinner {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}
.debug-border {
border: 1px solid red;
}

Write Preview
Loading…
Cancel
Save