|
|
@ -1,9 +1,12 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="card"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header">Donate</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body"> |
|
|
|
<form method="POST" action> |
|
|
|
<div class="form-group row mb-0"> |
|
|
|
|
|
|
|
<div class="col-12"> |
|
|
|
|
|
|
|
<h1>Donate</h1> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<form method="POST" action="/make-donation"> |
|
|
|
<div class="form-group row"> |
|
|
|
<div class="form-group row"> |
|
|
|
<label for="currency" class="col-md-4 col-form-label text-md-right">Donation currency</label> |
|
|
|
<label for="currency" class="col-md-4 col-form-label text-md-right">Donation currency</label> |
|
|
|
|
|
|
|
|
|
|
@ -30,7 +33,7 @@ |
|
|
|
type="button" |
|
|
|
type="button" |
|
|
|
class="btn btn-block" |
|
|
|
class="btn btn-block" |
|
|
|
:class="{'btn-primary':frequency==frequencyItem.code, 'btn-outline-primary':frequency!=frequencyItem.code}" |
|
|
|
:class="{'btn-primary':frequency==frequencyItem.code, 'btn-outline-primary':frequency!=frequencyItem.code}" |
|
|
|
@click="frequency=frequencyItem.code" |
|
|
|
@click="setFrequency(frequencyItem.code)" |
|
|
|
>{{frequencyItem.name}}</button> |
|
|
|
>{{frequencyItem.name}}</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -97,48 +100,287 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="form-group row"> |
|
|
|
<hr /> |
|
|
|
|
|
|
|
<div class="form-group row mb-0"> |
|
|
|
|
|
|
|
<div class="col-md-8 offset-md-4"> |
|
|
|
|
|
|
|
<h2>Your Info</h2> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label for="first_name" class="col-md-4 col-form-label text-md-right">First Name</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="first_name" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="first_name" |
|
|
|
|
|
|
|
value="John" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label for="last_name" class="col-md-4 col-form-label text-md-right">Last Name</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="last_name" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="last_name" |
|
|
|
|
|
|
|
value="Doe" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<div class="col-md-6 offset-md-4"> |
|
|
|
|
|
|
|
<div class="form-check"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
class="form-check-input" |
|
|
|
|
|
|
|
type="checkbox" |
|
|
|
|
|
|
|
name="show_name" |
|
|
|
|
|
|
|
id="show_name" |
|
|
|
|
|
|
|
value="1" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<label class="form-check-label" for="show_name">Show my name on donors list</label> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label> |
|
|
|
<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label> |
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="col-md-6"> |
|
|
|
<input |
|
|
|
<input |
|
|
|
id="email" |
|
|
|
id="email" |
|
|
|
type="email" |
|
|
|
type="email" |
|
|
|
class="form-control is-invalid" |
|
|
|
class="form-control" |
|
|
|
name="email" |
|
|
|
name="email" |
|
|
|
required |
|
|
|
required |
|
|
|
autocomplete="email" |
|
|
|
autocomplete="email" |
|
|
|
autofocus |
|
|
|
value="john@doe.comi" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<hr /> |
|
|
|
|
|
|
|
<div class="form-group row mb-0"> |
|
|
|
|
|
|
|
<div class="col-md-8 offset-md-4"> |
|
|
|
|
|
|
|
<h2>Credit Card Info</h2> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label |
|
|
|
|
|
|
|
for="card_holder_name" |
|
|
|
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
|
|
|
>Card Holder Name</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="card_holder_name" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="card_holder_name" |
|
|
|
|
|
|
|
value="John Doe" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label for="card_number" class="col-md-4 col-form-label text-md-right">Credit Card Number</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="card_number" |
|
|
|
|
|
|
|
type="tel" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="card_number" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
minlength="15" |
|
|
|
|
|
|
|
maxlength="16" |
|
|
|
|
|
|
|
autocomplete="off" |
|
|
|
|
|
|
|
placeholder="################" |
|
|
|
|
|
|
|
value="5400010000000004" |
|
|
|
|
|
|
|
v-cardformat:restrictNumeric |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label |
|
|
|
|
|
|
|
for="card_expire_month" |
|
|
|
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
|
|
|
>Credit Card Expiration</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-3"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="card_expire_month" |
|
|
|
|
|
|
|
type="tel" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="card_expire_month" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
autocomplete="card_expire_month" |
|
|
|
|
|
|
|
placeholder="MM" |
|
|
|
|
|
|
|
minlength="2" |
|
|
|
|
|
|
|
maxlength="2" |
|
|
|
|
|
|
|
value="12" |
|
|
|
|
|
|
|
v-cardformat:restrictNumeric |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="col-3"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="card_expire_year" |
|
|
|
|
|
|
|
type="tel" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="card_expire_year" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
autocomplete="card_expire_year" |
|
|
|
|
|
|
|
placeholder="YY" |
|
|
|
|
|
|
|
minlength="2" |
|
|
|
|
|
|
|
maxlength="2" |
|
|
|
|
|
|
|
value="30" |
|
|
|
|
|
|
|
v-cardformat:restrictNumeric |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label for="card_cvc" class="col-md-4 col-form-label text-md-right">Credit Card CVC</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-3"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="card_cvc" |
|
|
|
|
|
|
|
type="tel" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="card_cvc" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
autocomplete="card_cvc" |
|
|
|
|
|
|
|
placeholder="***" |
|
|
|
|
|
|
|
minlength="3" |
|
|
|
|
|
|
|
maxlength="4" |
|
|
|
|
|
|
|
value="123" |
|
|
|
|
|
|
|
v-cardformat:restrictNumeric |
|
|
|
/> |
|
|
|
/> |
|
|
|
<span class="invalid-feedback" role="alert"> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<hr /> |
|
|
|
|
|
|
|
<div class="form-group row mb-0"> |
|
|
|
|
|
|
|
<div class="col-md-8 offset-md-4"> |
|
|
|
|
|
|
|
<h2>Billing Address</h2> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label |
|
|
|
|
|
|
|
for="billing_contact_name" |
|
|
|
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
|
|
|
>Contact Name</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="billing_contact_name" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="billing_contact_name" |
|
|
|
|
|
|
|
value="John Doe" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
<strong>Sample error</strong> |
|
|
|
<strong>Sample error</strong> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label for="billing_address" class="col-md-4 col-form-label text-md-right">Address</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="billing_address" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="billing_address" |
|
|
|
|
|
|
|
value="Freedom St. 18/7" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="form-group row"> |
|
|
|
<div class="form-group row"> |
|
|
|
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label> |
|
|
|
<label for="billing_city" class="col-md-4 col-form-label text-md-right">City</label> |
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="col-md-6"> |
|
|
|
<input |
|
|
|
<input |
|
|
|
id="password" |
|
|
|
id="billing_city" |
|
|
|
type="password" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
class="form-control" |
|
|
|
name="password" |
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="billing_city" |
|
|
|
|
|
|
|
value="Istanbul" |
|
|
|
required |
|
|
|
required |
|
|
|
autocomplete="current-password" |
|
|
|
|
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group row"> |
|
|
|
|
|
|
|
<label for="billing_country" class="col-md-4 col-form-label text-md-right">Country</label> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="billing_country" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="billing_country" |
|
|
|
|
|
|
|
value="Turkey" |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="form-group row"> |
|
|
|
<div class="form-group row"> |
|
|
|
<div class="col-md-6 offset-md-4"> |
|
|
|
<label for="billing_zipcode" class="col-md-4 col-form-label text-md-right"> |
|
|
|
<div class="form-check"> |
|
|
|
Zip Code |
|
|
|
<input class="form-check-input" type="checkbox" name="remember" id="remember" /> |
|
|
|
<small>optional</small> |
|
|
|
<label class="form-check-label" for="remember">Remember Me</label> |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-3"> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
id="billing_zipcode" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
class="form-control" |
|
|
|
|
|
|
|
:class="{'is-invalid':1==0}" |
|
|
|
|
|
|
|
name="billing_zipcode" |
|
|
|
|
|
|
|
value |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1==0"> |
|
|
|
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div>--> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group row mb-0"> |
|
|
|
<div class="form-group row mb-0"> |
|
|
|
<div class="col-md-8 offset-md-4"> |
|
|
|
<div class="col-md-8 offset-md-4"> |
|
|
@ -147,6 +389,10 @@ |
|
|
|
<!-- <a class="btn btn-link" href="#">Forgot Your Password?</a> --> |
|
|
|
<!-- <a class="btn btn-link" href="#">Forgot Your Password?</a> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<input type="hidden" name="amount" :value="amount" /> |
|
|
|
|
|
|
|
<input type="hidden" name="frequency" :value="frequency" /> |
|
|
|
|
|
|
|
<input type="hidden" name="currency" :value="currency" /> |
|
|
|
|
|
|
|
<input type="hidden" name="_token" :value="csrfToken" /> |
|
|
|
</form> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -156,6 +402,9 @@ |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
|
|
|
|
card_number: null, |
|
|
|
|
|
|
|
card_expire_month: null, |
|
|
|
|
|
|
|
card_expire_year: null, |
|
|
|
currency: "USD", |
|
|
|
currency: "USD", |
|
|
|
frequency: "monthly", |
|
|
|
frequency: "monthly", |
|
|
|
donationPackage: 4, |
|
|
|
donationPackage: 4, |
|
|
@ -163,7 +412,7 @@ export default { |
|
|
|
currencies: [ |
|
|
|
currencies: [ |
|
|
|
{ name: "USD", code: "USD", symbol: "$" }, |
|
|
|
{ name: "USD", code: "USD", symbol: "$" }, |
|
|
|
{ name: "EUR", code: "EUR", symbol: "€" }, |
|
|
|
{ name: "EUR", code: "EUR", symbol: "€" }, |
|
|
|
{ name: "TRY", code: "TRY", symbol: "₺" } |
|
|
|
{ name: "TRY", code: "TL", symbol: "₺" } |
|
|
|
], |
|
|
|
], |
|
|
|
frequencies: [ |
|
|
|
frequencies: [ |
|
|
|
{ name: "once", code: "once" }, |
|
|
|
{ name: "once", code: "once" }, |
|
|
@ -232,12 +481,26 @@ export default { |
|
|
|
text = text + "/yr"; |
|
|
|
text = text + "/yr"; |
|
|
|
} |
|
|
|
} |
|
|
|
return text; |
|
|
|
return text; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
csrfToken() { |
|
|
|
|
|
|
|
return document |
|
|
|
|
|
|
|
.querySelector('meta[name="csrf-token"]') |
|
|
|
|
|
|
|
.getAttribute("content"); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
|
|
|
|
setFrequency(code) { |
|
|
|
|
|
|
|
this.frequency = code; |
|
|
|
|
|
|
|
this.setAmountByPackage(); |
|
|
|
|
|
|
|
}, |
|
|
|
setDonationPackage(id) { |
|
|
|
setDonationPackage(id) { |
|
|
|
this.donationPackage = id; |
|
|
|
this.donationPackage = id; |
|
|
|
const itemIndex = this.donationPackages.findIndex(item => item.id === id); |
|
|
|
this.setAmountByPackage(); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
setAmountByPackage() { |
|
|
|
|
|
|
|
const itemIndex = this.donationPackages.findIndex( |
|
|
|
|
|
|
|
item => item.id === this.donationPackage |
|
|
|
|
|
|
|
); |
|
|
|
if (itemIndex !== -1) { |
|
|
|
if (itemIndex !== -1) { |
|
|
|
if (this.frequency == "once") { |
|
|
|
if (this.frequency == "once") { |
|
|
|
this.amount = this.donationPackages[itemIndex].once_amount; |
|
|
|
this.amount = this.donationPackages[itemIndex].once_amount; |
|
|
|