refactoring email notification, closes #8

locales/email/en.json

@@ -1,8 +1,17 @@
 {
-  "email.registration": "email.registration",
+  "register":{ 
-  "email.register.subject": "email.register.subject",
+    "subject": "Richiesta registrazione ricevuta",
-  "email.register": "email.register",
+    "content": "Abbiamo ricevuto la richiesta di registrazione. La confermeremo quanto prima.\n Ciao"
-  "email.confirm": "email.confirm",
+  },
-  "email.recover": "email.recover",
+  "confirm": {
-  "email.press_here": "email.press_here"
+    "subject": "Puoi iniziare a pubblicare eventi",
-}
+    "content": "Ciao, il tuo account su <a href='{{config.baseurl}}'>{{config.title}}<a/> è stato creato. <a href='{{config.baseurl}}/user_confirm/{{user.recover_code}}'>Confermalo</a>."
+  },
+  "recover": {
+    "subject": "Recupero password",
+    "content": "Ciao, hai richiesto un recupero della password su {{config.title}}."
+  },
+  "common": {
+    "press_here": "Premi qui"
+  }
+}

locales/email/es.json

@@ -1,8 +1,17 @@
 {
-  "email.registration": "email.registration",
+  "register":{ 
-  "email.register.subject": "email.register.subject",
+    "subject": "Richiesta registrazione ricevuta",
-  "email.register": "email.register",
+    "content": "Abbiamo ricevuto la richiesta di registrazione. La confermeremo quanto prima.\n Ciao"
-  "email.confirm": "email.confirm",
+  },
-  "email.recover": "email.recover",
+  "confirm": {
-  "email.press_here": "email.press_here"
+    "subject": "Puoi iniziare a pubblicare eventi",
-}
+    "content": "Ciao, il tuo account su <a href='{{config.baseurl}}'>{{config.title}}<a/> è stato creato. <a href='{{config.baseurl}}/user_confirm/{{user.recover_code}}'>Confermalo</a>."
+  },
+  "recover": {
+    "subject": "Recupero password",
+    "content": "Ciao, hai richiesto un recupero della password su {{config.title}}."
+  },
+  "common": {
+    "press_here": "Premi qui"
+  }
+}

locales/email/it.json

@@ -1,10 +1,18 @@
 {
-  "email.register.subject": "Richiesta registrazione ricevuta",
+  "register":{ 
-  "email.register": "Abbiamo ricevuto la richiesta di registrazione. La confermeremo quanto prima.\n Ciao",
+    "subject": "Richiesta registrazione ricevuta",
-  "email.confirm": "Il tuo account su {{config.title}} è stato attivato e quindi puoi cominciare a pubblicare eventi",
+    "content": "Abbiamo ricevuto la richiesta di registrazione. La confermeremo quanto prima.\n Ciao"
-  "email.recover.subject": "Recupero password",
+  },
-  "email.recover": "Ciao, hai richiesto un recupero della password su {{config.title}}.",
+  "confirm": {
-  "email.press_here": "Premi qui",
+    "subject": "Puoi iniziare a pubblicare eventi",
-  "email.confirm.subject": "Registrazione confermata",
+    "content": "Ciao, il tuo account su <a href='{{config.baseurl}}'>{{config.title}}<a/> è stato creato. <a href='{{config.baseurl}}/user_confirm/{{user.recover_code}}'>Confermalo</a>."
-  "email.user_confirm": "Ciao, il tuo account su <a href='{{config.baseurl}}'>{{config.title}}<a/> è stato creato. <a href='{{config.baseurl}}/user_confirm/{{user.recover_code}}'>Confermalo</a>."
+  },
+  "recover": {
+    "subject": "Recupero password",
+    "content": "Ciao, hai richiesto un recupero della password su {{config.title}}. <a href='{{config.baseurl}}/recover/{{user.recover_code}}'>Premi qui</a> per confermare"
+  },
+  "admin_register":{
+    "subject": "Nuova registrazione",
+    "content": "{{user.username}} si è registrato/a a {{config.title}} scrivendo:<br/><pre>{{user.description}}</pre><br/> Puoi confermarlo <a href='{{config.baseurl}}/admin'>qui</a>."
+  }
 }

