<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>M/Monit Admin | Users</title>
    <meta name="theme-color" content="#3D3E40">
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="M/Monit" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <link rel="apple-touch-icon" href="../../img/apple-touch-icon.png"/>
    <link rel="manifest" href="../../img/manifest.webmanifest">
    <script src="../../lib/js/appearance.js"></script>
    <link rel="stylesheet" href="../../lib/css/styles.css?version=430">
    <link rel="stylesheet" href="../../assets/admin/admin_users_crud.css?version=430">
</head>
<body>
    <?cs include:"img/icons.svg" ?>
    <div id="wrap">
        <div id="fixed-header">
            <div id="fake-status-bar"></div>
            <div id="header">
                <div id="nav">
                    <a id="logo" target="webapp" href="../../"></a>
                    <a id="logout" title="Logout" target="webapp" href="../../login/logout.csp"></a>
                    <ul id="menu">
                        <li>
                            <a target="webapp" href="../../index.csp"><span>Dashboard</span></a>
                        </li>
                        <li>
                            <a target="webapp" href="../../status/hosts/"><span>Status</span></a>
                        </li>
                        <li>
                            <a target="webapp" href="../../reports/analytics/"><span>Reports</span></a>
                            <ul>
                                <li><a target="webapp" href="../../reports/analytics/">Analytics</a></li>
                                <li><a target="webapp" href="../../reports/uptime/">Uptime</a></li>
                                <li><a target="webapp" href="../../reports/events/">Events</a></li>
                            </ul>
                        </li>
                        <li class="active">
                            <?cs if:#Request.Param.IsAdmin ?>
                            <a target="webapp" href="../../admin/general/"><span>Admin</span></a>
                            <ul>
                                <li><a target="webapp" href="../../admin/general/">General</a></li>
                                <li><a target="webapp" href="../../admin/hosts/">Hosts</a></li>
                                <li><a target="webapp" href="../../admin/groups/">Groups</a></li>
                                <li><a target="webapp" href="../../admin/users/">Users</a></li>
                                <li><a target="webapp" href="../../admin/roles/">Roles</a></li>
                                <li><a target="webapp" href="../../admin/alerts/">Alerts</a></li>
                                <li><a target="webapp" href="../../admin/settings/">Settings</a></li>
                            </ul>
                            <?cs else ?>
                            <a target="webapp" href="../../admin/users/edit?id=<?cs var:Request.Param.RemoteUserId ?>"><span>Profile</span></a>
                            <?cs /if ?>
                        </li>
                        <li id="logout-phone"><a target="webapp" href="../../login/logout.csp">Logout</a></li>
                    </ul>
                </div> <!-- nav -->
            </div><!-- header -->
        </div><!-- fixed-header -->
        <div id="main">
<?cs if:#Request.Param.IsAdmin ?>
            <ul class="breadcrumb">
                <li><a href="../general/">Admin</a> <span class="divider">/</span></li>
                <li><a href=".">Users</a> <span class="divider">/</span></li>
                <li class="active"><?cs if:Request.Param.id?>Edit<?cs else ?>New<?cs /if ?></li>
            </ul>
<?cs /if ?>
            <div id="title">
                <a href="#" id="help" class="help-button" title="Help" data-help="#helpbox"></a>
                <h1>
<?cs if:#Request.Param.IsAdmin ?>
                    <?cs if:Request.Param.id?>Edit user<?cs else ?>New user<?cs /if ?>
<?cs else ?>
                    Edit profile
<?cs /if ?>
                </h1>
            </div>
            <form data-bind="submit:saveUser" id="theform" autocomplete="off">
                <input type="hidden" id="CSRFToken" name="CSRFToken" value="<?cs var:Request.CSRFToken ?>">
                <div class="row-fluid">
                    <div class="span8">
                        <ul class="tableView">
                            <li data-bind="validationElement:fullname">
                                <span>Name</span>
                                <span class="accessory">
                                    <input placeholder="First + Last Name..." data-bind="value:fullname, hasFocus:focusOnFirstField, valueUpdate:'afterkeydown'" name="fullname" autocomplete="off" />
                                </span>
                            </li>
                        </ul>
                        <h3>Access Control</h3>
                        <ul class="tableView accordion">
                            <li data-bind="validationElement:uname">
                                <span>Username</span><span class="accessory">
                                    <input placeholder="Username..." data-bind="value:uname, valueUpdate:'afterkeydown'" name="uname" autocomplete="off" />
                                </span>
                            </li>
                            <li data-bind="validationElement:password">
                                <span>Password</span>
                                <span class="accessory">
                                    <input placeholder="Password..." type="password" data-bind="value:password, selectText:'all', valueUpdate:'afterkeydown'" name="password" autocomplete="new-password" />
                                </span>
                            </li>
