PLT-3875 Update error page to use Markdown and add error for missing OAuth code (#3934)

* Update error page to use Markdown and add error for missing OAuth code

* Add line breaks to error messages 

This is to make the error message easier to read.

* Update en.json

api/oauth.go

@@ -4,7 +4,6 @@
 package api
 
 import (
-	"bytes"
 	"crypto/tls"
 	b64 "encoding/base64"
 	"fmt"
@@ -290,9 +289,12 @@ func completeOAuth(c *Context, w http.ResponseWriter, r *http.Request) {
 	params := mux.Vars(r)
 	service := params["service"]
 
-	l4g.Debug(utils.T("api.oauth.receive_redirect.debug", map[string]interface{}{"URL": r.URL.String()}))
-
 	code := r.URL.Query().Get("code")
+	if len(code) == 0 {
+		c.Err = model.NewLocAppError("completeOAuth", "api.oauth.complete_oauth.missing_code.app_error", map[string]interface{}{"service": strings.Title(service)}, "URL: "+r.URL.String())
+		return
+	}
+
 	state := r.URL.Query().Get("state")
 
 	uri := c.GetSiteURL() + "/signup/" + service + "/complete"
@@ -779,12 +781,7 @@ func AuthorizeOAuthUser(service, code, state, redirectUri string) (io.ReadCloser
 	if resp, err := client.Do(req); err != nil {
 		return nil, "", nil, model.NewLocAppError("AuthorizeOAuthUser", "api.user.authorize_oauth_user.token_failed.app_error", nil, err.Error())
 	} else {
-		// temporarily read the raw body for debugging purposes
-		respBody, _ = ioutil.ReadAll(resp.Body)
-
-		reader := bytes.NewReader(respBody)
-
-		ar = model.AccessResponseFromJson(reader)
+		ar = model.AccessResponseFromJson(resp.Body)
 		defer func() {
 			ioutil.ReadAll(resp.Body)
 			resp.Body.Close()

i18n/en.json

@@ -1010,8 +1010,8 @@
     "translation": "invalid_request: Bad client_id"
   },
   {
-    "id": "api.oauth.receive_redirect.debug",
-    "translation": "OAuth2 redirect: {{.URL}}"
+    "id": "api.oauth.complete_oauth.missing_code.app_error",
+    "translation": "The service provider {{.service}} did not provide an authorization code in the redirect URL.\n\nFor [Google Apps](https://docs.mattermost.com/deployment/sso-google.html) make sure your administrator enabled the Google+ API.\n\nFor [Office 365](https://docs.mattermost.com/deployment/sso-office.html) make sure the administrator of your Microsoft organization has enabled the Mattermost app.\n\nFor [GitLab](https://docs.mattermost.com/deployment/sso-gitlab.html) please make sure you followed the setup instructions.\n\nIf you reviewed the above and are still having trouble with configuration, you may post in our [Troubleshooting forum](https://forum.mattermost.org/c/general/trouble-shoot) where we'll be happy to help with issues during setup."
   },
   {
     "id": "api.oauth.allow_oauth.bad_redirect.app_error",

webapp/components/error_page.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import {Link} from 'react-router/es6';
 
 import * as Utils from 'utils/utils.jsx';
+import * as TextFormatting from 'utils/text_formatting.jsx';
 
 export default class ErrorPage extends React.Component {
     componentDidMount() {
@@ -43,7 +44,7 @@ export default class ErrorPage extends React.Component {
                         <i className='fa fa-exclamation-triangle'/>
                     </div>
                     <h2>{title}</h2>
-                    <p>{message}</p>
+                    <div dangerouslySetInnerHTML={{__html: TextFormatting.formatText(message)}}/>
                     <Link to={link}>{linkMessage}</Link>
                 </div>
             </div>