matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Appsumo (#232)

Browse Source 
* Implemented webhooks

* oAuth wip

* Implement the whole auth flow

* Implement file upload limit depending on appsumo license
This commit is contained in:
Julien Nahum
2023-11-01 16:58:10 +01:00
committed by GitHub
parent 2e52518aa7
commit e9174238e4
19 changed files with 611 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
resources/js/components/common/Button.vue
View File

@@ -7,24 +7,24 @@
>
<template v-if="!loading">
<span class="no-underline mx-auto">
<slot/>
</span>
<slot />
</span>
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H1M11 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
stroke-linejoin="round"
/>
</svg>
</template>
<loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`"/>
<loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`" />
</button>
<router-link v-else :class="btnClasses" :to="to" :target="target"
>
<span class="no-underline mx-auto">
<slot/>
</span>
<router-link v-else :class="btnClasses" :to="to" :target="target">
<span class="no-underline mx-auto">
<slot />
</span>
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H1M11 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
stroke-linejoin="round"
/>
</svg>
</router-link>
</template>
@@ -72,11 +72,11 @@ export default {
target: {
type: String,
default: '_self'
},
}
},
computed: {
btnClasses() {
btnClasses () {
const sizes = this.sizes
const colorShades = this.colorShades
return `v-btn ${sizes['p-y']} ${sizes['p-x']}
@@ -84,14 +84,14 @@ export default {
${colorShades?.text} transition ease-in duration-200 text-center text-${sizes?.font} font-medium focus:outline-none focus:ring-2
focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`
},
colorShades() {
colorShades () {
if (this.color === 'blue') {
return {
main: 'bg-blue-600',
hover: 'hover:bg-blue-700',
ring: 'focus:ring-blue-500',
'ring-offset': 'focus:ring-offset-blue-200',
text: 'text-white',
text: 'text-white'
}
} else if (this.color === 'outline-blue') {
return {
@@ -99,7 +99,15 @@ export default {
hover: 'hover:bg-blue-600',
ring: 'focus:ring-blue-500',
'ring-offset': 'focus:ring-offset-blue-200',
text: 'text-blue-600 hover:text-white',
text: 'text-blue-600 hover:text-white'
}
} else if (this.color === 'outline-gray') {
return {
main: 'bg-transparent border border-gray-300',
hover: 'hover:bg-gray-500',
ring: 'focus:ring-gray-500',
'ring-offset': 'focus:ring-offset-gray-200',
text: 'text-gray-500 hover:text-white'
}
} else if (this.color === 'red') {
return {
@@ -107,7 +115,7 @@ export default {
hover: 'hover:bg-red-700',
ring: 'focus:ring-red-500',
'ring-offset': 'focus:ring-offset-red-200',
text: 'text-white',
text: 'text-white'
}
} else if (this.color === 'gray') {
return {
@@ -115,7 +123,7 @@ export default {
hover: 'hover:bg-gray-700',
ring: 'focus:ring-gray-500',
'ring-offset': 'focus:ring-offset-gray-200',
text: 'text-white',
text: 'text-white'
}
} else if (this.color === 'light-gray') {
return {
@@ -123,7 +131,7 @@ export default {
hover: 'hover:bg-gray-100',
ring: 'focus:ring-gray-500',
'ring-offset': 'focus:ring-offset-gray-300',
text: 'text-gray-700',
text: 'text-gray-700'
}
} else if (this.color === 'green') {
return {
@@ -131,7 +139,7 @@ export default {
hover: 'hover:bg-green-700',
ring: 'focus:ring-green-500',
'ring-offset': 'focus:ring-offset-green-200',
text: 'text-white',
text: 'text-white'
}
} else if (this.color === 'yellow') {
return {
@@ -139,7 +147,7 @@ export default {
hover: 'hover:bg-yellow-700',
ring: 'focus:ring-yellow-500',
'ring-offset': 'focus:ring-offset-yellow-200',
text: 'text-white',
text: 'text-white'
}
} else if (this.color === 'white') {
return {
@@ -147,12 +155,12 @@ export default {
hover: 'hover:bg-gray-200',
ring: 'focus:ring-white-500',
'ring-offset': 'focus:ring-offset-white-200',
text: 'text-gray-700',
text: 'text-gray-700'
}
}
console.error('Unknown color')
},
sizes() {
sizes () {
if (this.size === 'small') {
return {
font: 'sm',
@@ -169,8 +177,8 @@ export default {
},
methods: {
onClick(event) {
this.$emit('click',event)
onClick (event) {
this.$emit('click', event)
}
}
}

77
resources/js/components/vendor/appsumo/AppSumoBilling.vue vendored Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div v-if="user.active_license" class="border p-5 shadow-md rounded-md">
<div class="w-auto flex flex-col items-center">
<img :src="asset('img/appsumo/as-taco-white-bg.png')" class="max-w-[60px]" alt="AppSumo">
<img :src="asset('img/appsumo/as-Select-dark.png')" class="max-w-[150px]" alt="AppSumo">
</div>
<p class="mt-6">
Your AppSumo <span class="font-semibold">lifetime deal tier {{ licenseTier }}</span> license is active. Here's a reminder of your plan details:
</p>
<ul class="list-disc pl-5 mt-4">
<li>Number of Forms: <span class="font-semibold">{{ tierFeatures.form_quantity }}</span></li>
<li>Custom domains: <span class="font-semibold">{{ tierFeatures.domain_names }}</span></li>
<li>File Size Uploads: <span class="font-semibold">{{ tierFeatures.file_upload_size }}</span></li>
</ul>
<div class="w-max">
<v-button color="outline-gray" shade="lighter" class="mt-4 block" href="https://appsumo.com/account/products/" target="_blank">
Mangage in AppSumo
</v-button>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import VButton from '../../common/Button.vue'
export default {
name: 'AppSumoBilling',
components: { VButton },
data () {
return {
}
},
computed: {
...mapGetters({
user: 'auth/user'
}),
licenseTier () {
return this.user?.active_license?.meta?.tier
},
tierFeatures () {
if (!this.licenseTier) return {}
return {
1: {
form_quantity: 'Unlimited',
file_upload_size: '25mb',
domain_names: '5'
},
2: {
form_quantity: 'Unlimited',
file_upload_size: '50mb',
domain_names: '25'
},
3: {
form_quantity: 'Unlimited',
file_upload_size: '75mb',
domain_names: 'Unlimited'
}
}[this.licenseTier]
}
},
watch: {},
mounted () {},
created () {
},
destroyed () {
},
methods: {}
}
</script>

50
resources/js/components/vendor/appsumo/AppSumoRegister.vue vendored Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div v-if="hasValidLicense" class="p-6 bg-white border shadow-md rounded-md">
<img :src="asset('img/appsumo/as-taco-white-bg.png')" class="max-w-[60px] mx-auto" alt="AppSumo">
<img :src="asset('img/appsumo/as-Select-dark.png')" class="max-w-[300px] mx-auto" alt="AppSumo">
<p class="mt-6">
<span class="text-green-500">We found your AppSumo Lifetime deal license!</span> Just complete the registration form to finalize the activation of
your license.
</p>
</div>
<div v-else-if="hasLicenseError" class="p-6 bg-white border border-red-500 shadow-md rounded-md">
<img :src="asset('img/appsumo/as-taco-white-bg.png')" class="max-w-[60px] mx-auto" alt="AppSumo">
<img :src="asset('img/appsumo/as-Select-dark.png')" class="max-w-[300px] mx-auto" alt="AppSumo">
<p class="mt-6">
<span class="text-red-600">Invalid AppSumo license</span>. The license was probably already attached to an OpnForm account. Please contact support.
</p>
</div>
</template>
<script>
export default {
name: 'AppSumoRegister',
data () {
return {
hasValidLicense: false,
hasLicenseError: false
}
},
computed: {},
watch: {},
mounted () {
if (this.$route.query.appsumo_license !== undefined && this.$route.query.appsumo_license) {
this.hasValidLicense = true
} else if (this.$route.query.appsumo_error !== undefined && this.$route.query.appsumo_error) {
this.hasLicenseError = true
}
},
created () {
},
destroyed () {
},
methods: {}
}
</script>

57
resources/js/pages/auth/components/RegisterForm.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<form @submit.prevent="register" @keydown="form.onKeydown($event)" class="mt-4">
<form class="mt-4" @submit.prevent="register" @keydown="form.onKeydown($event)">
<!-- Name -->
<text-input name="name" :form="form" :label="$t('name')" placeholder="Your name" :required="true" />
@@ -18,42 +18,42 @@
<!-- Password Confirmation-->
<text-input native-type="password" :form="form" :required="true" placeholder="Enter confirm password"
name="password_confirmation" :label="$t('confirm_password')"
name="password_confirmation" :label="$t('confirm_password')"
/>
<checkbox-input :form="form" name="agree_terms" :required="true">
<template #label>
I agree with the <router-link :to="{name:'terms-conditions'}" target="_blank">Terms and conditions</router-link> and <router-link :to="{name:'privacy-policy'}" target="_blank">Privacy policy</router-link> of the website and I accept them.
I agree with the <router-link :to="{name:'terms-conditions'}" target="_blank">
Terms and conditions
</router-link> and <router-link :to="{name:'privacy-policy'}" target="_blank">
Privacy policy
</router-link> of the website and I accept them.
</template>
</checkbox-input>
<!-- Submit Button -->
<v-button :loading="form.busy">Create an account</v-button>
<v-button :loading="form.busy">
Create an account
</v-button>
<p class="text-gray-500 mt-4">
Already have an account?
<a href="#" v-if="isQuick" @click.prevent="$emit('openLogin')" class="font-semibold ml-1">Log In</a>
<router-link v-else :to="{name:'login'}" class="font-semibold ml-1">Log In</router-link>
Already have an account?
<a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openLogin')">Log In</a>
<router-link v-else :to="{name:'login'}" class="font-semibold ml-1">
Log In
</router-link>
</p>
<!-- GitHub Register Button -->
<login-with-github />
</form>
</div>
</template>
<script>
import Form from 'vform'
import LoginWithGithub from '~/components/LoginWithGithub.vue'
import SelectInput from '../../../components/forms/SelectInput.vue'
import { initCrisp } from '../../../middleware/check-auth.js'
export default {
name: 'RegisterForm',
components: {
SelectInput,
LoginWithGithub,
},
components: {},
props: {
isQuick: {
type: Boolean,
@@ -68,7 +68,8 @@ export default {
email: '',
password: '',
password_confirmation: '',
agree_terms: false
agree_terms: false,
appsumo_license: null
}),
mustVerifyEmail: false
}),
@@ -91,6 +92,13 @@ export default {
}
},
mounted () {
// Set appsumo license
if (this.$route.query.appsumo_license !== undefined && this.$route.query.appsumo_license) {
this.form.appsumo_license = this.$route.query.appsumo_license
}
},
methods: {
async register () {
// Register the user.
@@ -111,14 +119,23 @@ export default {
// Track event
this.$logEvent('register', { source: this.form.hear_about_us })
initCrisp(data)
this.$crisp.push(['set', 'session:event', [[['register', {}, 'blue']]]])
// AppSumo License
if (data.appsumo_license === false) {
this.alertError('Invalid AppSumo license. This probably happened because this license was already' +
' attached to another OpnForm account. Please contact support.')
} else if (data.appsumo_license === true) {
this.alertSuccess('Your AppSumo license was successfully activated! You now have access to all the' +
' features of the AppSumo deal.')
}
// Redirect
if(this.isQuick){
if (this.isQuick) {
this.$emit('afterQuickLogin')
}else{
} else {
this.$router.push({ name: 'forms.create' })
}
}

31
resources/js/pages/auth/register.vue
View File

@@ -3,16 +3,17 @@
<div class="flex mt-6 mb-10">
<div class="w-full md:max-w-6xl mx-auto px-4 flex items-center md:flex-row-reverse flex-wrap">
<div class="w-full lg:w-1/2 md:p-6">
<app-sumo-register class="mb-10 p-6 lg:hidden" />
<div class="border rounded-md p-6 shadow-md sticky top-4">
<h2 class="font-semibold text-2xl">
Create an account
</h2>
<small>Sign up in less than 2 minutes.</small>
<register-form />
</div>
</div>
<div class="w-full hidden lg:block lg:w-1/2 md:p-6 mt-8 md:mt-0 ">
<app-sumo-register class="mb-10" />
<h1 class="font-bold">
Create beautiful forms and share them anywhere
</h1>
@@ -22,7 +23,7 @@
<div class="flex flex-wrap justify-center">
<p class="px-3 pb-3 text-sm text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
@@ -30,7 +31,7 @@
</p>
<p class="px-3 pb-3 text-sm text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
@@ -38,16 +39,16 @@
</p>
<p class="px-3 pb-3 text-sm text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
Unlimited submissions
</p>
</div>
<!-- <div class="mt-3 p-6">-->
<!-- <testimonials />-->
<!-- </div>-->
<!-- <div class="mt-3 p-6">-->
<!-- <testimonials />-->
<!-- </div>-->
</div>
</div>
</div>
@@ -57,29 +58,27 @@
<script>
import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
import Testimonials from '../../components/pages/welcome/Testimonials.vue'
import RegisterForm from './components/RegisterForm.vue'
import SeoMeta from '../../mixins/seo-meta.js'
import AppSumoRegister from '../../components/vendor/appsumo/AppSumoRegister.vue'
export default {
components: {
Testimonials,
AppSumoRegister,
OpenFormFooter,
RegisterForm
},
middleware: 'guest',
mixins: [SeoMeta],
middleware: 'guest',
data: () => ({
metaTitle: 'Register',
metaTitle: 'Register'
}),
computed: {
},
computed: {},
methods: {
}
methods: {}
}
</script>

37
resources/js/pages/settings/billing.vue
View File

@@ -1,14 +1,21 @@
<template>
<div>
<h3 class="font-semibold text-2xl text-gray-900">Billing details</h3>
<small class="text-gray-600">Manage your billing. Download invoices, update your plan, or cancel it at any
time.</small>
<h3 class="font-semibold text-2xl text-gray-900">
Billing details
</h3>
<div class="mt-4">
<v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard">
Manage Subscription
</v-button>
</div>
<template v-if="user.has_customer_id">
<small class="text-gray-600">Manage your billing. Download invoices, update your plan, or cancel it at any
time.</small>
<div class="mt-4">
<v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard">
Manage Subscription
</v-button>
</div>
</template>
<app-sumo-billing class="mt-4" />
</div>
</template>
@@ -16,11 +23,13 @@
import axios from 'axios'
import VButton from '../../components/common/Button.vue'
import SeoMeta from '../../mixins/seo-meta.js'
import { mapGetters } from 'vuex'
import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'
export default {
components: {VButton},
scrollToTop: false,
components: { AppSumoBilling, VButton },
mixins: [SeoMeta],
scrollToTop: false,
data: () => ({
metaTitle: 'Billing',
@@ -28,7 +37,7 @@ export default {
}),
methods: {
openBillingDashboard() {
openBillingDashboard () {
this.billingLoading = true
axios.get('/api/subscription/billing-portal').then((response) => {
const url = response.data.portal_url
@@ -39,6 +48,12 @@ export default {
this.billingLoading = false
})
}
},
computed: {
...mapGetters({
user: 'auth/user'
})
}
}
</script>