um.git - Ulrich Hilger Code Repository

parent: 10a5439f | patch | commit | ignore whitespace

Abmelden fertig, neues UI und neues Profil aktiviert

ulrich

2020-05-19 58aa3b03b63bda8496a953a936ef847a611a52c9

Abmelden fertig, neues UI und neues Profil aktiviert

4 files modified

4 files added

4 files deleted

14 files renamed

	web/logout.jsp	5 ●●●●● patch \| view \| raw \| blame \| history
	web/profil-alt/index.html	72 ●●●●● patch \| view \| raw \| blame \| history
	web/profil-alt/stile.css	42 ●●●●● patch \| view \| raw \| blame \| history
	web/profil-alt/ui.js	patch \| view \| raw \| blame \| history
	web/profil/app.js	10 ●●●●● patch \| view \| raw \| blame \| history
	web/profil/index.html	99 ●●●●● patch \| view \| raw \| blame \| history
	web/profil/profil-form.html	patch \| view \| raw \| blame \| history
	web/profil/stile.css	386 ●●●●● patch \| view \| raw \| blame \| history
	web/profil2/index.html	57 ●●●●● patch \| view \| raw \| blame \| history
	web/profil2/stile.css	378 ●●●●● patch \| view \| raw \| blame \| history
	web/ui-alt/index.html	83 ●●●●● patch \| view \| raw \| blame \| history
	web/ui-alt/stile.css	42 ●●●●● patch \| view \| raw \| blame \| history
	web/ui-alt/ui.js	patch \| view \| raw \| blame \| history
	web/ui/data/tpl/alle-rollen.tpl	patch \| view \| raw \| blame \| history
	web/ui/data/tpl/app-menu.tpl	patch \| view \| raw \| blame \| history
	web/ui/data/tpl/dlg-del-conf.tpl	patch \| view \| raw \| blame \| history
	web/ui/data/tpl/dlg-info.tpl	patch \| view \| raw \| blame \| history
	web/ui/data/tpl/dlg-nutzer-neu.tpl	patch \| view \| raw \| blame \| history
	web/ui/data/tpl/dlg-rolle-neu.tpl	patch \| view \| raw \| blame \| history
	web/ui/data/tpl/inhalt.tpl	patch \| view \| raw \| blame \| history
	web/ui/data/tpl/nutzer-rollen-dlg.tpl	patch \| view \| raw \| blame \| history
	web/ui/index.html	113 ●●●●● patch \| view \| raw \| blame \| history
	web/ui/js/app.js	5 ●●●●● patch \| view \| raw \| blame \| history
	web/ui/stile.css	491 ●●●●● patch \| view \| raw \| blame \| history
	web/ui2/index.html	60 ●●●●● patch \| view \| raw \| blame \| history
	web/ui2/stile.css	485 ●●●●● patch \| view \| raw \| blame \| history

 web/logout.jsp

File was renamed from web/logout.html
@@ -1,16 +1,17 @@
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/stile.css">    
    <title>Abgemeldet</title>
  </head>
  <body>
      <div style="margin: 20px;">
        <h3>Abmeldung</h3>
        <p>Sie haben sich erfolgreich abgemeldet.</p>
        <p>zur&uuml;ck zur <a href="ui/">Anmeldung</a> &bull; <a href="/">Hauptseite</a></p>
        <p>zur&uuml;ck zur <a href="ui-alt">Anmeldung</a> &bull; <a href="/">Hauptseite</a></p>
      </div>
  </body>
</html>

 web/profil-alt/index.html

New file
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benutzer</title>
    <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="stile.css">
    <script id="tpl-list" type="x-tmpl-mustache">
      {{#List}}
      {{#List}}
        <option value="{{ String }}">{{ String }}</option>'
      {{/List}}
      {{/List}}
    </script>
  </head>
  <body>
    <div id="inhalt">
      <ul class="nav">
        <li class="nav-item dropdown">
          <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
            <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
            <a class="dropdown-item" href="/um/ui">Benutzer verwalten</a>
            <a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
            <a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
            <div class="dropdown-divider"></div>
            <a id="profil" class="dropdown-item disabled" href="/um/profil">Profil</a>
            <a id="logout" class="dropdown-item" href="#">Abmelden</a>
          </div>
        </li>
      </ul>
      <!-- <h1>Benutzer</h1> -->
      <div class="bg-warning p-3" id="meldung-box">
        <button type="button" class="close" aria-label="Close" id="mldg-x">
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="meldung"></div>
      </div>
      <div id="user-form">
        <label class="pl-3" id="anmeldename">id</label>
        <!-- <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename"> -->
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Neues Kennwort" name="kennwortneu" id="kennwortNeu">
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
        <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
        <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
        <!--<button class="user-cancel-btn">Abbrechen</button>-->
        <button class="user-save-btn btn btn-primary eingabe">Speichern</button>
      </div>
      
      <!--
      <div id="nav">
        <button id="nav-back-btn" class="btn btn-secondary">zur&uuml;ck</button>
      </div>
      -->
    </div>
    <script src="/jslib/jquery/jquery.min.js"></script>
    <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/jslib/mustache/mustache.min.js"></script>
    <script src="ui.js"></script>
    <script type="text/javascript" charset="utf-8">
      //var ui;
      $(document).ready(function() {
        um_prf_init();
      });
    </script>
  </body>
</html>

 web/profil-alt/stile.css

New file
@@ -0,0 +1,42 @@


#inhalt {
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#nutzerliste {
  height: 10em;
  width: 80%
}

#nutzerrollen {
  height: 5em;
  width: 80%
}

#rollen {
  height: 5em;
  width: 80%
}

#nav {
  margin-top: 1em;
}

#role-form {
  margin-top: 1em;
}

#user-role-form {
  margin-top: 1em;
}

.eingabe {
  margin-top: 0.5em;
}

.role-select {
  margin-bottom: 0.5em;
}

 web/profil-alt/ui.js


 web/profil/app.js

