mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-01-20 20:01:22 +00:00
refactor: create LoginForm component
I moved most code in pages/login.vue to a separate LoginForm component. The intention is to have a separate vue storybook for the LoginForm component.
This commit is contained in:
roschaefer
parent
0a0690aabd
commit
8dff7496c0
129
webapp/components/LoginForm/LoginForm.vue
Normal file
129
webapp/components/LoginForm/LoginForm.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<ds-container v-if="ready" width="medium">
|
||||
<ds-space margin="small">
|
||||
<blockquote>
|
||||
<p>{{ $t('quotes.african.quote') }}</p>
|
||||
<b>- {{ $t('quotes.african.author') }}</b>
|
||||
</blockquote>
|
||||
</ds-space>
|
||||
<ds-card class="login-card">
|
||||
<ds-flex gutter="small">
|
||||
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
|
||||
<client-only>
|
||||
<locale-switch class="login-locale-switch" offset="5" />
|
||||
</client-only>
|
||||
<ds-space margin-top="small" margin-bottom="xxx-small" centered>
|
||||
<img
|
||||
class="login-image"
|
||||
alt="Human Connection"
|
||||
src="/img/sign-up/humanconnection.svg"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
|
||||
<ds-space margin="small">
|
||||
<a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfoHint')" target="_blank">
|
||||
{{ $t('login.moreInfo') }}
|
||||
</a>
|
||||
</ds-space>
|
||||
<ds-space margin="small">
|
||||
<ds-text size="small">{{ $t('login.copy') }}</ds-text>
|
||||
</ds-space>
|
||||
<form :disabled="pending" @submit.prevent="onSubmit">
|
||||
<ds-input
|
||||
v-model="form.email"
|
||||
:disabled="pending"
|
||||
:placeholder="$t('login.email')"
|
||||
type="email"
|
||||
name="email"
|
||||
icon="envelope"
|
||||
/>
|
||||
<ds-input
|
||||
v-model="form.password"
|
||||
:disabled="pending"
|
||||
:placeholder="$t('login.password')"
|
||||
icon="lock"
|
||||
icon-right="question-circle"
|
||||
name="password"
|
||||
type="password"
|
||||
/>
|
||||
<ds-space margin-bottom="large">
|
||||
<nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
|
||||
</ds-space>
|
||||
<ds-button
|
||||
:loading="pending"
|
||||
primary
|
||||
fullwidth
|
||||
name="submit"
|
||||
type="submit"
|
||||
icon="sign-in"
|
||||
>
|
||||
{{ $t('login.login') }}
|
||||
</ds-button>
|
||||
<ds-space margin-top="large" margin-bottom="x-small">
|
||||
{{ $t('login.no-account') }}
|
||||
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
|
||||
</ds-space>
|
||||
</form>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-card>
|
||||
</ds-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LocaleSwitch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ready: false,
|
||||
form: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pending() {
|
||||
return this.$store.getters['auth/pending']
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
// NOTE: quick fix for jumping flexbox implementation
|
||||
// will be fixed in a future update of the styleguide
|
||||
this.ready = true
|
||||
}, 50)
|
||||
},
|
||||
methods: {
|
||||
async onSubmit() {
|
||||
try {
|
||||
await this.$store.dispatch('auth/login', { ...this.form })
|
||||
this.$toast.success(this.$t('login.success'))
|
||||
this.$emit('success')
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-image {
|
||||
width: 90%;
|
||||
max-width: 200px;
|
||||
}
|
||||
.login-card {
|
||||
position: relative;
|
||||
}
|
||||
.login-locale-switch {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
</style>
|
||||
@ -1,138 +1,27 @@
|
||||
<template>
|
||||
<transition name="fade" appear>
|
||||
<ds-container v-if="ready" width="medium">
|
||||
<ds-space margin="small">
|
||||
<blockquote>
|
||||
<p>{{ $t('quotes.african.quote') }}</p>
|
||||
<b>- {{ $t('quotes.african.author') }}</b>
|
||||
</blockquote>
|
||||
</ds-space>
|
||||
<ds-card class="login-card">
|
||||
<ds-flex gutter="small">
|
||||
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
|
||||
<client-only>
|
||||
<locale-switch class="login-locale-switch" offset="5" />
|
||||
</client-only>
|
||||
<ds-space margin-top="small" margin-bottom="xxx-small" centered>
|
||||
<img
|
||||
class="login-image"
|
||||
alt="Human Connection"
|
||||
src="/img/sign-up/humanconnection.svg"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
|
||||
<ds-space margin="small">
|
||||
<a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfoHint')" target="_blank">
|
||||
{{ $t('login.moreInfo') }}
|
||||
</a>
|
||||
</ds-space>
|
||||
<ds-space margin="small">
|
||||
<ds-text size="small">{{ $t('login.copy') }}</ds-text>
|
||||
</ds-space>
|
||||
<form :disabled="pending" @submit.prevent="onSubmit">
|
||||
<ds-input
|
||||
v-model="form.email"
|
||||
:disabled="pending"
|
||||
:placeholder="$t('login.email')"
|
||||
type="email"
|
||||
name="email"
|
||||
icon="envelope"
|
||||
/>
|
||||
<ds-input
|
||||
v-model="form.password"
|
||||
:disabled="pending"
|
||||
:placeholder="$t('login.password')"
|
||||
icon="lock"
|
||||
icon-right="question-circle"
|
||||
name="password"
|
||||
type="password"
|
||||
/>
|
||||
<ds-space margin-bottom="large">
|
||||
<nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
|
||||
</ds-space>
|
||||
<ds-button
|
||||
:loading="pending"
|
||||
primary
|
||||
fullwidth
|
||||
name="submit"
|
||||
type="submit"
|
||||
icon="sign-in"
|
||||
>
|
||||
{{ $t('login.login') }}
|
||||
</ds-button>
|
||||
<ds-space margin-top="large" margin-bottom="x-small">
|
||||
{{ $t('login.no-account') }}
|
||||
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
|
||||
</ds-space>
|
||||
</form>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-card>
|
||||
</ds-container>
|
||||
<login-form @success="handleSuccess" />
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
import LoginForm from '~/components/LoginForm/LoginForm.vue'
|
||||
import { VERSION } from '~/constants/terms-and-conditions-version.js'
|
||||
|
||||
export default {
|
||||
layout: 'no-header',
|
||||
components: {
|
||||
LocaleSwitch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ready: false,
|
||||
form: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pending() {
|
||||
return this.$store.getters['auth/pending']
|
||||
},
|
||||
LoginForm,
|
||||
},
|
||||
asyncData({ store, redirect }) {
|
||||
if (store.getters['auth/user'].termsAndConditionsAgreedVersion === VERSION) {
|
||||
redirect('/')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
// NOTE: quick fix for jumping flexbox implementation
|
||||
// will be fixed in a future update of the styleguide
|
||||
this.ready = true
|
||||
}, 50)
|
||||
},
|
||||
methods: {
|
||||
async onSubmit() {
|
||||
try {
|
||||
await this.$store.dispatch('auth/login', { ...this.form })
|
||||
this.$toast.success(this.$t('login.success'))
|
||||
this.$router.replace(this.$route.query.path || '/')
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
handleSuccess() {
|
||||
this.$router.replace(this.$route.query.path || '/')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-image {
|
||||
width: 90%;
|
||||
max-width: 200px;
|
||||
}
|
||||
.login-card {
|
||||
position: relative;
|
||||
}
|
||||
.login-locale-switch {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user