Complete the login with GitHub functionality.

endpoints/web.py

@@ -20,8 +20,9 @@ from endpoints.common import common_login
 logger = logging.getLogger(__name__)
 
 
-def render_page_template(name):
+def render_page_template(name, **kwargs):
-  return make_response(render_template(name, route_data=get_route_data()))
+  return make_response(render_template(name, route_data=get_route_data(),
+                                       **kwargs))
 
 
 @app.route('/', methods=['GET'], defaults={'path': ''})
@@ -184,6 +185,10 @@ def get_github_user(token):
 
 @app.route('/oauth2/github/callback', methods=['GET'])
 def github_oauth_callback():
+  error = request.args.get('error', None)
+  if error:
+    return render_page_template('githuberror.html', error_message=error)
+
   token = exchange_github_code_for_token(request.args.get('code'))
   user_data = get_github_user(token)
 
@@ -193,6 +198,10 @@ def github_oauth_callback():
   v3_media_type = {
     'Accept': 'application/vnd.github.v3'
   }
+
+  token_param = {
+    'access_token': token,
+  }
   get_email = requests.get(app.config['GITHUB_USER_EMAILS'],
                            params=token_param, headers=v3_media_type)
 
@@ -235,6 +244,7 @@ def github_oauth_attach():
   github_id = user_data['id']
   user_obj = current_user.db_user()
   model.attach_federated_login(user_obj, 'github', github_id)
+  return redirect(url_for('user'))
 
 
 @app.route('/confirm', methods=['GET'])

static/js/controllers.js

@@ -904,6 +904,8 @@ function UserAdminCtrl($scope, $timeout, $location, ApiService, PlanService, Use
   $scope.changePasswordSuccess = false;
   $scope.convertStep = 0;
   $scope.org = {};
+  $scope.githubRedirectUri = KeyService.githubRedirectUri;
+  $scope.githubClientId = KeyService.githubClientId;
 
   $('.form-change-pw').popover();
 

static/partials/user-admin.html

@@ -30,8 +30,7 @@
         <li ng-show="hasPaidPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billingoptions">Billing Options</a></li>
         <li ng-show="hasPaidBusinessPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billing" ng-click="loadInvoices()">Billing History</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#robots">Robot Accounts</a></li>
-        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#password">Set Password</a></li>
+        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#settings">Account Settings</a></li>
-        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#github">GitHub Login</a></li>
         <li ng-show="hasPaidBusinessPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#logs" ng-click="loadLogs()">Usage Logs</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#migrate" id="migrateTab">Convert to Organization</a></li>
       </ul>
@@ -51,14 +50,17 @@
         </div>
 
         <!-- Change password tab -->
-        <div id="password" class="tab-pane">
+        <div id="settings" class="tab-pane">
-          <div class="loading" ng-show="updatingUser">
+          <div class="loading" ng-show="updatingUser || !cuser">
             <div class="quay-spinner 3x"></div>
           </div>
           <div class="row">
+            <div class="panel">
+              <div class="panel-title">Change Password</div>
+
               <span class="help-block" ng-show="changePasswordSuccess">Password changed successfully</span>
 
-            <div ng-show="!updatingUser">
+              <div ng-show="!updatingUser" class="panel-body">
                 <form class="form-change-pw col-md-6" name="changePasswordForm" ng-submit="changePassword()" data-trigger="manual"
                       data-content="{{ changePasswordError }}" data-placement="right" ng-show="!awaitingConfirmation && !registering">
                   <input type="password" class="form-control" placeholder="Your new password" ng-model="cuser.password" required>
@@ -71,17 +73,22 @@
             </div>
           </div>
 
-        <!-- Connect with GitHub tab. -->
+          <div class="row" ng-show="cuser">
-        <div id="github" class="tab-pane">
+            <div class="panel">
-          <div ng-show="githubLogin" class="lead">
+              <div class="panel-title">GitHub Login</div>
+              <div class="panel-body">
+                <div ng-show="githubLogin" class="lead col-md-8">
                   <span class="fa-stack">
                     <i class="fa fa-circle fa-stack-2x check-green"></i>
                     <i class="fa fa-check fa-stack-1x fa-inverse"></i>
                   </span>
                   This account is connected with GitHub account: <b>{{githubLogin}}</b>
                 </div>
-          <div ng-show="!githubLogin">
+                <div ng-show="!githubLogin" class="col-md-8">
-            <a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}&redirect_uri={{ githubRedirectUri }}/attach class="btn btn-primary btn-block"><i class="fa fa-github fa-lg"></i> Connect with GitHub</a>
+                  <a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}&redirect_uri={{ githubRedirectUri }}/attach" class="btn btn-primary"><i class="fa fa-github fa-lg"></i> Connect with GitHub</a>
+                </div>
+              </div>
+            </div>
           </div>
         </div>