feat(signup): progress on new sign up and email verification flow, #2353

emails/assets/css/style.css

@@ -133,3 +133,12 @@ table.columns td.better-button {
 .better-button:active a {
   color: #FFFFFF !important;
 }
+
+.verification-code {
+  background-color: #EEEEEE;
+  padding: 3px;
+  margin: 8px;
+  display: inline-block;
+  font-weight: bold;
+  font-size: 20px;
+}

emails/templates/invited_to_org.html

@@ -37,12 +37,9 @@
 								<td align="center" class="better-button" bgcolor="#ff8f2b"><a href="[[.AppUrl]]" target="_blank">Log in now</a></td>
 							</tr>
 						</table>
-
-
 					</td>
 				</tr>
 			</table>
-
 		</td>
 	</tr>
 </table>

emails/templates/signup_started.html

+[[Subject .Subject "Welcome to Grafana, please complete your sign up!"]]
+
+<table class="row">
+	<tr>
+		<td class="wrapper last">
+
+			<table class="twelve columns">
+				<tr>
+					<td>
+						<h3 class="center">Complete the signup</h3>
+					</td>
+					<td class="expander"></td>
+				</tr>
+			</table>
+
+		</td>
+	</tr>
+</table>
+
+<table class="row">
+	<tr>
+		<td class="wrapper last">
+			<table class="twelve columns">
+				<tr>
+					<td class="center">
+						Copy and past the email verification code:<br>
+						<span class="verification-code">[[.Code]]</span><br> in
+						the sign up form <strong>or</strong> use the link below.
+					</td>
+					<td class="expander"></td>
+				</tr>
+				<tr>
+					<td class="center">
+						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
+							<tr>
+								<td align="center" class="better-button" bgcolor="#ff8f2b"><a href="[[.SignUpUrl]]" target="_blank">Complete Sign Up</a></td>
+							</tr>
+						</table>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+</table>
+
+

pkg/services/notifications/notifications.go

@@ -3,7 +3,9 @@ package notifications
 import (
 	"bytes"
 	"errors"
+	"fmt"
 	"html/template"
+	"net/url"
 	"path/filepath"
 
 	"github.com/grafana/grafana/pkg/bus"
@@ -16,7 +18,7 @@ import (
 
 var mailTemplates *template.Template
 var tmplResetPassword = "reset_password.html"
-var tmplWelcomeOnSignUp = "welcome_on_signup.html"
+var tmplSignUpStarted = "signup_started.html"
 
 func Init() error {
 	initMailQueue()
@@ -121,17 +123,19 @@ func validateResetPasswordCode(query *m.ValidateResetPasswordCodeQuery) error {
 }
 
 func signUpStartedHandler(evt *events.SignUpStarted) error {
-	log.Info("User signed up: %s, send_option: %s", evt.Email, setting.Smtp.SendWelcomeEmailOnSignUp)
+	log.Info("User signup started: %s", evt.Email)
 
-	if evt.Email == "" || !setting.Smtp.SendWelcomeEmailOnSignUp {
+	if evt.Email == "" {
 		return nil
 	}
 
 	return sendEmailCommandHandler(&m.SendEmailCommand{
 		To:       []string{evt.Email},
-		Template: tmplWelcomeOnSignUp,
+		Template: tmplSignUpStarted,
 		Data: map[string]interface{}{
 			"Email":     evt.Email,
+			"Code":      evt.Code,
+			"SignUpUrl": setting.ToAbsUrl(fmt.Sprintf("signup/?email=%s&code=%s", url.QueryEscape(evt.Email), url.QueryEscape(evt.Code))),
 		},
 	})
 }

public/app/controllers/signupCtrl.js

@@ -14,10 +14,11 @@ function (angular, config) {
     $scope.formModel = {};
 
     $scope.init = function() {
-      var email = $location.search().email;
-      $scope.formModel.orgName = email;
-      $scope.formModel.email = email;
-      $scope.formModel.username = email;
+      var params = $location.search();
+      $scope.formModel.orgName = params.email;
+      $scope.formModel.email = params.email;
+      $scope.formModel.username = params.email;
+      $scope.formModel.code = params.code;
     };
 
     $scope.submit = function() {

public/app/partials/signup_step2.html

@@ -31,8 +31,8 @@
 
 				<div style="display: inline-block; margin-bottom: 25px; width: 300px">
 					<div class="editor-option">
-						<label class="small">Email verification code: <em>Sent to your email just now</em></label>
-						<input type="text" class="input input-xlarge" ng-model="formModel.code" required></input>
+						<label class="small">Email verification code: (sent to your email)</label>
+						<input type="text" class="input input-xlarge text-center" ng-model="formModel.code" required></input>
 					</div>
 				</div>
 

public/emails/invited_to_org.html

@@ -152,12 +152,9 @@ color: #FFFFFF !important;
 								<td align="center" class="better-button" bgcolor="#ff8f2b" style="-moz-border-radius: 2px; -moz-hyphens: auto; -webkit-border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; border-radius: 2px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px; text-align: left; vertical-align: top; word-break: break-word" valign="top"><a href="{{.AppUrl}}" target="_blank" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #ff8f2b; color: #FFF; display: inline-block; padding: 12px 25px; text-decoration: none">Log in now</a></td>
 							</tr>
 						</table>
-
-
 					</td>
 				</tr>
 			</table>
-
 		</td>
 	</tr>
 </table>