mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
add components for slots
This commit is contained in:
ogerly
parent
524cf2c066
commit
9fa2ddac1e
80
frontend/src/components/Auth/Header.vue
Normal file
80
frontend/src/components/Auth/Header.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="auth-header">
|
||||
<b-navbar toggleable="lg" class="p-0">
|
||||
<div class="g-logo-radius bg-white p-3">
|
||||
<img :src="logo" height="40" alt="..." />
|
||||
</div>
|
||||
<b-img-lazy
|
||||
class="header-img d-block d-lg-none"
|
||||
src="/img/template/Blaetter.png"
|
||||
></b-img-lazy>
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
<b-collapse id="nav-collapse" is-nav>
|
||||
<!-- Right aligned nav items -->
|
||||
<b-navbar-nav class="ml-auto" right>
|
||||
<b-nav-item-dropdown text="über Gradido">
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
|
||||
<b-nav-item-dropdown text="Great Cooperation">
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
|
||||
<b-nav-item href="#">Podcast</b-nav-item>
|
||||
|
||||
<b-nav-item-dropdown text="Presse">
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
|
||||
<b-nav-item href="#">Kontakt</b-nav-item>
|
||||
|
||||
<b-nav-item href="#">Anmelden | Registrieen</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'AuthHeader',
|
||||
data() {
|
||||
return {
|
||||
logo: 'img/brand/green.png',
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.auth-header {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.header-img {
|
||||
position: absolute;
|
||||
bottom: -180%;
|
||||
right: 0px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.g-logo-radius {
|
||||
-webkit-border-top-right-radius: 77px;
|
||||
-webkit-border-bottom-right-radius: 137px;
|
||||
-webkit-border-bottom-left-radius: 0px;
|
||||
-moz-border-radius-topright: 77px;
|
||||
-moz-border-radius-bottomright: 137px;
|
||||
-moz-border-radius-bottomleft: 0px;
|
||||
border-top-right-radius: 77px;
|
||||
border-bottom-right-radius: 137px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
</style>
|
||||
105
frontend/src/components/Auth/Login.vue
Normal file
105
frontend/src/components/Auth/Login.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="auth-login">
|
||||
<b-card no-body class="border-0 mb-0 gradido-custom-background">
|
||||
<b-card-body class="p-4">
|
||||
<div class="text-center mb-4 test-communitydata">
|
||||
<b>{{ $store.state.community.name }}</b>
|
||||
<p class="text-lead">
|
||||
{{ $store.state.community.description }}
|
||||
</p>
|
||||
{{ $t('login') }}
|
||||
</div>
|
||||
|
||||
<validation-observer ref="observer" v-slot="{ handleSubmit }">
|
||||
<b-form @submit.stop.prevent="handleSubmit(onSubmit)">
|
||||
<input-email v-model="form.email"></input-email>
|
||||
<input-password
|
||||
:label="$t('form.password')"
|
||||
:placeholder="$t('form.password')"
|
||||
:name="$t('form.password')"
|
||||
v-model="form.password"
|
||||
></input-password>
|
||||
<div class="text-center mt-4">
|
||||
<b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</validation-observer>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
|
||||
<b-row class="mt-3">
|
||||
<b-col cols="6" class="text-center text-sm-left col-12 col-sm-6 pb-5">
|
||||
<router-link to="/forgot-password" class="mt-3">
|
||||
{{ $t('settings.password.forgot_pwd') }}
|
||||
</router-link>
|
||||
</b-col>
|
||||
<b-col cols="6" class="text-center text-sm-right col-12 col-sm-6">
|
||||
<router-link to="/register" class="mt-3">
|
||||
{{ $t('site.login.new_wallet') }}
|
||||
</router-link>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import InputPassword from '@/components/Inputs/InputPassword'
|
||||
import InputEmail from '@/components/Inputs/InputEmail'
|
||||
import { login } from '@/graphql/queries'
|
||||
import { getCommunityInfoMixin } from '@/mixins/getCommunityInfo'
|
||||
|
||||
export default {
|
||||
name: 'AuthLogin',
|
||||
components: {
|
||||
InputPassword,
|
||||
InputEmail,
|
||||
},
|
||||
mixins: [getCommunityInfoMixin],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
passwordVisible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onSubmit() {
|
||||
const loader = this.$loading.show({
|
||||
container: this.$refs.submitButton,
|
||||
})
|
||||
this.$apollo
|
||||
.query({
|
||||
query: login,
|
||||
variables: {
|
||||
email: this.form.email,
|
||||
password: this.form.password,
|
||||
publisherId: this.$store.state.publisherId,
|
||||
},
|
||||
fetchPolicy: 'network-only',
|
||||
})
|
||||
.then(async (result) => {
|
||||
const {
|
||||
data: { login },
|
||||
} = result
|
||||
this.$store.dispatch('login', login)
|
||||
await loader.hide()
|
||||
if (this.$route.params.code) {
|
||||
this.$router.push(`/redeem/${this.$route.params.code}`)
|
||||
} else {
|
||||
this.$router.push('/overview')
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toastError(this.$t('error.no-account'))
|
||||
if (error.message.includes('User email not validated')) {
|
||||
this.$router.push('/thx/login')
|
||||
} else if (error.message.includes('User has no password set yet')) {
|
||||
this.$router.push('/reset-password/login')
|
||||
}
|
||||
loader.hide()
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
230
frontend/src/components/Auth/Register.vue
Normal file
230
frontend/src/components/Auth/Register.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="auth-register">
|
||||
<b-card no-body class="border-0 gradido-custom-background">
|
||||
<b-card-body class="p-4">
|
||||
<div class="text-center text-muted mb-4 test-communitydata">
|
||||
<b>{{ $store.state.community.name }}</b>
|
||||
<p class="text-lead">
|
||||
{{ $store.state.community.description }}
|
||||
</p>
|
||||
<div>{{ $t('signup') }}</div>
|
||||
</div>
|
||||
|
||||
<validation-observer ref="observer" v-slot="{ handleSubmit }">
|
||||
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
|
||||
<validation-provider
|
||||
:name="$t('form.firstname')"
|
||||
:rules="{ required: true, min: 3 }"
|
||||
v-slot="validationContext"
|
||||
>
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
:label="$t('form.firstname')"
|
||||
label-for="registerFirstname"
|
||||
>
|
||||
<b-form-input
|
||||
id="registerFirstname"
|
||||
:name="$t('form.firstname')"
|
||||
v-model="form.firstname"
|
||||
:placeholder="$t('form.firstname')"
|
||||
:state="getValidationState(validationContext)"
|
||||
aria-describedby="registerFirstnameLiveFeedback"
|
||||
></b-form-input>
|
||||
|
||||
<b-form-invalid-feedback id="registerFirstnameLiveFeedback">
|
||||
{{ validationContext.errors[0] }}
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
</validation-provider>
|
||||
|
||||
<validation-provider
|
||||
:name="$t('form.lastname')"
|
||||
:rules="{ required: true, min: 2 }"
|
||||
v-slot="validationContext"
|
||||
>
|
||||
<b-form-group class="mb-3" :label="$t('form.lastname')" label-for="registerLastname">
|
||||
<b-form-input
|
||||
id="registerLastname"
|
||||
:name="$t('form.lastname')"
|
||||
v-model="form.lastname"
|
||||
:placeholder="$t('form.lastname')"
|
||||
:state="getValidationState(validationContext)"
|
||||
aria-describedby="registerLastnameLiveFeedback"
|
||||
></b-form-input>
|
||||
|
||||
<b-form-invalid-feedback id="registerLastnameLiveFeedback">
|
||||
{{ validationContext.errors[0] }}
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
</validation-provider>
|
||||
|
||||
<input-email v-model="form.email"></input-email>
|
||||
|
||||
<hr />
|
||||
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
{{ $t('language') }}
|
||||
<language-switch-select @update-language="updateLanguage" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="my-4">
|
||||
<b-col cols="12">
|
||||
<b-form-checkbox
|
||||
id="registerCheckbox"
|
||||
v-model="form.agree"
|
||||
:name="$t('site.signup.agree')"
|
||||
>
|
||||
<!-- eslint-disable-next-line @intlify/vue-i18n/no-v-html -->
|
||||
<span class="text-muted" v-html="$t('site.signup.agree')"></span>
|
||||
</b-form-checkbox>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-alert v-if="showError" show dismissible variant="danger" @dismissed="closeAlert">
|
||||
<span class="alert-icon"><i class="ni ni-point"></i></span>
|
||||
<span class="alert-text">
|
||||
<strong>{{ $t('error.error') }}</strong>
|
||||
{{ messageError }}
|
||||
</span>
|
||||
</b-alert>
|
||||
|
||||
<b-row v-b-toggle:my-collapse class="text-muted shadow-sm p-3 publisherCollaps">
|
||||
<b-col>{{ $t('publisher.publisherId') }} {{ $store.state.publisherId }}</b-col>
|
||||
<b-col class="text-right">
|
||||
<b-icon icon="chevron-down" aria-hidden="true"></b-icon>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-collapse id="my-collapse" class="">
|
||||
<b-input-group class="shadow-sm p-2 bg-white rounded">
|
||||
<b-input-group-prepend is-text>
|
||||
<b-icon icon="person-fill"></b-icon>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
id="publisherid"
|
||||
type="text"
|
||||
placeholder="Publisher ID"
|
||||
v-model="publisherId"
|
||||
@input="commitStorePublisherId(publisherId)"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
<div v-b-toggle:my-collapse class="text-center mt-1 shadow-lg p-3 mb-5 rounded">
|
||||
{{ $t('publisher.infoText') }}
|
||||
<div class="text-center">
|
||||
<b-icon icon="chevron-up" aria-hidden="true"></b-icon>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<div class="text-center">
|
||||
<router-link class="test-button-back" to="/login">
|
||||
<b-button variant="outline-secondary" class="mr-4">
|
||||
{{ $t('back') }}
|
||||
</b-button>
|
||||
</router-link>
|
||||
<b-button
|
||||
:disabled="disabled"
|
||||
type="submit"
|
||||
:variant="disabled ? 'outline-light' : 'primary'"
|
||||
>
|
||||
{{ $t('signup') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</b-form>
|
||||
</validation-observer>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import InputEmail from '@/components/Inputs/InputEmail.vue'
|
||||
import LanguageSwitchSelect from '@/components/LanguageSwitchSelect.vue'
|
||||
import { createUser } from '@/graphql/mutations'
|
||||
import { getCommunityInfoMixin } from '@/mixins/getCommunityInfo'
|
||||
|
||||
export default {
|
||||
name: 'AuthRegister',
|
||||
components: { InputEmail, LanguageSwitchSelect },
|
||||
mixins: [getCommunityInfoMixin],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
email: '',
|
||||
agree: false,
|
||||
},
|
||||
language: '',
|
||||
submitted: false,
|
||||
showError: false,
|
||||
messageError: '',
|
||||
register: true,
|
||||
publisherId: this.$store.state.publisherId,
|
||||
redeemCode: this.$route.params.code,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateLanguage(e) {
|
||||
this.language = e
|
||||
this.$store.commit('language', this.language)
|
||||
},
|
||||
getValidationState({ dirty, validated, valid = null }) {
|
||||
return dirty || validated ? valid : null
|
||||
},
|
||||
commitStorePublisherId(val) {
|
||||
this.$store.commit('publisherId', val)
|
||||
},
|
||||
async onSubmit() {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: createUser,
|
||||
variables: {
|
||||
email: this.form.email,
|
||||
firstName: this.form.firstname,
|
||||
lastName: this.form.lastname,
|
||||
language: this.language,
|
||||
publisherId: this.$store.state.publisherId,
|
||||
redeemCode: this.redeemCode,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
this.$router.push('/thx/register')
|
||||
})
|
||||
.catch((error) => {
|
||||
this.showError = true
|
||||
this.messageError = error.message
|
||||
})
|
||||
},
|
||||
closeAlert() {
|
||||
this.showError = false
|
||||
this.messageError = ''
|
||||
this.form.email = ''
|
||||
this.form.firstname = ''
|
||||
this.form.lastname = ''
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
namesFilled() {
|
||||
return (
|
||||
this.form.firstname !== '' &&
|
||||
this.form.firstname.length > 2 &&
|
||||
this.form.lastname !== '' &&
|
||||
this.form.lastname.length > 1
|
||||
)
|
||||
},
|
||||
emailFilled() {
|
||||
return this.form.email !== ''
|
||||
},
|
||||
disabled() {
|
||||
return !(this.namesFilled && this.emailFilled && this.form.agree && !!this.language)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user