<?cs if:#Request.Param.IsAdmin ?>
                            <li class="list">
                                <div class="accordionRow" data-bind="click: toggleRolesExpand">
                                    <span>Roles</span>
                                    <span class="accessory" data-bind="css:{expanded: areRolesExpanded}"></span>
                                </div>
                                <div class="accordionPanel" data-bind="slideVisible: areRolesExpanded, slideDuration:300">
                                    <div class="row-fluid">
                                        <div class="span5 toleft">
                                            <p class="smaller-font">Assigned:</p>
                                            <select size="10" multiple data-bind="options: assignedRoles, selectedOptions:assignedRolesSelected, optionsText:'name'"></select>
                                        </div>
                                        <div id="arrows" class="span2 localpushdown" data-bind="css: {localpushdown : $root.shouldPushDown()}">
                                            <svg data-bind="click:assignRoles" class="arrow-button-small margin-right-1" title="Assign Roles">
                                                <use href="#circle-icon" class="circle"></use>
                                                <use href="#left-arrow-icon" class="arrow"></use>
                                            </svg>
                                            <svg data-bind="click:removeRoles" class="arrow-button-small" title="Remove Roles" >
                                                <use href="#circle-icon" class="circle"></use>
                                                <use href="#right-arrow-icon" class="arrow"></use>
                                            </svg>
                                        </div>
                                        <div class="span5 toright">
                                            <p class="smaller-font">Available:</p>
                                            <select size="10" multiple data-bind="options: availableRoles, selectedOptions:availableRolesSelected, optionsText:'name'"></select>
                                        </div>
                                    </div> <!-- row-fluid -->
                                </div> <!-- accordionPanel -->
                            </li>
<?cs /if ?>
                        </ul>
                        <h3>Contact information</h3>
                        <ul class="tableView">
                            <li>
                                <span>Title</span>
                                <span class="accessory">
                                    <input placeholder="Title..." data-bind="value:title" name="title" autocomplete="off" />
                                </span>
                            </li>
                            <li data-bind="validationElement:email">
                                <span>E-mail</span>
                                <span class="accessory">
                                    <input placeholder="E-mail..." data-bind="value:email, valueUpdate:'afterkeydown'" name="email" autocomplete="off" />
                                </span>
                            </li>
                            <li data-bind="validationElement:phone">
                                <span>Phone#</span>
                                <span class="accessory">
                                    <input placeholder="Phone Number..." data-bind="value:phone, valueUpdate:'afterkeydown'" name="phone" autocomplete="off" />
                                </span>
                            </li>
                            <li data-bind="validationElement:mobile">
                                <span>Mobile#</span>
                                <span class="accessory">
                                    <input placeholder="Mobile Number..." data-bind="value:mobile, valueUpdate:'afterkeydown'" name="mobile" autocomplete="off" />
                                </span>
                            </li>
                            <li>
                                <span>Messaging</span>
                                <span class="accessory">
                                    <input placeholder="Account Name..." data-bind="value:imname" name="imname" autocomplete="off" />
                                </span>
                            </li>
                            <li>
                                <span>Messaging Type</span>
                                <span class="accessory">
                                    <div class="select-button">
                                        <!-- Add your own IM types as needed -->
                                        <select name="imtype" data-bind="value:imtype">
                                            <option value="None">None</option>
                                            <option value="Slack">Slack</option>
                                            <option value="Skype">Skype</option>
                                            <option value="Jabber">Jabber</option>
                                            <option value="GoogleChat">GoogleChat</option>
                                            <option value="iMessage">iMessage</option>
                                            <option value="FBMessenger">FBMessenger</option>
                                            <option value="ICQ">ICQ</option>
                                        </select>
                                    </div>
                                </span>
                            </li>
                        </ul>
                    </div> <!-- span8 -->
                    <div class="picture-box span4 upload-button" title="Click or drop file here to upload a new picture" data-bind="click:setModified">
                        <div class="image dropzone" id="preview"></div>
                        <input type="file" capture="camera" accept="image/*" id="fileInput">
                    </div>

                </div> <!-- row-fluid -->
                <!-- Buttons -->
                <div class="row-fluid" id="actions">
                    <div class="span6">
                        <button class="btn btn-primary btn-inverse" data-bind="visible:isnew, disable:hasErrors(), click:saveUser"><span id="button-spinner" class="inverse"></span>Save</button>
                        <button class="btn btn-primary btn-inverse" data-bind="visible:modified, disable:hasErrors(), click:saveUser"><span id="button-spinner" class="inverse"></span>Update</button>
                        <button class="btn" data-bind="visible: (isnew() || modified()), click:cancel">Cancel</button>
                    </div>
