change auth area pages for auth-templates

This commit is contained in:
ogerly 2022-03-30 16:40:42 +02:00
parent 4b4ab225a1
commit dd6fce18e1
4 changed files with 207 additions and 318 deletions

View File

@ -1,41 +1,20 @@
<template> <template>
<div class="forgot-password"> <div class="forgot-password p-4">
<div class="header p-4"> <div class="pb-5">Bitte gib deine E-Mail an mit der du bei Gradido angemeldet bist.</div>
<b-container class="container"> <validation-observer ref="observer" v-slot="{ handleSubmit }">
<div class="header-body text-center mb-7"> <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<b-row class="justify-content-center"> <input-email v-model="form.email"></input-email>
<b-col xl="5" lg="6" md="8" class="px-2"> <div class="text-center">
<h1>{{ $t('settings.password.reset') }}</h1> <b-button type="submit" variant="gradido">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys--> {{ $t('settings.password.send_now') }}
<p class="text-lead">{{ $t(subtitle) }}</p> </b-button>
</b-col>
</b-row>
</div> </div>
</b-container> </b-form>
</validation-observer>
<div class="text-center py-lg-4">
<router-link to="/login" class="mt-3">{{ $t('back') }}</router-link>
</div> </div>
<b-container class="mt--8 p-1">
<b-row class="justify-content-center">
<b-col lg="6" md="8">
<b-card no-body class="border-0 gradido-custom-background">
<b-card-body class="p-4">
<validation-observer ref="observer" v-slot="{ handleSubmit }">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<input-email v-model="form.email"></input-email>
<div class="text-center">
<b-button type="submit" variant="primary">
{{ $t('settings.password.send_now') }}
</b-button>
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
<div class="text-center py-lg-4">
<router-link to="/login" class="mt-3">{{ $t('back') }}</router-link>
</div>
</b-container>
</div> </div>
</template> </template>
<script> <script>

View File

