Compare commits
3 Commits
cee9220f6a
...
aa20731efc
Author | SHA1 | Date | |
---|---|---|---|
aa20731efc | |||
0ff636c20a | |||
a2b66de0be |
@ -91,7 +91,7 @@ form .error {
|
||||
outline-color: var(--error);
|
||||
}
|
||||
.form-user {
|
||||
justify-content: center !important;
|
||||
/*justify-content: center !important;*/
|
||||
grid-template-columns: auto !important;
|
||||
}
|
||||
|
||||
@ -108,3 +108,8 @@ form .error {
|
||||
height: var(--h-sm);
|
||||
width: var(--h-sm);
|
||||
}
|
||||
|
||||
.input-transparent{
|
||||
background: transparent!important;
|
||||
border: transparent!important;
|
||||
}
|
||||
|
34
CSS/Element/modal.css
Normal file
34
CSS/Element/modal.css
Normal file
@ -0,0 +1,34 @@
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-overlay.is-visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--brand-background);
|
||||
padding: 1.5rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
max-width: 320px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
.modal nav {
|
||||
padding: 24px 42px 24px 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.modal nav {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
@ -8,6 +8,7 @@
|
||||
@import url(Element/card.css);
|
||||
@import url(Element/sidebar.css);
|
||||
@import url(Element/filter_box.css);
|
||||
@import url(Element/modal.css);
|
||||
|
||||
*,
|
||||
*:before,
|
||||
|
@ -26,10 +26,10 @@ class UserController{
|
||||
];
|
||||
|
||||
private $changeUserLabels = [
|
||||
'vorname' => 'Vorname*',
|
||||
'name' => 'Nachname*',
|
||||
'email' => 'E-Mail*',
|
||||
'password' => 'Passwort*',
|
||||
'vorname' => 'Vorname',
|
||||
'name' => 'Nachname',
|
||||
'email' => 'E-Mail',
|
||||
'password' => 'Passwort',
|
||||
];
|
||||
|
||||
private $kursValidData = array();
|
||||
|
34
JS/modal.js
Normal file
34
JS/modal.js
Normal file
@ -0,0 +1,34 @@
|
||||
document.addEventListener('DOMContentLoaded', () =>{
|
||||
const deleteForm = document.getElementById("deleteForm")
|
||||
const confirmModal = document.getElementById("confirmModal");
|
||||
const btnCancel = document.getElementById("btnCancel");
|
||||
console.log(btnCancel);
|
||||
const btnConfirm = document.getElementById("btnConfirm");
|
||||
|
||||
deleteForm.addEventListener('submit',e => {
|
||||
e.preventDefault();
|
||||
confirmModal.classList.add('is-visible');
|
||||
})
|
||||
|
||||
btnCancel.addEventListener('click', e => {
|
||||
confirmModal.classList.remove('is-visible');
|
||||
})
|
||||
|
||||
btnConfirm.addEventListener('click', e => {
|
||||
confirmModal.classList.remove('is-visible');
|
||||
deleteForm.submit();
|
||||
});
|
||||
|
||||
deleteForm.addEventListener('click', e => {
|
||||
if (e.target === deleteForm) {
|
||||
confirmModal.classList.remove('is-visible');
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape' && deleteForm.classList.contains('is-visible')) {
|
||||
confirmModal.classList.remove('is-visible');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
@ -3,6 +3,15 @@
|
||||
?>
|
||||
|
||||
<article>
|
||||
<div id="confirmModal" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<p>Sind Sie sicher, dass Sie Ihren Account löschen möchten?</p>
|
||||
<div class="row" style="flex-wrap: nowrap">
|
||||
<button id="btnCancel" class="btn btn-secondary">Abbrechen</button>
|
||||
<button id="btnConfirm" class="btn btn-logout">Ja, Account löschen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
@ -32,7 +41,7 @@
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
<form method="post">
|
||||
<form method="post" id="deleteForm">
|
||||
<input type="hidden" name="controller" value="user">
|
||||
<input type="hidden" name="do" value="deleteAccount">
|
||||
<button type="submit" class="btn btn-logout">Meinen Account löschen</button>
|
||||
@ -52,5 +61,4 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<?php include dirname(__DIR__).'/footer.phtml'; ?>
|
@ -5,7 +5,7 @@ include dirname(__DIR__).'/header.phtml';
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1>Change Account Info</h1>
|
||||
<h1>Meine Daten ändern</h1>
|
||||
|
||||
<form method="post" class="form-grid form-user">
|
||||
<?php foreach ($changeUserLabels as $key => $label): ?>
|
||||
@ -31,4 +31,6 @@ include dirname(__DIR__).'/header.phtml';
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include dirname(__DIR__).'/footer.phtml'; ?>
|
@ -12,3 +12,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include dirname(__DIR__).'/footer.phtml'; ?>
|
||||
|
@ -22,3 +22,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include dirname(__DIR__).'/footer.phtml'; ?>
|
||||
|
@ -31,4 +31,6 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include dirname(__DIR__).'/footer.phtml'; ?>
|
@ -9,3 +9,5 @@
|
||||
<?php
|
||||
include dirname(__DIR__).'/footer.phtml';
|
||||
?>
|
||||
|
||||
|
||||
|
@ -28,8 +28,11 @@
|
||||
<input type="hidden" name="controller" value="user">
|
||||
<input type="hidden" name="do" value="register">
|
||||
|
||||
<input type="text" class="input-transparent">
|
||||
<button type="submit" class="btn btn-primary btn-form">Registrieren</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include dirname(__DIR__).'/footer.phtml'; ?>
|
||||
|
@ -1,6 +1,6 @@
|
||||
</main>
|
||||
<footer>
|
||||
footer
|
||||
</footer>
|
||||
<script src="JS/modal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
x
Reference in New Issue
Block a user