feat: password reset

client/components/login.vue

@@ -253,6 +253,10 @@ export default {
     hideLocal: {
       type: Boolean,
       default: false
+    },
+    changePwdContinuationToken: {
+      type: String,
+      default: null
     }
   },
   data () {
@@ -309,6 +313,9 @@ export default {
     },
     selectedStrategyKey (newValue, oldValue) {
       this.selectedStrategy = _.find(this.strategies, ['key', newValue])
+      if (this.screen === 'changePwd') {
+        return
+      }
       this.screen = 'login'
       if (!this.selectedStrategy.strategy.useForm) {
         this.isLoading = true
@@ -322,6 +329,10 @@ export default {
   },
   mounted () {
     this.isShown = true
+    if (this.changePwdContinuationToken) {
+      this.screen = 'changePwd'
+      this.continuationToken = this.changePwdContinuationToken
+    }
   },
   methods: {
     /**
@@ -475,32 +486,51 @@ export default {
       this.loaderColor = 'grey darken-4'
       this.loaderTitle = this.$t('auth:changePwd.loading')
       this.isLoading = true
-      const resp = await this.$apollo.mutate({
+      try {
-        mutation: gql`
+        const resp = await this.$apollo.mutate({
-          {
+          mutation: gql`
-            authentication {
+            mutation (
-              activeStrategies {
+              $continuationToken: String!
-                key
+              $newPassword: String!
+            ) {
+              authentication {
+                loginChangePassword (
+                  continuationToken: $continuationToken
+                  newPassword: $newPassword
+                ) {
+                  responseResult {
+                    succeeded
+                    errorCode
+                    slug
+                    message
+                  }
+                  jwt
+                  continuationToken
+                  redirect
+                }
               }
             }
+          `,
+          variables: {
+            continuationToken: this.continuationToken,
+            newPassword: this.newPassword
           }
-        `,
+        })
-        variables: {
+        if (_.has(resp, 'data.authentication.loginChangePassword')) {
-          continuationToken: this.continuationToken,
+          let respObj = _.get(resp, 'data.authentication.loginChangePassword', {})
-          newPassword: this.newPassword
+          if (respObj.responseResult.succeeded === true) {
+            this.handleLoginResponse(respObj)
+          } else {
+            throw new Error(respObj.responseResult.message)
+          }
+        } else {
+          throw new Error(this.$t('auth:genericError'))
         }
-      })
+      } catch (err) {
-      if (_.get(resp, 'data.authentication.loginChangePassword.responseResult.succeeded', false) === true) {
+        console.error(err)
-        this.loaderColor = 'green darken-1'
-        this.loaderTitle = this.$t('auth:loginSuccess')
-        Cookies.set('jwt', _.get(resp, 'data.authentication.loginChangePassword.jwt', ''), { expires: 365 })
-        _.delay(() => {
-          window.location.replace('/') // TEMPORARY - USE RETURNURL
-        }, 1000)
-      } else {
         this.$store.commit('showNotification', {
           style: 'red',
-          message: _.get(resp, 'data.authentication.loginChangePassword.responseResult.message', false),
+          message: err.message,
           icon: 'alert'
         })
         this.isLoading = false
@@ -519,11 +549,57 @@ export default {
      * FORGOT PASSWORD SUBMIT
      */
     async forgotPasswordSubmit () {
-      this.$store.commit('showNotification', {
+      this.loaderColor = 'grey darken-4'
-        style: 'pink',
+      this.loaderTitle = this.$t('auth:forgotPasswordLoading')
-        message: 'Coming soon!',
+      this.isLoading = true
-        icon: 'ferry'
+      try {
-      })
+        const resp = await this.$apollo.mutate({
+          mutation: gql`
+            mutation (
+              $email: String!
+            ) {
+              authentication {
+                forgotPassword (
+                  email: $email
+                ) {
+                  responseResult {
+                    succeeded
+                    errorCode
+                    slug
+                    message
+                  }
+                }
+              }
+            }
+          `,
+          variables: {
+            email: this.username
+          }
+        })
+        if (_.has(resp, 'data.authentication.forgotPassword.responseResult')) {
+          let respObj = _.get(resp, 'data.authentication.forgotPassword.responseResult', {})
+          if (respObj.succeeded === true) {
+            this.$store.commit('showNotification', {
+              style: 'success',
+              message: this.$t('auth:forgotPasswordSuccess'),
+              icon: 'email'
+            })
+            this.screen = 'login'
+          } else {
+            throw new Error(respObj.message)
+          }
+        } else {
+          throw new Error(this.$t('auth:genericError'))
+        }
+      } catch (err) {
+        console.error(err)
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: err.message,
+          icon: 'alert'
+        })
+      }
+      this.isLoading = false
     },
     handleLoginResponse (respObj) {
       this.continuationToken = respObj.continuationToken

server/controllers/auth.js

@@ -148,6 +148,28 @@ router.get('/verify/:token', bruteforce.prevent, async (req, res, next) => {
   }
 })
 
+/**
+ * Reset Password
+ */
+router.get('/login-reset/:token', bruteforce.prevent, async (req, res, next) => {
+  try {
+    const usr = await WIKI.models.userKeys.validateToken({ kind: 'resetPwd', token: req.params.token })
+    if (!usr) {
+      throw new Error('Invalid Token')
+    }
+    req.brute.reset()
+
+    const changePwdContinuationToken = await WIKI.models.userKeys.generateToken({
+      userId: usr.id,
+      kind: 'changePwd'
+    })
+    const bgUrl = !_.isEmpty(WIKI.config.auth.loginBgUrl) ? WIKI.config.auth.loginBgUrl : '/_assets/img/splash/1.jpg'
+    res.render('login', { bgUrl, hideLocal: WIKI.config.auth.hideLocal, changePwdContinuationToken })
+  } catch (err) {
+    next(err)
+  }
+})
+
 /**
  * JWT Public Endpoints
  */

server/core/mail.js

@@ -56,7 +56,7 @@ module.exports = {
       subject: `${opts.subject} - ${WIKI.config.title}`,
       text: opts.text,
       html: _.get(this.templates, opts.template)({
-        logo: '',
+        logo: WIKI.config.logoUrl,
         siteTitle: WIKI.config.title,
         copyright: WIKI.config.company.length > 0 ? WIKI.config.company : 'Powered by Wiki.js',
         ...opts.data

server/graph/resolvers/authentication.js

@@ -137,6 +137,19 @@ module.exports = {
         return graphHelper.generateError(err)
       }
     },
+    /**
+     * Perform Mandatory Password Change after Login
+     */
+    async forgotPassword (obj, args, context) {
+      try {
+        await WIKI.models.users.loginForgotPassword(args, context)
+        return {
+          responseResult: graphHelper.generateSuccess('Password reset request processed.')
+        }
+      } catch (err) {
+        return graphHelper.generateError(err)
+      }
+    },
     /**
      * Register a new account
      */

server/graph/schemas/authentication.graphql

@@ -52,6 +52,10 @@ type AuthenticationMutation {
     newPassword: String!
   ): AuthenticationLoginResponse @rateLimit(limit: 5, duration: 60)
 
+  forgotPassword(
+    email: String!
+  ): DefaultResponse @rateLimit(limit: 3, duration: 60)
+
   register(
     email: String!
     password: String!

server/models/users.js

@@ -478,6 +478,38 @@ module.exports = class User extends Model {
     }
   }
 
+  /**
+   * Send a password reset request
+   */
+  static async loginForgotPassword ({ email }, context) {
+    const usr = await WIKI.models.users.query().where({
+      email,
+      providerKey: 'local'
+    }).first()
+    if (!usr) {
+      WIKI.logger.debug(`Password reset attempt on nonexistant local account ${email}: [DISCARDED]`)
+      return
+    }
+    const resetToken = await WIKI.models.userKeys.generateToken({
+      userId: usr.id,
+      kind: 'resetPwd'
+    })
+
+    await WIKI.mail.send({
+      template: 'accountResetPwd',
+      to: email,
+      subject: `Password Reset Request`,
+      data: {
+        preheadertext: `A password reset was requested for ${WIKI.config.title}`,
+        title: `A password reset was requested for ${WIKI.config.title}`,
+        content: `Click the button below to reset your password. If you didn't request this password reset, simply discard this email.`,
+        buttonLink: `${WIKI.config.host}/login-reset/${resetToken}`,
+        buttonText: 'Reset Password'
+      },
+      text: `A password reset was requested for wiki ${WIKI.config.title}. Open the following link to proceed: ${WIKI.config.host}/login-reset/${resetToken}`
+    })
+  }
+
   /**
    * Create a new user
    *

server/templates/account-reset-pwd.html

@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
+    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
+    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
+    <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
+
+    <!-- Web Font / @font-face : BEGIN -->
+    <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
+
+    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
+    <!--[if mso]>
+        <style>
+            * {
+                font-family: sans-serif !important;
+            }
+        </style>
+    <![endif]-->
+
+    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
+    <!--[if !mso]><!-->
+    <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
+    <!--<![endif]-->
+
+    <!-- Web Font / @font-face : END -->
+
+    <!-- CSS Reset : BEGIN -->
+    <style>
+
+        /* What it does: Remove spaces around the email design added by some email clients. */
+        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
+        html,
+        body {
+            margin: 0 auto !important;
+            padding: 0 !important;
+            height: 100% !important;
+            width: 100% !important;
+        }
+
+        /* What it does: Stops email clients resizing small text. */
+        * {
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        /* What it does: Centers email on Android 4.4 */
+        div[style*="margin: 16px 0"] {
+            margin: 0 !important;
+        }
+
+        /* What it does: Stops Outlook from adding extra spacing to tables. */
+        table,
+        td {
+            mso-table-lspace: 0pt !important;
+            mso-table-rspace: 0pt !important;
+        }
+
+        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
+        table {
+            border-spacing: 0 !important;
+            border-collapse: collapse !important;
+            table-layout: fixed !important;
+            margin: 0 auto !important;
+        }
+        table table table {
+            table-layout: auto;
+        }
+
+        /* What it does: Uses a better rendering method when resizing images in IE. */
+        img {
+            -ms-interpolation-mode:bicubic;
+        }
+
+        /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
+        a {
+            text-decoration: none;
+        }
+
+        /* What it does: A work-around for email clients meddling in triggered links. */
+        *[x-apple-data-detectors],  /* iOS */
+        .unstyle-auto-detected-links *,
+        .aBn {
+            border-bottom: 0 !important;
+            cursor: default !important;
+            color: inherit !important;
+            text-decoration: none !important;
+            font-size: inherit !important;
+            font-family: inherit !important;
+            font-weight: inherit !important;
+            line-height: inherit !important;
+        }
+
+        /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
+        .a6S {
+            display: none !important;
+            opacity: 0.01 !important;
+        }
+
+        /* What it does: Prevents Gmail from changing the text color in conversation threads. */
+        .im {
+            color: inherit !important;
+        }
+
+        /* If the above doesn't work, add a .g-img class to any image in question. */
+        img.g-img + div {
+            display: none !important;
+        }
+
+        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
+        /* Create one of these media queries for each additional viewport size you'd like to fix */
+
+        /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
+        @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
+            u ~ div .email-container {
+                min-width: 320px !important;
+            }
+        }
+        /* iPhone 6, 6S, 7, 8, and X */
+        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
+            u ~ div .email-container {
+                min-width: 375px !important;
+            }
+        }
+        /* iPhone 6+, 7+, and 8+ */
+        @media only screen and (min-device-width: 414px) {
+            u ~ div .email-container {
+                min-width: 414px !important;
+            }
+        }
+
+    </style>
+    <!-- CSS Reset : END -->
+	<!-- Reset list spacing because Outlook ignores much of our inline CSS. -->
+	<!--[if mso]>
+	<style type="text/css">
+		ul,
+		ol {
+			margin: 0 !important;
+		}
+		li {
+			margin-left: 30px !important;
+		}
+		li.list-item-first {
+			margin-top: 0 !important;
+		}
+		li.list-item-last {
+			margin-bottom: 10px !important;
+		}
+	</style>
+	<![endif]-->
+
+    <!-- Progressive Enhancements : BEGIN -->
+    <style>
+
+	    /* What it does: Hover styles for buttons */
+	    .button-td,
+	    .button-a {
+	        transition: all 100ms ease-in;
+	    }
+	    .button-td-primary:hover,
+	    .button-a-primary:hover {
+	        background: #1976d2 !important;
+	        border-color: #1976d2 !important;
+	    }
+
+	    /* Media Queries */
+	    @media screen and (max-width: 600px) {
+
+	        /* What it does: Adjust typography on small screens to improve readability */
+	        .email-container p {
+	            font-size: 17px !important;
+	        }
+
+	    }
+
+    </style>
+    <!-- Progressive Enhancements : END -->
+
+    <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
+    <!--[if gte mso 9]>
+    <xml>
+        <o:OfficeDocumentSettings>
+            <o:AllowPNG/>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+    </xml>
+    <![endif]-->
+
+</head>
+<!--
+	The email background color (#222222) is defined in three places:
+	1. body tag: for most email clients
+	2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
+	3. mso conditional: For Windows 10 Mail
+-->
+<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #EEE;">
+	<center style="width: 100%; background-color: #EEE;">
+    <!--[if mso | IE]>
+    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #222222;">
+    <tr>
+    <td>
+    <![endif]-->
+
+        <!-- Visually Hidden Preheader Text : BEGIN -->
+        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
+          <%= preheadertext %>
+        </div>
+        <!-- Visually Hidden Preheader Text : END -->
+
+        <!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. -->
+        <!-- Preview Text Spacing Hack : BEGIN -->
+        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
+	        &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
+        </div>
+        <!-- Preview Text Spacing Hack : END -->
+
+        <!--
+            Set the email width. Defined in two places:
+            1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
+            2. MSO tags for Desktop Windows Outlook enforce a 600px width.
+        -->
+        <div style="max-width: 600px; margin: 0 auto;" class="email-container">
+            <!--[if mso]>
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
+            <tr>
+            <td>
+            <![endif]-->
+
+	        <!-- Email Body : BEGIN -->
+	        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;">
+		        <!-- Email Header : BEGIN -->
+	            <tr>
+	                <td style="padding: 20px 0; text-align: center">
+	                    <img src="<%= logo %>" height="50" alt="<%= siteTitle %>" border="0" style="width: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
+	                </td>
+	            </tr>
+		        <!-- Email Header : END -->
+
+                <!-- Hero Image, Flush : BEGIN -->
+                <tr>
+                    <td style="background-color: #ffffff;">
+                        <img src="https://static.requarks.io/email/email-cover-book.jpg" width="600" height="" alt="<%= title %>" border="0" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto;" class="g-img">
+                    </td>
+                </tr>
+                <!-- Hero Image, Flush : END -->
+
+                <!-- 1 Column Text + Button : BEGIN -->
+                <tr>
+                    <td style="background-color: #ffffff;">
+                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                            <tr>
+                                <td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+                                    <h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;"><%= title %></h1>
+                                    <p style="margin: 0;"><%= content %></p>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 0 20px 20px 20px;">
+                                    <!-- Button : BEGIN -->
+                                    <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
+                                        <tr>
+                                            <td class="button-td button-td-primary" style="border-radius: 4px; background: #1976d2;">
+                                                <a class="button-a button-a-primary" href="<%= buttonLink %>" style="background: #1976d2; border: 1px solid #1976d2; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;"><%= buttonText %></a>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                    <!-- Button : END -->
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>
+                <!-- 1 Column Text + Button : END -->
+
+            </table>
+            <!-- Email Body : END -->
+
+            <!-- Email Footer : BEGIN -->
+	        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;">
+                <tr>
+                    <td style="padding: 20px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;">
+                        <%= copyright %>
+                    </td>
+                </tr>
+            </table>
+            <!-- Email Footer : END -->
+
+            <!--[if mso]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </div>
+
+    <!--[if mso | IE]>
+    </td>
+    </tr>
+    </table>
+    <![endif]-->
+    </center>
+</body>
+</html>

server/views/login.pug

@@ -5,4 +5,5 @@ block body
     login(
       bg-url=bgUrl
       hide-local=hideLocal
+      change-pwd-continuation-token=changePwdContinuationToken
     )