From ab9057efa3f6a8d3d45bdea42acab35bd320a7f9 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Sat, 12 May 2018 15:12:13 +0300
Subject: [PATCH] enhance provider names in auth line

---
 web/app/common/constants.js                  | 6 ++++++
 web/app/components/auth-panel/auth-panel.jsx | 6 ++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/app/common/constants.js b/web/app/common/constants.js
index 0be1d55f..cc22d65d 100644
--- a/web/app/common/constants.js
+++ b/web/app/common/constants.js
@@ -6,6 +6,11 @@ const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
 const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
 const DEFAULT_LAST_COMMENTS_MAX = 15;
 const DEFAULT_MAX_COMMENT_SIZE = 1000;
+const PROVIDER_NAMES = {
+  google: 'Google',
+  facebook: 'Facebook',
+  github: 'GitHub',
+};
 
 module.exports = {
   BASE_URL,
@@ -16,4 +21,5 @@ module.exports = {
   COMMENT_NODE_CLASSNAME_PREFIX,
   DEFAULT_LAST_COMMENTS_MAX,
   DEFAULT_MAX_COMMENT_SIZE,
+  PROVIDER_NAMES,
 };
diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx
index ef176228..20859d48 100644
--- a/web/app/components/auth-panel/auth-panel.jsx
+++ b/web/app/components/auth-panel/auth-panel.jsx
@@ -1,5 +1,7 @@
 import { h, Component } from 'preact';
 
+import { PROVIDER_NAMES } from 'common/constants';
+
 export default class AuthPanel extends Component {
   constructor(props) {
     super(props);
@@ -56,7 +58,7 @@ export default class AuthPanel extends Component {
               {' '}
               {
                 providers.map((provider, i) => {
-                  const comma = i === 0 ? '' : ', ';
+                  const comma = i === 0 ? '' : (i === providers.length - 1 ? ' or ' : ', ');
 
                   return (
                     <span>
@@ -64,7 +66,7 @@ export default class AuthPanel extends Component {
                       <span
                         className="auth-panel__pseudo-link"
                         onClick={() => props.onSignIn(provider)}
-                      >{provider}</span>
+                      >{PROVIDER_NAMES[provider]}</span>
                     </span>
                   )
                 })