You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
628 lines
19 KiB
628 lines
19 KiB
<template>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<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>
|
|
</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
|
|
>
|
|
|
|
<div class="col-md-8">
|
|
<div class="row">
|
|
<div
|
|
class="col-6 col-md-4"
|
|
v-for="currencyItem in currencies"
|
|
:key="currencyItem.code"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-block mb-2"
|
|
:class="{
|
|
'btn-primary': currency == currencyItem.code,
|
|
'btn-outline-primary': currency != currencyItem.code,
|
|
}"
|
|
@click="currency = currencyItem.code"
|
|
>
|
|
{{ 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
|
|
>
|
|
|
|
<div class="col-md-8">
|
|
<div class="row">
|
|
<div
|
|
class="col-6 col-md-4"
|
|
v-for="frequencyItem in frequencies"
|
|
:key="frequencyItem.code"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-block mb-2"
|
|
:class="{
|
|
'btn-primary': frequency == frequencyItem.code,
|
|
'btn-outline-primary': frequency != frequencyItem.code,
|
|
}"
|
|
@click="setFrequency(frequencyItem.code)"
|
|
>
|
|
{{ 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
|
|
>
|
|
|
|
<div class="col-md-8">
|
|
<div class="row">
|
|
<div
|
|
class="col-6"
|
|
v-for="donationPackageItem in donationPackages"
|
|
:key="donationPackageItem.id"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-block mb-2"
|
|
: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
|
|
>
|
|
|
|
<br />
|
|
<small>{{ donationPackageItem.name }}</small>
|
|
</button>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<button
|
|
type="button"
|
|
class="btn btn-block mb-2"
|
|
:class="{
|
|
'btn-primary': donationPackage == null,
|
|
'btn-outline-primary': donationPackage != null,
|
|
}"
|
|
@click="setDonationPackage(null)"
|
|
>
|
|
<small>other</small>
|
|
<br />
|
|
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">{{
|
|
activeCurrency.symbol
|
|
}}</span>
|
|
</div>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
aria-label="Amount"
|
|
v-model.number="amount"
|
|
@keypress="onlyNumber"
|
|
/>
|
|
<div
|
|
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
|
|
>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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"
|
|
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"
|
|
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
|
|
>
|
|
|
|
<div class="col-md-6">
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
class="form-control"
|
|
name="email"
|
|
required
|
|
autocomplete="email"
|
|
/>
|
|
</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"
|
|
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="################"
|
|
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"
|
|
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"
|
|
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-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"
|
|
v-cardformat:restrictNumeric
|
|
/>
|
|
</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"
|
|
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="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"
|
|
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="billing_city"
|
|
class="col-md-4 col-form-label text-md-right"
|
|
>City</label
|
|
>
|
|
|
|
<div class="col-md-6">
|
|
<input
|
|
id="billing_city"
|
|
type="text"
|
|
class="form-control"
|
|
:class="{ 'is-invalid': 1 == 0 }"
|
|
name="billing_city"
|
|
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="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"
|
|
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="billing_zipcode"
|
|
class="col-md-4 col-form-label text-md-right"
|
|
>
|
|
Zip Code
|
|
<small>optional</small>
|
|
</label>
|
|
|
|
<div class="col-md-3">
|
|
<input
|
|
id="billing_zipcode"
|
|
type="text"
|
|
class="form-control"
|
|
:class="{ 'is-invalid': 1 == 0 }"
|
|
name="billing_zipcode"
|
|
/>
|
|
<span class="invalid-feedback" role="alert" v-if="1 == 0">
|
|
<strong>Sample error</strong>
|
|
</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>
|
|
|
|
<!-- <a class="btn btn-link" href="#">Forgot Your Password?</a> -->
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
captcha_src: null,
|
|
captcha_key: null,
|
|
card_number: null,
|
|
card_expire_month: null,
|
|
card_expire_year: null,
|
|
currency: "USD",
|
|
frequency: "monthly",
|
|
donationPackage: 4,
|
|
amount: 25,
|
|
currencies: [
|
|
{ name: "USD", code: "USD", symbol: "$" },
|
|
{ name: "EUR", code: "EUR", symbol: "€" },
|
|
{ name: "TRY", code: "TL", symbol: "₺" },
|
|
],
|
|
frequencies: [
|
|
{ name: "once", code: "once" },
|
|
{ name: "monthly", code: "monthly" },
|
|
{ name: "annually", code: "annually" },
|
|
],
|
|
donationPackages: [
|
|
{
|
|
id: 1,
|
|
name: "Super Major Donor",
|
|
once_amount: 2500,
|
|
monthly_amount: 250,
|
|
annually_amount: 2500,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Major Donor",
|
|
once_amount: 1000,
|
|
monthly_amount: 100,
|
|
annually_amount: 1000,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Rare Earths Level",
|
|
once_amount: 500,
|
|
monthly_amount: 50,
|
|
annually_amount: 500,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Titanium Level",
|
|
once_amount: 250,
|
|
monthly_amount: 25,
|
|
annually_amount: 250,
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "Gold Level",
|
|
once_amount: 100,
|
|
monthly_amount: 20,
|
|
annually_amount: 100,
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "Copper Level",
|
|
once_amount: 50,
|
|
monthly_amount: 10,
|
|
annually_amount: 50,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
activeCurrency() {
|
|
const itemIndex = this.currencies.findIndex(
|
|
(item) => item.code === this.currency
|
|
);
|
|
if (itemIndex === -1) return false;
|
|
return this.currencies[itemIndex];
|
|
},
|
|
amountText() {
|
|
var text = this.activeCurrency.symbol + this.amount;
|
|
if (this.frequency == "monthly") {
|
|
text = text + "/mo";
|
|
} else if (this.frequency == "annually") {
|
|
text = text + "/yr";
|
|
}
|
|
return text;
|
|
},
|
|
csrfToken() {
|
|
return document
|
|
.querySelector('meta[name="csrf-token"]')
|
|
.getAttribute("content");
|
|
},
|
|
},
|
|
methods: {
|
|
setFrequency(code) {
|
|
this.frequency = code;
|
|
this.setAmountByPackage();
|
|
},
|
|
setDonationPackage(id) {
|
|
this.donationPackage = id;
|
|
this.setAmountByPackage();
|
|
},
|
|
setAmountByPackage() {
|
|
const itemIndex = this.donationPackages.findIndex(
|
|
(item) => item.id === this.donationPackage
|
|
);
|
|
if (itemIndex !== -1) {
|
|
if (this.frequency == "once") {
|
|
this.amount = this.donationPackages[itemIndex].once_amount;
|
|
} else if (this.frequency == "monthly") {
|
|
this.amount = this.donationPackages[itemIndex].monthly_amount;
|
|
} else if (this.frequency == "annually") {
|
|
this.amount = this.donationPackages[itemIndex].annually_amount;
|
|
}
|
|
}
|
|
},
|
|
onlyNumber($event) {
|
|
//console.log($event.keyCode); //keyCodes value
|
|
let keyCode = $event.keyCode ? $event.keyCode : $event.which;
|
|
if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
|
|
// 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>
|
|
|