Skip to content

Commit

Permalink
feat: continue payment flow after registration
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukicenturi @kelsos
lukicenturi authored and kelsos committed Aug 8, 2024
1 parent 91f8af0 commit ec26dca
Show file tree
Hide file tree
Showing 12 changed files with 315 additions and 233 deletions.
37 changes: 36 additions & 1 deletion components/account/activation/AccountActivate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ const { uid, token } = route.params;
const validating = ref(true);
const isValid = ref(false);
const { getAccount } = useMainStore();
const mainStore = useMainStore();
const { getAccount } = mainStore;
const { account } = storeToRefs(mainStore);
const logger = useLogger();
async function validateToken() {
Expand All @@ -33,6 +35,22 @@ onBeforeMount(async () => {
await getAccount();
});
const { t } = useI18n();
const { getLastRedirectUrl } = useRedirectUrl();
const lastPaymentLink = computed(() => {
const accountVal = get(account);
if (accountVal && accountVal.username)
return getLastRedirectUrl(accountVal.username);
return undefined;
});
function redirectToPaymentLink() {
const paymentLink = get(lastPaymentLink);
if (paymentLink)
window.location.href = paymentLink;
}
</script>

<template>
Expand Down Expand Up @@ -80,6 +98,23 @@ const { t } = useI18n();
{{ t('common.here') }}
</ButtonLink>
</div>
<div
v-if="lastPaymentLink"
class="text-body-1 text-rui-text-secondary border-t pt-3"
>
<span>
{{ t('auth.activation.success.continue_payment') }}
</span>
<RuiButton
:to="lastPaymentLink"
color="primary"
class="inline-flex py-0 !px-1 !text-[1em]"
variant="text"
@click="redirectToPaymentLink()"
>
{{ t('common.here') }}
</RuiButton>
</div>
</div>
</div>
</div>
Expand Down
26 changes: 11 additions & 15 deletions components/account/login/LoginForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,6 @@ import { required } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
import { useMainStore } from '~/store';
const props = withDefaults(defineProps<{ modal?: boolean }>(), {
modal: false,
});
const emit = defineEmits<{ (e: 'complete'): void }>();
const { modal } = toRefs(props);
const username = ref<string>('');
const password = ref<string>('');
const loading = ref<boolean>(false);
Expand All @@ -34,6 +27,7 @@ const v$ = useVuelidate(
);
const { login } = useMainStore();
const route = useRoute();
async function performLogin() {
set(loading, true);
Expand All @@ -47,14 +41,14 @@ async function performLogin() {
set(loading, false);
if (!get(error)) {
if (get(modal))
emit('complete');
const { redirectUrl } = route.query;
if (redirectUrl)
window.location.href = decodeURIComponent(redirectUrl as string);
else
await navigateTo('/home/subscription');
}
else {
set(hadError, true);
}
else { set(hadError, true); }
}
const { t } = useI18n();
Expand Down Expand Up @@ -136,7 +130,10 @@ const { t } = useI18n();
{{ t('auth.login.first_time_premium') }}
</span>
<ButtonLink
to="/signup"
:to="{
path: '/signup',
query: route.query,
}"
inline
color="primary"
>
Expand All @@ -146,8 +143,7 @@ const { t } = useI18n();
</div>
<div
v-if="hadError"
class="max-w-full"
:class="modal ? 'w-[360px] mt-8' : 'w-[660px] mt-14'"
class="max-w-full w-[660px] mt-14"
>
<RuiAlert
type="error"
Expand Down
17 changes: 0 additions & 17 deletions components/account/login/LoginModal.vue
View file

This file was deleted.

188 changes: 96 additions & 92 deletions components/account/signup/SignupAccount.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,105 +59,109 @@ const { t } = useI18n();
</script>

<template>
<div class="space-y-8 grow">
<div class="text-h4 text-center">
{{ t('auth.signup.account.title') }}
</div>
<div class="space-y-5">
<RuiTextField
id="username"
:model-value="modelValue.username"
variant="outlined"
color="primary"
dense
:label="t('auth.common.username')"
:hint="t('auth.signup.account.form.username_hint')"
autocomplete="username"
:error-messages="toMessages(v$.username)"
@update:model-value="updateValue('username', $event)"
/>
<RuiTextField
id="email"
:model-value="modelValue.email"
variant="outlined"
color="primary"
dense
autocomplete="email"
:label="t('auth.common.email')"
:hint="t('auth.signup.account.form.email_hint')"
:error-messages="toMessages(v$.email)"
@update:model-value="updateValue('email', $event)"
/>
<div class="space-y-1">
<form @submit.prevent="">
<div class="space-y-8 grow">
<div class="text-h4 text-center">
{{ t('auth.signup.account.title') }}
</div>
<div class="space-y-5">
<RuiTextField
id="password"
type="password"
:model-value="modelValue.password"
id="username"
:model-value="modelValue.username"
variant="outlined"
autofocus
color="primary"
dense
:label="t('auth.common.username')"
:hint="t('auth.signup.account.form.username_hint')"
autocomplete="username"
:error-messages="toMessages(v$.username)"
@update:model-value="updateValue('username', $event)"
/>
<RuiTextField
id="email"
:model-value="modelValue.email"
variant="outlined"
color="primary"
dense
autocomplete="email"
:label="t('auth.common.email')"
:hint="t('auth.signup.account.form.email_hint')"
:error-messages="toMessages(v$.email)"
@update:model-value="updateValue('email', $event)"
/>
<div class="space-y-1">
<RuiTextField
id="password"
type="password"
:model-value="modelValue.password"
variant="outlined"
color="primary"
dense
autocomplete="new-password"
:label="t('auth.common.password')"
hide-details
:error-messages="toMessages(v$.password).length > 0 ? [''] : []"
@update:model-value="updateValue('password', $event)"
/>
<ul
class="ml-4 list-disc text-caption"
:class="
toMessages(v$.password).length > 0
? 'text-rui-error'
: 'text-rui-text-secondary'
"
>
<li>
{{ t('auth.common.password_hint.line_1') }}
</li>
<li>
{{ t('auth.common.password_hint.line_2') }}
</li>
<li>
{{ t('auth.common.password_hint.line_3') }}
</li>
<li>
{{ t('auth.common.password_hint.line_4') }}
</li>
</ul>
</div>
<RuiTextField
id="password-confirmation"
type="password"
:model-value="modelValue.confirmPassword"
variant="outlined"
color="primary"
autocomplete="new-password"
:label="t('auth.common.password')"
hide-details
:error-messages="toMessages(v$.password).length > 0 ? [''] : []"
@update:model-value="updateValue('password', $event)"
dense
:label="t('auth.signup.account.form.confirm_password')"
:hint="t('auth.common.confirm_hint')"
:error-messages="toMessages(v$.confirmPassword)"
@update:model-value="updateValue('confirmPassword', $event)"
/>
<ul
class="ml-4 list-disc text-caption"
:class="
toMessages(v$.password).length > 0
? 'text-rui-error'
: 'text-rui-text-secondary'
"
>
<li>
{{ t('auth.common.password_hint.line_1') }}
</li>
<li>
{{ t('auth.common.password_hint.line_2') }}
</li>
<li>
{{ t('auth.common.password_hint.line_3') }}
</li>
<li>
{{ t('auth.common.password_hint.line_4') }}
</li>
</ul>
</div>
<RuiTextField
id="password-confirmation"
type="password"
:model-value="modelValue.confirmPassword"
variant="outlined"
</div>
<div class="mt-16 grid md:grid-cols-2 gap-4">
<RuiButton
type="button"
class="w-full row-start-2 md:row-start-auto"
size="lg"
data-cy="back-button"
@click="emit('back')"
>
{{ t('actions.back') }}
</RuiButton>
<RuiButton
data-cy="next-button"
:disabled="v$.$invalid"
color="primary"
autocomplete="new-password"
dense
:label="t('auth.signup.account.form.confirm_password')"
:hint="t('auth.common.confirm_hint')"
:error-messages="toMessages(v$.confirmPassword)"
@update:model-value="updateValue('confirmPassword', $event)"
/>
class="w-full"
size="lg"
type="submit"
@click="emit('next')"
>
{{ t('actions.continue') }}
</RuiButton>
</div>
</div>
<div class="mt-16 grid md:grid-cols-2 gap-4">
<RuiButton
type="button"
class="w-full row-start-2 md:row-start-auto"
size="lg"
data-cy="back-button"
@click="emit('back')"
>
{{ t('actions.back') }}
</RuiButton>
<RuiButton
data-cy="next-button"
:disabled="v$.$invalid"
color="primary"
class="w-full"
size="lg"
@click="emit('next')"
>
{{ t('actions.continue') }}
</RuiButton>
</div>
</form>
</template>
6 changes: 4 additions & 2 deletions components/account/signup/SignupAddress.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ const { t } = useI18n();
variant="outlined"
color="primary"
autocomplete="address-line1"
autofocus
dense
:label="t('auth.signup.address.form.address_line_1')"
:hint="t('auth.common.required')"
Expand Down Expand Up @@ -191,7 +192,7 @@ const { t } = useI18n();
color="primary"
external
>
{{ t('footer_legalese.tos') }}
{{ t('navigation_menu.tos') }}
</ButtonLink>
</template>
<template #privacy_policy>
Expand All @@ -201,7 +202,7 @@ const { t } = useI18n();
color="primary"
external
>
{{ t('footer_legalese.privacy_policy') }}
{{ t('navigation_menu.privacy_policy') }}
</ButtonLink>
</template>
</i18n-t>
Expand All @@ -224,6 +225,7 @@ const { t } = useI18n();
color="primary"
class="w-full"
size="lg"
type="submit"
:loading="loading"
@click="finish()"
>
Expand Down
Loading

0 comments on commit ec26dca

Please sign in to comment.