From 92dd1586bf215a2fa49e38ed88d703128296742e Mon Sep 17 00:00:00 2001
From: Khanh Ngo <ngokhanhit@gmail.com>
Date: Sat, 18 Jun 2016 11:37:23 +0700
Subject: [PATCH] Add anchor tag in user_profile's url. Reload authentication
 tab when update

---
 app/templates/user_profile.html | 37 +++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/app/templates/user_profile.html b/app/templates/user_profile.html
index 479b867..e945f77 100644
--- a/app/templates/user_profile.html
+++ b/app/templates/user_profile.html
@@ -23,19 +23,19 @@
 				</div>
 				<div class="box-body">
 					<!-- Custom Tabs -->
-					<div class="nav-tabs-custom">
+					<div class="nav-tabs-custom" id="tabs">
 						<ul class="nav nav-tabs">
-							<li class="active"><a href="#personal_tab" data-toggle="tab">Personal
+							<li class="active"><a href="#tabs-personal" data-toggle="tab">Personal
 									Info</a></li>
-							<li><a href="#avatar_tab" data-toggle="tab">Change
+							<li><a href="#tabs-avatar" data-toggle="tab">Change
 									Avatar</a></li>
-							<li><a href="#password_tab" data-toggle="tab">Change
+							<li><a href="#tabs-password" data-toggle="tab">Change
 									Password</a></li>
-							<li><a href="#authentication_tab" data-toggle="tab">Authentication
+							<li><a href="#tabs-authentication" data-toggle="tab">Authentication
 									</a></li>
 						</ul>
 						<div class="tab-content">
-							<div class="tab-pane active" id="personal_tab">
+							<div class="tab-pane active" id="tabs-personal">
 								<form role="form" method="post" action="{{ user_profile }}">
 									<div class="form-group">
 										<label for="firstname">First Name</label> <input type="text"
@@ -57,7 +57,7 @@
 									</div>
 								</form>
 							</div>
-							<div class="tab-pane" id="avatar_tab">
+							<div class="tab-pane" id="tabs-avatar">
 								<form action="{{ user_profile }}" method="post"
 									enctype="multipart/form-data">
 									<div class="form-group">
@@ -87,7 +87,7 @@
 									</div>
 								</form>
 							</div>
-							<div class="tab-pane" id="password_tab">
+							<div class="tab-pane" id="tabs-password">
 								{% if not current_user.password %} Your account password is
 								managed via LDAP which isn't supported to change here. {% else
 								%}
@@ -109,16 +109,18 @@
 								</form>
 								{% endif %}
 							</div>
-							<div class="tab-pane" id="authentication_tab">
+							<div class="tab-pane" id="tabs-authentication">
 								<form action="{{ user_profile }}" method="post">
 									<div class="form-group">
-										<input type="checkbox" id="{{ current_user.username }}" class="otp_toggle" {% if current_user.otp_secret %}checked{% endif %}>
+										<input type="checkbox" id="otp_toggle" class="otp_toggle" {% if current_user.otp_secret %}checked{% endif %}>
 										<label for="otp_toggle">Enable Two Factor Authentication</label>
 										{% if current_user.otp_secret %}
+										<div id="token_information">
 											<p><img id="qrcode" src="{{ url_for('qrcode') }}"></p>
 											Please start FreeOTP (<a target="_blank" href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en">Android</a> -  <a target="_blank" href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>) on your smartphone and scan the above QR Code with it.
 											<br/>
 											<font color="red"><strong><i>Make sure only you can see this QR Code and nobodoy can capture it.</i></strong></font>
+										</div>
 										{% endif %}
 									</div>
 								</form>
@@ -134,6 +136,19 @@
 {% block extrascripts %}
 <!-- TODO: add password and password confirmation comparisson check -->
 <script>
+
+	$(function() {
+		$('#tabs').tabs({
+			// add url anchor tags
+        	activate: function(event, ui) {
+            	window.location.hash = ui.newPanel.attr('id');
+        	}
+    	});
+		// re-set active tab (ui)
+		var activeTabIdx = $('#tabs').tabs('option','active');
+		$('#tabs li:eq('+activeTabIdx+')').tab('show')
+	});
+
 	// initialize pretty checkboxes
 	$('.otp_toggle').iCheck({
 		checkboxClass : 'icheckbox_square-blue',
@@ -147,11 +162,11 @@
 		postdata = {
 			'action' : 'enable_otp',
 			'data' : {
-				'username' : username,
 				'enable_otp' : enable_otp
 			}
 		};
 		applyChanges(postdata, '/user/profile');
+		location.reload();
 	});
 </script>
 {% endblock %}