<!DOCTYPE html>
<!--
 * This file is part of Cockpit.
 *
 * Copyright (C) 2015 Red Hat, Inc.
 *
 * Cockpit is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * Cockpit is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
-->

<html>
<head>
    <title translatable="yes">Local Accounts</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../base1/patternfly.css" type="text/css" rel="stylesheet">
    <link href="users.css" type="text/css" rel="stylesheet">
    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>
    <script src="../*/po.js"></script>
    <script src="users.js"></script>
</head>
<body class="page-ct" hidden>

  <div class="modal" id="error-popup" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="error-popup-title"></h4>
        </div>
        <div class="modal-body">
          <p id="error-popup-message"></p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-dismiss="modal" translate>Close</button>
        </div>
      </div>
    </div>
  </div>

  <div id="accounts" class="container-fluid" hidden>
    <button class="btn btn-default accounts-privileged" id="accounts-create" translatable="yes" data-container="body" data-placement="right">Create New Account</button>
    <div id="accounts-list">
    </div>
  </div>

  <div id="account-failure" class="curtains-ct blank-slate-pf" hidden>
    <div class="blank-slate-pf-icon">
      <i class="fa fa-exclamation-circle"></i>
    </div>
    <h1 translatable="yes">Account not available or cannot be edited.</h1>
    <ol class="breadcrumb">
        <li><a href="#/" translate>Back to Accounts</a></li>
    </ol>
  </div>

  <div id="account" class="container-fluid" hidden>
    <ol class="breadcrumb">
      <li><a translatable="yes">Accounts</a></li>
      <li class="active"></li>
    </ol>

    <div class="panel panel-default" id="account-details">
      <div class="panel-heading">
        <div class="pull-right">
          <button translatable="yes" class="btn btn-default accounts-privileged" id="account-logout">Terminate Session</button>
          <button translatable="yes" class="btn btn-danger accounts-privileged" data-placement="left" id="account-delete">Delete</button>
        </div>
        <span id="account-title"></span>
      </div>
      <div class="panel-body">
        <table class="info-table-ct col-sm-3">
          <tr>
            <td translatable="yes">Full Name</td>
            <td class="accounts-privileged" id="account-real-name-wrapper"><input id="account-real-name" class="form-control" data-container="body"></td>
          </tr>
          <tr>
            <td translatable="yes">User Name</td>
            <td id="account-user-name"></td>
          </tr>
          <tr>
            <td translatable="yes" class="align-top">Roles</td>
            <td id="account-roles">
              <div id="account-change-roles-roles">
              </div>
            </td>
          <tr>
            <td translatable="yes">Last Login</td>
            <td id="account-last-login">
            </td>
          </tr>
          <tr>
            <td translatable="yes">Access</td>
            <td>
              <div class="checkbox accounts-privileged" data-container="body">
                <label>
                  <input type="checkbox" id="account-locked"><span translatable="yes">Lock Account</span>
                </label>
              </div>
            </td>
          </tr>
          <tr>
            <td translatable="yes">Password</td>
            <td>
              <button class="btn btn-default accounts-self-privileged" translatable="yes" id="account-set-password" data-container="body">Set Password</button>
            </td>
          </tr>

        </table>
      </div>
    </div>

    <div class="panel panel-default" id="account-authorized-keys">
      <div class="panel-heading">
        <div class="pull-right">
          <button data-toggle="modal"
                  data-target="#add-authorized-key-dialog"
                  data-original-title="Add Public Key"
                  data-placement="left"
                  class="btn btn-primary accounts-self-privileged fa fa-plus"
                  id="authorized-key-add"
                  title=""
                  type="button">
          </button>
        </div>
        <span translatable="yes">Authorized Public SSH Keys</span>
      </div>
      <div class="list-group" id="account-authorized-keys-list">
      </div>
    </div>
  </div>

  <div class="modal" id="accounts-create-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translatable="yes">Create New Account</h4>
        </div>
        <div class="modal-body">
          <table class="form-table-ct">
            <tr>
              <td><label class="control-label" for="accounts-create-real-name"
                         translatable="yes">Full Name</label></td>
              <td><input class="form-control" type="text"
                         id="accounts-create-real-name" value=""/></td>
            </tr>
            <tr>
              <td><label class="control-label" for="accounts-create-user-name"
                         translatable="yes">User Name</label></td>
              <td><input class="form-control" type="text"
                         id="accounts-create-user-name" value=""/></td>
            </tr>
            <tr>
              <td><label class="control-label" for="accounts-create-pw1"
                         translatable="yes">Password</label></td>
              <td>
                <div class="check-passwords">
                  <input class="form-control" type="password"
                         id="accounts-create-pw1" value=""/>
                </div>
              </td>
            </tr>
            <tr>
              <td class="top">
                <label class="control-label" for="accounts-create-pw2"
                       translatable="yes">Confirm</label>
              </td>
              <td>
                <div class="check-passwords dialog-wrapper">
                  <input class="form-control" type="password"
                         id="accounts-create-pw2" value=""/>
                  <div id="accounts-create-password-meter" class="progress password-strength-meter">
                    <div class="progress-bar"></div>
                    <div class="progress-bar"></div>
                    <div class="progress-bar"></div>
                    <div class="progress-bar"></div>
                  </div>
                  <div>
                    <span id="accounts-create-password-meter-message" class="help-block"></span>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td><label class="control-label" translatable="yes">Access</label></td>
              <td>
                <div>
                  <label>
                    <input type="checkbox" id="accounts-create-locked">
                    <span translatable="yes">Lock Account</span>
                  </label>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" translate>Cancel</button>
          <button class="btn btn-primary" id="accounts-create-create" translate>Create</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="account-set-password-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translatable="yes">Set Password</h4>
        </div>
        <div class="modal-body">
          <table class="form-table-ct">
            <tr>
              <td><label class="control-label" for="account-set-password-old"
                         translatable="yes">Old Password</label></td>
              <td>
                <div class="check-passwords">
                  <input class="form-control" type="password"
                         id="account-set-password-old"/>
                </div>
              </td>
            </tr>
            <tr>
              <td><label class="control-label" for="account-set-password-pw1"
                         translatable="yes">New Password</label></td>
              <td>
                <div class="check-passwords">
                  <input class="form-control" type="password"
                         id="account-set-password-pw1"/>
                </div>
              </td>
            </tr>
            <tr>
              <td class="top">
                <label class="control-label" for="account-set-password-pw2"
                       translatable="yes">Confirm New Password</label>
              </td>
              <td>
                <div class="check-passwords dialog-wrapper">
                  <input class="form-control" type="password"
                         id="account-set-password-pw2" value=""/>
                  <div id="account-set-password-meter" class="progress password-strength-meter">
                    <div class="progress-bar"></div>
                    <div class="progress-bar"></div>
                    <div class="progress-bar"></div>
                    <div class="progress-bar"></div>
                  </div>
                  <div>
                    <span id="account-set-password-meter-message" class="help-block" hidden></span>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" id="account-set-password-apply" translate>Set</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="account-confirm-delete-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="account-confirm-delete-title"></h4>
        </div>
        <div class="modal-body">
          <div class="checkbox">
            <label>
              <input type="checkbox" id="account-confirm-delete-files">
              <span translatable="yes">Delete Files</span>
            </label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate data-dismiss="modal">Cancel</button>
          <button class="btn btn-danger" id="account-confirm-delete-apply" translate>Delete</button>
        </div>
      </div>
    </div>
  </div>

  <script id="authorized-keys-tmpl" type="x-template/mustache">
    {{#keys}}
    <div class="list-group-item">
      <div class="comment">
        {{#comment}}
        {{comment}}
        {{/comment}}{{^comment}}
        <em translatable="yes">Unnamed</em>
        {{/comment}}
      </div>
      <div class="fingerprint">
        {{#valid}}
        {{fp}}
        {{/valid}}{{^valid}}
        <span translatable="yes">Invalid key</span>
        {{/valid}}
      </div>
      <div class="action"><button data-raw="{{raw}}" class="btn btn-default btn-control-ct accounts-self-privileged account-remove-key">-</button></div>
    </div>
    {{/keys}}
    {{^keys}}
    <div class="list-group-item">
      <div class="fingerprint">
        {{#empty}}
        <span translatable="yes">There are no authorized public keys for this account.</span>
        {{/empty}}
        {{#denied}}
        <span translatable="yes">You do not have permission to view the authorized public keys for this account.</span>
        {{/denied}}
        {{#failed}}
        <span translatable="yes">Failed to load authorized keys.</span>
        {{/failed}}
      </div>
    </div>
    {{/keys}}
  </script>

  <div class="modal" id="add-authorized-key-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translatable="yes">Add public key</h4>
        </div>
        <div class="modal-body">
          <textarea id="authorized-keys-text" placeholder="Paste the contents of your public SSH key file here"
              class="form-control" translate="placeholder"></textarea>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate id="cancel-authorized-key" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" translate id="add-authorized-key">Add key</button>
        </div>
      </div>
    </div>
  </div>

  <script id="role-entry-tmpl" type="x-template/mustache">
    {{#roles}}
    <div class="checkbox accounts-privileged" data-container="body">
      <label title="Unix group: {{name}}">
        <input type="checkbox" name="account-role-checkbox-{{id}}"
               data-gid="{{id}}" data-name="{{name}}"
               id="account-role-checkbox-{{id}}" {{#member}}checked{{/member}}/>
        {{desc}}
      </label>
    </div>
    {{/roles}}
  </script>

</body>
