You have been redirected from an outdated version of the article. Below is the content available on this topic. To view the old article click here.

input

The input keyword returns the current object (of the Virtual Type) when used in a VirtualProperty context (see the outputFunction of VirtualProperty 4 in that example).

Note: This keyword is only available in a virtual type context.

Search results for "input"

input

The input keyword returns the current object (of the Virtual Type) when used in a VirtualProperty context.

Example Implementation

// get all required elements
const loginForm     = document.getElementById('login-form');
const emailInput    = document.getElementById('email');
const passwordInput = document.getElementById('password');
const loginButton   = document.getElementById('login-button');
   
loginForm.addEventListener('submit', async (event) => {

   event.preventDefault();

   loginButton.disabled = true;
   
   // get from values
   const email    = emailInput.value;
   const password = passwordInput.value;
   
   // login
   const response = await fetch('/structr/rest/login', {
      method: 'POST',
      body: JSON.stringify({
         eMail: email,
         password: password
      })
   });

   if (response.status === 202) {

      let redirectUrl      = response.headers.get('twoFactorLoginPage')
            + '?token=' + response.headers.get('token')
            + '&qrdata=' + (response.headers.get('qrdata') ?? '');

      window.location.href = redirectUrl;

   } else {
      
      if (response.ok) {
         
         loginButton.textContent = 'Login successful';
         window.location.href    = '/';

      } else {
         
         loginButton.disabled    = false;
         loginButton.textContent = 'Wrong username or password.';

         window.setTimeout(function() {
            loginButton.value    = 'Login';
            loginButton.disabled = false;
         }, 2000);
      }
   }
});
<div id="qrimage-wrapper">
   <img id="qrimage" style="margin-left: calc(50% - 100px);">
   <div>To use two factor authentication, scan this QR code with an authenticator app on your smartphone.</div>

   <div class="text-sm mt-6">
      <div>
         <b>Android: </b>
         <a class="cursor-pointer hover:text-blue-400 text-blue-700" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US">Google Authenticator</a> on Google Playstore
      </div>
      <div>
         <b>Apple iOS: </b>
         <a class="cursor-pointer hover:text-blue-400 text-blue-700" href="https://apps.apple.com/us/app/google-authenticator/id388497605">Google Authenticator</a> on App Store
      </div>
   </div>
</div>

<form action="#" id="twoFactorForm">
   <input id="twoFactorToken" type="hidden" value="${request.token}">
   <div class="my-6">
      <label class="block text-sm font-medium leading-5 text-gray-700">Two Factor Code</label>
      <input id="twoFactorCode" class="appearance-none block w-full px-3 py-2 bg-blue-100 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
   </div>
   <button type="submit" id="login-button" class="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-indigo active:bg-blue-700 transition duration-150 ease-in-out">Login</button>
</form>

<script>
   document.addEventListener('DOMContentLoaded', () => {

      // get all required elements
      const qrimageWrapper = document.getElementById('qrimage-wrapper');
      const token          = document.getElementById('twoFactorToken').value;
      const codeInput      = document.getElementById('twoFactorCode').value;
      const loginButton    = document.getElementById('login-button');

      let qrdata = (new URLSearchParams(location.search)).get('qrdata');

      if (!qrdata) {
         // remove qr code placeholder if user is not shown qr code
         qrimageWrapper.remove();
      } else {
         // transform url-safe qr code to regular base64 to display as image
         qrimageWrapper.querySelector('#qrimage').src = 'data:image/png;base64, ' + qrdata.replaceAll('_', '/').replaceAll('-', '+');
      }

      document.getElementById('twoFactorForm').addEventListener('submit', async (event) => {

         event.preventDefault();

         loginButton.disabled = true;

         const response = await fetch('/structr/rest/login', {
            method: 'POST',
            body: JSON.stringify({
               twoFactorToken: token,
               twoFactorCode: codeInput
            })
         });
         
         if (response.ok) {
            
            loginButton.textContent = 'Login successful';
            window.location.href    = '/';

         } else {

            let buttonText = 'Login failed - is device time correct?';
            
            let reason = response.headers.get('reason');
            
            if (reason === 'wrongTwoFactorCode') {
               buttonText = 'Two Factor Code is not correct';
            }

            loginButton.disabled    = false;
            loginButton.textContent = buttonText;

            window.setTimeout(function() {
               loginButton.textContent = 'Login';
               loginButton.disabled    = false;
            }, 2000);
         }
      });
   });
</script>

Search Bar

Upon user input the Search Bar retrieves relevant Types, Methods and Properties. When the search has concluded the Overview will transform into a search result display, which will be displayed until the search is cleared using the button on the right hand side of the search input field. Additionally there are forward and backward navigation buttons on each side of the input field, which are used to traverse the navigation history.

Graph-based permission resolution

Properties in the Hidden Properties input field are removed from the JSON output of an entity accessed over a permission resolution path. If you for example want to remove the properties price and value from the JSON output of the Product entity in the above example, the hidden properties input field should contain:

Creating Flows

The first step is to navigate to the Flows page. Hover over the hamburger menu item in the Structr navigation bar and select Flows. Once the editor is loaded, you can either select an existing flow to edit or create a new one. For the sake of this introduction, we will create a new one. To create a new flow, enter a name of your choice in the input field and click the Add button.

Return

The Return element allows a flow to return results. By default the element will return the data provided by the data input relationship. Supplying a custom script allows the transformation or post-processing of the data before returning it.

ParameterInput

The ParameterInput element is used to supply a Call element with parameters.

Page Title

This pattern makes sure that the page’s title is automatically displayed correctly when changing the page’s name. To do so, click on “Basic” or “Advanced” and set the name to “overview” (this page will later be the overview page for projects and tasks). To save the name, we click anywhere outside of the input field. The text field should flash green when the data was successfully updated in the database. The page’s title should now be shown as “Overview”.

Dynamic Content / Repeater

Note that the content of the function query is not enclosed in curly braces ${ and } because it’s a so-called auto-script environment where any input is always interpreted as script content because anything else wouldn’t make any sense.

Call

Name Description
Prev Accepts another element’s Next socket
Next Connects to another element’s Prev socket
Parameters Accepts multiple ParameterInput element connections
DataTarget Connects to another element’s DataSource
Flow Allows the selection of a Flow to call with this element

Views

In the View detail section the selected View can be renamed and it’s referenced Properties can be changed by clicking into the input area and selecting additional properties from the dropdown menu. Removable properties will have a small “x” button next to their name, which allows their removal.

The exception to this are the properties contained in default views, which cannot be removed.

Edit Mode Binding

The Edit Mode Binding Dialog allows you to configure settings for a client-side JavaScript library that you can use in your Structr application to make your application interactive. It reacts to certain data- attributes on HTML elements and activates editing functionality based on the values by replacing the HTML element with an appropriate input element.

Create Nodes

If you select Create node, you will see a select box with a list of target types to choose from. The importer will create a new node of the selected type whenever it encounters a matching XML element in the input document. If the XML element has attributes, you can assign a target attribute from the selected type, like originId for the CustomerID attribute.

The table itself features inline-editing for each cell of the table with property type-awareness which means that if a propery is for example defined as an Enum property, the inline-editing tool will show a select input element with the defined Enum values.