Newsletter.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <v-flex xs12>
  3. <div style="margin-top:10%">
  4. <p style="font-size: 1.4em;">Si vous souhaitez être informé des résultats non nomminatifs de ces recherches vous pouvez, sans obligation, laisser votre adresse mail, elle ne sera utilisée que pour vous permettre d'accéder aux résultats de l'étude une fois analysés.</p>
  5. <v-text-field
  6. v-model="email"
  7. :rules="emailRules"
  8. label="Votre adresse email"
  9. required
  10. />
  11. <v-btn @click="addNewsletter" color="success" large>Valider mon adresse</v-btn>
  12. </div>
  13. <div class="text-center">
  14. <v-dialog
  15. v-model="dialogError"
  16. width="500"
  17. >
  18. <v-card>
  19. <v-card-title
  20. class="headline lighten-2"
  21. primary-title
  22. >
  23. <p style="font-size:0.8em;">L'adresse email saisie n'est pas correcte.</p>
  24. </v-card-title>
  25. <v-divider />
  26. <v-card-actions>
  27. <v-spacer />
  28. <v-btn
  29. color="#DF0101"
  30. text
  31. @click="dialogError = false"
  32. >
  33. Fermer
  34. </v-btn>
  35. </v-card-actions>
  36. </v-card>
  37. </v-dialog>
  38. </div>
  39. <div class="text-center">
  40. <v-dialog
  41. v-model="dialogSuccess"
  42. width="500"
  43. >
  44. <v-card>
  45. <v-card-title
  46. class="headline lighten-4"
  47. primary-title
  48. >
  49. <p style="font-size:0.8em;">Votre adresse email a bien été ajoutée à la newsletter.</p>
  50. </v-card-title>
  51. <!-- <v-card-text>
  52. </v-card-text> -->
  53. <v-divider />
  54. <v-card-actions>
  55. <v-spacer />
  56. <v-btn
  57. color="success"
  58. text
  59. @click="dialogSuccess = false"
  60. >
  61. Ok
  62. </v-btn>
  63. </v-card-actions>
  64. </v-card>
  65. </v-dialog>
  66. </div>
  67. </v-flex>
  68. </template>
  69. <script>
  70. import { NEWS as newsletter } from '@/../config.messagesId'
  71. import { mapActions } from 'vuex'
  72. export default {
  73. name: 'Newsletter',
  74. data() {
  75. return {
  76. emailRules: [
  77. v => !!v || 'L\'adresse email est obligatoire',
  78. v => /.+@.+/.test(v) || 'L\'email doit être valide'
  79. ],
  80. email: '',
  81. dialogError: false,
  82. dialogSuccess: false
  83. }
  84. },
  85. methods: {
  86. ...mapActions(['sendMessage', 'checkExistData']),
  87. async addNewsletter() {
  88. // need to check if mail is already there or not
  89. const data = {
  90. msgId: newsletter,
  91. msg: {
  92. experimentName: this.experimentName,
  93. sceneName: this.sceneName,
  94. userEmail: this.email
  95. }
  96. }
  97. if (this.validEmail(this.email)) {
  98. const findDoc = await this.checkExistData(data)
  99. console.log(findDoc)
  100. if (findDoc === 204) {
  101. console.log('Create new email input')
  102. this.sendMessage(data)
  103. this.dialogSuccess = true
  104. }
  105. }
  106. else {
  107. this.dialogError = true
  108. }
  109. },
  110. validEmail: function (email) {
  111. let re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  112. return re.test(email)
  113. }
  114. }
  115. }
  116. </script>