Knotx / knotx

Knot.x is a highly-efficient and scalable integration framework designed to build backend APIs
https://knotx.io
Apache License 2.0
126 stars 26 forks source link

Implement Templating Engine redirects mechanism #79

Closed malaskowski closed 8 years ago

malaskowski commented 8 years ago

Redirects mechanism should read its configuration form <knotx:router> tags. User will be redirected to the page that is pointed by the first <knotx:router> tag spotted on page after Handlebars processing. The priority of redirects is defined inside <knotx:router> tag - from the most important to the least. In following example:

 <script data-api-type="templating"
    type="text/x-handlebars-template"
    data-uri-post-formA="/service/mock/step1.json"
    data-uri-all-labelsRepository="/service/mock/labelsRepository.json"
    data-id="step1">
  <knotx:router>
    {
      _default._response.statusCode: {
        "5*": "/error" //when any _response (formA or labelsRepository in this case) status code would be 5XX, Knot.x will redirect user to '/error' page
      },
      formA.success: {
        true: "/step2"  //when formA responses with `success: true`, Knot.x will redirect user to `/step2` page
        //false: validation failed - we stay where we are
      }
    }
  </knotx:router>  
  <div id="login-form-wrapper">
    <h1>{{labelsRepository.loginHello}}</h1>
    {{#if formA && !formA.success}}
      <p>{{labelsRepository.validationError}}</p>
    {{/if}}
    <form method="post" class="form-inline" id="formA">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" value="{{_request.email}}"/>
        <label for="birthDate">Date of birth</label>
        <input type="text" name="birthDate" id="birthDate" value="{{_request.birthDate}}"/>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
      <input type="hidden" name="_id" value="step1"/>
    </form>
  </div>
</script>

If formA service response with success: true but labelsRepository response status Code would be 503 user should be redirected to /error page.

Provide an example usage of this mechanics in knotx-example, e.g. 2-level form:

     <script data-api-type="templating"
      type="text/x-handlebars-template"
      data-uri-post-formB="/service/mock/step2.json"
      data-uri-all-labelsRepository="/service/mock/labelsRepository.json"
      data-id="step2">
    <knotx:router>
      {
        _default._response.statusCode: {
          "5*": "/error"
        }
        formB: {
          success: {
            true: "/landingPage"
            //false: validation failed - we stay where we are
          }
          _response.statusCode: {
            403: "/step1" // go back 
          }
        }
      }
    </knotx:router>  
    <div id="login-form-wrapper">
      <h1>{{labelsRepository.passwordInfo}}</h1>
      {{#if formB && !formB.success}}
        <p>{{labelsRepository.validationError}}</p>
      {{/if}}
      <form method="post" class="form-inline" id="formA">
        <div class="form-group">
          <label for="email">Password</label>
          <input type="password" name="password" id="password"/>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
        <input type="hidden" name="_id" value="step2"/>
      </form>
    </div>
  </script>
marcinczeczko commented 8 years ago

Closing as we will go towards different approach