locales/it.js

@@ -50,7 +50,8 @@ export default {
     me: 'Sei te',
     password_updated: 'Password modificata!',
     username: 'Nickname',
-    comments: 'nessun commento|un commento|{n} commenti'
+    comments: 'nessun commento|un commento|{n} commenti',
+    activate_user: 'Confermato'
   },
 
   login: {
@@ -170,6 +171,12 @@ export default {
     email_taken: 'Questa email è già registrata'
   },
 
+  confirm: {
+    title: 'Conferma utente',
+    not_valid: 'Mmmmm qualcosa è andato storto.',
+    valid: 'Il tuo account è stato confermato, ora puoi <a href="/login">entrare</a>',
+  },
+
   ordinal: {
     1: 'primo',
     2: 'secondo',

pages/add/_edit.vue

@@ -90,7 +90,7 @@
                 el-time-select(v-model='time.end'
                   :picker-options="{start: '00:00', step: '00:30', end: '24:00'}")
             
-            List(v-if='event.type==="normal"' :events='todayEvents' :title='$t("event.same_day")')
+            List(v-if='event.type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
             el-button.float-right(@click='next' type='succes' :disabled='!couldProceed') {{$t('common.next')}}
 
           //- MEDIA / FLYER / POSTER
@@ -193,14 +193,14 @@ export default {
       data.event.place.name = event.place.name
       data.event.place.address = event.place.address || ''
       if (event.multidate) {
-        data.date = { start: new Date(event.start_datetime*1000), end: new Date(event.end_datetime*1000) }
+        data.date = { start: moment.unix(event.start_datetime), end: moment.unix(event.end_datetime) }
         data.event.type = 'multidate'
       } else if (event.recurrent ) {
         data.event.type = 'recurrent'
         data.event.recurrent = JSON.parse(event.recurrent)
       } else {
         data.event.type = 'normal'
-        data.date = new Date(event.start_datetime*1000)
+        data.date = moment.unix(event.start_datetime)
       }
 
       data.time.start = moment.unix(event.start_datetime).format('HH:mm')
@@ -251,19 +251,19 @@ export default {
         const date_end = moment(this.date.end)
         return this.events.filter(e =>
           !e.multidate ?
-            date_start.isSame(e.start_datetime, 'day') || 
+            date_start.isSame(moment.unix(e.start_datetime), 'day') || 
-            date_start.isBefore(e.start_datime) && date_end.isAfter(e.start_datetime) :
+            date_start.isBefore(moment.unix(e.start_datime)) && date_end.isAfter(moment.unix(e.start_datetime)) :
-          date_start.isSame(e.start_datetime, 'day') || date_start.isSame(e.end_datetime) ||
+          date_start.isSame(moment.unix(e.start_datetime), 'day') || date_start.isSame(moment.unix(e.end_datetime)) ||
-            date_start.isAfter(e.start_datetime) && date_start.isBefore(e.end_datetime))
+            date_start.isAfter(moment.unix(e.start_datetime)) && date_start.isBefore(moment.unix(e.end_datetime)))
       } else if (this.event.type === 'recurrent' ) {
 
       } else {
         const date = moment(this.date)
         return this.events.filter(e =>
           !e.multidate ?
-            !e.recurrent && date.isSame(moment(e.start_datetime), 'day') :
+            !e.recurrent && date.isSame(moment.unix(e.start_datetime), 'day') :
-            moment(e.start_datetime).isSame(date, 'day') ||
+            moment.unix(e.start_datetime).isSame(date, 'day') ||
-              moment(e.start_datetime).isBefore(date) && moment(e.end_datetime).isAfter(date)
+              moment.unix(e.start_datetime).isBefore(date) && moment.unix(e.end_datetime).isAfter(date)
         )
       }
     },
@@ -273,13 +273,13 @@ export default {
       attributes.push ({ key: 'today', dates: new Date(), highlight: { color: 'yellow' }})
 
       attributes = attributes.concat(this.filteredEvents
-        .filter(e => !e.multidate)
+        .filter(e => !e.multidate && !e.recurrent)
-        .map(e => ({ key: e.id, dot: {}, dates: new Date(e.start_datetime)})))
+        .map(e => ({ key: e.id, dot: {}, dates: moment.unix(e.start_datetime).toDate()})))
 
       attributes = attributes.concat(this.filteredEvents
-        .filter(e => e.multidate)
+        .filter(e => e.multidate && !e.recurrent)
         .map( e => ({ key: e.id, highlight: {}, dates: { 
-          start: new Date(e.start_datetime), end: new Date(e.end_datetime) }})))
+          start: moment.unix(e.start_datetime).toDate(), end: moment.unix(e.end_datetime).toDate() }})))
       
       if (this.event.type === 'recurrent' && this.event.recurrent.frequency) {
         const recurrent = {}

pages/admin.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
   el-card#admin
     nuxt-link.float-right(to='/')
-      v-icon(name='times' color='red')
+      el-button(circle  icon='el-icon-close' type='danger' size='small' plain)
+
     h5 {{$t('common.admin')}}
 
     el-tabs(v-model='tab')

pages/event/_id.vue

@@ -44,7 +44,7 @@
         small.float-right 🔖 {{event.likes.length}}  
         small.float-right.mr-3 ✊ {{event.boost.length}}<br/>
         strong {{$tc('common.comments', event.comments.length)}} -
-        <small>{{$t('event.interact_with_me_at')}} <u>{{event.user.username}}@{{settings.baseurl|url2host}}</u></small>
+        <small>{{$t('event.interact_with_me_at')}} <u>{{event.user && event.user.username}}@{{settings.baseurl|url2host}}</u></small>
 
         .card-header(v-for='comment in event.comments' :key='comment.id')
           a.float-right(:href='comment.data.url')

pages/register.vue

@@ -5,7 +5,7 @@
       el-button(circle  icon='el-icon-close' type='danger' size='small' plain)
     h5 {{$t('common.register')}}
 
-    el-form(@submit.native.prevent='register' method='POST' action='/api/user/register')
+    el-form(@submit.native.prevent='register' method='POST' action='')
       p(v-html="$t('register.description')")
 
       el-input.mb-2(v-model='user.username' type='text' name='username'
@@ -23,7 +23,7 @@
           v-icon(name='envelope-open-text')
 
       el-button(plain type="success" native-type='submit'
-        :disabled='disabled') {{$t('common.send')}} <v-icon name='chevron-right'/>
+        :disabled='disabled') {{$t('common.send')}} <v-icon :name='loading?"circle-notch":"chevron-right"' :spin='loading'/>
 </template>
 
 <script>
@@ -35,8 +35,8 @@ export default {
   name: 'Register',
   data () {
     return {
-      error: {},
+      loading: false,
-      user: { }
+      user: {}
     }
   },
   head () {
@@ -57,6 +57,7 @@ export default {
   methods: {
     ...mapActions(['login']),
     async register () {
+      this.loading = true
       try {
         const { user } = await this.$axios.$post('/user/register', this.user)
         Message({
@@ -73,6 +74,7 @@ export default {
           type: 'error'
         })
       }
+      this.loading = false
     }
   }
 }

pages/user_confirm/_code.vue

@@ -3,53 +3,27 @@
     nuxt-link.float-right(to='/')
       el-button(circle  icon='el-icon-close' type='danger' size='small' plain)
 
-    h5 <img src='/favicon.ico'/> {{$t('common.activate_user')}}
+    h5 <img src='/favicon.ico'/> {{$t('confirm.title')}}
-    div(v-if='valid')
+    p(v-if='valid' v-html='$t("confirm.valid")')
-      el-form
+    p(v-else) {{$t('confirm.not_valid')}}
-        el-form-item {{$t('common.password')}}
-          el-input(type='password', v-model='new_password')
-        el-button(plain type="success" icon='el-icon-send', @click='change_password') {{$t('common.send')}}
-
-    div(v-else) {{$t('recover.not_valid_code')}}
-      
     
 </template>
 <script>
 import { Message } from 'element-ui'
 
 export default {
-  name: 'Recover',
+  name: 'Confirm',
   data () {
-    return { new_password: '' }
+    return { valid: true }
   },
   async asyncData({ params, $axios }) {
-    const code = params.code
+    const recover_code = params.code
     try {
-      const valid = await $axios.$post('/user/check_recover_code', { recover_code: code })
+      const valid = await $axios.$post('/user/check_recover_code', { recover_code })
-      return { valid, code }
+      return { valid }
-    }
+    } catch (e) {
-    catch (e) {
       return { valid: false }
     }
-  },
-  methods: {
-    async change_password () {
-      try {
-        const res = await this.$axios.$post('/user/recover_password', { recover_code: this.code, password: this.new_password })
-        Message({
-          showClose: true,
-          type: 'success',
-          message: this.$t('common.password_updated')
-        })        
-        this.$router.replace('/login')
-      } catch(e) {
-        Message({
-          showClose: true,
-          type: 'warning',
-          message: e
-        })
-      }
-    }
   }
 }
 </script>

plugins/vue-awesome.js

@@ -31,6 +31,7 @@ import 'vue-awesome/icons/envelope'
 import 'vue-awesome/icons/calendar-day'
 import 'vue-awesome/icons/calendar-week'
 import 'vue-awesome/icons/calendar-alt'
+import 'vue-awesome/icons/circle-notch'
 
 import Icon from 'vue-awesome/components/Icon'
 

server/api/controller/user.js

@@ -186,7 +186,12 @@ const userController = {
     if (!recover_code) return res.sendStatus(400)
     const user = await User.findOne({ where: { recover_code: { [Op.eq]: recover_code } } })
     if (!user) return res.sendStatus(400)
-    res.json(user)
+    try {
+      await user.update({ recover_code: ''})
+      res.sendStatus(200)
+    } catch (e) {
+      res.sendStatus(400)
+    }
   },
 
   async updatePasswordWithRecoverCode(req, res) {
@@ -195,6 +200,7 @@ const userController = {
     if (!recover_code || !password) return res.sendStatus(400)
     const user = await User.findOne({ where: { recover_code: { [Op.eq]: recover_code } } })
     if (!user) return res.sendStatus(400)
+    user.recover_code = ''
     user.password = password
     try {
       await user.save()
@@ -218,8 +224,8 @@ const userController = {
   async update(req, res) {
     const user = await User.findByPk(req.body.id)
     if (user) {
-      if (!user.is_active && req.body.is_active) {
+      if (!user.is_active && req.body.is_active && user.recover_code) {
-        await mail.send(user.email, 'confirm', { user, config })
+        mail.send(user.email, 'confirm', { user, config })
       }
       await user.update(req.body)
       res.json(user)
@@ -240,9 +246,11 @@ const userController = {
         req.body.is_active = false
       }
 
+      req.body.recover_code = crypto.randomBytes(16).toString('hex')
       const user = await User.create(req.body)
       try {
-        mail.send([user.email, config.admin], 'register', { user, config })
+        mail.send(user.email, 'register', { user, config })
+        mail.send(config.admin, 'admin_register', { user, config })
       } catch (e) {
         return res.status(400).json(e)
       }

server/api/mail.js

@@ -3,10 +3,12 @@ const path = require('path')
 const moment = require('moment')
 const config = require('config')
 const settings = require('./controller/settings')
+const debug = require('debug')('email')
 
 moment.locale('it')
 const mail = {
   send(addresses, template, locals) {
+    debug(`Send ${template} email to ${addresses}`)
     const email = new Email({
       views: { root: path.join(__dirname, '..', 'emails') },
       htmlToText: false,
@@ -18,15 +20,17 @@ const mail = {
         }
       },
       message: {
-        from: `${config.title} <${config.smtp.auth.user}>`
+        from: `${config.title} <${config.admin}>`
       },
       send: true,
       i18n: {
         directory: path.join(__dirname, '..', '..', 'locales', 'email'),
+        objectNotation: true,
         syncFiles: false,
         updateFiles: false,
         defaultLocale: settings.locale,
-        locales: ['en', 'it']
+        locale: settings.locale,
+        locales: ['it', 'es'],
       },
       transport: config.smtp
     })
@@ -45,7 +49,7 @@ const mail = {
     }
     return email.send(msg)
       .catch(e => {
-        console.error(e)
+        debug('Error sending email =>', e)
       })
   }
 }

server/api/models/event.js

@@ -36,11 +36,13 @@ module.exports = (sequelize, DataTypes) => {
     event.hasMany(models.comment)
   }
 
+  // 
   event.prototype.toAP = function (username, follower) {
     const tags = this.tags && '-' + this.tags.map(t => '#' + t.tag).join(' ')
     const content = `<b><a href='${config.baseurl}/event/${this.id}'>${this.title}</a></b> @${this.place.name}  
       ${moment.unix(this.start_datetime).format('dddd, D MMMM (HH:mm)')}<br/>
       ${this.description.length > 200 ? this.description.substr(0, 200) + '...' : this.description} ${tags} <br/>`
+
     return {
       id: `${config.baseurl}/federation/m/c_${this.id}`,
       type: 'Create',

server/emails/admin_register/html.pug

@@ -0,0 +1,4 @@
+extends ../layout.pug
+
+block content
+  p !{t('admin_register.content', { user, config })}

server/emails/admin_register/subject.pug

@@ -0,0 +1 @@
+| [#{config.title}] #{t('admin_register.subject')}

server/emails/admin_register/text.pug

@@ -0,0 +1,6 @@
+p= t('admin_register.content', { user, config })
+
+hr
+small #{config.title} / #{config.description}
+br
+small <a href="#{config.baseurl}">#{config.baseurl}</a>

server/emails/confirm/html.pug

@@ -1,12 +1,3 @@
-<!DOCTYPE html>
+extends ../layout.pug
-html(lang="en")
+block content
-    head
+  p !{t('confirm.content', { config, user })}
-        meta(charset="UTF-8")
-        meta(name="viewport", content="width=device-width, initial-scale=1.0")
-        meta(http-equiv="X-UA-Compatible", content="ie=edge")
-        title #{config.title}
-    body
-        p= t('email.confirm', { config })
-
-        hr
-        <a href="#{config.baseurl}"> #{config.title} - #{config.description}</a>

server/emails/confirm/subject.pug

@@ -1 +1 @@
-| [#{config.title}] #{t('email.confirm.subject')}
+| [#{config.title}] #{t('confirm.subject')}

server/emails/confirm/text.pug

@@ -0,0 +1 @@
+p !{t('confirm.content', { config })}

server/emails/event/html.pug

@@ -1,22 +1,21 @@
-h3 #{event.title}
+extends ../layout.pug
-p Dove: #{event.place.name} - #{event.place.address}
+block content
-p Quando: #{datetime(event.start_datetime)}
+  h3 #{event.title}
-br
+  p Dove: #{event.place.name} - #{event.place.address}
-if event.image_path
+  p Quando: #{datetime(event.start_datetime)}
-  <center>
+  br
-    <img style="height: 89vh; margin: 0 auto;" src="#{config.baseurl}/media/#{event.image_path}" />
+  if event.image_path
-  </center>
+    <center>
-p #{event.description}
+      <img style="height: 89vh; margin: 0 auto;" src="#{config.baseurl}/media/#{event.image_path}" />
+    </center>
+  p #{event.description}
 
-each tag in event.tags
+  each tag in event.tags
-  span ##{tag.tag} 
+    span ##{tag.tag} 
-br
+  br
-<a href="#{config.baseurl}/event/#{event.id}">#{config.baseurl}/event/#{event.id}</a>
+  <a href="#{config.baseurl}/event/#{event.id}">#{config.baseurl}/event/#{event.id}</a>
-hr
+  hr
-if to_confirm
+  if to_confirm
-  p Puoi confermare questo evento <a href="#{config.baseurl}/admin/confirm/#{event.id}">qui</a>
+    p Puoi confermare questo evento <a href="#{config.baseurl}/admin/confirm/#{event.id}">qui</a>
-else
+  else
-  p Puoi eliminare queste notifiche <a href="#{config.baseurl}/del_notification/#{notification.remove_code}">qui</a>
+    p Puoi eliminare queste notifiche <a href="#{config.baseurl}/del_notification/#{notification.remove_code}">qui</a>
-
-hr
-<a href="#{config.baseurl}">#{config.title} - #{config.description}</a>

server/emails/event/text.pug

@@ -0,0 +1,21 @@
+extends ../layout.pug
+block content
+  h3 #{event.title}
+  p Dove: #{event.place.name} - #{event.place.address}
+  p Quando: #{datetime(event.start_datetime)}
+  br
+  if event.image_path
+    <center>
+      <img style="height: 89vh; margin: 0 auto;" src="#{config.baseurl}/media/#{event.image_path}" />
+    </center>
+  p #{event.description}
+
+  each tag in event.tags
+    span ##{tag.tag} 
+  br
+  <a href="#{config.baseurl}/event/#{event.id}">#{config.baseurl}/event/#{event.id}</a>
+  hr
+  if to_confirm
+    p Puoi confermare questo evento <a href="#{config.baseurl}/admin/confirm/#{event.id}">qui</a>
+  else
+    p Puoi eliminare queste notifiche <a href="#{config.baseurl}/del_notification/#{notification.remove_code}">qui</a>

server/emails/layout.pug

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+html(lang="en")
+  head
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    meta(http-equiv="X-UA-Compatible", content="ie=edge")
+    title #{config.title}
+  body
+    block content
+    hr
+    small #{config.title} / #{config.description}
+    br
+    <a href='#{config.baseurl}'> #{config.baseurl}</a>    

server/emails/recover/html.pug

@@ -1,12 +1,4 @@
-<!DOCTYPE html>
+extends ../layout.pug
-html(lang="en")
-    head
-        meta(charset="UTF-8")
-        meta(name="viewport", content="width=device-width, initial-scale=1.0")
-        meta(http-equiv="X-UA-Compatible", content="ie=edge")
-        title #{config.title}
-    body
-        p= t('email.recover', {config})
 
-        hr
+block content
-        <a href="#{config.baseurl}/recover/#{user.recover_code}">#{t('email.press_here')}</a>
+  p !{t('recover.content', {config, user})}

server/emails/recover/subject.pug

@@ -1 +1 @@
-= `[#{config.title}] ${t('email.recover')}`
+| [#{config.title}] #{t('recover.subject')}

server/emails/recover/text.pug

@@ -0,0 +1 @@
+p= !t('recover.content', {config, user})

server/emails/register/html.pug

@@ -1,6 +1,4 @@
-p= t('email.register')
+extends ../layout.pug
 
-hr
+block content
-small #{config.title} / #{config.description}
+  p !{t('register.content', { user, config })}
-br
-<a href='#{config.baseurl}'> #{config.baseurl}</a>

server/emails/register/subject.pug

@@ -1 +1 @@
-| [#{config.title}] #{t('email.register.subject')}
+| [#{config.title}] #{t('register.subject')}

server/emails/register/text.pug

@@ -1,4 +1,4 @@
-p= t('email.register')
+p= t('register.content', { config, user })
 
 hr
 small #{config.title} / #{config.description}

server/emails/user_confirm/html.pug

@@ -1,10 +1,3 @@
-<!DOCTYPE html>
+extends ../layout.pug
-html(lang="en")
+block content
-    head
+  p !{t('confirm.content', { config, user })}
-        meta(charset="UTF-8")
-        meta(name="viewport", content="width=device-width, initial-scale=1.0")
-        meta(http-equiv="X-UA-Compatible", content="ie=edge")
-        title #{config.title}
-    body
-
-        p !{t('email.user_confirm', { config, user })}

server/emails/user_confirm/subject.pug

@@ -1 +1 @@
-= `[Gancio] Richiesta password recovery`
+| [#{config.title}] #{t('confirm.subject')}

server/emails/user_confirm/text.pug

@@ -0,0 +1 @@
+p !{t('confirm.content', { config, user })}