Add login with GitHub to the landing page.

This commit is contained in:
yackob03 2013-10-10 14:42:14 -04:00
parent 5b25d8db5b
commit 669b3fcde1
4 changed files with 39 additions and 5 deletions

View file

@ -115,7 +115,7 @@
margin-top: -20px; margin-top: -20px;
margin-bottom: 0px; margin-bottom: 0px;
padding-top: 66px; padding-top: 46px;
min-height: 440px; min-height: 440px;
} }
@ -137,6 +137,31 @@
margin-left: 0px; margin-left: 0px;
} }
.signin-buttons {
text-align: center;
}
.landing-signup-button {
margin-bottom: 10px;
}
.landing-social-alternate {
color: #777;
font-size: 2em;
margin-left: 43px;
line-height: 1em;
}
.landing-social-alternate .inner-text {
text-align: center;
position: relative;
color: white;
left: -43px;
top: -9px;
font-weight: bold;
font-size: .4em;
}
form input.ng-invalid.ng-dirty { form input.ng-invalid.ng-dirty {
background-color: #FDD7D9; background-color: #FDD7D9;
} }
@ -201,7 +226,7 @@ form input.ng-valid.ng-dirty {
@media (max-height: 768px) { @media (max-height: 768px) {
.landing { .landing {
padding: 20px; padding: 20px;
padding-top: 46px; padding-top: 20px;
} }
} }

View file

@ -42,8 +42,10 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
if ($location.host() === 'quay.io') { if ($location.host() === 'quay.io') {
keyService['stripePublishableKey'] = 'pk_live_P5wLU0vGdHnZGyKnXlFG4oiu'; keyService['stripePublishableKey'] = 'pk_live_P5wLU0vGdHnZGyKnXlFG4oiu';
keyService['githubClientId'] = '5a8c08b06c48d89d4d1e';
} else { } else {
keyService['stripePublishableKey'] = 'pk_test_uEDHANKm9CHCvVa2DLcipGRh'; keyService['stripePublishableKey'] = 'pk_test_uEDHANKm9CHCvVa2DLcipGRh';
keyService['githubClientId'] = 'cfbc4aca88e5c1b40679';
} }
return keyService; return keyService;

View file

@ -130,7 +130,7 @@ function RepoListCtrl($scope, Restangular, UserService) {
}); });
} }
function LandingCtrl($scope, $timeout, Restangular, UserService) { function LandingCtrl($scope, $timeout, Restangular, UserService, KeyService) {
$('.form-signup').popover(); $('.form-signup').popover();
$scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) { $scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
@ -141,6 +141,8 @@ function LandingCtrl($scope, $timeout, Restangular, UserService) {
$scope.user = currentUser; $scope.user = currentUser;
}, true); }, true);
$scope.githubClientId = KeyService.githubClientId;
$scope.awaitingConfirmation = false; $scope.awaitingConfirmation = false;
$scope.registering = false; $scope.registering = false;

View file

@ -41,8 +41,13 @@
<input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required> <input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required>
<input type="password" class="form-control" placeholder="Create a password" ng-model="newUser.password" required> <input type="password" class="form-control" placeholder="Create a password" ng-model="newUser.password" required>
<input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword" match="newUser.password" required> <input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword" match="newUser.password" required>
<div class="form-group"> <div class="form-group signin-buttons">
<button class="btn btn-lg btn-primary btn-block" ng-disabled="signupForm.$invalid" type="submit" analytics-on analytics-event="register">Sign Up for Free!</button> <button class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit" analytics-on analytics-event="register">Sign Up for Free!</button>
<span class="landing-social-alternate">
<i class="icon-circle"></i>
<span class="inner-text">OR</span>
</span>
<a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email" class="btn btn-primary btn-block"><i class="icon-github icon-large"></i> Sign In with GitHub</a>
<p class="help-block">No credit card required.</p> <p class="help-block">No credit card required.</p>
</div> </div>
</form> </form>