File was renamed from web/profil2/app.js
@@ -3,6 +3,7 @@
  this.cache = {}; // mustache template cache

  this.init = function () {
    document.querySelector('#top-logout-btn').addEventListener('click', self.logout);
    var dlg = document.querySelector(".dialog");
    dlg.style.flexBasis = '0em';
    document.querySelector('.west').style.flexBasis = '0em';
@@ -64,6 +65,15 @@
    });
  };

  this.logout = function() {
    var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
    var u = '../pub' + m;
    self.http_get(u, function (resp) {
      //$('#userMenu').text('nicht angemeldet');
      window.location.href = '../logout.jsp';
    });
  };

  /* -------- ajax helper functions ----------- */
  
  this.http_get = function(u, cb)  {

 web/profil/index.html

@@ -1,71 +1,56 @@
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benutzer</title>
    <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
    <title>Nutzerprofil</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" type="text/css" href="stile.css">
    <script id="tpl-list" type="x-tmpl-mustache">
      {{#List}}
      {{#List}}
        <option value="{{ String }}">{{ String }}</option>'
      {{/List}}
      {{/List}}
    </script>
  </head>
  <body>
    <div id="inhalt">
      <ul class="nav">
        <li class="nav-item dropdown">
          <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
            <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
            <a class="dropdown-item" href="/um/ui">Benutzer verwalten</a>
            <a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
            <a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
            <div class="dropdown-divider"></div>
            <a id="profil" class="dropdown-item disabled" href="/um/profil">Profil</a>
            <a id="logout" class="dropdown-item" href="#">Abmelden</a>
          </div>
        </li>
      </ul>
      <!-- <h1>Benutzer</h1> -->
      <div class="bg-warning p-3" id="meldung-box">
        <button type="button" class="close" aria-label="Close" id="mldg-x">
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="meldung"></div>
    <!-- Kopfzeile -->
    <div class="nord">
      <div class="back-btn">
        <button type="button" class="zurueck-btn">&#10094; Zur&uuml;ck</button>
      </div>
      <div id="user-form">
        <label class="pl-3" id="anmeldename">id</label>
        <!-- <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename"> -->
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Neues Kennwort" name="kennwortneu" id="kennwortNeu">
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
        <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
        <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
        <!--<button class="user-cancel-btn">Abbrechen</button>-->
        <button class="user-save-btn btn btn-primary eingabe">Speichern</button>
      <div class="app-titel">
        <span id="app-titel">Nutzerprofil</span>
      </div>
      
      <!--
      <div id="nav">
        <button id="nav-back-btn" class="btn btn-secondary">zur&uuml;ck</button>
      <div class="top-btn-area">
        <button type="button"  title="Abmelden" class="top-btn" id="top-logout-btn"><i class="icon-off"></i></button>
      </div>
      -->
    </div>
    <script src="/jslib/jquery/jquery.min.js"></script>
    <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
    <div class="inhalt">
      <!-- westliche Seitenleiste -->
      <div class="west"></div>
      <div class="zentrum-behaelter">
        <!-- Einblendbereich -->
        <div class="dialog"></div>
        <!-- zentraler Inhaltsbereich -->
        <div class="zentrum">
          <div class="zentraler-inhalt">
            <div class="zentrum-liste" id="nutzer">
              <figure>
                <i class="demo-icon icon-folder">&#xe800;</i> 
                <figcaption class="i-name">icon-folder</figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
      <!-- oestliche Seitenleiste -->
      <div class="ost"></div>
    </div>
    <!-- Fusszeile -->
    <div class="sued"></div>
    <!-- Skripte -->
    <script src="/jslib/mustache/mustache.min.js"></script>
    <script src="ui.js"></script>
    <script type="text/javascript" charset="utf-8">
      //var ui;
      $(document).ready(function() {
        um_prf_init();
    <script src="app.js"></script>
    <script>
      var app;
      document.addEventListener('DOMContentLoaded', function () {
        app = new NutzerProfilApp();
        app.init();
      });
    </script>
  </body>

 web/profil/profil-form.html


 web/profil/stile.css

@@ -1,42 +1,378 @@
/* aus App-Vorlage */


#inhalt {
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
  font-size: larger;
  font-family: 'Roboto Condensed';
    -webkit-text-size-adjust: none;
    /* touch-action: manipulation;*/
}
body {
  min-height: 0; /* Anmerkung 1 */
  display: flex;
  flex-flow: column;
}
.inhalt {
  display: flex;
  flex-flow: row;
  height: 100%; /* Anmerkung 2 */
  min-height: 0; /* Anmerkung 1 */
  /* background-color: #ededed; */
  overflow: hidden;
}
.nord {
  background-color: #eee;
  display: flex;
  flex-flow: row;
  height: 2em;
  align-items: center;
  justify-content: space-between;
}
.sued {
  height: 1.5em;
  overflow: hidden;
  transition: all 0.3s ease-in;
  background-color: lightgray;
}
.west {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 4em;
  background-color: white;
  transition: all 0.3s ease-in;
  overflow: hidden;
  white-space: nowrap;
}
.ost {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 6em;
  transition: all 0.3s ease-in;
  background-color: antiquewhite;
  overflow: hidden;
}
.zentrum-behaelter {
  display: flex;
  flex-flow: column;
  /* background-color: #eaeaea; */
  height: 100%;
  width: 100%;
  padding: 0 0.4em 0 0.4em;
}

#nutzerliste {
  height: 10em;
  width: 80%
.zentrum {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#nutzerrollen {
  height: 5em;
  width: 80%
.zentraler-inhalt {
  padding: 0.5em;
  overflow-x: hidden;
  overflow-y: auto;
}

#rollen {
  height: 5em;
  width: 80%
.zentrum-liste {
  overflow-x: hidden;
  overflow-y: auto;  
}
/*
  Anmerkungen:
  1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
      http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
  2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
      immer ueber das gesamte Browserfenster ausdehnt.
*/

/* Kopfleiste */

.app-titel {
  margin-left: 0.1em;
  color: black;
}

#nav {
  margin-top: 1em;
.zurueck-btn, .zurueck-btn:focus {
  border: 0;
  margin: 0 1.2em 0 0.6em;
  padding: 0;
  color: black;
}

#role-form {
  margin-top: 1em;
.zurueck-btn:hover {
  color: #888;
}

#user-role-form {
  margin-top: 1em;
.top-btn-area {
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  padding: 0 0.3em 0 0;
  width: 4em;
}

.eingabe {
  margin-top: 0.5em;
.top-btn {
  margin: 0;
  padding: 0 0.2em 0 0.2em;
  height: 28px;
  line-height: 24px;
  text-align: center;
  font-size: large;
  background-color: white;
  /* width: 1em; */
}

.role-select {
  margin-bottom: 0.5em;
}
.del-user-btn {
  margin: 0 1.5em 0 1em;
  height: 28px;
  line-height: 24px;
  text-align: center;
}

.danger-btn {
  background-color: lightcoral;
}

#user-form {
  display: flex;
  flex-flow: column;  
}

.profil-angabe {
  margin: 0.8em 0 0 0;
}

.user-save-btn {
  margin: 2.5em 0 0 0;
  width: 16em;
}

@media (min-width: 800px) {
  .zentrum-behaelter {
    padding: 0 1em 0 1em;
  }
  .zentrum-behaelter, .nord {
    margin: 0 10% 0 10%;
  }
  .profil-angabe {
      width: 70%;
  }
  .user-save-btn {
    width: 16em;
  }
}
@media (min-width: 1200px) {
  .zentrum-behaelter {
    padding: 0 1.5em 0 1.5em;
  }
  .zentrum-behaelter, .nord {
    margin: 0 15% 0 15%;
  }
  .profil-angabe {
      width: 70%;
  }
  .user-save-btn {
    width: 16em;
  }
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */

@font-face {
  font-family: 'picto';
  src: url('../font/picto.eot?52325148');
  src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'),
       url('../font/picto.woff2?52325148') format('woff2'),
       url('../font/picto.woff?52325148') format('woff'),
       url('../font/picto.ttf?52325148') format('truetype'),
       url('../font/picto.svg?52325148#picto') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'picto';
    src: url('../font/picto.svg?52325148#picto') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "picto";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-user:before { content: '\e800'; } /* '' */
.icon-cog:before { content: '\e801'; } /* '' */
.icon-off:before { content: '\e802'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */
.icon-user-times:before { content: '\f235'; } /* '' */



/* von Skeleton */

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

 web/profil2/index.html

File was deleted

 web/profil2/stile.css

File was deleted

 web/ui-alt/index.html

New file
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benutzer</title>
    <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="stile.css">
    <script id="tpl-list" type="x-tmpl-mustache">
      {{#List}}
      {{#List}}
        <option value="{{ String }}">{{ String }}</option>'
      {{/List}}
      {{/List}}
    </script>
  </head>
  <body>
    <div id="inhalt">
      <ul class="nav">
        <li class="nav-item dropdown">
          <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
            <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
            <a class="dropdown-item disabled" href="#">Benutzer verwalten</a>
            <a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
            <a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
            <div class="dropdown-divider"></div>
            <a id="profil" class="dropdown-item" href="/um/profil">Profil</a>
            <a id="logout" class="dropdown-item" href="#">Abmelden</a>
          </div>
        </li>
      </ul>
      <!-- <h1>Benutzer</h1> -->
      <div id="user-list-form">
        <select multiple class="form-control eingabe role-select" size="5" name="nutzerliste" id="nutzerliste"></select>
        <div>
          <input type="button" name="nutzerLoeschen" id="nutzerLoeschen" value="L&ouml;schen" class="btn btn-danger">
          <input type="button" name="nutzerNeu" id="nutzerNeu" value="Neu" class="btn btn-primary">            
        </div>
      </div>
      <div id="user-form">
        <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename">
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
        <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
        <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
        <!--<button class="user-cancel-btn">Abbrechen</button>-->
        <button class="user-save-btn btn btn-primary eingabe">Speichern</button>
      </div>
      <div id="user-role-form">
        <h5>Rollen von <span id="userid"></span></h5>
        <select multiple class="form-control eingabe role-select" size="5" name="nutzerrollen" id="nutzerrollen"></select>
        <div>
          <input type="button" name="nutzerRolleEntziehen" id="nutzerRolleEntziehen" value="Entziehen" class="btn btn-danger">
        </div>
      </div>
      <div id="role-form">
        <h5>Rollen</h5>
        <select multiple class="form-control eingabe role-select" size="5" name="rollen" id="rollen"></select>
        <div>
          <input type="button" name="neueRolle" id="neueRolle" value="Neu" class="btn btn-primary">
          <input type="button" name="rolleErteilen" id="rolleErteilen" value="Erteilen" class="btn btn-info">
        </div>
      </div>
      <div id="nav">
        <button id="nav-back-btn" class="btn btn-secondary">zur&uuml;ck</button>
      </div>
    </div>
    <script src="/jslib/jquery/jquery.min.js"></script>
    <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/jslib/mustache/mustache.min.js"></script>
    <script src="ui.js"></script>
    <script type="text/javascript" charset="utf-8">
      //var ui;
      $(document).ready(function() {
        um_init();
      });
    </script>
  </body>
</html>

 web/ui-alt/stile.css

New file
@@ -0,0 +1,42 @@


#inhalt {
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#nutzerliste {
  height: 10em;
  width: 80%
}

#nutzerrollen {
  height: 5em;
  width: 80%
}

#rollen {
  height: 5em;
  width: 80%
}

#nav {
  margin-top: 1em;
}

#role-form {
  margin-top: 1em;
}

#user-role-form {
  margin-top: 1em;
}

.eingabe {
  margin-top: 0.5em;
}

.role-select {
  margin-bottom: 0.5em;
}

 web/ui-alt/ui.js


 web/ui/data/tpl/alle-rollen.tpl


 web/ui/data/tpl/app-menu.tpl


 web/ui/data/tpl/dlg-del-conf.tpl


 web/ui/data/tpl/dlg-info.tpl


 web/ui/data/tpl/dlg-nutzer-neu.tpl


 web/ui/data/tpl/dlg-rolle-neu.tpl


 web/ui/data/tpl/inhalt.tpl


 web/ui/data/tpl/nutzer-rollen-dlg.tpl


 web/ui/index.html

@@ -1,82 +1,59 @@
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benutzer</title>
    <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
    <title>Nutzerverwaltung</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" type="text/css" href="stile.css">
    <script id="tpl-list" type="x-tmpl-mustache">
      {{#List}}
      {{#List}}
        <option value="{{ String }}">{{ String }}</option>'
      {{/List}}
      {{/List}}
    </script>
  </head>
  <body>
    <div id="inhalt">
      <ul class="nav">
        <li class="nav-item dropdown">
          <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
            <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
            <a class="dropdown-item disabled" href="#">Benutzer verwalten</a>
            <a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
            <a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
            <div class="dropdown-divider"></div>
            <a id="profil" class="dropdown-item" href="/um/profil">Profil</a>
            <a id="logout" class="dropdown-item" href="#">Abmelden</a>
          </div>
        </li>
      </ul>
      <!-- <h1>Benutzer</h1> -->
      <div id="user-list-form">
        <select multiple class="form-control eingabe role-select" size="5" name="nutzerliste" id="nutzerliste"></select>
        <div>
          <input type="button" name="nutzerLoeschen" id="nutzerLoeschen" value="L&ouml;schen" class="btn btn-danger">
          <input type="button" name="nutzerNeu" id="nutzerNeu" value="Neu" class="btn btn-primary">            
        </div>
    <!-- Kopfzeile -->
    <div class="nord">
      <div class="back-btn">
        <button type="button" class="zurueck-btn">&#10094; Zur&uuml;ck</button>
      </div>
      <div id="user-form">
        <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename">
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
        <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
        <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
        <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
        <!--<button class="user-cancel-btn">Abbrechen</button>-->
        <button class="user-save-btn btn btn-primary eingabe">Speichern</button>
      <div class="app-titel">
        <span id="app-titel">Nutzerverwaltung</span>
      </div>
      <div id="user-role-form">
        <h5>Rollen von <span id="userid"></span></h5>
        <select multiple class="form-control eingabe role-select" size="5" name="nutzerrollen" id="nutzerrollen"></select>
        <div>
          <input type="button" name="nutzerRolleEntziehen" id="nutzerRolleEntziehen" value="Entziehen" class="btn btn-danger">
        </div>
      </div>
      <div id="role-form">
        <h5>Rollen</h5>
        <select multiple class="form-control eingabe role-select" size="5" name="rollen" id="rollen"></select>
        <div>
          <input type="button" name="neueRolle" id="neueRolle" value="Neu" class="btn btn-primary">
          <input type="button" name="rolleErteilen" id="rolleErteilen" value="Erteilen" class="btn btn-info">
        </div>
      </div>
      <div id="nav">
        <button id="nav-back-btn" class="btn btn-secondary">zur&uuml;ck</button>
      <div class="top-btn-area">
        <button type="button"  title="Neuer Benutzer" class="top-btn" id="top-neu-btn"><i class="icon-user-plus"></i></button>
        <button type="button"  title="Abmelden" class="top-btn" id="top-logout-btn"><i class="icon-off"></i></button>
      </div>
    </div>
    <script src="/jslib/jquery/jquery.min.js"></script>
    <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
    <div class="inhalt">
      <!-- westliche Seitenleiste -->
      <div class="west"></div>
      <div class="zentrum-behaelter">
        <!-- Einblendbereich -->
        <div class="dialog"></div>
        <!-- zentraler Inhaltsbereich -->
        <div class="zentrum">
          <div class="zentraler-inhalt">
            <div class="zentrum-liste" id="nutzer">
              <figure>
                <i class="demo-icon icon-folder">&#xe800;</i> 
                <figcaption class="i-name">icon-folder</figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
      <!-- oestliche Seitenleiste -->
      <div class="ost"></div>
    </div>
    <!-- Fusszeile -->
    <div class="sued sued-open">
      Fußzeile
    </div>
    <!-- Skripte -->
    <script src="/jslib/mustache/mustache.min.js"></script>
    <script src="ui.js"></script>
    <script type="text/javascript" charset="utf-8">
      //var ui;
      $(document).ready(function() {
        um_init();
    <script src="js/app.js"></script>
    <script>
      var app;
      document.addEventListener('DOMContentLoaded', function () {
        app = new NutzerApp();
        app.init();
      });
    </script>
  </body>

 web/ui/js/app.js

File was renamed from web/ui2/js/app.js
@@ -8,6 +8,7 @@
    var dlg = document.querySelector(".dialog");
    dlg.style.flexBasis = '0em';
    document.querySelector('#top-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen);
    document.querySelector('#top-logout-btn').addEventListener('click', self.logout);
    document.querySelector('.west').style.flexBasis = '0em';
    document.querySelector('.ost').style.flexBasis = '0em';
    self.get_login();
@@ -322,12 +323,12 @@
    });
  };

  this.um_logout = function() {
  this.logout = function() {
    var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
    var u = '../pub' + m;
    self.http_get(u, function (resp) {
      //$('#userMenu').text('nicht angemeldet');
      window.location.href = '../logout.html';
      window.location.href = '../logout.jsp';
    });
  };


 web/ui/stile.css

@@ -1,42 +1,485 @@
/* 
    Created on : 24.01.2020, 09:08:45
    Author     : ulrich
*/

/* aus App-Vorlage */

#inhalt {
  margin-top: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
  font-size: larger;
  font-family: 'Roboto Condensed';
    -webkit-text-size-adjust: none;
    /* touch-action: manipulation;*/
}
body {
  min-height: 0; /* Anmerkung 1 */
  display: flex;
  flex-flow: column;
}
.inhalt {
  display: flex;
  flex-flow: row;
  height: 100%; /* Anmerkung 2 */
  min-height: 0; /* Anmerkung 1 */
  /* background-color: #ededed; */
  overflow: hidden;
}
.nord {
  background-color: #eee;
  display: flex;
  flex-flow: row;
  height: 2em;
  justify-content: space-between;
  align-items: center;
  /*align-self: stretch;*/
}
.sued {
  height: 1.5em;
  overflow: hidden;
  transition: all 0.3s ease-in;
  background-color: lightgray;
}
.west {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 4em;
  background-color: white;
  transition: all 0.3s ease-in;
  overflow: hidden;
  white-space: nowrap;
}
.ost {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 6em;
  transition: all 0.3s ease-in;
  background-color: antiquewhite;
  overflow: hidden;
}
.zentrum-behaelter {
  display: flex;
  flex-flow: column;
  /* background-color: #eaeaea; */
  height: 100%;
  width: 100%;
  padding: 0 0.4em 0 0.4em;
}

#nutzerliste {
  height: 10em;
  width: 80%
.zentrum {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#nutzerrollen {
  height: 5em;
  width: 80%
.zentraler-inhalt {
  padding: 0.5em;
  overflow-x: hidden;
  overflow-y: auto;
}

#rollen {
  height: 5em;
  width: 80%
.zentrum-liste {
  overflow-x: hidden;
  overflow-y: auto;  
}
/*
  Anmerkungen:
  1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
      http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
  2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
      immer ueber das gesamte Browserfenster ausdehnt.
*/

/* Kopfleiste */

.app-titel {
  margin-left: 0.1em;
  color: black;
}

#nav {
  margin-top: 1em;
.zurueck-btn, .zurueck-btn:focus {
  border: 0;
  margin: 0 1.2em 0 0.6em;
  padding: 0;
  color: black;
}

#role-form {
  margin-top: 1em;
.zurueck-btn:hover {
  color: #888;
}

#user-role-form {
  margin-top: 1em;
.top-btn-area {
  /*margin-left: auto;*/
  margin: 0 1em 0 0;
}

.eingabe {
  margin-top: 0.5em;
.top-btn {
  margin: 0;
  padding: 0 0.2em 0 0.2em;
  height: 28px;
  line-height: 24px;
  text-align: center;
  font-size: large;
  background-color: white;
  /* width: 1em; */
}

.role-select {
  margin-bottom: 0.5em;
}
.del-user-btn {
  margin: 0 1.5em 0 1em;
  margin-left: auto;
  height: 32px;
  line-height: 12px;
  text-align: center;
  font-size: medium;
}

.danger-btn {
  background-color: #ffcccc;
}

/* Nutzerliste */

.nutzer-liste-eintrag {
  margin: 0;
  padding: 0.3em 0 0 0;
  cursor: pointer;
}

.nutzer-gewaehlt {
  background-color: lightsteelblue;
}

/* ... */

.pointer-cursor {
  cursor: pointer;
}

.breadcrumb {
  background-color: beige;
  padding: 0.2em;
  font-size: medium;
}

/* Dialoge (Info, Neuer Nutzer, ..) */

.dialog {
  display: flex;
  flex-flow: column;
  position: relative;
  transition: all 0.3s ease-in;
  height: 100%;
  /* white-space: nowrap; */
}

.dlg-behaelter { 
  display: flex;
  flex-flow: column;
  /* line-height: 1.6; */
  height: 100%;
  padding: 0.4em;
}


.dlg-info {
  display: flex;
  flex-flow: column;
  background-color: #dcf2fb; /* blau */ 
  padding: 0.4em;
}

.dlg-info-app-titel {
  margin-bottom: 0.4em;
}

.nutzer-form {
  padding: 0.3em;
}

.nutzer-eingabe {
  width: 100%;
  margin: 0.3em;
}

.form-button-footer {
  padding: 0.4em;
}

.bold-text {
  font-weight: bold;
}


/*
  Close Button

  <div>
    <span class="close-btn">&#10006;</span>
  </div>
*/

.close-btn {
  position: absolute;
  top: 0px;
  right: 0.4em;
  margin: 0;
  padding: 0;
  font-size: 1.3em;
  color: #b8b8b8;
}

/* Nutzer-Rollen */

.rollen-ansicht-titel {
  display: flex;
  flex-flow: row;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 0;
  vertical-align: central;
}

.rollen-ueberschrift {
  margin: 1.2em 0 0.2em 0;
  padding: 0;
}

.rollen-behaelter {
  margin: 0;
  padding: 0;
}

.granted-role-btn {
  height: 2.5em;
  padding: 0 0.5em;
  margin: 0.2em;
  text-transform: none;
  background-color: #fdfbe2;
  font-size: medium;
}

.avl-role-btn {
  height: 2.5em;
  padding: 0 0.5em;
  margin: 0.2em;
  background-color: #eee;
  text-transform: none;
  font-size: medium;
}

@media (min-width: 800px) {
  .zentrum-behaelter {
    padding: 0 1em 0 1em;
  }
  .zentrum-behaelter, .nord {
    margin: 0 10% 0 10%;
  }
}
@media (min-width: 1200px) {
  .zentrum-behaelter {
    padding: 0 1.5em 0 1.5em;
  }
  .zentrum-behaelter, .nord {
    margin: 0 15% 0 15%;
  }
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */

@font-face {
  font-family: 'picto';
  src: url('../font/picto.eot?52325148');
  src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'),
       url('../font/picto.woff2?52325148') format('woff2'),
       url('../font/picto.woff?52325148') format('woff'),
       url('../font/picto.ttf?52325148') format('truetype'),
       url('../font/picto.svg?52325148#picto') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'picto';
    src: url('../font/picto.svg?52325148#picto') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "picto";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-user:before { content: '\e800'; } /* '' */
.icon-cog:before { content: '\e801'; } /* '' */
.icon-off:before { content: '\e802'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */
.icon-user-times:before { content: '\f235'; } /* '' */

/* von Skeleton */

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


 web/ui2/index.html

File was deleted

 web/ui2/stile.css

File was deleted

File was renamed from web/logout.html
			@@ -1,16 +1,17 @@
			<%@page contentType="text/html" pageEncoding="UTF-8"%>
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
			<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/stile.css">
			<title>Abgemeldet</title>
			</head>
			<body>
			<div style="margin: 20px;">
			<h3>Abmeldung</h3>
			<p>Sie haben sich erfolgreich abgemeldet.</p>
			<p>zurück zur <a href="ui/">Anmeldung</a> • <a href="/">Hauptseite</a></p>
			<p>zurück zur <a href="ui-alt">Anmeldung</a> • <a href="/">Hauptseite</a></p>
			</div>
			</body>
			</html>

New file
			@@ -0,0 +1,72 @@
			<!DOCTYPE html>
			<html>
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Benutzer</title>
			<link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
			<link rel="stylesheet" type="text/css" href="stile.css">
			<script id="tpl-list" type="x-tmpl-mustache">
			{{#List}}
			{{#List}}
			<option value="{{ String }}">{{ String }}</option>'
			{{/List}}
			{{/List}}
			</script>
			</head>
			<body>
			<div id="inhalt">
			<ul class="nav">
			<li class="nav-item dropdown">
			<a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
			<div class="dropdown-menu">
			<a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
			<a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
			<a class="dropdown-item" href="/um/ui">Benutzer verwalten</a>
			<a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
			<a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
			<div class="dropdown-divider"></div>
			<a id="profil" class="dropdown-item disabled" href="/um/profil">Profil</a>
			<a id="logout" class="dropdown-item" href="#">Abmelden</a>
			</div>
			</li>
			</ul>
			<!-- <h1>Benutzer</h1> -->
			<div class="bg-warning p-3" id="meldung-box">
			<button type="button" class="close" aria-label="Close" id="mldg-x">
			<span aria-hidden="true">×</span>
			</button>
			<div class="meldung"></div>
			</div>
			<div id="user-form">
			<label class="pl-3" id="anmeldename">id</label>
			<!-- <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename"> -->
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Neues Kennwort" name="kennwortneu" id="kennwortNeu">
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
			<input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
			<input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
			<!--<button class="user-cancel-btn">Abbrechen</button>-->
			<button class="user-save-btn btn btn-primary eingabe">Speichern</button>
			</div>

			<!--
			<div id="nav">
			<button id="nav-back-btn" class="btn btn-secondary">zurück</button>
			</div>
			-->
			</div>
			<script src="/jslib/jquery/jquery.min.js"></script>
			<script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
			<script src="/jslib/mustache/mustache.min.js"></script>
			<script src="ui.js"></script>
			<script type="text/javascript" charset="utf-8">
			//var ui;
			$(document).ready(function() {
			um_prf_init();
			});
			</script>
			</body>
			</html>

New file
			@@ -0,0 +1,42 @@


			#inhalt {
			margin-top: 0.5em;
			margin-left: 0.5em;
			margin-right: 0.5em;
			}

			#nutzerliste {
			height: 10em;
			width: 80%
			}

			#nutzerrollen {
			height: 5em;
			width: 80%
			}

			#rollen {
			height: 5em;
			width: 80%
			}

			#nav {
			margin-top: 1em;
			}

			#role-form {
			margin-top: 1em;
			}

			#user-role-form {
			margin-top: 1em;
			}

			.eingabe {
			margin-top: 0.5em;
			}

			.role-select {
			margin-bottom: 0.5em;
			}

File was renamed from web/profil2/app.js
			@@ -3,6 +3,7 @@
			this.cache = {}; // mustache template cache

			this.init = function () {
			document.querySelector('#top-logout-btn').addEventListener('click', self.logout);
			var dlg = document.querySelector(".dialog");
			dlg.style.flexBasis = '0em';
			document.querySelector('.west').style.flexBasis = '0em';
			@@ -64,6 +65,15 @@
			});
			};

			this.logout = function() {
			var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
			var u = '../pub' + m;
			self.http_get(u, function (resp) {
			//$('#userMenu').text('nicht angemeldet');
			window.location.href = '../logout.jsp';
			});
			};

			/* -------- ajax helper functions ----------- */

			this.http_get = function(u, cb) {

			@@ -1,71 +1,56 @@
			<!DOCTYPE html>
			<html>
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Benutzer</title>
			<link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
			<title>Nutzerprofil</title>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
			<meta name="apple-mobile-web-app-capable" content="yes" />
			<link rel="stylesheet" type="text/css" href="stile.css">
			<script id="tpl-list" type="x-tmpl-mustache">
			{{#List}}
			{{#List}}
			<option value="{{ String }}">{{ String }}</option>'
			{{/List}}
			{{/List}}
			</script>
			</head>
			<body>
			<div id="inhalt">
			<ul class="nav">
			<li class="nav-item dropdown">
			<a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
			<div class="dropdown-menu">
			<a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
			<a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
			<a class="dropdown-item" href="/um/ui">Benutzer verwalten</a>
			<a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
			<a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
			<div class="dropdown-divider"></div>
			<a id="profil" class="dropdown-item disabled" href="/um/profil">Profil</a>
			<a id="logout" class="dropdown-item" href="#">Abmelden</a>
			</div>
			</li>
			</ul>
			<!-- <h1>Benutzer</h1> -->
			<div class="bg-warning p-3" id="meldung-box">
			<button type="button" class="close" aria-label="Close" id="mldg-x">
			<span aria-hidden="true">×</span>
			</button>
			<div class="meldung"></div>
			<!-- Kopfzeile -->
			<div class="nord">
			<div class="back-btn">
			<button type="button" class="zurueck-btn">❮ Zurück</button>
			</div>
			<div id="user-form">
			<label class="pl-3" id="anmeldename">id</label>
			<!-- <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename"> -->
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Neues Kennwort" name="kennwortneu" id="kennwortNeu">
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
			<input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
			<input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
			<!--<button class="user-cancel-btn">Abbrechen</button>-->
			<button class="user-save-btn btn btn-primary eingabe">Speichern</button>
			<div class="app-titel">
			<span id="app-titel">Nutzerprofil</span>
			</div>

			<!--
			<div id="nav">
			<button id="nav-back-btn" class="btn btn-secondary">zurück</button>
			<div class="top-btn-area">
			<button type="button" title="Abmelden" class="top-btn" id="top-logout-btn"><i class="icon-off"></i></button>
			</div>
			-->
			</div>
			<script src="/jslib/jquery/jquery.min.js"></script>
			<script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
			<div class="inhalt">
			<!-- westliche Seitenleiste -->
			<div class="west"></div>
			<div class="zentrum-behaelter">
			<!-- Einblendbereich -->
			<div class="dialog"></div>
			<!-- zentraler Inhaltsbereich -->
			<div class="zentrum">
			<div class="zentraler-inhalt">
			<div class="zentrum-liste" id="nutzer">
			<figure>
			<i class="demo-icon icon-folder"></i>
			<figcaption class="i-name">icon-folder</figcaption>
			</figure>
			</div>
			</div>
			</div>
			</div>
			<!-- oestliche Seitenleiste -->
			<div class="ost"></div>
			</div>
			<!-- Fusszeile -->
			<div class="sued"></div>
			<!-- Skripte -->
			<script src="/jslib/mustache/mustache.min.js"></script>
			<script src="ui.js"></script>
			<script type="text/javascript" charset="utf-8">
			//var ui;
			$(document).ready(function() {
			um_prf_init();
			<script src="app.js"></script>
			<script>
			var app;
			document.addEventListener('DOMContentLoaded', function () {
			app = new NutzerProfilApp();
			app.init();
			});
			</script>
			</body>

			@@ -1,42 +1,378 @@
			/* aus App-Vorlage */


			#inhalt {
			margin-top: 0.5em;
			margin-left: 0.5em;
			margin-right: 0.5em;
			html, body {
			margin: 0;
			padding: 0;
			height: 100%; /* Anmerkung 2 */
			font-size: larger;
			font-family: 'Roboto Condensed';
			-webkit-text-size-adjust: none;
			/* touch-action: manipulation;*/
			}
			body {
			min-height: 0; /* Anmerkung 1 */
			display: flex;
			flex-flow: column;
			}
			.inhalt {
			display: flex;
			flex-flow: row;
			height: 100%; /* Anmerkung 2 */
			min-height: 0; /* Anmerkung 1 */
			/* background-color: #ededed; */
			overflow: hidden;
			}
			.nord {
			background-color: #eee;
			display: flex;
			flex-flow: row;
			height: 2em;
			align-items: center;
			justify-content: space-between;
			}
			.sued {
			height: 1.5em;
			overflow: hidden;
			transition: all 0.3s ease-in;
			background-color: lightgray;
			}
			.west {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: 4em;
			background-color: white;
			transition: all 0.3s ease-in;
			overflow: hidden;
			white-space: nowrap;
			}
			.ost {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: 6em;
			transition: all 0.3s ease-in;
			background-color: antiquewhite;
			overflow: hidden;
			}
			.zentrum-behaelter {
			display: flex;
			flex-flow: column;
			/* background-color: #eaeaea; */
			height: 100%;
			width: 100%;
			padding: 0 0.4em 0 0.4em;
			}

			#nutzerliste {
			height: 10em;
			width: 80%
			.zentrum {
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			}

			#nutzerrollen {
			height: 5em;
			width: 80%
			.zentraler-inhalt {
			padding: 0.5em;
			overflow-x: hidden;
			overflow-y: auto;
			}

			#rollen {
			height: 5em;
			width: 80%
			.zentrum-liste {
			overflow-x: hidden;
			overflow-y: auto;
			}
			/*
			Anmerkungen:
			1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
			http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
			2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
			immer ueber das gesamte Browserfenster ausdehnt.
			*/

			/* Kopfleiste */

			.app-titel {
			margin-left: 0.1em;
			color: black;
			}

			#nav {
			margin-top: 1em;
			.zurueck-btn, .zurueck-btn:focus {
			border: 0;
			margin: 0 1.2em 0 0.6em;
			padding: 0;
			color: black;
			}

			#role-form {
			margin-top: 1em;
			.zurueck-btn:hover {
			color: #888;
			}

			#user-role-form {
			margin-top: 1em;
			.top-btn-area {
			display: flex;
			flex-flow: row;
			justify-content: flex-end;
			padding: 0 0.3em 0 0;
			width: 4em;
			}

			.eingabe {
			margin-top: 0.5em;
			.top-btn {
			margin: 0;
			padding: 0 0.2em 0 0.2em;
			height: 28px;
			line-height: 24px;
			text-align: center;
			font-size: large;
			background-color: white;
			/* width: 1em; */
			}

			.role-select {
			margin-bottom: 0.5em;
			}
			.del-user-btn {
			margin: 0 1.5em 0 1em;
			height: 28px;
			line-height: 24px;
			text-align: center;
			}

			.danger-btn {
			background-color: lightcoral;
			}

			#user-form {
			display: flex;
			flex-flow: column;
			}

			.profil-angabe {
			margin: 0.8em 0 0 0;
			}

			.user-save-btn {
			margin: 2.5em 0 0 0;
			width: 16em;
			}

			@media (min-width: 800px) {
			.zentrum-behaelter {
			padding: 0 1em 0 1em;
			}
			.zentrum-behaelter, .nord {
			margin: 0 10% 0 10%;
			}
			.profil-angabe {
			width: 70%;
			}
			.user-save-btn {
			width: 16em;
			}
			}
			@media (min-width: 1200px) {
			.zentrum-behaelter {
			padding: 0 1.5em 0 1.5em;
			}
			.zentrum-behaelter, .nord {
			margin: 0 15% 0 15%;
			}
			.profil-angabe {
			width: 70%;
			}
			.user-save-btn {
			width: 16em;
			}
			}

			@font-face {
			font-family: 'Roboto Condensed';
			src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			}


			/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */

			@font-face {
			font-family: 'picto';
			src: url('../font/picto.eot?52325148');
			src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'),
			url('../font/picto.woff2?52325148') format('woff2'),
			url('../font/picto.woff?52325148') format('woff'),
			url('../font/picto.ttf?52325148') format('truetype'),
			url('../font/picto.svg?52325148#picto') format('svg');
			font-weight: normal;
			font-style: normal;
			}
			/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
			/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
			/*
			@media screen and (-webkit-min-device-pixel-ratio:0) {
			@font-face {
			font-family: 'picto';
			src: url('../font/picto.svg?52325148#picto') format('svg');
			}
			}
			*/

			[class^="icon-"]:before, [class*=" icon-"]:before {
			font-family: "picto";
			font-style: normal;
			font-weight: normal;
			speak: none;

			display: inline-block;
			text-decoration: inherit;
			width: 1em;
			margin-right: .2em;
			text-align: center;
			/* opacity: .8; */

			/* For safety - reset parent styles, that can break glyph codes*/
			font-variant: normal;
			text-transform: none;

			/* fix buttons height, for twitter bootstrap */
			line-height: 1em;

			/* Animation center compensation - margins should be symmetric */
			/* remove if not needed */
			margin-left: .2em;

			/* you can be more comfortable with increased icons size */
			/* font-size: 120%; */

			/* Font smoothing. That was taken from TWBS */
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			/* Uncomment for 3D effect */
			/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
			}

			.icon-user:before { content: '\e800'; } /* '' */
			.icon-cog:before { content: '\e801'; } /* '' */
			.icon-off:before { content: '\e802'; } /* '' */
			.icon-user-plus:before { content: '\f234'; } /* '' */
			.icon-user-times:before { content: '\f235'; } /* '' */



			/* von Skeleton */

			/* Buttons
			–––––––––––––––––––––––––––––––––––––––––––––––––– */
			.button,
			button,
			input[type="submit"],
			input[type="reset"],
			input[type="button"] {
			display: inline-block;
			height: 38px;
			padding: 0 30px;
			color: #555;
			text-align: center;
			font-size: 11px;
			font-weight: 600;
			line-height: 38px;
			letter-spacing: .1rem;
			text-transform: uppercase;
			text-decoration: none;
			white-space: nowrap;
			background-color: transparent;
			border-radius: 4px;
			border: 1px solid #bbb;
			cursor: pointer;
			box-sizing: border-box; }
			.button:hover,
			button:hover,
			input[type="submit"]:hover,
			input[type="reset"]:hover,
			input[type="button"]:hover,
			.button:focus,
			button:focus,
			input[type="submit"]:focus,
			input[type="reset"]:focus,
			input[type="button"]:focus {
			color: #333;
			border-color: #888;
			outline: 0; }
			.button.button-primary,
			button.button-primary,
			input[type="submit"].button-primary,
			input[type="reset"].button-primary,
			input[type="button"].button-primary {
			color: #FFF;
			background-color: #33C3F0;
			border-color: #33C3F0; }
			.button.button-primary:hover,
			button.button-primary:hover,
			input[type="submit"].button-primary:hover,
			input[type="reset"].button-primary:hover,
			input[type="button"].button-primary:hover,
			.button.button-primary:focus,
			button.button-primary:focus,
			input[type="submit"].button-primary:focus,
			input[type="reset"].button-primary:focus,
			input[type="button"].button-primary:focus {
			color: #FFF;
			background-color: #1EAEDB;
			border-color: #1EAEDB; }


			/* Forms
			–––––––––––––––––––––––––––––––––––––––––––––––––– */
			input[type="email"],
			input[type="number"],
			input[type="search"],
			input[type="text"],
			input[type="tel"],
			input[type="url"],
			input[type="password"],
			textarea,
			select {
			height: 38px;
			padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
			background-color: #fff;
			border: 1px solid #D1D1D1;
			border-radius: 4px;
			box-shadow: none;
			box-sizing: border-box; }
			/* Removes awkward default styles on some inputs for iOS */
			input[type="email"],
			input[type="number"],
			input[type="search"],
			input[type="text"],
			input[type="tel"],
			input[type="url"],
			input[type="password"],
			textarea {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none; }
			textarea {
			min-height: 65px;
			padding-top: 6px;
			padding-bottom: 6px; }
			input[type="email"]:focus,
			input[type="number"]:focus,
			input[type="search"]:focus,
			input[type="text"]:focus,
			input[type="tel"]:focus,
			input[type="url"]:focus,
			input[type="password"]:focus,
			textarea:focus,
			select:focus {
			border: 1px solid #33C3F0;
			outline: 0; }
			label,
			legend {
			display: block;
			margin-bottom: .5rem;
			font-weight: 600; }
			fieldset {
			padding: 0;
			border-width: 0; }
			input[type="checkbox"],
			input[type="radio"] {
			display: inline; }
			label > .label-body {
			display: inline-block;
			margin-left: .5rem;
			font-weight: normal; }

New file
			@@ -0,0 +1,83 @@
			<!DOCTYPE html>
			<html>
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Benutzer</title>
			<link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
			<link rel="stylesheet" type="text/css" href="stile.css">
			<script id="tpl-list" type="x-tmpl-mustache">
			{{#List}}
			{{#List}}
			<option value="{{ String }}">{{ String }}</option>'
			{{/List}}
			{{/List}}
			</script>
			</head>
			<body>
			<div id="inhalt">
			<ul class="nav">
			<li class="nav-item dropdown">
			<a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
			<div class="dropdown-menu">
			<a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
			<a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
			<a class="dropdown-item disabled" href="#">Benutzer verwalten</a>
			<a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
			<a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
			<div class="dropdown-divider"></div>
			<a id="profil" class="dropdown-item" href="/um/profil">Profil</a>
			<a id="logout" class="dropdown-item" href="#">Abmelden</a>
			</div>
			</li>
			</ul>
			<!-- <h1>Benutzer</h1> -->
			<div id="user-list-form">
			<select multiple class="form-control eingabe role-select" size="5" name="nutzerliste" id="nutzerliste"></select>
			<div>
			<input type="button" name="nutzerLoeschen" id="nutzerLoeschen" value="Löschen" class="btn btn-danger">
			<input type="button" name="nutzerNeu" id="nutzerNeu" value="Neu" class="btn btn-primary">
			</div>
			</div>
			<div id="user-form">
			<input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename">
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
			<input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
			<input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
			<!--<button class="user-cancel-btn">Abbrechen</button>-->
			<button class="user-save-btn btn btn-primary eingabe">Speichern</button>
			</div>
			<div id="user-role-form">
			<h5>Rollen von <span id="userid"></span></h5>
			<select multiple class="form-control eingabe role-select" size="5" name="nutzerrollen" id="nutzerrollen"></select>
			<div>
			<input type="button" name="nutzerRolleEntziehen" id="nutzerRolleEntziehen" value="Entziehen" class="btn btn-danger">
			</div>
			</div>
			<div id="role-form">
			<h5>Rollen</h5>
			<select multiple class="form-control eingabe role-select" size="5" name="rollen" id="rollen"></select>
			<div>
			<input type="button" name="neueRolle" id="neueRolle" value="Neu" class="btn btn-primary">
			<input type="button" name="rolleErteilen" id="rolleErteilen" value="Erteilen" class="btn btn-info">
			</div>
			</div>
			<div id="nav">
			<button id="nav-back-btn" class="btn btn-secondary">zurück</button>
			</div>
			</div>
			<script src="/jslib/jquery/jquery.min.js"></script>
			<script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
			<script src="/jslib/mustache/mustache.min.js"></script>
			<script src="ui.js"></script>
			<script type="text/javascript" charset="utf-8">
			//var ui;
			$(document).ready(function() {
			um_init();
			});
			</script>
			</body>
			</html>

			@@ -1,82 +1,59 @@
			<!DOCTYPE html>
			<html>
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Benutzer</title>
			<link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
			<title>Nutzerverwaltung</title>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
			<meta name="apple-mobile-web-app-capable" content="yes" />
			<link rel="stylesheet" type="text/css" href="stile.css">
			<script id="tpl-list" type="x-tmpl-mustache">
			{{#List}}
			{{#List}}
			<option value="{{ String }}">{{ String }}</option>'
			{{/List}}
			{{/List}}
			</script>
			</head>
			<body>
			<div id="inhalt">
			<ul class="nav">
			<li class="nav-item dropdown">
			<a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
			<div class="dropdown-menu">
			<a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
			<a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
			<a class="dropdown-item disabled" href="#">Benutzer verwalten</a>
			<a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
			<a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
			<div class="dropdown-divider"></div>
			<a id="profil" class="dropdown-item" href="/um/profil">Profil</a>
			<a id="logout" class="dropdown-item" href="#">Abmelden</a>
			</div>
			</li>
			</ul>
			<!-- <h1>Benutzer</h1> -->
			<div id="user-list-form">
			<select multiple class="form-control eingabe role-select" size="5" name="nutzerliste" id="nutzerliste"></select>
			<div>
			<input type="button" name="nutzerLoeschen" id="nutzerLoeschen" value="Löschen" class="btn btn-danger">
			<input type="button" name="nutzerNeu" id="nutzerNeu" value="Neu" class="btn btn-primary">
			</div>
			<!-- Kopfzeile -->
			<div class="nord">
			<div class="back-btn">
			<button type="button" class="zurueck-btn">❮ Zurück</button>
			</div>
			<div id="user-form">
			<input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename">
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
			<input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
			<input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
			<input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
			<!--<button class="user-cancel-btn">Abbrechen</button>-->
			<button class="user-save-btn btn btn-primary eingabe">Speichern</button>
			<div class="app-titel">
			<span id="app-titel">Nutzerverwaltung</span>
			</div>
			<div id="user-role-form">
			<h5>Rollen von <span id="userid"></span></h5>
			<select multiple class="form-control eingabe role-select" size="5" name="nutzerrollen" id="nutzerrollen"></select>
			<div>
			<input type="button" name="nutzerRolleEntziehen" id="nutzerRolleEntziehen" value="Entziehen" class="btn btn-danger">
			</div>
			</div>
			<div id="role-form">
			<h5>Rollen</h5>
			<select multiple class="form-control eingabe role-select" size="5" name="rollen" id="rollen"></select>
			<div>
			<input type="button" name="neueRolle" id="neueRolle" value="Neu" class="btn btn-primary">
			<input type="button" name="rolleErteilen" id="rolleErteilen" value="Erteilen" class="btn btn-info">
			</div>
			</div>
			<div id="nav">
			<button id="nav-back-btn" class="btn btn-secondary">zurück</button>
			<div class="top-btn-area">
			<button type="button" title="Neuer Benutzer" class="top-btn" id="top-neu-btn"><i class="icon-user-plus"></i></button>
			<button type="button" title="Abmelden" class="top-btn" id="top-logout-btn"><i class="icon-off"></i></button>
			</div>
			</div>
			<script src="/jslib/jquery/jquery.min.js"></script>
			<script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
			<div class="inhalt">
			<!-- westliche Seitenleiste -->
			<div class="west"></div>
			<div class="zentrum-behaelter">
			<!-- Einblendbereich -->
			<div class="dialog"></div>
			<!-- zentraler Inhaltsbereich -->
			<div class="zentrum">
			<div class="zentraler-inhalt">
			<div class="zentrum-liste" id="nutzer">
			<figure>
			<i class="demo-icon icon-folder"></i>
			<figcaption class="i-name">icon-folder</figcaption>
			</figure>
			</div>
			</div>
			</div>
			</div>
			<!-- oestliche Seitenleiste -->
			<div class="ost"></div>
			</div>
			<!-- Fusszeile -->
			<div class="sued sued-open">
			Fußzeile
			</div>
			<!-- Skripte -->
			<script src="/jslib/mustache/mustache.min.js"></script>
			<script src="ui.js"></script>
			<script type="text/javascript" charset="utf-8">
			//var ui;
			$(document).ready(function() {
			um_init();
			<script src="js/app.js"></script>
			<script>
			var app;
			document.addEventListener('DOMContentLoaded', function () {
			app = new NutzerApp();
			app.init();
			});
			</script>
			</body>

File was renamed from web/ui2/js/app.js
			@@ -8,6 +8,7 @@
			var dlg = document.querySelector(".dialog");
			dlg.style.flexBasis = '0em';
			document.querySelector('#top-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen);
			document.querySelector('#top-logout-btn').addEventListener('click', self.logout);
			document.querySelector('.west').style.flexBasis = '0em';
			document.querySelector('.ost').style.flexBasis = '0em';
			self.get_login();
			@@ -322,12 +323,12 @@
			});
			};

			this.um_logout = function() {
			this.logout = function() {
			var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
			var u = '../pub' + m;
			self.http_get(u, function (resp) {
			//$('#userMenu').text('nicht angemeldet');
			window.location.href = '../logout.html';
			window.location.href = '../logout.jsp';
			});
			};

			@@ -1,42 +1,485 @@
			/*
			Created on : 24.01.2020, 09:08:45
			Author : ulrich
			*/

			/* aus App-Vorlage */

			#inhalt {
			margin-top: 0.5em;
			margin-left: 0.5em;
			margin-right: 0.5em;
			html, body {
			margin: 0;
			padding: 0;
			height: 100%; /* Anmerkung 2 */
			font-size: larger;
			font-family: 'Roboto Condensed';
			-webkit-text-size-adjust: none;
			/* touch-action: manipulation;*/
			}
			body {
			min-height: 0; /* Anmerkung 1 */
			display: flex;
			flex-flow: column;
			}
			.inhalt {
			display: flex;
			flex-flow: row;
			height: 100%; /* Anmerkung 2 */
			min-height: 0; /* Anmerkung 1 */
			/* background-color: #ededed; */
			overflow: hidden;
			}
			.nord {
			background-color: #eee;
			display: flex;
			flex-flow: row;
			height: 2em;
			justify-content: space-between;
			align-items: center;
			/align-self: stretch;/
			}
			.sued {
			height: 1.5em;
			overflow: hidden;
			transition: all 0.3s ease-in;
			background-color: lightgray;
			}
			.west {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: 4em;
			background-color: white;
			transition: all 0.3s ease-in;
			overflow: hidden;
			white-space: nowrap;
			}
			.ost {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: 6em;
			transition: all 0.3s ease-in;
			background-color: antiquewhite;
			overflow: hidden;
			}
			.zentrum-behaelter {
			display: flex;
			flex-flow: column;
			/* background-color: #eaeaea; */
			height: 100%;
			width: 100%;
			padding: 0 0.4em 0 0.4em;
			}

			#nutzerliste {
			height: 10em;
			width: 80%
			.zentrum {
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			}

			#nutzerrollen {
			height: 5em;
			width: 80%
			.zentraler-inhalt {
			padding: 0.5em;
			overflow-x: hidden;
			overflow-y: auto;
			}

			#rollen {
			height: 5em;
			width: 80%
			.zentrum-liste {
			overflow-x: hidden;
			overflow-y: auto;
			}
			/*
			Anmerkungen:
			1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
			http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
			2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
			immer ueber das gesamte Browserfenster ausdehnt.
			*/

			/* Kopfleiste */

			.app-titel {
			margin-left: 0.1em;
			color: black;
			}

			#nav {
			margin-top: 1em;
			.zurueck-btn, .zurueck-btn:focus {
			border: 0;
			margin: 0 1.2em 0 0.6em;
			padding: 0;
			color: black;
			}

			#role-form {
			margin-top: 1em;
			.zurueck-btn:hover {
			color: #888;
			}

			#user-role-form {
			margin-top: 1em;
			.top-btn-area {
			/margin-left: auto;/
			margin: 0 1em 0 0;
			}

			.eingabe {
			margin-top: 0.5em;
			.top-btn {
			margin: 0;
			padding: 0 0.2em 0 0.2em;
			height: 28px;
			line-height: 24px;
			text-align: center;
			font-size: large;
			background-color: white;
			/* width: 1em; */
			}

			.role-select {
			margin-bottom: 0.5em;
			}
			.del-user-btn {
			margin: 0 1.5em 0 1em;
			margin-left: auto;
			height: 32px;
			line-height: 12px;
			text-align: center;
			font-size: medium;
			}

			.danger-btn {
			background-color: #ffcccc;
			}

			/* Nutzerliste */

			.nutzer-liste-eintrag {
			margin: 0;
			padding: 0.3em 0 0 0;
			cursor: pointer;
			}

			.nutzer-gewaehlt {
			background-color: lightsteelblue;
			}

			/* ... */

			.pointer-cursor {
			cursor: pointer;
			}

			.breadcrumb {
			background-color: beige;
			padding: 0.2em;
			font-size: medium;
			}

			/* Dialoge (Info, Neuer Nutzer, ..) */

			.dialog {
			display: flex;
			flex-flow: column;
			position: relative;
			transition: all 0.3s ease-in;
			height: 100%;
			/* white-space: nowrap; */
			}

			.dlg-behaelter {
			display: flex;
			flex-flow: column;
			/* line-height: 1.6; */
			height: 100%;
			padding: 0.4em;
			}


			.dlg-info {
			display: flex;
			flex-flow: column;
			background-color: #dcf2fb; /* blau */
			padding: 0.4em;
			}

			.dlg-info-app-titel {
			margin-bottom: 0.4em;
			}

			.nutzer-form {
			padding: 0.3em;
			}

			.nutzer-eingabe {
			width: 100%;
			margin: 0.3em;
			}

			.form-button-footer {
			padding: 0.4em;
			}

			.bold-text {
			font-weight: bold;
			}


			/*
			Close Button

			<div>
			<span class="close-btn">✖</span>
			</div>
			*/

			.close-btn {
			position: absolute;
			top: 0px;
			right: 0.4em;
			margin: 0;
			padding: 0;
			font-size: 1.3em;
			color: #b8b8b8;
			}

			/* Nutzer-Rollen */

			.rollen-ansicht-titel {
			display: flex;
			flex-flow: row;
			align-items: center;
			align-self: stretch;
			margin: 0;
			padding: 0;
			vertical-align: central;
			}

			.rollen-ueberschrift {
			margin: 1.2em 0 0.2em 0;
			padding: 0;
			}

			.rollen-behaelter {
			margin: 0;
			padding: 0;
			}

			.granted-role-btn {
			height: 2.5em;
			padding: 0 0.5em;
			margin: 0.2em;
			text-transform: none;
			background-color: #fdfbe2;
			font-size: medium;
			}

			.avl-role-btn {
			height: 2.5em;
			padding: 0 0.5em;
			margin: 0.2em;
			background-color: #eee;
			text-transform: none;
			font-size: medium;
			}

			@media (min-width: 800px) {
			.zentrum-behaelter {
			padding: 0 1em 0 1em;
			}
			.zentrum-behaelter, .nord {
			margin: 0 10% 0 10%;
			}
			}
			@media (min-width: 1200px) {
			.zentrum-behaelter {
			padding: 0 1.5em 0 1.5em;
			}
			.zentrum-behaelter, .nord {
			margin: 0 15% 0 15%;
			}
			}

			@font-face {
			font-family: 'Roboto Condensed';
			src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			}

			/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */

			@font-face {
			font-family: 'picto';
			src: url('../font/picto.eot?52325148');
			src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'),
			url('../font/picto.woff2?52325148') format('woff2'),
			url('../font/picto.woff?52325148') format('woff'),
			url('../font/picto.ttf?52325148') format('truetype'),
			url('../font/picto.svg?52325148#picto') format('svg');
			font-weight: normal;
			font-style: normal;
			}
			/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
			/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
			/*
			@media screen and (-webkit-min-device-pixel-ratio:0) {
			@font-face {
			font-family: 'picto';
			src: url('../font/picto.svg?52325148#picto') format('svg');
			}
			}
			*/

			[class^="icon-"]:before, [class*=" icon-"]:before {
			font-family: "picto";
			font-style: normal;
			font-weight: normal;
			speak: none;

			display: inline-block;
			text-decoration: inherit;
			width: 1em;
			margin-right: .2em;
			text-align: center;
			/* opacity: .8; */

			/* For safety - reset parent styles, that can break glyph codes*/
			font-variant: normal;
			text-transform: none;

			/* fix buttons height, for twitter bootstrap */
			line-height: 1em;

			/* Animation center compensation - margins should be symmetric */
			/* remove if not needed */
			margin-left: .2em;

			/* you can be more comfortable with increased icons size */
			/* font-size: 120%; */

			/* Font smoothing. That was taken from TWBS */
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			/* Uncomment for 3D effect */
			/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
			}

			.icon-user:before { content: '\e800'; } /* '' */
			.icon-cog:before { content: '\e801'; } /* '' */
			.icon-off:before { content: '\e802'; } /* '' */
			.icon-user-plus:before { content: '\f234'; } /* '' */
			.icon-user-times:before { content: '\f235'; } /* '' */

			/* von Skeleton */

			/* Buttons
			–––––––––––––––––––––––––––––––––––––––––––––––––– */
			.button,
			button,
			input[type="submit"],
			input[type="reset"],
			input[type="button"] {
			display: inline-block;
			height: 38px;
			padding: 0 30px;
			color: #555;
			text-align: center;
			font-size: 11px;
			font-weight: 600;
			line-height: 38px;
			letter-spacing: .1rem;
			text-transform: uppercase;
			text-decoration: none;
			white-space: nowrap;
			background-color: transparent;
			border-radius: 4px;
			border: 1px solid #bbb;
			cursor: pointer;
			box-sizing: border-box; }
			.button:hover,
			button:hover,
			input[type="submit"]:hover,
			input[type="reset"]:hover,
			input[type="button"]:hover,
			.button:focus,
			button:focus,
			input[type="submit"]:focus,
			input[type="reset"]:focus,
			input[type="button"]:focus {
			color: #333;
			border-color: #888;
			outline: 0; }
			.button.button-primary,
			button.button-primary,
			input[type="submit"].button-primary,
			input[type="reset"].button-primary,
			input[type="button"].button-primary {
			color: #FFF;
			background-color: #33C3F0;
			border-color: #33C3F0; }
			.button.button-primary:hover,
			button.button-primary:hover,
			input[type="submit"].button-primary:hover,
			input[type="reset"].button-primary:hover,
			input[type="button"].button-primary:hover,
			.button.button-primary:focus,
			button.button-primary:focus,
			input[type="submit"].button-primary:focus,
			input[type="reset"].button-primary:focus,
			input[type="button"].button-primary:focus {
			color: #FFF;
			background-color: #1EAEDB;
			border-color: #1EAEDB; }


			/* Forms
			–––––––––––––––––––––––––––––––––––––––––––––––––– */
			input[type="email"],
			input[type="number"],
			input[type="search"],
			input[type="text"],
			input[type="tel"],
			input[type="url"],
			input[type="password"],
			textarea,
			select {
			height: 38px;
			padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
			background-color: #fff;
			border: 1px solid #D1D1D1;
			border-radius: 4px;
			box-shadow: none;
			box-sizing: border-box; }
			/* Removes awkward default styles on some inputs for iOS */
			input[type="email"],
			input[type="number"],
			input[type="search"],
			input[type="text"],
			input[type="tel"],
			input[type="url"],
			input[type="password"],
			textarea {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none; }
			textarea {
			min-height: 65px;
			padding-top: 6px;
			padding-bottom: 6px; }
			input[type="email"]:focus,
			input[type="number"]:focus,
			input[type="search"]:focus,
			input[type="text"]:focus,
			input[type="tel"]:focus,
			input[type="url"]:focus,
			input[type="password"]:focus,
			textarea:focus,
			select:focus {
			border: 1px solid #33C3F0;
			outline: 0; }
			label,
			legend {
			display: block;
			margin-bottom: .5rem;
			font-weight: 600; }
			fieldset {
			padding: 0;
			border-width: 0; }
			input[type="checkbox"],
			input[type="radio"] {
			display: inline; }
			label > .label-body {
			display: inline-block;
			margin-left: .5rem;
			font-weight: normal; }