@ -7,50 +7,90 @@
< form v -on : submit.prevent = ' submit ( user ) ' class = 'registration-form' >
< div class = 'container' >
< div class = 'text-fields' >
< div class = 'form-group' >
< label for= ' username'> { { $t ( 'login.username' ) } } < / label >
< input :disabled =" registering" v -model = ' user.username ' class = 'form-control' id = ' username' placeholder = 'e.g. lain' >
< div class = 'form-group' : class = "{ 'form-group--error': $v.user.username.$error }" >
< label class= 'form--label' for= ' sign-up- username'> { { $t ( 'login.username' ) } } < / label >
< input :disabled =" isPending" v -model .trim = ' $ v.user.username. $ model ' class = 'form-control' id = ' sign-up- username' placeholder = 'e.g. lain' >
< / div >
< div class = 'form-group' >
< label for = 'fullname' > { { $t ( 'registration.fullname' ) } } < / label >
< input :disabled ="registering" v -model = ' user.fullname ' class = 'form-control' id = 'fullname' placeholder = 'e.g. Lain Iwakura' >
< div class = "form-error" v-if ="$v.user.username.$dirty" >
< ul >
< li v-if ="!$v.user.username.required" >
< span > { { $t ( 'registration.validations.username_required' ) } } < / span >
< / li >
< / ul >
< / div >
< div class = 'form-group' >
< label for = 'email' > { { $t ( 'registration.email' ) } } < / label >
< input :disabled ="registering" v -model = ' user.email ' class = 'form-control' id = 'email' type = "email" >
< div class = 'form-group' : class = "{ 'form-group--error': $v.user.fullname.$error }" >
< label class = 'form--label' for = 'sign-up-fullname' > { { $t ( 'registration.fullname' ) } } < / label >
< input :disabled ="isPending" v -model .trim = ' $ v.user.fullname. $ model ' class = 'form-control' id = 'sign-up-fullname' placeholder = 'e.g. Lain Iwakura' >
< / div >
< div class = 'form-group' >
< label for = 'bio' > { { $t ( 'registration.bio' ) } } < / label >
< input :disabled ="registering" v -model = ' user.bio ' class = 'form-control' id = 'bio' >
< div class = "form-error" v-if ="$v.user.fullname.$dirty" >
< ul >
< li v-if ="!$v.user.fullname.required" >
< span > { { $t ( 'registration.validations.fullname_required' ) } } < / span >
< / li >
< / ul >
< / div >
< div class = 'form-group' >
< label for = 'password' > { { $t ( 'login.password' ) } } < / label >
< input :disabled ="registering" v -model = ' user.password ' class = 'form-control' id = 'password' type = 'password' >
< div class = 'form-group' : class = "{ 'form-group--error': $v.user.email.$error }" >
< label class = 'form--label' for = 'email' > { { $t ( 'registration.email' ) } } < / label >
< input :disabled ="isPending" v -model = ' $ v.user.email. $ model ' class = 'form-control' id = 'email' type = "email" >
< / div >
< div class = 'form-group' >
< label for = 'password_confirmation' > { { $t ( 'registration.password_confirm' ) } } < / label >
< input :disabled ="registering" v -model = ' user.confirm ' class = 'form-control' id = 'password_confirmation' type = 'password' >
< div class = "form-error" v-if ="$v.user.email.$dirty" >
< ul >
< li v-if ="!$v.user.email.required" >
< span > { { $t ( 'registration.validations.email_required' ) } } < / span >
< / li >
< / ul >
< / div >
<!--
< div class = 'form-group' >
< label for = 'captcha' > Captcha < / label >
< img src = '/qvittersimplesecurity/captcha.jpg' alt = 'captcha' class = 'captcha' >
< input :disabled ="registering" v -model = ' user.captcha ' placeholder = 'Enter captcha' type = 'test' class = 'form-control' id = 'captcha' >
< label class = 'form--label' for = 'bio' > { { $t ( 'registration.bio' ) } } < / label >
< input :disabled ="isPending" v -model = ' user.bio ' class = 'form-control' id = 'bio' >
< / div >
< div class = 'form-group' : class = "{ 'form-group--error': $v.user.password.$error }" >
< label class = 'form--label' for = 'sign-up-password' > { { $t ( 'login.password' ) } } < / label >
< input :disabled ="isPending" v -model = ' user.password ' class = 'form-control' id = 'sign-up-password' type = 'password' >
< / div >
< div class = "form-error" v-if ="$v.user.password.$dirty" >
< ul >
< li v-if ="!$v.user.password.required" >
< span > { { $t ( 'registration.validations.password_required' ) } } < / span >
< / li >
< / ul >
< / div >
-- >
< div class = 'form-group' : class = "{ 'form-group--error': $v.user.confirm.$error }" >
< label class = 'form--label' for = 'sign-up-password-confirmation' > { { $t ( 'registration.password_confirm' ) } } < / label >
< input :disabled ="isPending" v -model = ' user.confirm ' class = 'form-control' id = 'sign-up-password-confirmation' type = 'password' >
< / div >
< div class = "form-error" v-if ="$v.user.confirm.$dirty" >
< ul >
< li v-if ="!$v.user.confirm.required" >
< span > { { $t ( 'registration.validations.password_confirmation_required' ) } } < / span >
< / li >
< li v-if ="!$v.user.confirm.sameAsPassword" >
< span > { { $t ( 'registration.validations.password_confirmation_match' ) } } < / span >
< / li >
< / ul >
< / div >
< div class = 'form-group' v -if = ' token ' >
< label for = 'token' > { { $t ( 'registration.token' ) } } < / label >
< input disabled = 'true' v -model = ' token ' class = 'form-control' id = 'token' type = 'text' >
< / div >
< div class = 'form-group' >
< button :disabled ="registering" type = 'submit' class = 'btn btn-default' > { { $t ( 'general.submit' ) } } < / button >
< button :disabled =" isPend ing" type = 'submit' class = 'btn btn-default' > { { $t ( 'general.submit' ) } } < / button >
< / div >
< / div >
< div class = 'terms-of-service' v-html ="termsofservice" >
< div class = 'terms-of-service' v-html ="termsOfService" >
< / div >
< / div >
< div v -if = " serverValidationErrors.length " class = 'form-group' >
< div class = 'alert error' >
< span v-for ="error in serverValidationErrors" > {{ error }} < / span >
< / div >
< div v -if = " error " class = 'form-group' >
< div class = 'alert error' > { { error } } < / div >
< / div >
< / form >
< / div >
@ -60,6 +100,7 @@
< script src = "./registration.js" > < / script >
< style lang = "scss" >
@ import '../../_variables.scss' ;
$validations - cRed : # f04124 ;
. registration - form {
display : flex ;
@ -89,6 +130,55 @@
flex - direction : column ;
padding : 0.3 em 0.0 em 0.3 em ;
line - height : 24 px ;
margin - bottom : 1 em ;
}
@ keyframes shakeError {
0 % {
transform : translateX ( 0 ) ; }
15 % {
transform : translateX ( 0.375 rem ) ; }
30 % {
transform : translateX ( - 0.375 rem ) ; }
45 % {
transform : translateX ( 0.375 rem ) ; }
60 % {
transform : translateX ( - 0.375 rem ) ; }
75 % {
transform : translateX ( 0.375 rem ) ; }
90 % {
transform : translateX ( - 0.375 rem ) ; }
100 % {
transform : translateX ( 0 ) ; } }
. form - group -- error {
animation - name : shakeError ;
animation - duration : .6 s ;
animation - timing - function : ease - in - out ;
}
. form - group -- error . form -- label {
color : $validations - cRed ;
color : var ( -- cRed , $validations - cRed ) ;
}
. form - error {
margin - top : - 0.7 em ;
text - align : left ;
span {
font - size : 12 px ;
}
}
. form - error ul {
list - style : none ;
padding : 0 0 0 5 px ;
margin - top : 0 ;
li : : before {
content : "• " ;
}
}
form textarea {
@ -102,8 +192,6 @@
}
. btn {
/ / a l i g n - s e l f : f l e x - s t a r t ;
/ / w i d t h : 1 0 e m ;
margin - top : 0.6 em ;
height : 28 px ;
}