fix: mattermost has been deprecated, use mattermost-redux instead it.

1. change mattermost color and gitlab color to official color
2. Add mattermost icon because Fork-awesome/font-awesome doesn’t provide mattermost icon

Signed-off-by: BoHong Li <a60814billy@gmail.com>

Author: a60814billy

lib/models/note.js

@@ -5,7 +5,7 @@ var path = require('path')
 var LZString = require('@hackmd/lz-string')
 var base64url = require('base64url')
 var md = require('markdown-it')()
-var metaMarked = require('meta-marked')
+var metaMarked = require('@hackmd/meta-marked')
 var cheerio = require('cheerio')
 var shortId = require('shortid')
 var Sequelize = require('sequelize')

lib/web/auth/mattermost/index.js

@@ -1,16 +1,17 @@
 'use strict'
-
+require('babel-polyfill')
+require('isomorphic-fetch');
 const Router = require('express').Router
 const passport = require('passport')
-const Mattermost = require('mattermost')
+const MattermostClient = require('mattermost-redux/client/client4').default
 const OAuthStrategy = require('passport-oauth2').Strategy
 const config = require('../../../config')
 const { setReturnToFromReferer, passportGeneralCallback } = require('../utils')
 
-const mattermost = new Mattermost.Client()
-
 let mattermostAuth = module.exports = Router()
 
+const mattermostClient = new MattermostClient()
+
 let mattermostStrategy = new OAuthStrategy({
   authorizationURL: config.mattermost.baseURL + '/oauth/authorize',
   tokenURL: config.mattermost.baseURL + '/oauth/access_token',
@@ -20,17 +21,11 @@ let mattermostStrategy = new OAuthStrategy({
 }, passportGeneralCallback)
 
 mattermostStrategy.userProfile = (accessToken, done) => {
-  mattermost.setUrl(config.mattermost.baseURL)
-  mattermost.token = accessToken
-  mattermost.useHeaderToken()
-  mattermost.getMe(
-    (data) => {
-      done(null, data)
-    },
-    (err) => {
-      done(err)
-    }
-  )
+  mattermostClient.setUrl(config.mattermost.baseURL)
+  mattermostClient.setToken(accessToken)
+  mattermostClient.getMe()
+    .then((data) => done(null, data))
+    .catch((err) => done(err))
 }
 
 passport.use(mattermostStrategy)

package.json

@@ -65,6 +65,7 @@
     "highlight.js": "~9.12.0",
     "i18n": "~0.8.3",
     "ionicons": "~2.0.1",
+    "isomorphic-fetch": "^2.2.1",
     "jquery": "~3.1.1",
     "jquery-mousewheel": "~3.1.13",
     "jquery-ui": "~1.12.1",
@@ -89,7 +90,7 @@
     "markdown-it-sup": "~1.0.0",
     "markdown-pdf": "~9.0.0",
     "mathjax": "~2.7.0",
-    "mattermost": "~3.4.0",
+    "mattermost-redux": "^5.9.0",
     "mermaid": "~7.1.0",
     "method-override": "~2.3.7",
     "minimist": "~1.2.0",

public/css/cover.css

@@ -371,4 +371,42 @@ select {
     .ui-use-tags {
         max-width: 100%;
     }
-}
+}
+
+.btn-mattermost {
+    background-color: #2179ec;
+    border-color: rgba(0,0,0,0.2);
+    color: #fff;
+}
+
+.btn-gitlab {
+    background-color: #e35431;
+    border-color: rgba(0,0,0,0.2);
+    color: #fff;
+}
+
+.btn-mattermost:hover, .btn-mattermost:active {
+    background-color: #105fc6;
+    border-color: rgba(0,0,0,0.2);
+    color: #fff;
+}
+
+.btn-gitlab:hover, .btn-gitlab:active {
+    background-color: #c23b1a;
+    border-color: rgba(0,0,0,0.2);
+    color: #fff;
+}
+
+a.btn.btn-social > i.oauth-icon {
+    display: inline-flex;
+    height: 45px;
+    width: 45px;
+    line-height: inherit;
+    padding: 6px;
+}
+
+a.btn.btn-social > i.oauth-icon > img {
+    width: 100%;
+    height: 100%;
+    line-height: inherit;
+}

public/images/mattermost-logo.svg

@@ -24,13 +24,13 @@
                 </a>
                 <% } %>
                 <% if (authProviders.gitlab) { %>
-                <a href="<%- serverURL %>/auth/gitlab" class="btn btn-lg btn-block btn-social btn-soundcloud">
+                <a href="<%- serverURL %>/auth/gitlab" class="btn btn-lg btn-block btn-social btn-gitlab">
                     <i class="fa fa-gitlab"></i> <%= __('Sign in via %s', 'GitLab') %>
                 </a>
                 <% } %>
                 <% if (authProviders.mattermost) { %>
-                <a href="<%- serverURL %>/auth/mattermost" class="btn btn-lg btn-block btn-social btn-soundcloud">
-                    <i class="fa fa-mattermost"></i> <%= __('Sign in via %s', 'Mattermost') %>
+                <a href="<%- serverURL %>/auth/mattermost" class="btn btn-lg btn-block btn-social btn-mattermost">
+                    <i class="oauth-icon"><img alt="mattermost-logo" src="<%- serverURL %>/images/mattermost-logo.svg" /></i> <%= __('Sign in via %s', 'Mattermost') %>
                 </a>
                 <% } %>
                 <% if (authProviders.dropbox) { %>