Page MenuHomePhorge
Differential D3373 Diff 9640 src/resources/vue/Signup.vue

Changeset View

Standalone View

View Options

src/resources/vue/Signup.vue

<template> <template>
<div class="container"> <div class="container">
<div id="step0" v-if="!invitation"> <div id="step0" v-if="!invitation">
<div class="plan-selector row row-cols-sm-2 g-3"> <div class="plan-selector row row-cols-sm-2 g-3">
<div v-for="item in plans" :key="item.id"> <div v-for="item in plans" :key="item.id">
<div :class="'card bg-light plan-' + item.title"> <div :class="'card bg-light plan-' + item.title">
<div class="card-header plan-header"> <div class="card-header plan-header">
<div class="plan-ico text-center"> <div class="plan-ico text-center">
<svg-icon :icon="plan_icons[item.title]"></svg-icon> <svg-icon :icon="plan_icons[item.title]"></svg-icon>
</div> </div>
</div> </div>
<div class="card-body text-center"> <div class="card-body text-center">
<button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button> <btn class="btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></btn>
<div class="plan-description text-start mt-3" v-html="item.description"></div> <div class="plan-description text-start mt-3" v-html="item.description"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card d-none" id="step1" v-if="!invitation"> <div class="card d-none" id="step1" v-if="!invitation">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 1, n: 3 }) }}</h4> <h4 class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 1, n: 3 }) }}</h4>
<p class="card-text"> <p class="card-text">
{{ $t('signup.step1') }} {{ $t('signup.step1') }}
</p> </p>
<form @submit.prevent="submitStep1" data-validation-prefix="signup_"> <form @submit.prevent="submitStep1" data-validation-prefix="signup_">
<div class="mb-3"> <div class="mb-3">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" id="signup_first_name" :placeholder="$t('form.firstname')" autofocus v-model="first_name"> <input type="text" class="form-control" id="signup_first_name" :placeholder="$t('form.firstname')" autofocus v-model="first_name">
<input type="text" class="form-control rounded-end" id="signup_last_name" :placeholder="$t('form.surname')" v-model="last_name"> <input type="text" class="form-control rounded-end" id="signup_last_name" :placeholder="$t('form.surname')" v-model="last_name">
</div> </div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="signup_email" class="visually-hidden">{{ $t('signup.email') }}</label> <label for="signup_email" class="visually-hidden">{{ $t('signup.email') }}</label>
<input type="text" class="form-control" id="signup_email" :placeholder="$t('signup.email')" required v-model="email"> <input type="text" class="form-control" id="signup_email" :placeholder="$t('signup.email')" required v-model="email">
</div> </div>
<button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button> <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
<button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button> <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
</form> </form>
</div> </div>
</div> </div>
<div class="card d-none" id="step2" v-if="!invitation"> <div class="card d-none" id="step2" v-if="!invitation">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 2, n: 3 }) }}</h4> <h4 class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 2, n: 3 }) }}</h4>
<p class="card-text"> <p class="card-text">
{{ $t('signup.step2') }} {{ $t('signup.step2') }}
</p> </p>
<form @submit.prevent="submitStep2" data-validation-prefix="signup_"> <form @submit.prevent="submitStep2" data-validation-prefix="signup_">
<div class="mb-3"> <div class="mb-3">
<label for="signup_short_code" class="visually-hidden">{{ $t('form.code') }}</label> <label for="signup_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
<input type="text" class="form-control" id="signup_short_code" :placeholder="$t('form.code')" required v-model="short_code"> <input type="text" class="form-control" id="signup_short_code" :placeholder="$t('form.code')" required v-model="short_code">
</div> </div>
<button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button> <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
<button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button> <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
<input type="hidden" id="signup_code" v-model="code" /> <input type="hidden" id="signup_code" v-model="code" />
</form> </form>
</div> </div>
</div> </div>
<div class="card d-none" id="step3"> <div class="card d-none" id="step3">
<div class="card-body"> <div class="card-body">
<h4 v-if="!invitation" class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 3, n: 3 }) }}</h4> <h4 v-if="!invitation" class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: 3, n: 3 }) }}</h4>
Show All 18 Lines <div class="container">
</select> </select>
</div> </div>
</div> </div>
<password-input class="mb-3" v-model="pass"></password-input> <password-input class="mb-3" v-model="pass"></password-input>
<div class="mb-3"> <div class="mb-3">
<label for="signup_voucher" class="visually-hidden">{{ $t('signup.voucher') }}</label> <label for="signup_voucher" class="visually-hidden">{{ $t('signup.voucher') }}</label>
<input type="text" class="form-control" id="signup_voucher" :placeholder="$t('signup.voucher')" v-model="voucher"> <input type="text" class="form-control" id="signup_voucher" :placeholder="$t('signup.voucher')" v-model="voucher">
</div> </div>
<button v-if="!invitation" class="btn btn-secondary me-2" type="button" @click="stepBack">{{ $t('btn.back') }}</button> <btn v-if="!invitation" class="btn-secondary me-2" @click="stepBack">{{ $t('btn.back') }}</btn>
<button class="btn btn-primary" type="submit"> <btn class="btn-primary" type="submit" icon="check">
<svg-icon icon="check"></svg-icon> <span v-if="invitation">{{ $t('btn.signup') }}</span><span v-else>{{ $t('btn.submit') }}</span> <span v-if="invitation">{{ $t('btn.signup') }}</span>
</button> <span v-else>{{ $t('btn.submit') }}</span>
</btn>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import PasswordInput from './Widgets/PasswordInput' import PasswordInput from './Widgets/PasswordInput'
▲ Show 20 Lines • Show All 199 Lines • Show Last 20 Lines