<?cs if:#Request.Param.IsAdmin ?>
                    <div class="span2">
                        <button class="btn toright" data-bind="visible:original_id" data-target="#confirmDelete" data-toggle="modal">Delete</button>
                    </div>
<?cs /if ?>
                </div> <!-- row-fluid -->
                <input type="hidden" id="isadmin" name="isadmin" value="<?cs var:Request.Param.IsAdmin ?>">
            </form>
        </div> <!-- main -->
    </div> <!-- wrap -->
    <div id="footer">
        <div class="toleft hidden-phone">Logged in as <?cs var:Request.RemoteUser ?></div>
        <div class="toright hidden-phone">
            <ul class="piped">
                <li>Copyright &copy; 2024 <a href="https://tildeslash.com/">Tildeslash</a>. All Rights Reserved.</li>
                <li><a href="https://mmonit.com/">M/Monit</a></li>
                <li><a href="https://mmonit.com/monit/">Monit</a></li>
                <li><a href="https://mmonit.com/wiki/">Wiki</a></li>
            </ul>
        </div>
        <div id="copy" class="visible-phone">Copyright &copy; 2024 <a href="https://tildeslash.com/">Tildeslash</a>. All Rights Reserved.</div>
    </div> <!-- footer -->
    <!-- Confirm Delete Dialog -->
    <div id="confirmDelete" class="modal hide">
        <div class="modal-body">
            <h2>Delete <span class="text-error" data-bind='text:uname'></span>?</h2>
            <p>Are you sure you want to remove this user from the system? There is no undo.</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Cancel</button>
            <button class="btn btn-danger" data-dismiss="modal" data-bind="click:$root.deleteUser">Delete</button>
        </div>
    </div>
    <div id="helpbox">
        <div class="title"><h2>Users Help</h2></div>
        <div class="content paragraphify">
<?cs if:#Request.Param.IsAdmin ?>
            <p>
                Use this page to create or edit a user.
            </p>
            <p>
                A user name and password is required to be able to login to M/Monit.
            </p>
            <p>
                As an admin user you can use <a target="webapp" href="../../admin/roles/">Roles</a> to control users
                privileges and access to M/Monit. For instance, if the user should have administrator access, assign the
                <em>admin</em> role and the user will have access to all pages and functions in M/Monit. If you want the user
                to only have access to a select set of hosts, assign a <em>custom</em> role or assign the <em>collector</em>
                role if this user should be able to post events and status updates to M/Monit.
            </p>
<?cs else ?>
            <p>
                Use this page to update your account information.
            </p>
            <p>
                A user name and password is required to be able to login to M/Monit.
            </p>
<?cs /if ?>
            <p>
                The other fields are optional, but contact information can come in handy if more people are using M/Monit. It
                is recommended to fill in email and if available, Jabber information so you will be able to select the user
                from the Alert page to receive alerts.
            </p>
            <p>
                <strong>Photo:</strong> To add or change the photo, click the image box. This will open up a dialog from where you can upload an image from your
                computer. Then, click save. On your phone, click the image to take a photo or upload an existing photo from your library.
            </p>
        </div> <!-- content -->
    </div> <!-- helpbox -->
    <script src="../../lib/f/jquery/jquery.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.mobile.vmouse.js?version=430"></script>
    <script src="../../lib/js/webapp.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.getUrlParam.js?version=430"></script>
    <script src="../../lib/f/twbootstrap/js/bootstrap.js?version=430"></script>
    <script src="../../lib/f/knockout/knockout.js?version=430"></script>
    <script src="../../lib/f/knockout/knockout-mapping.js?version=430"></script>
    <script src="../../lib/f/knockout/knockout.validation.js?version=430"></script>
    <script src="../../lib/js/error.js?version=430"></script>
    <script src="../../lib/js/webapp.js?version=430"></script>
    <script src="../../lib/js/help.js?version=430"></script>
    <script src="../../lib/js/csrf.js?version=430"></script>
    <script src="../../lib/js/tableview.js?version=430"></script>
    <script src="../../assets/admin/admin_users_crud.js?version=430"></script>
</body>
</html>
