WIP: login from anypage via popup

services/main.py

@@ -324,6 +324,14 @@ def logout():
     logout_user()
     return redirect(url_for('rootstub', _external=True))
 
+# /test_base
+@app.route('/test_base')
+def test_base():
+    return render_template(
+        "base_layout.html",
+        doors_connect=config['DOORS_HOST']+':'+config['DOORS_PORT']
+    )
+
 
 # /services/user/profile/
 @app.route(config['PREFIX'] + config['USR_ROUTE'] + '/profile/', methods=['GET', 'POST'])

static/css/comex.css

@@ -66,6 +66,27 @@ div.my-box {
   /*text-align: center;*/
 }
 
+/* self-made modals */
+.modal.self-made {
+    top:25%;
+    display: none;
+
+    /* centered */
+    width: 700px;
+    left:50%;
+    margin-left: -350px;
+
+    opacity: 0;
+    overflow: visible;  /* otherwise mysteriously cut by smth */
+}
+
+.modal-title {
+  font-size: 16px;
+  margin-top: .2em;
+  font-weight: bold;
+  color: #910;
+}
+
 /* operation buttons for instance add middle name, remove box, etc */
 .operation {
   color: #ffc ;

static/css/comex_user.css

@@ -79,6 +79,13 @@ p#doors_ret_msg {
   max-width: 52em;           /* FORMWIDTH */
 }
 
+@media(max-width:991px){
+    /* sm and md */
+    .question {
+      padding: 0;
+    }
+}
+
 .conditional-q {
   display: none;
 }
@@ -124,11 +131,6 @@ input.readonly {
   padding-right: 2.1em;
 }
 
-input#my-captcha{
-    height: 5em;
-    font-size: 1em;
-}
-
 /* for code blocks or urls */
 .code {
   font-family: "Fira Mono", "Droid Sans Mono", monospace;
@@ -216,13 +218,26 @@ li.minilabel {
 }
 
 
-/**/
+/* for captcha */
+input#my-captcha{
+    max-width:60%;
+    min-height:5em;
+    font-size: 1em;
+}
+
 .realperson-challenge {
   float:right;
+  margin: .5em 0 0 0;
+  max-height: 5em;
 }
 .realperson-text {
-  padding: 0 2em;
+  font-family: monospace;
+  font-weight: bold;
+  /*letter-spacing: -.04em;*/
+  /*font-size: .25em;*/
+  /*line-height: .125em;*/
 }
+
 .realperson-regen {
   color: #554 ;
 }

static/js/comex_page_login_controllers.js

@@ -13,7 +13,14 @@
  */
 
 // initialize form controllers
-cmxClt.uform.initialize("comex_login_form", loginValidate)
+if (document.getElementById('auth_box')) {
+    // for new popup box
+    cmxClt.uform.initialize("auth_box", loginValidate)
+}
+else {
+    // old separate login page
+    cmxClt.uform.initialize("comex_login_form", loginValidate)
+}
 
 // initialize auth with doors
 cmxClt.uauth.emailIdSupposedToExist = true
@@ -24,17 +31,17 @@ function loginValidate() {
   // console.log("loginValidate Go")
 
   // checks email, pass and captcha formats
-  // and updates uauth.emailStatus, uauth.passStatus, uauth.captchaStatus 
+  // and updates uauth.emailStatus, uauth.passStatus, uauth.captchaStatus
   cmxClt.uauth.earlyValidate()
 
-  if (cmxClt.uauth.passStatus
-        && cmxClt.uauth.emailStatus
-        && cmxClt.uauth.captchaStatus) {
-      cmxClt.uform.submitButton.disabled = false
-  }
-  else {
-      cmxClt.uform.submitButton.disabled = true
-  }
+  // if (cmxClt.uauth.passStatus
+  //       && cmxClt.uauth.emailStatus
+  //       && cmxClt.uauth.captchaStatus) {
+  //     cmxClt.uform.submitButton.disabled = false
+  // }
+  // else {
+  //     cmxClt.uform.submitButton.disabled = true
+  // }
 }
 
 

