Changeset View
Changeset View
Standalone View
Standalone View
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 card-deck"> | <div class="plan-selector row row-cols-sm-2 g-3"> | ||||
<div v-for="item in plans" :key="item.id" :class="'card bg-light plan-' + item.title"> | <div v-for="item in plans" :key="item.id"> | ||||
<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> | <button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button> | ||||
<div class="plan-description text-left 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 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="form-group"> | <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-right" 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="form-group"> | <div class="mb-3"> | ||||
<label for="signup_email" class="sr-only">{{ $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> | <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button> | ||||
<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button> | <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button> | ||||
</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="form-group"> | <div class="mb-3"> | ||||
<label for="signup_short_code" class="sr-only">{{ $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> | <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button> | ||||
<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button> | <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button> | ||||
<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> | ||||
<p class="card-text"> | <p class="card-text"> | ||||
{{ $t('signup.step3') }} | {{ $t('signup.step3') }} | ||||
</p> | </p> | ||||
<form @submit.prevent="submitStep3" data-validation-prefix="signup_"> | <form @submit.prevent="submitStep3" data-validation-prefix="signup_"> | ||||
<div class="form-group" v-if="invitation"> | <div class="mb-3" v-if="invitation"> | ||||
<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-right" 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="form-group"> | <div class="mb-3"> | ||||
<label for="signup_login" class="sr-only"></label> | <label for="signup_login" class="visually-hidden"></label> | ||||
<div class="input-group"> | <div class="input-group"> | ||||
<input type="text" class="form-control" id="signup_login" required v-model="login" :placeholder="$t('signup.login')"> | <input type="text" class="form-control" id="signup_login" required v-model="login" :placeholder="$t('signup.login')"> | ||||
<span class="input-group-append input-group-prepend"> | |||||
<span class="input-group-text">@</span> | <span class="input-group-text">@</span> | ||||
</span> | <input v-if="is_domain" type="text" class="form-control rounded-end" id="signup_domain" required v-model="domain" :placeholder="$t('form.domain')"> | ||||
<input v-if="is_domain" type="text" class="form-control rounded-right" id="signup_domain" required v-model="domain" :placeholder="$t('form.domain')"> | <select v-else class="form-select rounded-end" id="signup_domain" required v-model="domain"> | ||||
<select v-else class="custom-select rounded-right" id="signup_domain" required v-model="domain"> | |||||
<option v-for="domain in domains" :key="domain" :value="domain">{{ domain }}</option> | <option v-for="domain in domains" :key="domain" :value="domain">{{ domain }}</option> | ||||
</select> | </select> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="mb-3"> | ||||
<label for="signup_password" class="sr-only">{{ $t('form.password') }}</label> | <label for="signup_password" class="visually-hidden">{{ $t('form.password') }}</label> | ||||
<input type="password" class="form-control" id="signup_password" :placeholder="$t('form.password')" required v-model="password"> | <input type="password" class="form-control" id="signup_password" :placeholder="$t('form.password')" required v-model="password"> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="mb-3"> | ||||
<label for="signup_confirm" class="sr-only">{{ $t('form.password-confirm') }}</label> | <label for="signup_confirm" class="visually-hidden">{{ $t('form.password-confirm') }}</label> | ||||
<input type="password" class="form-control" id="signup_confirm" :placeholder="$t('form.password-confirm')" required v-model="password_confirmation"> | <input type="password" class="form-control" id="signup_confirm" :placeholder="$t('form.password-confirm')" required v-model="password_confirmation"> | ||||
</div> | </div> | ||||
<div class="form-group pt-2 pb-2"> | <div class="mb-3 pt-2"> | ||||
<label for="signup_voucher" class="sr-only">{{ $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" type="button" @click="stepBack">{{ $t('btn.back') }}</button> | <button v-if="!invitation" class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button> | ||||
<button class="btn btn-primary" type="submit"> | <button class="btn btn-primary" type="submit"> | ||||
<svg-icon icon="check"></svg-icon> <span v-if="invitation">{{ $t('btn.signup') }}</span><span v-else>{{ $t('btn.submit') }}</span> | <svg-icon icon="check"></svg-icon> <span v-if="invitation">{{ $t('btn.signup') }}</span><span v-else>{{ $t('btn.submit') }}</span> | ||||
</button> | </button> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
▲ Show 20 Lines • Show All 201 Lines • Show Last 20 Lines |