Neues Nutzerprofil fertig

ulrich

2020-05-18 2b837d7c4bf0e3dfe4e8706b62bad43a93baa604

Neues Nutzerprofil fertig

 web/profil2/app.js

@@ -10,10 +10,9 @@
    self.get_user_data();
    
    var suedDiv = document.querySelector('.sued');
    //if (suedDiv.classList.contains('sued-open')) {
      suedDiv.classList.remove('sued-open');
      suedDiv.style.height = '0';
    //}
    suedDiv.classList.remove('sued-open');
    suedDiv.style.height = '0';
    document.querySelector('.zurueck-btn').style.color = '#eee';
  };
  
  /*
@@ -25,14 +24,36 @@
      document.querySelector('.user-save-btn').addEventListener('click', self.kennwort_speichern);
    });
  };
  

  this.kennwort_speichern = function() {
    var userId = document.querySelector('#anmeldename').textContent;
    var aktKw = document.querySelector('#kennwort').value;
    var neuKw = document.querySelector('#kennwortNeu').value;
    var wKw = document.querySelector('#kennwortw').value;
    if(neuKw === wKw) {
      var m = '?c=de.uhilger.um.api.Profil&m=setUserPw&p=' + userId + '&p=' + aktKw + '&p=' + neuKw;
      var u = '../prf' + m;
      self.http_get(u, function(antwort) {
        self.meldung(antwort, 1500);
      });
    } else {
      // Kennworte unterschiedlich
      self.meldung('Kennworte stimmen nicht überein', 1500);
    }
  };
  
  this.meldung = function(text, dauer) {
    var suedDiv = document.querySelector('.sued');
    suedDiv.textContent = 'Kennwort speichern';
    //if (!suedDiv.classList.contains('sued-open')) {
      suedDiv.classList.add('sued-open');
      suedDiv.style.height = '1.5em';
    //}
    suedDiv.textContent = text;
    suedDiv.classList.add('sued-open');
    suedDiv.style.height = '1.5em';
    setTimeout(function () {
      var suedDiv = document.querySelector('.sued');
      if (suedDiv.classList.contains('sued-open')) {
        suedDiv.classList.remove('sued-open');
        suedDiv.style.height = '0';
      }
    }, 1500);    
  };
  
  this.get_user_data = function() {

 web/profil2/index.html

@@ -16,9 +16,7 @@
      <div class="app-titel">
        <span id="app-titel">Nutzerprofil</span>
      </div>
      <div class="top-btn-area">
        <button type="button"  title="Neuer Benutzer" class="top-btn" id="top-neu-btn">+</button>
      </div>
      <div class="top-btn-area"></div>
    </div>
    <div class="inhalt">
      <!-- westliche Seitenleiste -->

 web/profil2/profil-form.html

@@ -1,10 +1,9 @@
<div id="user-form">
  <label id="anmeldename">{{UserData.id}}</label>
  <input type="password" size="20" maxlength="30" placeholder="Kennwort" id="kennwort">
  <input type="password" size="20" maxlength="30" placeholder="Neues Kennwort" id="kennwortNeu">
  <input type="password" size="20" maxlength="30" placeholder="Wiederholung" id="kennwortw">
  <label id="vorname">{{UserData.firstName}}</label>
  <label id="nachname">{{UserData.lastName}}</label>
  <button class="user-save-btn">Speichern</button>
  <label class="profil-angabe" id="anmeldename">{{UserData.id}}</label>
  <label class="profil-angabe" id="nutzername">{{UserData.firstName}} {{UserData.lastName}}</label>
  <input class="profil-angabe" type="password" size="20" maxlength="30" placeholder="Kennwort" id="kennwort">
  <input class="profil-angabe" type="password" size="20" maxlength="30" placeholder="Neues Kennwort" id="kennwortNeu">
  <input class="profil-angabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" id="kennwortw">
  <button class="user-save-btn profil-angabe">Speichern</button>
</div>


 web/profil2/stile.css

@@ -129,3 +129,173 @@
  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;
}



/* 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; }