grafana_com: changed name of oauth grafana_net integration (old settings names still work), and updated login button look, closes #8415

conf/defaults.ini

@@ -249,6 +249,7 @@ allowed_domains =
 hosted_domain =
 
 #################################### Grafana.com Auth ####################
+# legacy key names (so they work in env variables)
 [auth.grafananet]
 enabled = false
 allow_sign_up = true
@@ -257,6 +258,14 @@ client_secret = some_secret
 scopes = user:email
 allowed_organizations =
 
+[auth.grafana_com]
+enabled = false
+allow_sign_up = true
+client_id = some_id
+client_secret = some_secret
+scopes = user:email
+allowed_organizations =
+
 #################################### Generic OAuth #######################
 [auth.generic_oauth]
 name = OAuth
@@ -433,6 +442,9 @@ prefix = prod.grafana.%(instance_name)s.
 [grafana_net]
 url = https://grafana.com
 
+[grafana_com]
+url = https://grafana.com
+
 #################################### External Image Storage ##############
 [external_image_storage]
 # You can choose between (s3, webdav)

conf/sample.ini

@@ -249,7 +249,7 @@
 ;allowed_organizations =
 
 #################################### Grafana.com Auth ####################
-[auth.grafananet]
+[auth.grafana_com]
 ;enabled = false
 ;allow_sign_up = true
 ;client_id = some_id
@@ -386,7 +386,7 @@
 
 #################################### Grafana.com integration  ##########################
 # Url used to to import dashboards directly from Grafana.com
-[grafana_net]
+[grafana_com]
 ;url = https://grafana.com
 
 #################################### External image storage ##########################

pkg/api/grafana_com_proxy.go

@@ -13,7 +13,7 @@ import (
 	"github.com/grafana/grafana/pkg/util"
 )
 