static/js/comex_user_shared_auth.js

@@ -30,8 +30,185 @@ cmxClt = (function(cC) {
 
     cC.uauth.emailIdSupposedToExist = null
 
-    cC.uauth.uidInput = document.getElementById('doors_uid')
+
+
+    // login box is set up before the rest to provide the elements early ---
+
+    // a modal box for login/register credentials
+    // -----------
+    cC.uauth.box = {}
+
+    cC.uauth.box.authBox = null
+
+    // our self-made modal open/close function
+    cC.uauth.box.toggleAuthBox = function() {
+        if (cC.uauth.box.authBox) {
+            if (cC.uauth.box.authBox.style.display == 'none') {
+                // show box
+                cC.uauth.box.authBox.style.display = 'block'
+                cC.uauth.box.authBox.style.opacity = 1
+            }
+            else {
+                // remove box
+                cC.uauth.box.authBox.style.opacity = 0
+                setTimeout(function(){cC.uauth.box.authBox.style.display = 'none'}, 300)
+            }
+        }
+        else {
+            console.warn("Can't find cmxClt.uauth.box.authBox try addAuthBox()")
+        }
+    }
+
+
+    // to create an html modal with doors auth (reg or login)
+    cC.uauth.box.addAuthBox = function(boxParams) {
+        var title, preEmail, emailLegend, passLegend, confirmPass, captchaBlock
+
+        // --- default params
+        if (!boxParams)                        boxParams = {}
+        // mode <=> 'login' or 'register'
+        if (boxParams.mode == undefined)       boxParams.mode = 'login'
+        // for prefilled values
+        if (boxParams.email == undefined)      boxParams.email = null
+        // add a captcha ?
+        if (boxParams.doCaptcha == undefined)  boxParams.doCaptcha = false
+
+        // --- template fragments
+        if (boxParams.mode == 'register') {
+            title = "Register your email on the Doors portal of the institute"
+            preEmail = ""
+            emailLegend = "Your email will also be your login for the ISC services."
+            passLegend = "Please make your password difficult to predict."
+            confirmPass = `
+            <div class="question">
+              <div class="input-group">
+                <label for="password2" class="smlabel input-group-addon">* Password</label>
+                <input id="password2" name="password2" maxlength="30"
+                       type="password" class="form-control" placeholder="Repeat the password">
+              </div>
+            </div>
+            `
+        }
+        else if (boxParams.mode == 'login') {
+            title = "Login via the Doors portal"
+            preEmail = boxParams.email || ''
+            emailLegend = "This email is your login for both community explorer and the institute's authentication portal 'Doors'"
+            passLegend = ""
+            confirmPass = ""
+        }
+        else {
+            console.error("Unrecognized mode:", boxParams.mode)
+        }
+
+        // also perhaps captcha
+        if (boxParams.doCaptcha) {
+            captchaBlock = `
+                <input id="my-captchaHash" name="my-captchaHash" type="text" hidden></input>
+                <!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
+                <div class="question input-group">
+                    <label for="my-captcha" class="smlabel input-group-addon">Code</label>
+                    <input id="my-captcha" name="my-captcha"
+                           type="text" class="form-control input-lg" placeholder="Enter the 5 letters beside =>"
+                           onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
+                    <p class="legend legend-float">(A challenge for spam bots)</p>
+                </div>
+            `
+        }
+        else {
+            captchaBlock=''
+        }
+
+        // --- insert it all into a new div
+        var myDiv = document.createElement('div')
+        myDiv.innerHTML = `
+            <div class="modal fade self-made" id="auth_modal" role="dialog" aria-labelledby="authTitle" aria-hidden="true" style="display:none">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" onclick="cC.uauth.box.toggleAuthBox()" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h5 class="modal-title" id="authTitle">${title}</h5>
+                  </div>
+                  <div class="modal-body auth-box">
+                    <form id="auth_box" enctype="multipart/form-data"
+                          method="post" onsubmit="console.info('auth_box submitted')">
+                        <div class="question">
+                          <p class="legend">${emailLegend}</p>
+                          <div class="input-group">
+                            <!-- email validation onblur/onchange is done by cmxClt.uauth.box.testMailFormatAndExistence -->
+                            <label for="email" class="smlabel input-group-addon">* Email</label>
+                            <input id="email" name="email" maxlength="255"
+                                   type="text" class="form-control" placeholder="email" value="${preEmail}">
+
+                            <!-- doors return value icon -->
+                            <div id="doors_ret_icon_msg" class="input-group-addon"
+                                 title="The email will be checked in our DB after you type and leave the box.">
+                              <span id="doors_ret_icon"
+                                    class="glyphicon glyphicon-question-sign grey"
+                                    ></span>
+                            </div>
+                          </div>
+                          <!-- doors return value message -->
+                          <p id="doors_ret_message" class="legend"></p>
+                        </div>
+
+                        <div class="question">
+                          <p id="password_message" class="legend red" style="font-weight:bold"></p>
+                          <p class="legend">${passLegend}</p>
+                          <div class="input-group">
+                            <label for="password" class="smlabel input-group-addon">* Password</label>
+                            <input id="password" name="password" maxlength="30"
+                                   type="password" class="form-control" placeholder="Create a password">
+                          </div>
+                        </div>
+                        <br/>
+                        ${confirmPass}
+                        <br/>
+                        ${captchaBlock}
+                    </form>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" onclick='cC.uauth.box.toggleAuthBox()'>
+                        Cancel
+                    </button>
+                    <button type="submit" id="form_submit"
+                            class="btn btn-primary">
+                        Submit
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>`
+
+
+        // append on body (no positioning now: it's a fixed overlay anyway)
+        var body = document.querySelector('body')
+        body.insertBefore(myDiv, body.lastChild)
+
+        // save a ref to it
+        cC.uauth.box.authBox = document.getElementById('auth_modal')
+    }
+
+
+    // if not there, add the box in all pages ( => allows login via menu )
+
+    if (! document.getElementById('email')) {
+        cC.uauth.box.addAuthBox({'mode':'login', 'doCaptcha':false})
+
+        // inserted html elements can now be identified by uauth:
+        //   - cf. uauth.uidInput
+        //   - cf. uauth.email and uauth.emailLbl
+
+    }
+    // /login box ----------------------------------------------------------
+
+
+
+
+
     cC.uauth.email    = document.getElementById('email')
+    cC.uauth.uidInput = document.getElementById('doors_uid')
     cC.uauth.emailLbl = document.querySelector('label[for=email]')
 
     // str of the form: doors_hostname:doors_port
@@ -47,6 +224,7 @@ cmxClt = (function(cC) {
 
     // captcha init
     if (cC.uauth.captcha) {
+        console.log('initializing captcha')
         $(cmxClt.uauth.captcha).realperson({length: cC.uauth.realCaptchaLength})
     }
 

templates/alt_index.html

@@ -600,11 +600,6 @@
         var uinfo = {{ (current_user.json_info | safe) if current_user.info else ("null" | safe) }};
     </script>
 
-    <!--  our js  -->
-    <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
-
-
-
 
       <!-- for #mini-explorer -->
 <!--

templates/base_layout.html

@@ -58,6 +58,11 @@
 <body>
   {% block incipit %}
   {% endblock %}
+
+  <!-- needed if login -->
+  <input id="doors_connect" name="doors_connect" type="text" hidden
+         value="{{ doors_connect|safe }}">
+
   <div class="topbar" style="opacity: 0.9;">
       <div class="topbar-inner">
           <div class="container-fluid">
@@ -153,7 +158,7 @@
                           <a href="/services/user/register"> Register </a>
                       </li>
                       <li>
-                          <a href="/services/user/login"> Login </a>
+                          <div onclick="cmxClt.uauth.box.toggleAuthBox()"> Login </div>
                       </li>
                       {% endif %}
                   </ul>
@@ -210,7 +215,21 @@
 
 
   <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-native-1.1.min.js') }}"></script>
-  <!--  for our js: end-of-page javascript imports -->
+
+  <!--  our js for auth and login: to be able to login via popup anywhere -->
+  <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/comex_user_shared_auth.js') }}"></script>
+  <script>
+      cmxClt.uauth.box.addAuthBox({'mode':'login', 'doCaptcha':false})
+      console.info("ok")
+
+      // inserted html elements can now be identified by uauth:
+      //   - cf. uauth.uidInput
+      //   - cf. uauth.email and uauth.emailLbl
+  </script>
+  <script src="{{ url_for('static', filename='js/comex_page_login_controllers.js') }}"></script>
+
+  <!--  for our other js: end-of-page javascript imports -->
   {% block last_imports %}
   {% endblock %}
 

templates/login.html

@@ -122,7 +122,5 @@
 
 {% block last_imports %}
     <!--  our js  -->
-    <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/comex_user_shared_auth.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_page_login_controllers.js') }}"></script>
 {% endblock %}

templates/profile.html

@@ -649,7 +649,6 @@
     </script>
 
     <!--  our js  -->
-    <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_page_profile_controllers.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_user_autocompletes.js') }}"></script>
 {% endblock %}

templates/registration_full_form.html

@@ -73,7 +73,7 @@
                      <!-- <h3 class="formcat"> Login infos </h3> -->
 
                      <div class="question">
-                       <!-- TODO separate modal -->
+                       <!-- POSS login within modal like comex_test_modal -->
                        <p class="legend">Your email will also be your login for the ISC services. </p>
                        <div class="input-group">
                          <!-- email validation onblur/onchange is done by cmxClt.uauth in comex_user_shared_auth.js -->
@@ -549,9 +549,11 @@
             <!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
             <div class="question input-group">
                 <label for="my-captcha" class="smlabel input-group-addon">Code</label>
-                <input id="my-captcha" name="my-captcha" style="max-width:60%"
-                       type="text" class="form-control input-lg" placeholder="Enter the 5 letters beside =>"
-                       onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
+                <div>
+                    <input id="my-captcha" name="my-captcha" style="max-width:60%"
+                           type="text" class="form-control input-lg" placeholder="Enter the 5 letters beside =>"
+                           onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
+                </div>
                 <p class="legend legend-float">(A challenge for spam bots)</p>
             </div>
 
@@ -598,8 +600,6 @@
 
 {% block last_imports %}
     <!--  our js  -->
-    <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/comex_user_shared_auth.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_page_reg_controllers.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_user_autocompletes.js') }}"></script>
 {% endblock %}

templates/registration_short_form.html

@@ -71,7 +71,7 @@
                      <!-- <h3 class="formcat"> Login infos </h3> -->
 
                      <div class="question">
-                       <!-- TODO separate modal -->
+                       <!-- POSS login within modal like comex_test_modal -->
                        <p class="legend">Your email will also be your login for the ISC services. </p>
                        <div class="input-group">
                          <!-- email validation onblur/onchange is done by cmxClt.uauth in comex_user_shared_auth.js -->
@@ -356,9 +356,11 @@
             <!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
             <div class="question input-group">
                 <label for="my-captcha" class="smlabel input-group-addon">Code</label>
-                <input id="my-captcha" name="my-captcha" style="max-width:60%"
-                       type="text" class="form-control input-lg" placeholder="Enter the 5 letters beside =>"
-                       onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
+                <div>
+                    <input id="my-captcha" name="my-captcha" style="max-width:60%"
+                           type="text" class="form-control input-lg" placeholder="Enter the 5 letters beside =>"
+                           onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
+                </div>
                 <p class="legend legend-float">(A challenge for spam bots)</p>
             </div>
 
@@ -405,8 +407,6 @@
 
 {% block last_imports %}
     <!--  our js  -->
-    <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/comex_user_shared_auth.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_page_reg_controllers.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_user_autocompletes.js') }}"></script>
 {% endblock %}