KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[design] use card for the login page

This commit is contained in:
Avris 2021-08-09 23:10:37 +02:00
parent b144e3e111
commit e2420ff8a5
1 changed files with 64 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/Login.vue
View File

@ -2,16 +2,12 @@
<section> <section>
<Alert type="danger" :message="error"/> <Alert type="danger" :message="error"/>
<div class="card">
<div class="card-body">
<div v-if="token === null"> <div v-if="token === null">
<div class="alert alert-info mb-3">
<p class="mb-0">
<Icon v="info-circle"/>
<T>user.login.why</T>
</p>
</div>
<div class="row"> <div class="row">
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">
<form @submit.prevent="login" :disabled="saving" class="mb-4"> <form @submit.prevent="login" :disabled="saving" class="mb-4 mb-md-0">
<input type="text" class="form-control mb-3" v-model="usernameOrEmail" <input type="text" class="form-control mb-3" v-model="usernameOrEmail"
:placeholder="$t('user.login.placeholder')" autofocus required/> :placeholder="$t('user.login.placeholder')" autofocus required/>
<p class="small text-muted mb-1"> <p class="small text-muted mb-1">
@ -36,14 +32,6 @@
{{ providerOptions.name }} {{ providerOptions.name }}
</a> </a>
</div> </div>
<p class="small text-muted">
<Icon v="gavel"/>
<T>terms.consent</T>
</p>
<p class="small text-muted">
<Icon v="lock"/>
<T>user.login.passwordless</T>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -69,6 +57,22 @@
</div> </div>
</form> </form>
</div> </div>
</div>
<div class="card-footer small">
<p>
<Icon v="info-circle"/>
<T>user.login.why</T>
</p>
<p>
<Icon v="gavel"/>
<T>terms.consent</T>
</p>
<p class="mb-0">
<Icon v="lock"/>
<T>user.login.passwordless</T>
</p>
</div>
</div>
</section> </section>
</template> </template>