Commit 7d56227c authored by Romain Loth's avatar Romain Loth

save profile shows a modal answer instead of a new page

parent e810f78f
......@@ -449,6 +449,14 @@ def profile():
elif request.method == 'POST':
mlog("DEBUG", "saving profile with request.form=", request.form)
# ajax calls get a little html, normal calls get a full page
x_req_with = request.headers.get('X-Requested-With', type=str)
called_as_api = (x_req_with in ['XMLHttpRequest', 'MyFetchRequest'])
answer_template = "bare_thank_you.html" if called_as_api else "thank_you.html"
mlog("DEBUG", "profile update flag called_as_api=", called_as_api)
# special action DELETE!!
if 'delete_user' in request.form and request.form['delete_user'] == 'on':
the_id_to_delete = current_user.uid
......@@ -502,8 +510,9 @@ def profile():
logout_user()
# .. and login the user in his new mode
login_user(User(luid))
return render_template(
"thank_you.html",
answer_template,
debug_records = (our_records if app.config['DEBUG'] else {}),
form_accepted = True,
backend_error = False
......@@ -518,14 +527,14 @@ def profile():
except Exception as perr:
return render_template(
"thank_you.html",
answer_template,
form_accepted = False,
backend_error = True,
debug_message = tools.format_err(perr)
)
return render_template(
"thank_you.html",
answer_template,
debug_records = (our_records if app.config['DEBUG'] else {}),
form_accepted = True,
backend_error = False
......
......@@ -287,7 +287,13 @@ var cmxClt = (function(cC) {
// generic message box -------------------------------------------------
// to create an html message modal with doors auth (reg or login)
cC.elts.box.addGenericBox = function(boxId, boxTitle, boxContent) {
// @params
// boxId: string
// boxTitle: any html
// boxContent: any html content
// onOK: optional function to perform on clicking the 'OK' button
// (apart from closing the box)
cC.elts.box.addGenericBox = function(boxId, boxTitle, boxContent, onOK) {
// in a new div
var myDiv = document.createElement('div')
......@@ -309,7 +315,7 @@ var cmxClt = (function(cC) {
${boxContent}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="cmxClt.elts.box.toggleBox('${boxId}')">
<button type="button" class="btn btn-primary">
Ok
</button>
</div>
......@@ -322,6 +328,23 @@ var cmxClt = (function(cC) {
// append on body (no positioning now: it's a fixed overlay anyway)
var body = document.querySelector('body')
body.insertBefore(myDiv, body.lastChild)
// tie in the custom onclick function
var functionOnOk
if (onOK) {
functionOnOk = function() {
onOK()
cmxClt.elts.box.toggleBox(boxId)
}
}
else {
functionOnOk = function() {
cmxClt.elts.box.toggleBox(boxId)
}
}
// we assume there's only one .btn
var okBtn = document.getElementById(boxId).querySelector('.btn')
okBtn.onclick = functionOnOk
}
// /generic message box ------------------------------------------------
......
......@@ -8,7 +8,7 @@
* @copyright ISCPIF-CNRS 2016
* @author romain.loth@iscpif.fr
*
* @requires comex_user_shared
* @requires comex_user_shared, comex_lib_elts
*
* NB The uinfo variable should be set to template's user.json_info value.
*/
......@@ -22,8 +22,8 @@
// reselecting current_user's info choices
function setupSavedItems(uinfo) {
// (date and menu values are set up here
// but normal text vals are set up via html,
// pic is set below from a separate function,
// but normal text vals are set up via html template,
// pic and middle_name are set below from a separate function,
// and multi text inputs are set up via form init... fixable to harmonize)
for (var i in cmxClt.COLS) {
var colType = cmxClt.COLS[i][3]
......@@ -110,6 +110,15 @@ deleteUser.checked = false
setupSavedItems(uinfo)
// open middlename if there is one
if (uinfo.middle_name != null
&& uinfo.middle_name != ""
&& uinfo.middle_name != "None") {
console.log("showing midname for profile")
cmxClt.uform.displayMidName()
}
// main validation function
// ------------------------
function completionAsYouGo() {
......@@ -124,16 +133,79 @@ function completionAsYouGo() {
// timestamp is done server-side
}
// run first check on existing profile data pre-filled by the template
completionAsYouGo()
// open middlename if there is one
if (uinfo.middle_name != null
&& uinfo.middle_name != ""
&& uinfo.middle_name != "None") {
console.log("showing midname for profile")
cmxClt.uform.displayMidName()
// set up a "Your data was saved" modal box (tied to the SUBMIT button)
function addAndShowModal(someHtmlContent) {
// create and add modal
cmxClt.elts.box.addGenericBox(
'save_info',
'Profile update',
someHtmlContent,
function(){window.location.reload()}
)
// show modal
var saveInfoModal = document.getElementById('save_info')
saveInfoModal.style.display = 'block'
saveInfoModal.style.opacity = 1
}
function submitAndModal() {
var formdat = theUForm.asFormData();
var postUrl = "/services/user/profile/"
// if (window.fetch) {
if (false) {
fetch(postUrl, {
method: 'POST',
headers: {'X-Requested-With': 'MyFetchRequest'},
body: formdat,
credentials: "same-origin" // <= allows our req to have id cookie
})
.then(function(response) {
if(response.ok) {
response.text().then( function(bodyText) {
// console.log("Profile POST was OK, showing answer")
addAndShowModal(bodyText)
})
}
else {
response.text().then( function(bodyText) {
console.log("Profile POST failed, aborting and showing message")
addAndShowModal("<h4>Profile POST server error:</h4>"+bodyText)
})
}
})
.catch(function(error) {
console.warn('fetch error:'+error.message);
});
}
// also possible using old-style jquery ajax
else {
$.ajax({
contentType: false, // <=> multipart
processData: false, // <=> multipart
data: formdat,
type: 'POST',
url: postUrl,
success: function(data) {
addAndShowModal(data)
},
error: function(result) {
console.warn('jquery ajax error with result', result)
}
});
}
}
console.log("profile controllers load OK")
<!-- like a normal message page content but without any page-frame layout
==> to be includable in a modal panel or other free div -->
<div id="intro">
<h2 class="oldstyle">Message</h2>
<div class="message-hero">
{{ message | safe }}
</div>
</div>
<!-- like a normal message page content but without any page-frame layout
==> to be includable in a modal panel or other free div -->
<div class="row">
<div class="spacer col-lg-2 col-md-1 hidden-sm-down">&nbsp;</div>
<div class="my-centering-box col-lg-8 col-md-10 col-sm-12">
<!-- INTRODUCTION TEXT -->
<div id="intro">
<h2 class="oldstyle">Profile update {{ "ok" if form_accepted else "failed" }}</h2>
<p class="mini-hero">
{% if form_accepted %}
Thank you for your answers ! We have updated the <strong>Community Explorer</strong> database with this new information.
{% else %}
<span class="red">
Your answers couldn't be accepted
{% if backend_error %}
because there was an <b>error in the DB save</b> (see detail below)
{% else %}
because you filled some wrong information in the verification test !
{% endif %}
<br/> (if you click "back" you should be able to have your answers still in the form)
</span>
{% endif %}
</p>
<p class="mini-hero">
{{message|safe}}
</p>
</div>
</div>
<div class="spacer col-lg-2 col-md-1 hidden-sm-down">&nbsp;</div>
</div>
<!-- any debug messages -->
<div class="row spacerrow">&nbsp;</div>
<div class="row">
<div class="spacer col-lg-2 col-md-1 hidden-sm-down">&nbsp;</div>
<div class="my-centering-box col-lg-8 col-md-10 col-sm-12">
<div class="debug-info">
{% if debug_message or (debug_records|length != 0) %}
<h3 style="font-family:Calibri, sans-serif">debug</h3>
{% for key in debug_records %}
<p> {{key}} &lt;- {{debug_records[key]}}</p>
{% endfor %}
{% if debug_message %}
<p style="font-family: monospace; font-weight: bold">
{{debug_message|safe}}
</p>
{% endif %}
{% endif %}
</div>
</div>
<div class="spacer col-lg-2 col-md-1 hidden-sm-down">&nbsp;</div>
</div>
......@@ -563,7 +563,7 @@
<br/><br/>
<!-- @type button to avoid ENTER submit -->
<button class="btn btn-lg btn-success" id="form_submit"
type="button" onclick="theUForm.elForm.submit()">
type="button" onclick="submitAndModal()">
Save profile
</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment