sing up forms refactoring

This commit is contained in:
Čarodej
2022-01-18 16:43:50 +01:00
parent 148f5982a9
commit b456a562a0
13 changed files with 290 additions and 410 deletions
+18 -32
View File
@@ -1,7 +1,7 @@
<template>
<AuthContentWrapper ref="auth">
<!--Log In by Email-->
<!--Invitation info-->
<AuthContent name="invitation" :visible="false">
<Headline
v-if="invitation"
@@ -11,21 +11,26 @@
<div class="text-center mb-10 w-24 mx-auto relative">
<VueFolderTeamIcon class="inline-block w-28" />
<MemberAvatar
:member="invitation.data.relationships.inviter"
class="absolute -bottom-2.5 -right-6"
:is-border="true"
:size="38"
:member="invitation.data.relationships.inviter"
/>
</div>
</Headline>
<div class="form inline-form">
<AuthButton @click.native="acceptInvitation" icon="chevron-right" :text="$t('Accept Invitation')" :loading="isLoading" :disabled="isLoading" />
</div>
<AuthButton
@click.native="acceptInvitation"
class="md:w-min w-full justify-center mb-12"
icon="chevron-right"
:text="$t('Accept Invitation')"
:loading="isLoading"
:disabled="isLoading"
/>
<div class="additional-link font-bold">
<div class="block">
Or
<b @click="declineInvitation" class="text-theme font-bold">
<b @click="declineInvitation" class="text-theme font-bold cursor-pointer">
{{ $t('decline') }}
</b>
your invitation.
@@ -34,18 +39,17 @@
<!--Accepted invitation screen-->
<AuthContent v-if="invitation" name="accepted" :visible="false">
<Headline
:title="$t('You are successfully joined')"
:description="$t('You can now proceed to your account and participate in team folder')"
/>
<router-link replace v-if="! config.isAuthenticated" :to="{name: 'SignIn'}">
<AuthButton icon="chevron-right" :text="$t('Proceed to your account')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Proceed to your account')"/>
</router-link>
<router-link replace v-if="config.isAuthenticated" :to="{name: 'SharedWithMe', params: {id: invitation.data.attributes.parent_id}}">
<AuthButton icon="chevron-right" :text="$t('Go to Team Folder')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Go to Team Folder')"/>
</router-link>
</AuthContent>
@@ -58,7 +62,7 @@
/>
<router-link :to="{name: 'SignIn'}">
<AuthButton icon="chevron-right" :text="$t('Proceed to your account')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Proceed to your account')"/>
</router-link>
</AuthContent>
@@ -71,11 +75,11 @@
/>
<router-link replace v-if="! config.isAuthenticated" :to="{name: 'SignIn'}">
<AuthButton icon="chevron-right" :text="$t('Log In')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Log In')"/>
</router-link>
<router-link replace v-if="config.isAuthenticated" :to="{name: 'SharedWithMe'}">
<AuthButton icon="chevron-right" :text="$t('Go to your shared folders')"/>
<AuthButton class="md:w-min w-full justify-center mb-12" icon="chevron-right" :text="$t('Go to your shared folders')"/>
</router-link>
</AuthContent>
</AuthContentWrapper>
@@ -147,13 +151,7 @@
this.$refs.auth.$children.forEach(page => {
// Hide current step
page.isVisible = false
if (page.$props.name === slug) {
// Go to next step
page.isVisible = true
}
page.isVisible = page.$props.name === slug;
})
},
},
@@ -173,15 +171,3 @@
}
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_auth-form';
@import '/resources/sass/vuefilemanager/_auth';
.spinner-wrapper {
width: 100%;
height: 50px;
position: relative;
top: 50px;
}
</style>