Merge pull request #268 from harena-lab/development

Improvements: login feedback

src/adonisjs/public/author/partials/harena-version.html

@@ -0,0 +1,2 @@
+<div id="version-footnote" class="fixed-bottom" style="text-align:center">
+</div>

src/adonisjs/public/author/partials/header.html

@@ -11,16 +11,22 @@
             <button id="loginDropdownBtn" class="btn btn-light shadow text-primary pl-4 pt-1 dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Login
             </button>
-            <form class="dropdown-menu p-4 mr-5">
+            <form class="needs-validation dropdown-menu p-4 mr-5" novalidate>
               <div class="form-group">
                 <label for="email">Email address</label>
-                <input type="email" class="form-control" id="email" name="email" placeholder="email@example.com">
+                <input type="email" class="form-control" id="email" name="email" placeholder="email@example.com" required>
+                <div class="invalid-feedback">
+                  Please type a valid email.
+                </div>
               </div>
               <div class="form-group">
                 <label for="password">Password</label>
-                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
+                <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
+              </div>
+              <!-- <button class="btn btn-outline-primary" id="btn-login">Submit form</button> -->
+              <dcc-submit id="btn-submit-login" bind="submit-login" label="Login" xstyle="btn btn-outline-primary" connect="harena-login:service/request/post:submit"></dcc-submit>
+              <div id="login-message-alert" class="alert mt-3" role="alert">
               </div>
-              <dcc-submit bind="submit-login" label="Login" xstyle="btn btn-outline-primary" connect="harena-login:service/request/post:submit">
             </form>
           <!-- </div> -->
         </div>

src/adonisjs/public/author/partials/template-min.html

@@ -19,6 +19,7 @@
   <script src="../infra/basic.js"></script>
   <script src="../infra/dcc-common-server-proxy.js"></script>
   <script src="../infra/dcc-common-server-address.js"></script>
+  <script src="/infra/simple-page-tasks.js"></script>
   <script src="../infra/token-validator.js"></script>
 
   <script src="../dccs/dcc.js"></script>

src/adonisjs/public/dccs/components/data/dcc-submit.js

@@ -5,16 +5,10 @@
 class DCCSubmit extends DCCButton {
   async connectTo (id, topic, role) {
     super.connectTo(id, topic, role)
-    // console.log('=== submit connect')
-    // console.log(id)
-    // console.log(topic)
-    // console.log(role)
     if (role == 'schema') {
       const result = await this.request(role, null, id)
       if (result != null && result[id] != null)
         this._schema = result[id]
-      // console.log('=== requested schema')
-      // console.log(this._schema)
     }
   }
 
@@ -27,36 +21,40 @@ class DCCSubmit extends DCCButton {
           ? 'var/' + this.varible + '/changed'
           : 'button/' + this.label + '/clicked'
       if (this.hasAttribute('message')) { message.value = this.message }
+      let form = null
       if (this._schema != null) {
         const schema = Object.keys(this._schema)
-        // console.log('=== form schema')
-        // console.log(schema)
         for (let s of schema) {
           let field = document.querySelector('#' + s)
           if (field != null)
             message[s] = field.value
         }
       } else {
-        let form = this.parentNode
+        form = this.parentNode
         while (form != null && form.nodeName.toLowerCase() != 'form')
           form = form.parentNode
         message.value = {}
         if (form != null)
           for (let f of form)
             message.value[f.id] = f.value
       }
-      // console.log('=== form')
-      // console.log(topic)
-      // console.log(message)
-      // console.log(this._connections)
-      if (this._connections != null) {
-        const response = await this.multiRequest('submit', message)
-        if (this._setup != null && this._setup.pos != null)
-          this._setup.pos(response)
-      } else
-        MessageBus.ext.publish(topic, message)
+      if (this._checkPre(message, form)) {
+          if (this._connections != null) {
+          const response = await this.multiRequest('submit', message)
+          if (this._setup != null && this._setup.pos != null)
+            this._setup.pos(response)
+        } else
+          MessageBus.ext.publish(topic, message)
+      }
     }
   }
