Account settings

app/assets/javascripts/profile.js.coffee

@@ -4,12 +4,13 @@ class @Profile
     $('.js-preferences-form').on 'change.preference', 'input[type=radio]', ->
       $(this).parents('form').submit()
 
-    $('.update-username form').on 'ajax:before', ->
-      $('.loading-gif').show()
+    $('.update-username').on 'ajax:before', ->
+      $('.loading-username').show()
       $(this).find('.update-success').hide()
       $(this).find('.update-failed').hide()
 
-    $('.update-username form').on 'ajax:complete', ->
+    $('.update-username').on 'ajax:complete', ->
+      $('.loading-username').hide()
       $(this).find('.btn-save').enable()
       $(this).find('.loading-gif').hide()
 

app/assets/stylesheets/framework/common.scss

@@ -12,11 +12,13 @@
 .prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-20 { margin-top:20px }
 .prepend-left-10 { margin-left:10px }
-.prepend-left-default { margin-left:$gl-padding }
+.prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left:20px }
 .append-right-5 { margin-right: 5px }
 .append-right-10 { margin-right:10px }
+.append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right:20px }
+.append-bottom-0 { margin-bottom:0 }
 .append-bottom-10 { margin-bottom:10px }
 .append-bottom-15 { margin-bottom:15px }
 .append-bottom-20 { margin-bottom:20px }

app/assets/stylesheets/framework/variables.scss

@@ -70,7 +70,7 @@ $orange-light: rgba(252, 109, 38, 0.80);
 $orange-normal: #E75E40;
 $orange-dark: #CE5237;
 
-$red-light: #F43263;
+$red-light: #F06559;
 $red-normal: #E52C5A;
 $red-dark: #D22852;
 
@@ -94,7 +94,7 @@ $border-orange-light: #fc6d26;
 $border-orange-normal: #CE5237;
 $border-orange-dark: #C14E35;
 
-$border-red-light: #E52C5A;
+$border-red-light: #F24F41;
 $border-red-normal: #D22852;
 $border-red-dark: #CA264F;
 

app/assets/stylesheets/pages/profile.scss

-.account-page {
-  fieldset {
-    margin-bottom: 15px;
-    padding-bottom: 15px;
+.profile-avatar-form-option {
+  hr {
+    margin: 10px 0;
   }
 }
 
@@ -175,3 +174,44 @@
     color: $profile-settings-link-color;
   }
 }
+
+.change-username-title {
+  color: #FC6D26;
+}
+
+.remove-account-title {
+  color: #F00;
+}
+
+.provider-btn-group {
+  display: inline-block;
+  margin-right: 10px;
+  border: 1px solid #E5E5E5;
+  border-radius: 3px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.provider-btn-image {
+  display: inline-block;
+  padding: 5px 10px;
+  border-right: 1px solid #E5E5E5;
+
+  > img {
+    width: 20px;
+  }
+}
+
+.provider-btn {
+  display: inline-block;
+  padding: 5px 10px;
+  margin-left: -3px;
+  line-height: 22px;
+  background-color: $gray-light;
+
+  &.not-active {
+    color: #4688F1;
+  }
+}

app/controllers/profiles/accounts_controller.rb

 class Profiles::AccountsController < Profiles::ApplicationController
   def show
+    unless current_user.otp_secret
+      current_user.otp_secret = User.generate_otp_secret(32)
+    end
+
+    unless current_user.otp_grace_period_started_at && two_factor_grace_period
+      current_user.otp_grace_period_started_at = Time.current
+    end
+
+    current_user.save! if current_user.changed?
+
     @user = current_user
+
+    @qr_code = build_qr_code
   end
 
   def unlink
@@ -8,4 +20,16 @@ class Profiles::AccountsController < Profiles::ApplicationController
     current_user.identities.find_by(provider: provider).destroy
     redirect_to profile_account_path
   end
+
+  private
+
+  def build_qr_code
+    issuer = "#{issuer_host} | #{current_user.email}"
+    uri = current_user.otp_provisioning_uri(current_user.email, issuer: issuer)
+    RQRCode::render_qrcode(uri, :svg, level: :m, unit: 3)
+  end
+
+  def issuer_host
+    Gitlab.config.gitlab.host
+  end
 end