Guest User

Untitled

a guest
Feb 19th, 2018
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.54 KB | None | 0 0
  1. <template lang="pug">
  2. .row.justify-center.items-center.max-available-height.col-12
  3. q-card(:flat="true").col-xs-12.col-md-6.col-sm-10.md-gutter
  4. q-card-main
  5. q-field(
  6. icon="fa-user"
  7. helper="Enter your username"
  8. :error="validator.username.$error"
  9. :error-label="!validator.username.isUnique ? 'Username is already taken' : 'Minimum 3 symbols'"
  10. )
  11. q-input(
  12. float-label="Username"
  13. :after="conditionIcon('username')"
  14. @input="updateUsername(username); validator.username.$touch();"
  15. v-model.lazy="username"
  16. )
  17.  
  18. q-field(
  19. icon="fa-key"
  20. helper="Enter your password"
  21. :error="validator.password.$error"
  22. error-label="Password must contains at least 12 symbols"
  23. count
  24. )
  25. q-input(
  26. type="password"
  27. float-label="Password"
  28. :after="conditionIcon('password')"
  29. @input="updatePassword($event); validator.password.$touch();"
  30. v-model="password"
  31. )
  32.  
  33. q-field(
  34. icon="fa-key"
  35. helper="Repeat your password"
  36. :error="validator.repeatPassword.$error"
  37. error-label="Passwords do not match"
  38. count
  39. )
  40. q-input(
  41. type="password"
  42. float-label="Password confirmation"
  43. :after="conditionIcon('repeatPassword')"
  44. @input="updateRepeatPassword($event); validator.repeatPassword.$touch();"
  45. v-model="repeatPassword"
  46. )
  47. q-card-actions(align="center")
  48. q-btn.full-width(
  49. @click="submit"
  50. :disable="validator.$invalid"
  51. big
  52. color="secondary"
  53. )
  54. | Sign Up
  55.  
  56. slot(name="footer")
  57. </template>
  58.  
  59. <script lang="ts">
  60. import Vue from "vue"
  61. import { Component, Model, Prop, Emit } from 'vue-property-decorator'
  62. import {
  63. QField,
  64. QInput,
  65. QCard,
  66. QCardTitle,
  67. QCardMain,
  68. QCardActions,
  69. QBtn
  70. } from 'quasar'
  71. export interface SignUpForm {
  72. form: {
  73. username: string;
  74. password: string;
  75. repeatPassword: string;
  76. }
  77. }
  78. @Component({
  79. components: {
  80. QField,
  81. QInput,
  82. QCard,
  83. QCardActions,
  84. QCardMain,
  85. QBtn
  86. }
  87. })
  88. export default class SignUpPresentation extends Vue {
  89. @Prop()
  90. validator: SignUpForm
  91. isSubbmitAllowed: boolean = true
  92. username: string = ''
  93. password: string = ''
  94. repeatPassword: string = ''
  95. @Emit('usernameChanged')
  96. updateUsername (e) {/* Pass username to the container component */}
  97. @Emit('passwordChanged')
  98. updatePassword (e) {/* Pass password to the container component */}
  99. @Emit('repeatPasswordChanged')
  100. updateRepeatPassword (e) {/* Pass repeatPassword to the container component */}
  101. @Emit('submit')
  102. submit() {}
  103. conditionIcon (property) {
  104. const v = this.validator;
  105. return [
  106. { icon: 'error', error: true, handler () {}},
  107. {
  108. icon: 'done',
  109. condition: (!v[property].$error && v[property].$dirty),
  110. handler () {}
  111. }
  112. ]
  113. }
  114. }
  115. </script>
  116.  
  117. <style lang="stylus">
  118. </style>
Add Comment
Please, Sign In to add comment