enhance provider names in auth line

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,
 };

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>
                   )
                 })