hide sign in buttons when it's not enabled

app/pkg/oauth/oauth.go

@@ -1,5 +1,9 @@
 package oauth
 
+import (
+	"os"
+)
+
 const (
 	//FacebookProvider is const for 'facebook'
 	FacebookProvider = "facebook"
@@ -14,6 +18,16 @@ type UserProfile struct {
 	Email string
 }
 
+//IsProviderEnabled returns true if provider is enabled
+func IsProviderEnabled(name string) bool {
+	if name == GoogleProvider {
+		return os.Getenv("OAUTH_GOOGLE_CLIENTID") != ""
+	} else if name == FacebookProvider {
+		return os.Getenv("OAUTH_FACEBOOK_APPID") != ""
+	}
+	return false
+}
+
 //Service provides OAuth operations
 type Service interface {
 	GetAuthURL(authEndpoint string, provider string, redirect string) string

app/pkg/web/renderer.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/WeCanHearYou/wechy/app/models"
 	"github.com/WeCanHearYou/wechy/app/pkg/env"
+	"github.com/WeCanHearYou/wechy/app/pkg/oauth"
 	"github.com/labstack/echo"
 )
 
@@ -59,7 +60,13 @@ func (r *HTMLRenderer) Render(w io.Writer, name string, data interface{}, c echo
 
 	m := data.(echo.Map)
 	m["tenant"] = ctx.Tenant()
-	m["authEndpoint"] = ctx.Get("AuthEndpoint")
+	m["auth"] = echo.Map{
+		"endpoint": ctx.AuthEndpoint(),
+		"providers": echo.Map{
+			oauth.GoogleProvider:   oauth.IsProviderEnabled(oauth.GoogleProvider),
+			oauth.FacebookProvider: oauth.IsProviderEnabled(oauth.FacebookProvider),
+		},
+	}
 	m["settings"] = r.settings
 
 	if ctx.IsAuthenticated() {

public/components/social_signin_button.tsx → public/components/SocialSignInButton.tsx

@@ -3,7 +3,7 @@ import { get } from "../storage";
 
 interface SocialSignInButtonProps {
     provider: string;
-    small?: boolean;
+    size: "small" | "normal";
 }
 interface SocialSignInButtonState {
     clicked: boolean;
@@ -18,16 +18,16 @@ export class SocialSignInButton extends React.Component<SocialSignInButtonProps,
     }
 
     public render() {
-        const authEndpoint = get<string>("authEndpoint");
+        const auth = get<any>("auth");
         const providerClassName = this.props.provider === "google" ? "google plus" : "facebook";
         const providerDisplayName = this.props.provider === "google" ? "Google" : "Facebook";
-        const oauthUrl = `${authEndpoint}/oauth/${this.props.provider}?redirect=${location.href}`;
+        const oauthUrl = `${auth.endpoint}/oauth/${this.props.provider}?redirect=${location.href}`;
         const cssClasses = `ui button
                             ${providerClassName}
                             ${this.state.clicked ? "loading disabled" : ""}
-                            ${this.props.small ? "circular icon" : "fluid"}`;
+                            ${this.props.size === "small" ? "circular icon" : "fluid"}`;
 
-        if (this.props.small) {
+        if (this.props.size === "small") {
             return <a href={oauthUrl} className={cssClasses} onClick={() => this.setState({clicked: true})}>
                     <i className={providerClassName + " icon"}></i>
                    </a>;

public/components/SocialSignInList.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { get } from "../storage";
+import { SocialSignInButton } from "./SocialSignInButton";
+
+interface AuthSettings {
+    endpoint: string;
+    providers: {
+        google: boolean,
+        facebook: boolean
+    };
+}
+
+interface SocialSignInListProps {
+    size: "small" | "normal";
+    orientation: "horizontal" | "vertical";
+}
+
+export const SocialSignInList = (props: SocialSignInListProps) => {
+    const settings = get<AuthSettings>("auth");
+    const cssClasses = props.orientation === "horizontal" ? "horizontal divided" : "";
+
+    const google = settings.providers.google &&
+                    <div className="item">
+                        <SocialSignInButton provider="google" size={props.size} />
+                    </div>;
+    const facebook = settings.providers.facebook &&
+                    <div className="item">
+                        <SocialSignInButton provider="facebook" size={props.size} />
+                    </div>;
+
+    const noAuth = !facebook && !google &&
+                    <div className="item">
+                        <div className="ui tertiary inverted red segment">
+                            There are no authentication methods enabled.
+                        </div>
+                    </div>;
+
+    return <div className={`ui list ${cssClasses}`}>
+                { facebook }
+                { google }
+                { noAuth }
+            </div>;
+};

public/components/SupportCounter.tsx

@@ -2,7 +2,7 @@ import axios from "axios";
 import * as React from "react";
 import { Idea, User } from "../models";
 import * as storage from "../storage";
-import { SocialSignInButton } from "./social_signin_button";
+import { SocialSignInList } from "./SocialSignInList";
 
 interface SupportCounterProps {
     user: User;
@@ -88,8 +88,7 @@ export class SupportCounter extends React.Component<SupportCounterProps, Support
                     </div>
                     <div ref={(e) => { this.list = e; } } className="ui popup transition hidden">
                         <p className="header">Please log in to support an idea</p>
-                        <SocialSignInButton provider="facebook" small={true} />
-                        <SocialSignInButton provider="google" small={true} />
+                        <SocialSignInList orientation="horizontal" size="small" />
                     </div>
                 </div>;
     }

public/components/comment_input.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Idea } from "../models";
 import { getCurrentUser } from "../storage";
 import { DisplayError } from "./common";
-import { SocialSignInButton } from "./social_signin_button";
+import { SocialSignInList } from "./SocialSignInList";
 
 interface CommentInputProps {
     idea: Idea;
@@ -64,8 +64,7 @@ export class CommentInput extends React.Component<CommentInputProps, CommentInpu
             Please log in before leaving a comment.
           </div>
           <p>This only takes a second and you'll be good to go!</p>
-          <SocialSignInButton provider="facebook" small={true} />
-          <SocialSignInButton provider="google" small={true} />
+          <SocialSignInList orientation="horizontal" size="small" />
         </div>;
 
         return addComment;

public/components/header.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Tenant } from "../models";
 import { get, getCurrentUser } from "../storage";
 import { EnvironmentInfo, Gravatar } from "./common";
-import { SocialSignInButton } from "./social_signin_button";
+import { SocialSignInList } from "./SocialSignInList";
 
 export class Header extends React.Component<{}, {}> {
     private dropdown: HTMLElement;
@@ -32,14 +32,7 @@ export class Header extends React.Component<{}, {}> {
                                     </a>
                                 </div>
                              </div> :
-                             <div className="ui list">
-                                <div className="item">
-                                    <SocialSignInButton provider="facebook"/>
-                                </div>
-                                <div className="item">
-                                    <SocialSignInButton provider="google"/>
-                                </div>
-                             </div>;
+                             <SocialSignInList orientation="vertical" size="normal" />;
 
         return <div>
                     <EnvironmentInfo />

public/components/idea_input.tsx

@@ -2,7 +2,7 @@ import axios from "axios";
 import * as React from "react";
 import { getCurrentUser } from "../storage";
 import { DisplayError } from "./common";
-import { SocialSignInButton } from "./social_signin_button";
+import { SocialSignInList } from "./SocialSignInList";
 
 interface IdeaInputState {
     title: string;
@@ -62,8 +62,7 @@ export class IdeaInput extends React.Component<{}, IdeaInputState> {
                               Please log in before posting an idea
                             </div>
                             <p>This only takes a second and you'll be good to go!</p>
-                            <SocialSignInButton provider="facebook" small={true} />
-                            <SocialSignInButton provider="google" small={true} />
+                              <SocialSignInList orientation="horizontal" size="small" />
                           </div>
                         </div>;
 

public/components/show_idea_root.tsx

@@ -5,7 +5,7 @@ import * as storage from "../storage";
 import { Comment, Idea } from "../models";
 import { CommentInput } from "./comment_input";
 import { Gravatar, MultiLineText } from "./common";
-import { SocialSignInButton } from "./social_signin_button";
+import { SocialSignInButton } from "./SocialSignInButton";
 import { SupportCounter } from "./SupportCounter";
 
 import { Footer } from "./footer";

public/css/main.css

@@ -14,10 +14,6 @@
   margin-top: 50px;
 }
 
-.right {
-  text-align: right;
-}
-
 .idea-header {
   margin-left: 20px;
 }