+
+  _checkPre(message, form) {
+    let result = true
+    if (this._setup != null && this._setup.pre != null)
+      result = this._setup.pre(message, form, this._schema)
+    return result
+  }
 }
 
 (function () {

src/adonisjs/public/dccs/components/dcc-button.js

@@ -138,7 +138,7 @@ class DCCButton extends DCCBlock {
   }
 
   _computeTrigger () {
-    if (this._active) {
+    if (this._active && this._checkPre()) {
       const message = { sourceType: DCCButton.elementTag }
       if (this.hasAttribute('variable')) {
         const v = (this.variable.includes(':'))
@@ -156,6 +156,13 @@ class DCCButton extends DCCBlock {
     }
   }
 
+  _checkPre() {
+    let result = true
+    if (this._setup != null && this._setup.pre != null)
+      result = this._setup.pre()
+    return result
+  }
+
   navigationBlocked () {
     this._active = true
   }

src/adonisjs/public/dccs/playground/js/submit-components.js

@@ -4,6 +4,13 @@ DCC.component(
   'submit-login',
   'dcc-submit',
   {
+    pre: function (message, form, schema) {
+      let check = true
+      if (message.value.email.length == 0)
+        check = false
+      console.log('Campo vazio')
+      return check
+    },
     pos: function(response) {
       console.log('=== after processing')
       console.log(response)

src/adonisjs/public/index.html

@@ -1,109 +1,109 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <!-- meta tags -->
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-  <link rel="stylesheet" href="author/css/author.css">
-
-  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-
-  <script src="./lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
-  <script src="./lib/popper-1-15-0/popper.min.js"></script>
-  <script src="./lib/bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
-
-  <script src="config/config.js"></script>
-  <script src="infra/bus.js"></script>
-  <script src="infra/basic.js"></script>
-  <script src="infra/dcc-common-server-proxy.js"></script>
-  <script src="infra/dcc-common-server-address.js"></script>
-  <script src="infra/token-validator.js"></script>
-
-  <script src="dccs/dcc.js"></script>
-  <script src="dccs/components/dcc-base.js "></script>
-  <script src="dccs/components/dcc-visual.js "></script>
-  <script src="dccs/components/dcc-block.js"></script>
-  <script src="dccs/components/dcc-button.js"></script>
-  <script src="dccs/components/dcc-notice-input.js"></script>
-
-  <script src="dccs/components/web/dcc-rest.js"></script>
-  <script src="dccs/components/web/dcc-include.js"></script>
-  <script src="dccs/components/web/dcc-dhtml.js"></script>
-
-  <script src="dccs/components/data/dcc-submit.js"></script>
-  <script src="dccs/components/data/dcc-model.js"></script>
-  <script src="dccs/components/data/dcc-record.js"></script>
-
-  <script src="dccs/subscribe-dcc.js"></script>
-  <script src="dccs/trigger-dcc.js"></script>
-  <script src="dccs/property-dcc.js"></script>
-  <script src="dccs/connect-dcc.js"></script>
-
-  <script src="infra/dcc-rest-proxy.js"></script>
-  <script src="infra/dcc-basic.js"></script>
-
-
-  <link rel="stylesheet" href="lib/fontawesome-5-10-1/css/all.min.css">
-  <link rel="stylesheet" href="lib/bootstrap-4.4.1/css/bootstrap.min.css">
-
-  <link rel="stylesheet" href="dccs/css/dccs.css">
-  <link rel="stylesheet" href="dccs/css/properties.css">
-  <link rel="stylesheet" href="infra/css/common-player.css">
-  <link rel="stylesheet" href="infra/css/common-author.css">
-
-  <script src="author/js/dcc-author-server-proxy.js"></script>
-
-  <script src="author/js/create.js"></script>
-  <script src="author/js/template-case.js"></script>
-  <script src="author/js/draft.js"></script>
-  <!-- Reference CSS -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-  <link rel="stylesheet" href="start/css/main.css"/>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"/>
-
-  <!-- Favicon -->
-  <link rel="shortcut icon" href="#">
-
-  <title>Phil Muchbetter Game</title>
-
-</head>
-
-<body onload="TokenController.instance.checkToken()">
-  <!-- Login/logout header -->
-  <dcc-include src="/author/partials/header.html"></dcc-include>
-  <div class="d-flex vh-100 vw-100" style="background-color: rgb(245,245,245);">
-    <div class="d-flex w-100 mx-5 home-image-margin" style="">
-
-      <div class="d-flex ml-auto flex-column align-items-center justify-content-center align-items-center">
-        <div class="d-flex flex-column">
-          <h1 class="home-header-text"> Jacinto Bemelhor: a clinical reasoning game</h1>
-          <p class="home-p-text">Join us in this adventure of becoming a doctor</p>
-          <div class="container-fluid">
-            <div class="row">
-              <div class="col-4 lets-play rounded-pill" onclick="location.href='/author/home'">Author</div>
-              <div class="col-4 ml-4 lets-play rounded-pill" onclick="location.href='/player/home?clearance=1&published=1'">Player</div>
+  <head>
+    <!-- meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <link rel="stylesheet" href="author/css/author.css">
+
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+
+    <script src="./lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
+    <script src="./lib/popper-1-15-0/popper.min.js"></script>
+    <script src="./lib/bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
+
+    <script src="config/config.js"></script>
+    <script src="infra/bus.js"></script>
+    <script src="infra/basic.js"></script>
+    <script src="infra/dcc-common-server-proxy.js"></script>
+    <script src="infra/dcc-common-server-address.js"></script>
+    <script src="/infra/simple-page-tasks.js"></script>
+    <script src="infra/token-validator.js"></script>
+
+    <script src="dccs/dcc.js"></script>
+    <script src="dccs/components/dcc-base.js "></script>
+    <script src="dccs/components/dcc-visual.js "></script>
+    <script src="dccs/components/dcc-block.js"></script>
+    <script src="dccs/components/dcc-button.js"></script>
+    <script src="dccs/components/dcc-notice-input.js"></script>
+
+    <script src="dccs/components/web/dcc-rest.js"></script>
+    <script src="dccs/components/web/dcc-include.js"></script>
+    <script src="dccs/components/web/dcc-dhtml.js"></script>
+
+    <script src="dccs/components/data/dcc-submit.js"></script>
+    <script src="dccs/components/data/dcc-model.js"></script>
+    <script src="dccs/components/data/dcc-record.js"></script>
+
+    <script src="dccs/subscribe-dcc.js"></script>
+    <script src="dccs/trigger-dcc.js"></script>
+    <script src="dccs/property-dcc.js"></script>
+    <script src="dccs/connect-dcc.js"></script>
+
+    <script src="infra/dcc-rest-proxy.js"></script>
+    <script src="infra/dcc-basic.js"></script>
+
+
+    <link rel="stylesheet" href="lib/fontawesome-5-10-1/css/all.min.css">
+    <link rel="stylesheet" href="lib/bootstrap-4.4.1/css/bootstrap.min.css">
+
+    <link rel="stylesheet" href="dccs/css/dccs.css">
+    <link rel="stylesheet" href="dccs/css/properties.css">
+    <link rel="stylesheet" href="infra/css/common-player.css">
+    <link rel="stylesheet" href="infra/css/common-author.css">
+
+    <script src="author/js/dcc-author-server-proxy.js"></script>
+
+    <script src="author/js/create.js"></script>
+    <script src="author/js/template-case.js"></script>
+    <script src="author/js/draft.js"></script>
+    <!-- Reference CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="start/css/main.css"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"/>
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="#">
+
+    <title>Phil Muchbetter Game</title>
+
+  </head>
+
+  <body onload="TokenController.instance.checkToken()">
+    <!-- Login/logout header -->
+    <dcc-include src="/author/partials/header.html"></dcc-include>
+      <main>
+        <div class="d-flex vh-100 vw-100" style="background-color: rgb(245,245,245);">
+          <div class="d-flex w-100 mx-5 home-image-margin" style="">
+
+            <div class="d-flex ml-auto flex-column align-items-center justify-content-center align-items-center">
+              <div class="d-flex flex-column">
+                <h1 class="home-header-text"> Jacinto Bemelhor: a clinical reasoning game</h1>
+                <p class="home-p-text">Join us in this adventure of becoming a doctor</p>
+                <div class="container-fluid">
+                  <div class="row">
+                    <div class="col-4 lets-play rounded-pill" onclick="location.href='/author/home'">Author</div>
+                    <div class="col-4 ml-4 lets-play rounded-pill" onclick="location.href='/player/home?clearance=1&published=1'">Player</div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+            <div class="d-flex ml-auto w-50 flex-column align-items-center justify-content-center"
+              style="background: url('start/img/background_home.jpeg');">
+              <div>
+                <img src="start/img/home_icon.png" alt="" class="h-100 float-right" id="home-image"/>
+              </div>
             </div>
-
           </div>
         </div>
+      </main>
+      <div id="version-footnote" class="fixed-bottom" style="text-align:center">
       </div>
-      <div class="d-flex ml-auto w-50 flex-column align-items-center justify-content-center"
-        style="background: url('start/img/background_home.jpeg');">
-        <div>
-          <img src="start/img/home_icon.png" alt="" class="h-100 float-right" id="home-image"/>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script src="start/js/Js_Anim.js"> </script>
 
-  <div class="fixed-bottom" style="text-align:center">
-    Version Harena - v1.2.0
-  </div>
+  </body>
 
-</body>
 </html>