@ -1,62 +1,55 @@
<template> <template>
<div class="login-form"> <div class="login-form p-4">
<!-- Header --> <div class="pb-5">Melde dich mit deinen Zugangsdaten an. Bewahre sie stet's sicher auf!</div>
<div class="p-3"> <!-- <div class="text-center mb-4 test-communitydata">
<b-container> <b>{{ $store.state.community.name }}</b>
<div class="text-center mb-7 header"> <p class="text-lead">
<b-row class="justify-content-center"> {{ $store.state.community.description }}
<b-col xl="5" lg="6" md="8" class="px-2"> </p>
<h1>{{ $t('site.login.heading') }}</h1> {{ $t('login') }}
<p class="text-lead">{{ $t('site.login.community') }}</p> </div> -->
</b-col> <label>Wähle deine Community</label>
</b-row> <b-form-select
</div> v-model="selected"
</b-container> :options="options"
</div> class="selectedLanguage mb-3"
<b-container class="mt--8"> ></b-form-select>
<b-row class="justify-content-center">
<b-col lg="5" md="7">
<b-card no-body class="border-0 mb-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>
{{ $t('login') }}
</div>
<validation-observer ref="observer" v-slot="{ handleSubmit }"> <validation-observer ref="observer" v-slot="{ handleSubmit }">
<b-form @submit.stop.prevent="handleSubmit(onSubmit)"> <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
<input-email v-model="form.email"></input-email> <b-row>
<input-password <b-col><input-email v-model="form.email"></input-email></b-col>
:label="$t('form.password')" <b-col>
:placeholder="$t('form.password')" <input-password
:name="$t('form.password')" :label="$t('form.password')"
v-model="form.password" :placeholder="$t('form.password')"
></input-password> :name="$t('form.password')"
<div class="text-center mt-4"> v-model="form.password"
<b-button type="submit" variant="primary">{{ $t('login') }}</b-button> ></input-password>
</div> </b-col>
</b-form> </b-row>
</validation-observer> <b-row>
</b-card-body> <b-col>
</b-card> <b-form-checkbox
<b-row class="mt-3"> v-model="status"
<b-col cols="6" class="text-center text-sm-left col-12 col-sm-6 pb-5"> name="checkbox-1"
<router-link to="/forgot-password" class="mt-3"> value="saved"
{{ $t('settings.password.forgot_pwd') }} unchecked-value="not_saved"
</router-link> >
</b-col> Anmeldung speichern
<b-col cols="6" class="text-center text-sm-right col-12 col-sm-6"> </b-form-checkbox>
<router-link to="/register" class="mt-3"> </b-col>
{{ $t('site.login.new_wallet') }} <b-col>
</router-link> <router-link to="/forgot-password" class="mt-3">
</b-col> {{ $t('settings.password.forgot_pwd') }}
</b-row> </router-link>
</b-col> </b-col>
</b-row> </b-row>
</b-container> <div class="mt-4">
<b-button type="submit" variant="gradido">{{ $t('login') }}</b-button>
</div>
</b-form>
</validation-observer>
</div> </div>
</template> </template>
<script> <script>
@ -79,6 +72,9 @@ export default {
password: '', password: '',
}, },
passwordVisible: false, passwordVisible: false,
selected: '01',
options: [{ value: '01', text: this.$store.state.community.name }],
status: false,
} }
}, },
methods: { methods: {

View File

@ -1,191 +1,131 @@
<template> <template>
<div id="registerform"> <div id="registerform p-4">
<!-- Header --> <div class="pb-5">
<div class="header p-4"> Registriere dich indem du alle Daten vollständig und in die richtigen Felder eingibst.
<b-container class="container">
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-2">
<h1>{{ $t('site.signup.title') }}</h1>
<p class="text-lead">{{ $t('site.signup.subtitle') }}</p>
</b-col>
</b-row>
</div>
</b-container>
</div> </div>
<validation-observer ref="observer" v-slot="{ handleSubmit }">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<b-row>
<b-col>
<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>
<!-- Page content --> <b-form-invalid-feedback id="registerFirstnameLiveFeedback">
<b-container class="mt--8 p-1"> {{ validationContext.errors[0] }}
<!-- Table --> </b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<b-col>
<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-row class="justify-content-center"> <b-form-invalid-feedback id="registerLastnameLiveFeedback">
<b-col lg="6" md="8"> {{ validationContext.errors[0] }}
<b-card no-body class="border-0 gradido-custom-background"> </b-form-invalid-feedback>
<b-card-body class="p-4"> </b-form-group>
<div class="text-center text-muted mb-4 test-communitydata"> </validation-provider>
<b>{{ $store.state.community.name }}</b> </b-col>
<p class="text-lead"> </b-row>
{{ $store.state.community.description }} <b-row>
</p> <b-col><input-email v-model="form.email"></input-email></b-col>
<div>{{ $t('signup') }}</div> <b-col>
<label>{{ $t('language') }}</label>
<language-switch-select @update-language="updateLanguage" />
</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 mb-4">
<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> </div>
</b-collapse>
</b-col>
</b-row>
<validation-observer ref="observer" v-slot="{ handleSubmit }"> <b-row>
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)"> <b-col cols="3">
<validation-provider <b-button
:name="$t('form.firstname')" :disabled="disabled"
:rules="{ required: true, min: 3 }" type="submit"
v-slot="validationContext" :variant="disabled ? 'outline-light' : 'gradido'"
> >
<b-form-group {{ $t('signup') }}
class="mb-3" </b-button>
:label="$t('form.firstname')" </b-col>
label-for="registerFirstname" <b-col cols="9">
> <b-form-checkbox
<b-form-input id="registerCheckbox"
id="registerFirstname" v-model="form.agree"
:name="$t('form.firstname')" :name="$t('site.signup.agree')"
v-model="form.firstname" >
:placeholder="$t('form.firstname')" <!-- eslint-disable-next-line @intlify/vue-i18n/no-v-html -->
:state="getValidationState(validationContext)" <span class="text-muted" v-html="$t('site.signup.agree')"></span>
aria-describedby="registerFirstnameLiveFeedback" </b-form-checkbox>
></b-form-input> </b-col>
</b-row>
<b-form-invalid-feedback id="registerFirstnameLiveFeedback"> </b-form>
{{ validationContext.errors[0] }} </validation-observer>
</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>
</b-col>
</b-row>
</b-container>
<!--
<div class="text-center pt-4">
<router-link class="test-button-another-community" to="/select-community">
<b-button variant="outline-secondary">
{{ $t('community.choose-another-community') }}
</b-button>
</router-link>
</div>
-->
</div> </div>
</template> </template>
<script> <script>

View File

@ -1,49 +1,23 @@
<template> <template>
<div class="resetpwd-form"> <div class="resetpwd-form p-4">
<b-container> <div class="pb-5">Trage bitte dein Passwort ein und wiederhole es.</div>
<div class="header p-4" ref="header"> <validation-observer ref="observer" v-slot="{ handleSubmit }">
<div class="header-body text-center mb-7"> <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<b-row class="justify-content-center"> <input-password-confirmation v-model="form" />
<b-col xl="5" lg="6" md="8" class="px-2"> <div class="text-center">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys--> <b-button type="submit" variant="primary" class="mt-4">
<h1>{{ $t(displaySetup.title) }}</h1> <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
<div class="pb-4"> {{ $t(displaySetup.button) }}
<span> </b-button>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
{{ $t(displaySetup.text) }}
</span>
</div>
</b-col>
</b-row>
</div> </div>
</div> </b-form>
</b-container> </validation-observer>
<b-container class="mt--8 p-1">
<b-row class="justify-content-center"> <b-row v-if="displaySetup.linkTo">
<b-col lg="6" md="8"> <b-col class="text-center py-lg-4">
<b-card no-body class="border-0 gradido-custom-background"> <router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link>
<b-card-body class="p-4"> </b-col>
<validation-observer ref="observer" v-slot="{ handleSubmit }"> </b-row>
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<input-password-confirmation v-model="form" />
<div class="text-center">
<b-button type="submit" variant="primary" class="mt-4">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
{{ $t(displaySetup.button) }}
</b-button>
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
<b-row v-if="displaySetup.linkTo">
<b-col class="text-center py-lg-4">
<router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link>
</b-col>
</b-row>
</b-container>
</div> </div>
</template> </template>
<script> <script>