Skip to content

Instantly share code, notes, and snippets.

@andreas-it-dev
Last active November 8, 2020 11:08
Show Gist options
  • Save andreas-it-dev/5ea26d7b7c6b1e3cf29ab265070478cb to your computer and use it in GitHub Desktop.
Save andreas-it-dev/5ea26d7b7c6b1e3cf29ab265070478cb to your computer and use it in GitHub Desktop.
vuetify made sign up form - inspired by https://www.youtube.com/watch?v=jWoy_LQydvk
<template>
<v-container id="signinup-form" class="fill-height">
<Notification
:message="snackbarMessage"
:snackbar="snackbar"
:type="snackbarType"
/>
<v-row align="center" justify="center" no-gutters>
<v-col cols="12" sm="8" md="8" class="">
<v-card class="evelation-12 card">
<v-window v-model="step">
<!--SignIn-->
<v-window-item :value="1">
<v-row class="">
<v-col cols="12" md="8" class="pt-6 pb-6">
<v-card-text>
<v-form class="signup-form-form" @submit.prevent="signin">
<h1
class="text-center display-1 mb-10"
:class="`${bgColor}--text`"
>
Sign in
</h1>
<v-text-field
id="username"
v-model="login"
label="Username"
name="Username"
append-icon="person"
type="text"
:color="bgColor"
/>
<v-text-field
id="password"
v-model="password"
label="Password"
name="Password"
append-icon="lock"
type="password"
:color="bgColor"
/>
<div class="text-center">
<a
href="#"
class="mt-3 overline no-text-decoration"
:class="`${bgColor}--text`"
@click="step = 3"
>
Forgot your password?
</a>
</div>
<div class="text-center mt-6">
<v-btn type="submit" large :color="bgColor" dark
>Sign In</v-btn
>
</div>
</v-form>
</v-card-text>
</v-col>
<v-col
cols="12"
md="4"
class="darken-2 vcenter"
:class="`${bgColor}`"
>
<div>
<v-card-text :class="`${fgColor}--text`">
<h1 class="text-center headline mb-3">No User?</h1>
<h5 class="text-center overline mb-3">
Please Sign Up to continue
</h5>
</v-card-text>
<div class="text-center mb-6">
<v-btn dark outlined @click="step = 2">Sign Up</v-btn>
</div>
</div>
</v-col>
</v-row>
</v-window-item>
<!--SignUp-->
<v-window-item :value="2">
<v-row class="fill-height">
<v-col
cols="12"
md="4"
class="darken-2 vcenter"
:class="`${bgColor}`"
>
<div>
<v-card-text :class="`${fgColor}--text`">
<h1 class="text-center headline mb-3">Already a user?</h1>
<h5 class="text-center overline mb-3">Please Sign In</h5>
</v-card-text>
<div class="text-center mb-6">
<v-btn dark outlined @click="step = 1">Sign In</v-btn>
</div>
</div>
</v-col>
<v-col cols="12" md="8" class=" pt-6 pb-6">
<v-card-text>
<h1
class="text-center display-1 mb-10"
:class="`${bgColor}--text`"
>
Sign Up
</h1>
<v-form class="signup-form-form" @submit.prevent="signup">
<v-text-field
id="username"
v-model="username"
label="Username"
name="username"
append-icon="person"
type="text"
/>
<v-text-field
id="email"
v-model="email"
label="eMail"
name="email"
append-icon="email"
type="email"
/>
<v-text-field
id="password"
v-model="password"
label="Password"
name="password"
append-icon="lock"
type="password"
/>
<div class="text-center mt-6">
<v-btn type="submit" large :color="bgColor" dark>
Sign Up</v-btn
>
</div>
</v-form>
</v-card-text>
</v-col>
</v-row>
</v-window-item>
<!--PW Rest-->
<v-window-item :value="3">
<v-row class="fill-height">
<v-col
cols="12"
md="4"
class="darken-2 vcenter"
:class="`${bgColor}`"
>
<div>
<v-card-text :class="`${fgColor}--text`">
<h1 class="text-center headline mb-3">Already a user?</h1>
<h5 class="text-center overline mb-3">Please Sign In</h5>
</v-card-text>
<div class="text-center mb-6">
<v-btn dark outlined @click="step = 1">Sign In</v-btn>
</div>
</div>
</v-col>
<v-col cols="12" md="8" class="pt-6 pb-6">
<v-card-text>
<v-form class="signup-form-form">
<h1
class="text-center display-1 mb-10"
:class="`${bgColor}--text`"
>
Reset Password
</h1>
<v-text-field
id="login"
v-model="login"
label="Username / eMail"
name="login"
append-icon="person / email"
type="text"
:color="bgColor"
class="v-input__icon--double"
/>
<div class="text-center mt-6">
<v-btn large :color="bgColor" dark
>Reset Password</v-btn
>
</div>
</v-form>
</v-card-text>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import Notification from './Notification'
export default {
name: 'Signupform',
components: {
Notification
},
props: {
source: {
type: String,
default: ''
},
bgColor: {
type: String,
default: 'indigo'
},
fgColor: {
type: String,
default: 'white'
}
},
async fetch({ store, error }, user) {
try {
await store.dispatch('users/signupUser', user)
} catch (e) {
error({
statusCode: 503,
message: 'Unable to sign up user. Please try again later.'
})
}
},
data: () => ({
step: 1,
username: '',
email: '',
password: '',
login: '',
snackbarType: 'success',
snackbarMessage: '',
snackbar: false
}),
methods: {
signup() {
this.$auth
.signup({
data: {
user: {
username: this.username,
email: this.email,
password: this.password
}
}
})
.catch((e) => {
this.error = e + ''
})
},
async signin() {
try {
const response = await this.$auth.loginWith('local', {
data: {
login: this.login,
password: this.password
}
})
this.snackbarType = response.data.type
this.snackbarMessage = response.data.message
this.snackbar = true
} catch (err) {
this.snackbarType = 'error'
this.snackbarMessage = 'Error signing you in'
this.snackbar = true
}
}
}
}
</script>
<style scoped lang="scss">
.v-input__icon--double .v-input__icon {
margin-left: -4.25rem !important;
}
a.no-text-decoration {
text-decoration: none;
}
#signinup-form {
max-width: 75rem;
}
.signup-form-form {
max-width: 23rem;
margin: 0 auto;
}
.card {
overflow: hidden;
}
.vcenter {
display: flex;
align-items: center;
justify-content: center;
}
</style>
@andreas-it-dev
Copy link
Author

@Crypto2557

Would you mind sharing the Notification component as well? :D

its really nothing special.. just a tiny component.. https://gist.github.com/awunder/909b5a3629034505e24170cb5a3cfe37

be aware that i am using vuex there, as this is imho the best way to do it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment