{% extends "base.html" %}
{% block title %}Secret Fields Test{% endblock %}
{% block content %}
<h1>Secret Fields Test</h1>

<!-- The primary redaction signal: the page declares the field a password itself. -->
<div class="section">
  <h2>Sign in</h2>
  <label for="account-password">Password</label>
  <input type="password" id="account-password" name="password">
</div>

<!-- The secondary signal, in French, on a field whose type says nothing. -->
<div class="section">
  <h2>Inscription</h2>
  <label for="fr-secret">Mot de passe</label>
  <input type="text" id="fr-secret" name="motdepasse">
</div>

<!-- A secret whose only signal sits PAST the 80-character name cap: the label runs 85
     characters before it says "passe", and the form name says nothing. Capping the names
     before testing them made this field read as an ordinary text box. -->
<div class="section">
  <h2>Confirmation</h2>
  <label for="confirm-account">Pour valider la création de votre compte, veuillez confirmer ci-dessous votre mot de passe</label>
  <input type="text" id="confirm-account" name="confirmation">
</div>

<!-- A password field the page hides behind the label that stands for it, which is how a
     styled control is built. The uid lands on the <label>, and the value part is then
     rendered by describeControl rather than by the input's own arm. -->
<div class="section">
  <h2>Reset</h2>
  <label id="wrapped-password">New password
    <input type="password" name="new_password"
           style="position:absolute;width:1px;height:1px;opacity:0">
  </label>
</div>

<!-- A secret named by the source that LOSES the race to be the field's label: the bound
     <label> answers "Security code" and the form name is the only part saying "cvc". -->
<div class="section">
  <h2>Payment</h2>
  <label for="cvc">Security code</label>
  <input type="text" id="cvc" name="cvc">
</div>

<!-- Two fields a fill CANNOT satisfy, on a section every name of which says "token": the
     <select> refuses anything that is not one of its options, the checkbox refuses
     anything that is not a state, and both used to quote the refused text back into the
     error the record keeps unredacted. -->
<div class="section">
  <h2>API access</h2>
  <label for="token-scope">Scope</label>
  <select id="token-scope" name="token">
    <option value="read">Read only</option>
    <option value="write">Read and write</option>
  </select>
  <label for="token-remember">Remember this token</label>
  <input type="checkbox" id="token-remember" name="remember">
</div>

<!-- Three fields that must keep their values: they are the substance of a recipe, "code"
     is deliberately absent from the secret word list, and "PIN Code" is the Indian
     postal code, which is why bare "pin" is absent from it too. -->
<div class="section">
  <h2>Order</h2>
  <label for="promo">Code promo</label>
  <input type="text" id="promo" name="promo">
  <label for="query">Search</label>
  <input type="search" id="query" name="q">
  <label for="postcode">PIN Code</label>
  <input type="text" id="postcode" name="pincode">
</div>
{% endblock %}