-var gNetProxyTransport = &http.Transport{
+var grafanaComProxyTransport = &http.Transport{
 	TLSClientConfig: &tls.Config{InsecureSkipVerify: false},
 	Proxy:           http.ProxyFromEnvironment,
 	Dial: (&net.Dialer{
@@ -24,7 +24,7 @@ var gNetProxyTransport = &http.Transport{
 }
 
 func ReverseProxyGnetReq(proxyPath string) *httputil.ReverseProxy {
-	url, _ := url.Parse(setting.GrafanaNetUrl)
+	url, _ := url.Parse(setting.GrafanaComUrl)
 
 	director := func(req *http.Request) {
 		req.URL.Scheme = url.Scheme
@@ -45,7 +45,7 @@ func ReverseProxyGnetReq(proxyPath string) *httputil.ReverseProxy {
 func ProxyGnetRequest(c *middleware.Context) {
 	proxyPath := c.Params("*")
 	proxy := ReverseProxyGnetReq(proxyPath)
-	proxy.Transport = gNetProxyTransport
+	proxy.Transport = grafanaComProxyTransport
 	proxy.ServeHTTP(c.Resp, c.Req.Request)
 	c.Resp.Header().Del("Set-Cookie")
 }

pkg/models/models.go

@@ -7,5 +7,5 @@ const (
 	GOOGLE
 	TWITTER
 	GENERIC
-	GRAFANANET
+	GRAFANA_COM
 )

pkg/setting/setting.go

@@ -160,7 +160,7 @@ var (
 	logger log.Logger
 
 	// Grafana.NET URL
-	GrafanaNetUrl string
+	GrafanaComUrl string
 
 	// S3 temp image store
 	S3TempImageStoreBucketUrl string
@@ -582,7 +582,11 @@ func NewConfigContext(args *CommandLineArgs) error {
 		log.Warn("require_email_validation is enabled but smpt is disabled")
 	}
 
-	GrafanaNetUrl = Cfg.Section("grafana_net").Key("url").MustString("https://grafana.com")
+	// check old key  name
+	GrafanaComUrl = Cfg.Section("grafana_net").Key("url").MustString("")
+	if GrafanaComUrl == "" {
+		GrafanaComUrl = Cfg.Section("grafana_com").Key("url").MustString("https://grafana.com")
+	}
 
 	imageUploadingSection := Cfg.Section("external_image_storage")
 	ImageUploadProvider = imageUploadingSection.Key("provider").MustString("internal")

pkg/social/grafana_com_oauth.go

@@ -9,7 +9,7 @@ import (
 	"golang.org/x/oauth2"
 )
 
-type SocialGrafanaNet struct {
+type SocialGrafanaCom struct {
 	*oauth2.Config
 	url                  string
 	allowedOrganizations []string
@@ -20,19 +20,19 @@ type OrgRecord struct {
 	Login string `json:"login"`
 }
 
-func (s *SocialGrafanaNet) Type() int {
-	return int(models.GRAFANANET)
+func (s *SocialGrafanaCom) Type() int {
+	return int(models.GRAFANA_COM)
 }
 
-func (s *SocialGrafanaNet) IsEmailAllowed(email string) bool {
+func (s *SocialGrafanaCom) IsEmailAllowed(email string) bool {
 	return true
 }
 
-func (s *SocialGrafanaNet) IsSignupAllowed() bool {
+func (s *SocialGrafanaCom) IsSignupAllowed() bool {
 	return s.allowSignup
 }
 
-func (s *SocialGrafanaNet) IsOrganizationMember(organizations []OrgRecord) bool {
+func (s *SocialGrafanaCom) IsOrganizationMember(organizations []OrgRecord) bool {
 	if len(s.allowedOrganizations) == 0 {
 		return true
 	}
@@ -48,7 +48,7 @@ func (s *SocialGrafanaNet) IsOrganizationMember(organizations []OrgRecord) bool
 	return false
 }
 
-func (s *SocialGrafanaNet) UserInfo(client *http.Client) (*BasicUserInfo, error) {
+func (s *SocialGrafanaCom) UserInfo(client *http.Client) (*BasicUserInfo, error) {
 	var data struct {
 		Name  string      `json:"name"`
 		Login string      `json:"username"`

pkg/social/social.go

@@ -47,7 +47,7 @@ func NewOAuthService() {
 	setting.OAuthService = &setting.OAuther{}
 	setting.OAuthService.OAuthInfos = make(map[string]*setting.OAuthInfo)
 
-	allOauthes := []string{"github", "google", "generic_oauth", "grafananet"}
+	allOauthes := []string{"github", "google", "generic_oauth", "grafananet", "grafana_com"}
 
 	for _, name := range allOauthes {
 		sec := setting.Cfg.Section("auth." + name)
@@ -72,6 +72,10 @@ func NewOAuthService() {
 			continue
 		}
 
+		if name == "grafananet" {
+			name = "grafana_com"
+		}
+
 		setting.OAuthService.OAuthInfos[name] = info
 
 		config := oauth2.Config{
@@ -120,21 +124,21 @@ func NewOAuthService() {
 			}
 		}
 
-		if name == "grafananet" {
+		if name == "grafana_com" {
 			config = oauth2.Config{
 				ClientID:     info.ClientId,
 				ClientSecret: info.ClientSecret,
 				Endpoint: oauth2.Endpoint{
-					AuthURL:  setting.GrafanaNetUrl + "/oauth2/authorize",
-					TokenURL: setting.GrafanaNetUrl + "/api/oauth2/token",
+					AuthURL:  setting.GrafanaComUrl + "/oauth2/authorize",
+					TokenURL: setting.GrafanaComUrl + "/api/oauth2/token",
 				},
 				RedirectURL: strings.TrimSuffix(setting.AppUrl, "/") + SocialBaseUrl + name,
 				Scopes:      info.Scopes,
 			}
 
-			SocialMap["grafananet"] = &SocialGrafanaNet{
+			SocialMap["grafana_com"] = &SocialGrafanaCom{
 				Config:               &config,
-				url:                  setting.GrafanaNetUrl,
+				url:                  setting.GrafanaComUrl,
 				allowSignup:          info.AllowSignup,
 				allowedOrganizations: util.SplitString(sec.Key("allowed_organizations").String()),
 			}

public/app/partials/login.html

@@ -40,10 +40,10 @@
 			</form>
 
 			<div ng-if="loginMode">
-				<div class="text-center login-divider" ng-show="oauthEnabled && !disableLoginForm">
+				<div class="text-center login-divider">
 					<div class="login-divider-line">
 						<span class="login-divider-text">
-							Or login with
+							<span ng-show="oauthEnabled && !disableLoginForm">Or</span> Login With
 						</span>
 					</div>
 				</div>
@@ -53,32 +53,33 @@
 				<div class="login-oauth text-center" ng-show="oauthEnabled">
 					<a class="btn btn-large btn-google" href="login/google" target="_self" ng-if="oauth.google">
 						<i class="fa fa-google"></i>
-						with Google
+						Google
 					</a>
 					<a class="btn btn-large btn-github" href="login/github" target="_self" ng-if="oauth.github">
 						<i class="fa fa-github"></i>
-						with GitHub
+						GitHub
 					</a>
-					<a class="btn btn-large btn-grafana-net" href="login/grafananet" target="_self" ng-if="oauth.grafananet">
-						with <span>Grafana.com</span>
+					<a class="btn btn-large btn-grafana-com" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
+						<img src="public/img/grafana_icon.svg"></img>
+						<span>Grafana.com</span>
 					</a>
 					<a class="btn btn-large btn-generic-oauth" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
 						<i class="fa fa-gear"></i>
-						with {{oauth.generic_oauth.name}}
-					</a>
-				</div>
-			</div>
-
-			<div class="clearfix"></div>
-
-			<div class="text-center password-recovery" ng-hide="disableLoginForm">
-				<div class="text-center">
-					<a href="user/password/send-reset-email">
-						Forgot your password?
+						{{oauth.generic_oauth.name}}
 					</a>
 				</div>
 			</div>
 		</div>
 
+		<div class="clearfix"></div>
+
+		<div class="text-center password-recovery" ng-hide="disableLoginForm">
+			<div class="text-center">
+				<a href="user/password/send-reset-email">
+					Forgot your password?
+				</a>
+			</div>
+		</div>
+
 	</div>
 </div>

public/sass/pages/_login.scss

@@ -36,6 +36,7 @@
 .login-inner-box {
   background: $panel-bg;
   text-align: center;
+  padding-bottom: 3rem;
 }
 
 .login-tab-header {
@@ -97,7 +98,6 @@
 }
 
 .login-oauth {
-  margin-bottom: 15px;
 
   .btn {
     margin: 5px;
@@ -113,23 +113,18 @@
     color: white;
   }
 
-  .btn-grafana-net {
-    background: url(../img/grafana_net_logo.svg);
-    background-size: 10rem;
-    background-repeat: no-repeat;
-    background-position: right 35%;
-    overflow: hidden;
-    padding-right: 10.5rem;
+  .btn-grafana-com {
+    @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+    box-shadow: $card-shadow;
 
-    span {
-      display: none;
+    img {
+      width: 19px;
     }
   }
 }
 
 .password-recovery {
   background: $tight-form-bg;
-  margin-top: 10px;
   padding: 10px;
   a {
     color: $gray-2;