git.basschouten.com Git - openhab-addons.git/blob

   1 <!DOCTYPE html>
   2 <html lang="en">
   3
   4 <head>
   5     <meta charset="utf-8">
   6     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
   8     <title>openHAB - Miele Cloud Binding Configuration - Pairing</title>
   9     <link rel="shortcut icon" type="image/x-icon" href="/mielecloud/assets/img/favicon.ico">
  10
  11     <link rel="stylesheet" href="/mielecloud/assets/css/main.css">
  12     <link rel="stylesheet" href="/mielecloud/assets/css/rtl.css">
  13 </head>
  14
  15 <body>
  16     <div class="container">
  17         <div class="logo-container">
  18             <img src="/mielecloud/assets/img/OpenHAB_logo.svg" width="330" />
  19
  20             <img src="/mielecloud/assets/img/miele.png" width="190" />
  21         </div>
  22
  23
  24         <h2>Cloud Binding Configuration</h2>
  25
  26         <ul class="statusbar">
  27             <li>Overview</li>
  28             <li class="active">Pairing</li>
  29             <li>Status</li>
  30         </ul>
  31         <main role="main">
  32             <section class="mt-4 mb-5">
  33                 <div id="pair-body">
  34                     <p>
  35                         Go to <a href="https://www.miele.com/f/com/en/register_api.aspx">the Miele developer portal</a> to obtain your
  36                         client ID and client secret.
  37                     </p>
  38
  39                     <!-- ERROR MESSAGE -->
  40
  41                     <form action="/mielecloud/forwardToLogin">
  42                         <div class="form-group">
  43                             <label for="clientId">Client ID:</label>
  44                             <input type="text" class="form-control" id="clientId" name="clientId" placeholder="Enter your client ID" value="<!-- CLIENT ID -->" required />
  45                         </div>
  46                         <div class="form-group">
  47                             <label for="clientSecret">Client Secret:</label>
  48                             <input type="text" class="form-control" id="clientSecret" name="clientSecret" placeholder="Enter your client secret" value="<!-- CLIENT SECRET -->" required />
  49                         </div>
  50                         <div class="form-group">
  51                             <label for="bridgeId">Bridge ID:</label>
  52                             <input type="text" class="form-control" id="bridgeId" name="bridgeId" placeholder="Enter the bridge ID to use for pairing" required pattern="[A-Za-z0-9_-]*" />
  53                         </div>
  54                         <div class="form-group">
  55                             <label for="email">E-mail address:</label>
  56                             <input type="text" class="form-control" id="email" name="email" placeholder="Enter the e-mail address associated with you Miele Cloud Account" required pattern="[a-z0-9._%+-]{3,}@[a-z]{3,}([.]{1}[a-z]{2,}|[.]{1}[a-z]{2,}[.]{1}[a-z]{2,})" />
  57                         </div>
  58                         <button type="submit" class="btn btn-danger btn-lg">Pair Account</button>
  59                     </form>
  60                 </div>
  61             </section>
  62
  63         </main>
  64         <script src="/mielecloud/assets/js/main.js"></script>
  65     </div>
  66 </body>
  67
  68 </html>