improve user_confirm / recover code flow

components/admin/Users.vue

@@ -37,6 +37,7 @@
           v-icon(v-if='item.is_active' color='success') mdi-check
           v-icon(v-else color='warning') mdi-close
         template(v-slot:item.actions='{item}')
+          v-btn(v-if='item.recover_code' text small :to='`/user_confirm/${item.recover_code}`') {{$t('common.confirm')}}
           v-btn(text small @click='toggle(item)'
             :color='item.is_active?"warning":"success"') {{item.is_active?$t('common.disable'):$t('common.enable')}}
           v-btn(text small @click='toggleAdmin(item)'

pages/recover/_code.vue

@@ -3,32 +3,32 @@ v-container
   v-row.mt-5(align='center' justify='center')
     v-col(cols='12' md="6" lg="5" xl="4")
       v-card
-        v-card-title {{settings.title}} - {{$t('common.recover_password')}}
+        v-card-title {{$t('common.recover_password')}}
-        v-card-text
+        template(v-if='user')
-          div(v-if='valid')
+          v-card-subtitle {{user.email}}
+          v-card-text
             v-text-field(type='password'
               :rules="$validators.password"
               autofocus :placeholder='$t("common.new_password")'
               v-model='new_password')
-          div(v-else) {{$t('recover.not_valid_code')}}
+        div(v-else) {{$t('recover.not_valid_code')}}
 
         v-card-actions
           v-spacer
-          v-btn(v-if='valid' color='primary' @click='change_password') {{$t('common.send')}}
+          v-btn(v-if='user' text color='primary' @click='change_password') {{$t('common.send')}}
 </template>
 <script>
 import { mapState } from 'vuex'
 
 export default {
   name: 'Recover',
-  layout: 'modal',
   async asyncData ({ params, $axios }) {
     const code = params.code
     try {
-      const valid = await $axios.$post('/user/check_recover_code', { recover_code: code })
+      const user = await $axios.$post('/user/check_recover_code', { recover_code: code })
-      return { valid, code }
+      return { user, code }
     } catch (e) {
-      return { valid: false }
+      return { user: false }
     }
   },
   data () {

pages/user_confirm/_code.vue

@@ -3,16 +3,19 @@ v-container
   v-row.mt-5(align='center' justify='center')
     v-col(cols='12' md="6" lg="5" xl="4")
       v-card
-        v-card-title <nuxt-link to='/'><v-img src='/logo.png' max-width="40px" max-height="40px" contain class='mr-4'/></nuxt-link> {{$t('common.set_password')}}
+        v-card-title {{$t('common.set_password')}}
-        template(v-if='valid')
+        template(v-if='user')
-          v-card-text(v-if='valid')
+          v-card-subtitle {{user.email}}
-            v-form(v-if='valid')
+          v-card-text
-              v-text-field(type='password' v-model='new_password' :label="$t('common.new_password')")
+            v-form
+              v-text-field(type='password' v-model='new_password' :label="$t('common.new_password')" :rules='$validators.password' autofocus)
 
           v-card-actions
-            v-btn(color="success" :disabled='!new_password' @click='change_password') {{$t('common.send')}}
+            v-spacer
+            v-btn(text color="primary" :disabled='!new_password' @click='change_password') {{$t('common.send')}}
 
-        v-card-text(v-else) {{$t('recover.not_valid_code')}}
+        v-card-text(v-else)
+          v-alert.ma-5(type='error') {{$t('recover.not_valid_code')}}
 
 </template>
 <script>
@@ -22,10 +25,10 @@ export default {
   async asyncData ({ params, $axios }) {
     const code = params.code
     try {
-      const valid = await $axios.$post('/user/check_recover_code', { recover_code: code })
+      const user = await $axios.$post('/user/check_recover_code', { recover_code: code })
-      return { valid, code }
+      return { user, code }
     } catch (e) {
-      return { valid: false }
+      return { user: false }
     }
   },
   data () {

server/api/controller/user.js

@@ -26,7 +26,7 @@ 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.sendStatus(200)
+    res.json({ email: user.email })
   },
 
   async updatePasswordWithRecoverCode (req, res) {
@@ -50,7 +50,7 @@ const userController = {
   },
 
   async getAll (req, res) {
-    const users = await User.scope('withoutPassword').findAll({
+    const users = await User.scope(req.user.is_admin ? 'withRecover' : 'withoutPassword').findAll({
       order: [['is_admin', 'DESC'], ['createdAt', 'DESC']]
     })
     res.json(users)
@@ -112,7 +112,7 @@ const userController = {
     try {
       req.body.is_active = true
       req.body.recover_code = crypto.randomBytes(16).toString('hex')
-      const user = await User.create(req.body)
+      const user = await User.scope('withRecover').create(req.body)
       mail.send(user.email, 'user_confirm', { user, config }, req.settings.locale)
       res.json(user)
     } catch (e) {
@@ -125,7 +125,7 @@ const userController = {
     try {
       const user = await User.findByPk(req.params.id)
       await user.destroy()
-      log.warn(`User ${req.user.email} removed!`)
+      log.warn(`User ${user.email} removed!`)
       res.sendStatus(200)
     } catch (e) {
       log.error('User removal error:"', e)

server/api/models/user.js

@@ -30,6 +30,9 @@ User.init({
   scopes: {
     withoutPassword: {
       attributes: { exclude: ['password', 'recover_code'] }
+    },
+    withRecover: {
+      attributes: { exclude: ['password'] }
     }
   }
 })