Skip to content

Instantly share code, notes, and snippets.

@gistlyn gistlyn/login.html
Created Mar 22, 2019

Embed
What would you like to do?
Vuetify Login
{{#raw}}
<template>
<v-layout justify-center>
<v-flex xs5>
<v-toolbar color="pink">
<v-toolbar-title class="white--text">
Sign In using credentials
</v-toolbar-title>
</v-toolbar>
<v-card>
<v-form v-model="valid" ref="form" lazy-validation @keyup.native.enter="submit">
<v-container>
<v-alert outline color="error" icon="warning" :value="errorSummary">{{ errorSummary }}</v-alert>
<v-layout column>
<v-text-field
label="Email"
v-model="userName"
required
:rules="emailRules"
:error-messages="errorResponse('userName')"
></v-text-field>
<v-text-field
label="Password"
v-model="password"
type="password"
required
:rules="passwordRules"
:error-messages="errorResponse('password')"
></v-text-field>
<v-checkbox label="Remember Me" v-model="rememberMe"></v-checkbox>
</v-layout>
</v-container>
</v-form>
<v-card-actions>
<v-flex offset-xs2 mb-2>
<v-btn flat href="/vuetify/register" :disabled="!valid || loading">Register New User</v-btn>
<v-btn color="primary" @click="submit" :disabled="!valid || loading">Sign In</v-btn>
</v-flex>
</v-card-actions>
</v-card>
<v-flex>
<v-toolbar>
<v-toolbar-title>
Quick Login
</v-toolbar-title>
</v-toolbar>
<v-card>
<v-layout>
<v-flex>
<v-btn @click="switchUser('admin@email.com')" flat>admin@email.com</v-btn>
</v-flex>
<v-flex>
<v-btn @click="switchUser('new@user.com')" flat>new@user.com</v-btn>
</v-flex>
</v-layout>
</v-card>
</v-flex>
<div class="src">
<h4>Source Code and References</h4>
<div><a href="https://github.com/NetCoreApps/Validation/blob/master/world/wwwroot/vuetify/_layout.html" class="ref">/vuetify/_layout.html</a></div>
<div><a href="https://github.com/NetCoreApps/Validation/blob/master/world/wwwroot/vuetify/login.html" class="ref">/vuetify/login.html</a></div>
<div><a href="https://github.com/NetCoreApps/Validation/blob/master/world/wwwroot/vuetify/login.ts" class="ref">/vuetify/login.ts</a></div>
</div>
</v-flex>
</v-layout>
</template>
{{/raw}}
{{#capture appendTo scripts}}
<script>var CONTINUE = '{{ qs.redirect ?? "/vuetify/" }}';</script>
<script src="login.js"></script>
{{/capture}}
import { Vue } from 'vue';
import { errorResponse, errorResponseExcept } from '@servicestack/client';
import { client, emailRules, passwordRules } from './shared';
import { Authenticate } from "../dtos";
declare var CONTINUE:any;
new Vue({
el: '#app',
computed: {
errorSummary: function() {
return errorResponseExcept.call(this, 'userName,password');
},
},
methods: {
async submit() {
const form = (this.$refs.form as HTMLFormElement);
if (form.validate()) {
try {
this.loading = true;
const response = await client.post(new Authenticate({
provider: 'credentials',
userName: this.userName,
password: this.password,
rememberMe: this.rememberMe,
}));
location.href = CONTINUE;
} catch (e) {
this.responseStatus = e.responseStatus || e;
} finally {
this.loading = false;
form.resetValidation();
}
}
},
switchUser(email:string) {
this.userName = email;
this.password = 'p@55wOrd';
},
errorResponse
},
data: () => ({
loading: false,
valid: true,
userName: "",
password: "",
rememberMe: true,
emailRules, passwordRules,
responseStatus: null
}),
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.