|
|
|
|
@ -4,12 +4,17 @@ |
|
|
|
|
<div class="form-group row mb-0"> |
|
|
|
|
<div class="col-12"> |
|
|
|
|
<h1>Donate</h1> |
|
|
|
|
<p>Özgür Yazılım Derneği is a registered association in İstanbul, Turkey with the number 34-242-113</p> |
|
|
|
|
<p> |
|
|
|
|
Özgür Yazılım Derneği is a registered association in İstanbul, |
|
|
|
|
Turkey with the number 34-242-113 |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<form method="POST" action="/make-donation"> |
|
|
|
|
<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 |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-8"> |
|
|
|
|
<div class="row"> |
|
|
|
|
@ -21,15 +26,22 @@ |
|
|
|
|
<button |
|
|
|
|
type="button" |
|
|
|
|
class="btn btn-block mb-2" |
|
|
|
|
:class="{'btn-primary':currency==currencyItem.code, 'btn-outline-primary':currency!=currencyItem.code}" |
|
|
|
|
:class="{ |
|
|
|
|
'btn-primary': currency == currencyItem.code, |
|
|
|
|
'btn-outline-primary': currency != currencyItem.code, |
|
|
|
|
}" |
|
|
|
|
@click="currency = currencyItem.code" |
|
|
|
|
>{{currencyItem.symbol}} | {{currencyItem.name}}</button> |
|
|
|
|
> |
|
|
|
|
{{ currencyItem.symbol }} | {{ currencyItem.name }} |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="frequency" class="col-md-4 col-form-label text-md-right">Donation frequency</label> |
|
|
|
|
<label for="frequency" class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Donation frequency</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-8"> |
|
|
|
|
<div class="row"> |
|
|
|
|
@ -41,15 +53,24 @@ |
|
|
|
|
<button |
|
|
|
|
type="button" |
|
|
|
|
class="btn btn-block mb-2" |
|
|
|
|
: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="setFrequency(frequencyItem.code)" |
|
|
|
|
>{{frequencyItem.name}}</button> |
|
|
|
|
> |
|
|
|
|
{{ frequencyItem.name }} |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="donationPackage" class="col-md-4 col-form-label text-md-right">Donation amount</label> |
|
|
|
|
<label |
|
|
|
|
for="donationPackage" |
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Donation amount</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-8"> |
|
|
|
|
<div class="row"> |
|
|
|
|
@ -61,15 +82,23 @@ |
|
|
|
|
<button |
|
|
|
|
type="button" |
|
|
|
|
class="btn btn-block mb-2" |
|
|
|
|
:class="{'btn-primary':donationPackage==donationPackageItem.id, 'btn-outline-primary':donationPackage!=donationPackageItem.id}" |
|
|
|
|
:class="{ |
|
|
|
|
'btn-primary': donationPackage == donationPackageItem.id, |
|
|
|
|
'btn-outline-primary': |
|
|
|
|
donationPackage != donationPackageItem.id, |
|
|
|
|
}" |
|
|
|
|
@click="setDonationPackage(donationPackageItem.id)" |
|
|
|
|
> |
|
|
|
|
<span>{{ activeCurrency.symbol }}</span> |
|
|
|
|
<span v-if="frequency=='once'">{{donationPackageItem.once_amount}}</span> |
|
|
|
|
<span v-else-if="frequency=='monthly'">{{donationPackageItem.monthly_amount}} /mo</span> |
|
|
|
|
<span |
|
|
|
|
v-else-if="frequency=='annually'" |
|
|
|
|
>{{donationPackageItem.annually_amount}} /yr</span> |
|
|
|
|
<span v-if="frequency == 'once'">{{ |
|
|
|
|
donationPackageItem.once_amount |
|
|
|
|
}}</span> |
|
|
|
|
<span v-else-if="frequency == 'monthly'" |
|
|
|
|
>{{ donationPackageItem.monthly_amount }} /mo</span |
|
|
|
|
> |
|
|
|
|
<span v-else-if="frequency == 'annually'" |
|
|
|
|
>{{ donationPackageItem.annually_amount }} /yr</span |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<br /> |
|
|
|
|
<small>{{ donationPackageItem.name }}</small> |
|
|
|
|
@ -79,7 +108,10 @@ |
|
|
|
|
<button |
|
|
|
|
type="button" |
|
|
|
|
class="btn btn-block mb-2" |
|
|
|
|
:class="{'btn-primary':donationPackage==null, 'btn-outline-primary':donationPackage!=null}" |
|
|
|
|
:class="{ |
|
|
|
|
'btn-primary': donationPackage == null, |
|
|
|
|
'btn-outline-primary': donationPackage != null, |
|
|
|
|
}" |
|
|
|
|
@click="setDonationPackage(null)" |
|
|
|
|
> |
|
|
|
|
<small>other</small> |
|
|
|
|
@ -87,7 +119,9 @@ |
|
|
|
|
|
|
|
|
|
<div class="input-group mb-3"> |
|
|
|
|
<div class="input-group-prepend"> |
|
|
|
|
<span class="input-group-text">{{activeCurrency.symbol}}</span> |
|
|
|
|
<span class="input-group-text">{{ |
|
|
|
|
activeCurrency.symbol |
|
|
|
|
}}</span> |
|
|
|
|
</div> |
|
|
|
|
<input |
|
|
|
|
type="number" |
|
|
|
|
@ -100,8 +134,16 @@ |
|
|
|
|
class="input-group-append" |
|
|
|
|
v-if="frequency == 'monthly' || frequency == 'annually'" |
|
|
|
|
> |
|
|
|
|
<span v-if="frequency=='monthly'" class="input-group-text">/mo</span> |
|
|
|
|
<span v-else-if="frequency=='annually'" class="input-group-text">/yr</span> |
|
|
|
|
<span |
|
|
|
|
v-if="frequency == 'monthly'" |
|
|
|
|
class="input-group-text" |
|
|
|
|
>/mo</span |
|
|
|
|
> |
|
|
|
|
<span |
|
|
|
|
v-else-if="frequency == 'annually'" |
|
|
|
|
class="input-group-text" |
|
|
|
|
>/yr</span |
|
|
|
|
> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</button> |
|
|
|
|
@ -116,7 +158,9 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="first_name" class="col-md-4 col-form-label text-md-right">First Name</label> |
|
|
|
|
<label for="first_name" class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>First Name</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
<input |
|
|
|
|
@ -133,7 +177,9 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="last_name" class="col-md-4 col-form-label text-md-right">Last Name</label> |
|
|
|
|
<label for="last_name" class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Last Name</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
<input |
|
|
|
|
@ -159,12 +205,16 @@ |
|
|
|
|
id="show_name" |
|
|
|
|
value="1" |
|
|
|
|
/> |
|
|
|
|
<label class="form-check-label" for="show_name">Show my name on donors list</label> |
|
|
|
|
<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"> |
|
|
|
|
<input |
|
|
|
|
@ -187,7 +237,8 @@ |
|
|
|
|
<label |
|
|
|
|
for="card_holder_name" |
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Card Holder Name</label> |
|
|
|
|
>Card Holder Name</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
<input |
|
|
|
|
@ -204,7 +255,9 @@ |
|
|
|
|
</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> |
|
|
|
|
<label for="card_number" class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Credit Card Number</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
<input |
|
|
|
|
@ -229,7 +282,8 @@ |
|
|
|
|
<label |
|
|
|
|
for="card_expire_month" |
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Credit Card Expiration</label> |
|
|
|
|
>Credit Card Expiration</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-3"> |
|
|
|
|
<input |
|
|
|
|
@ -263,7 +317,9 @@ |
|
|
|
|
</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> |
|
|
|
|
<label for="card_cvc" class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Credit Card CVC</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-3"> |
|
|
|
|
<input |
|
|
|
|
@ -291,7 +347,8 @@ |
|
|
|
|
<label |
|
|
|
|
for="billing_contact_name" |
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Contact Name</label> |
|
|
|
|
>Contact Name</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
<input |
|
|
|
|
@ -308,7 +365,11 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="billing_address" class="col-md-4 col-form-label text-md-right">Address</label> |
|
|
|
|
<label |
|
|
|
|
for="billing_address" |
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Address</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
<input |
|
|
|
|
@ -325,7 +386,11 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="billing_city" class="col-md-4 col-form-label text-md-right">City</label> |
|
|
|
|
<label |
|
|
|
|
for="billing_city" |
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>City</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
<input |
|
|
|
|
@ -342,7 +407,11 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="billing_country" class="col-md-4 col-form-label text-md-right">Country</label> |
|
|
|
|
<label |
|
|
|
|
for="billing_country" |
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
>Country</label |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
|
<input |
|
|
|
|
@ -359,7 +428,10 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="billing_zipcode" class="col-md-4 col-form-label text-md-right"> |
|
|
|
|
<label |
|
|
|
|
for="billing_zipcode" |
|
|
|
|
class="col-md-4 col-form-label text-md-right" |
|
|
|
|
> |
|
|
|
|
Zip Code |
|
|
|
|
<small>optional</small> |
|
|
|
|
</label> |
|
|
|
|
@ -377,10 +449,31 @@ |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row"> |
|
|
|
|
<label for="captcha" class="col-md-4 col-form-label text-md-right"> |
|
|
|
|
<img :src="captcha_src" /> |
|
|
|
|
</label> |
|
|
|
|
|
|
|
|
|
<div class="col-md-3"> |
|
|
|
|
<input |
|
|
|
|
id="captcha" |
|
|
|
|
type="text" |
|
|
|
|
placeholder="Captcha" |
|
|
|
|
class="form-control" |
|
|
|
|
:class="{ 'is-invalid': 1 == 0 }" |
|
|
|
|
name="captcha" |
|
|
|
|
/> |
|
|
|
|
<input type="hidden" name="captcha_key" :value="captcha_key" /> |
|
|
|
|
<span class="invalid-feedback" role="alert" v-if="1 == 0"> |
|
|
|
|
<strong>Sample error</strong> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group row mb-0"> |
|
|
|
|
<div class="col-md-8 offset-md-4"> |
|
|
|
|
<button type="submit" class="btn btn-primary btn-lg">Donate {{amountText}}</button> |
|
|
|
|
<button type="submit" class="btn btn-primary btn-lg"> |
|
|
|
|
Donate {{ amountText }} |
|
|
|
|
</button> |
|
|
|
|
|
|
|
|
|
<!-- <a class="btn btn-link" href="#">Forgot Your Password?</a> --> |
|
|
|
|
</div> |
|
|
|
|
@ -398,6 +491,8 @@ |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
captcha_src: null, |
|
|
|
|
captcha_key: null, |
|
|
|
|
card_number: null, |
|
|
|
|
card_expire_month: null, |
|
|
|
|
card_expire_year: null, |
|
|
|
|
@ -408,12 +503,12 @@ export default { |
|
|
|
|
currencies: [ |
|
|
|
|
{ name: "USD", code: "USD", symbol: "$" }, |
|
|
|
|
{ name: "EUR", code: "EUR", symbol: "€" }, |
|
|
|
|
{ name: "TRY", code: "TL", symbol: "₺" } |
|
|
|
|
{ name: "TRY", code: "TL", symbol: "₺" }, |
|
|
|
|
], |
|
|
|
|
frequencies: [ |
|
|
|
|
{ name: "once", code: "once" }, |
|
|
|
|
{ name: "monthly", code: "monthly" }, |
|
|
|
|
{ name: "annually", code: "annually" } |
|
|
|
|
{ name: "annually", code: "annually" }, |
|
|
|
|
], |
|
|
|
|
donationPackages: [ |
|
|
|
|
{ |
|
|
|
|
@ -421,50 +516,50 @@ export default { |
|
|
|
|
name: "Super Major Donor", |
|
|
|
|
once_amount: 2500, |
|
|
|
|
monthly_amount: 250, |
|
|
|
|
annually_amount: 2500 |
|
|
|
|
annually_amount: 2500, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
name: "Major Donor", |
|
|
|
|
once_amount: 1000, |
|
|
|
|
monthly_amount: 100, |
|
|
|
|
annually_amount: 1000 |
|
|
|
|
annually_amount: 1000, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
name: "Rare Earths Level", |
|
|
|
|
once_amount: 500, |
|
|
|
|
monthly_amount: 50, |
|
|
|
|
annually_amount: 500 |
|
|
|
|
annually_amount: 500, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
|
name: "Titanium Level", |
|
|
|
|
once_amount: 250, |
|
|
|
|
monthly_amount: 25, |
|
|
|
|
annually_amount: 250 |
|
|
|
|
annually_amount: 250, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 5, |
|
|
|
|
name: "Gold Level", |
|
|
|
|
once_amount: 100, |
|
|
|
|
monthly_amount: 20, |
|
|
|
|
annually_amount: 100 |
|
|
|
|
annually_amount: 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 6, |
|
|
|
|
name: "Copper Level", |
|
|
|
|
once_amount: 50, |
|
|
|
|
monthly_amount: 10, |
|
|
|
|
annually_amount: 50 |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
annually_amount: 50, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
activeCurrency() { |
|
|
|
|
const itemIndex = this.currencies.findIndex( |
|
|
|
|
item => item.code === this.currency |
|
|
|
|
(item) => item.code === this.currency |
|
|
|
|
); |
|
|
|
|
if (itemIndex === -1) return false; |
|
|
|
|
return this.currencies[itemIndex]; |
|
|
|
|
@ -482,7 +577,7 @@ export default { |
|
|
|
|
return document |
|
|
|
|
.querySelector('meta[name="csrf-token"]') |
|
|
|
|
.getAttribute("content"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
setFrequency(code) { |
|
|
|
|
@ -495,7 +590,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
setAmountByPackage() { |
|
|
|
|
const itemIndex = this.donationPackages.findIndex( |
|
|
|
|
item => item.id === this.donationPackage |
|
|
|
|
(item) => item.id === this.donationPackage |
|
|
|
|
); |
|
|
|
|
if (itemIndex !== -1) { |
|
|
|
|
if (this.frequency == "once") { |
|
|
|
|
@ -514,14 +609,20 @@ export default { |
|
|
|
|
// 46 is dot |
|
|
|
|
$event.preventDefault(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
amount() { |
|
|
|
|
if (this.amount < 1) { |
|
|
|
|
this.amount = 5; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
axios.get("/captcha/api/math").then((response) => { |
|
|
|
|
this.captcha_src = response.data.img; |
|
|
|
|
this.captcha_key = response.data.key; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
yunusemrebaloglu
yunusemre