customform.pug

//- Copyright (c) Microsoft Corporation
//- All rights reserved.
//-
//- MIT License:
//- Permission is hereby granted, free of charge, to any person obtaining
//- a copy of this software and associated documentation files (the
//- "Software"), to deal in the Software without restriction, including
//- without limitation the rights to use, copy, modify, merge, publish,
//- distribute, sublicense, and/or sell copies of the Software, and to
//- permit persons to whom the Software is furnished to do so, subject to
//- the following conditions:
//-
//- The above copyright notice and this permission notice shall be
//- included in all copies or substantial portions of the Software.
//-
//- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
//- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
//- MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
//- NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
//- LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
//- OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
//- WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//-
//-

doctype html
html(lang='en')
  head
    style.
      body {
        margin: 0;
        padding-left: 4px;
        padding-right: 4px;
      }
    title Microsoft Teams Task Module Tester - Custom Form
    link(rel='stylesheet', type='text/css', href='/styles/msteams-16.css')
    link(rel='stylesheet', type='text/css', href='/styles/custom.css')
    script(src="https://unpkg.com/@microsoft/teams-js@1.3.7/dist/MicrosoftTeams.min.js" integrity="sha384-glExfvkpce98dO2oN+diZ/Luv/5qrZJiOvWCeR8ng/ZxlhpvBgHKeVFRURrh+NEC" crossorigin="anonymous")
  body(class='theme-light')
    script.
      microsoftTeams.initialize();

      //- Handle the Esc key
      document.onkeyup = function(event) {
        if ((event.key === 27) || (event.key === "Escape")) {
          microsoftTeams.tasks.submitTask(null); //- this will return an err object to the completionHandler() 
        }
      }

      //- Retrieve the current Teams theme and set it
      let currentTheme = "";
      let queryParameters = getQueryParameters();
      if (queryParameters["theme"] === undefined) {
        //- Try getting it from microsoftTeams.GetContext() - this will happen after render time and will flash briefly
        microsoftTeams.getContext(function(context) {
            if (context && context.theme) {
                setTheme(context.theme);
            }
        });
      }
      else {
        setTheme(queryParameters["theme"]);
      }

      function validateForm() {
        let customerInfo = {
          name: document.forms["customerForm"]["name"].value,
          email: document.forms["customerForm"]["email"].value,
          favoriteBook: document.forms["customerForm"]["favoriteBook"].value
        }
        guidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
        let password = document.getElementById("pw").value;
        if (guidRegex.test(password)) {
          microsoftTeams.tasks.submitTask(customerInfo, password); // hidden feature to test bogus completion appId
        }
        else {
          microsoftTeams.tasks.submitTask(customerInfo, "#{appId}"); //- appId is passed at render time in tabs.ts
        }
        return true;
      }

      //- Parse query parameters into key-value pairs
      function getQueryParameters() {
          let queryParams = {};
          location.search.substr(1).split("&").forEach(function(item) {
              let s = item.split("="),
              k = s[0],
              v = s[1] && decodeURIComponent(s[1]);
              queryParams[k] = v;
          });
          return queryParams;
      }

      //- Set the desired theme
      function setTheme(theme) {
        if (theme) {
            //- Possible values for theme: 'default', 'light', 'dark' and 'contrast'
            document.body.className = 'theme-' + (theme === 'default' ? 'light' : theme);
        }
      }
    div(class='surface')
      div(class='panel')
        div(class='font-semibold font-title') Enter new customer information:
        form(method='POST' id="customerForm" action='/register' onSubmit="return validateForm()")
          div
            div.form-group(class="form-field-input" style="margin-bottom: 10px; margin-top: 10px")
            label(for='name') Name: 
            input#name.form-control.input-field(type='text', placeholder='first and last' name='name' tabindex=1 autofocus)
            div.form-group(class="form-field-input" style="margin-bottom: 10px;")
            label(for='email') Email: 
            input#email.form-control.input-field(type='email', placeholder='name@email.com' name='email' tabindex=2)
            div.form-group(class="form-field-input" style="margin-bottom: 10px;")
            label(for='favoriteBook') Favorite book: 
            input#favoriteBook.form-control.input-field(type='text', placeholder='title of book' name='favoriteBook' tabindex=3)
            div.form-group(class="form-field-input" style="margin-bottom: 10px;")
            label(for='pw') Password: 
            input#pw.form-control.input-field(type='password' name='password' tabindex=4)
            div.form-group(class="form-field-input" style="margin-bottom: 10px;")
            label(for='pw2') Confirm password: 
            input#pw2.form-control.input-field(type='password' name='confirmPassword' style="margin-bottom: 10px;" tabindex=4)
            button.btn.button-primary(type='submit' tabindex=5) Sign up