Responsive Pt 3 - Pass Reset, Site Create/Restore
Rebuilt forms for resetting the password, creating a fresh site and restoring a site from a backup, as well as adjusting the accompanying scripts that handle those processes.
This commit is contained in:
Ro
parent
5adf196783
commit
e7fd91c152
11 changed files with 153 additions and 82 deletions
16
brain/views/dash/forms/init-backup.twig
Normal file
16
brain/views/dash/forms/init-backup.twig
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<div>
|
||||
<a href="/dashboard">
|
||||
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
<form id="init-restore" method="POST">
|
||||
<input type="text" name="restore_member_handle" id="restore_member_handle" placeholder="handle"/><input type="password" name="restore_member_pass" id="restore_member_pass" placeholder="password"/>
|
||||
<div>
|
||||
<label>Grab your backup zip</label>
|
||||
<input id="backup-upload" type="file" name="backup-upload" placeholder="Backup Zip"/>
|
||||
</div>
|
||||
<br/><br/>
|
||||
<button id="blog-restore" data-action='blog-restore' type='submit'>RESTORE</button>
|
||||
<br/><br/>
|
||||
<button class="init-option" id="init-switch-fresh">OR INSTALL FROM SCRATCH</button>
|
||||
</form>
|
||||
15
brain/views/dash/forms/init-fresh.twig
Normal file
15
brain/views/dash/forms/init-fresh.twig
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<div>
|
||||
<a href="/dashboard">
|
||||
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
<form id="init-form" method="POST">
|
||||
<input type="text" name="new_member_handle" id="new_member_handle" placeholder="handle"/>
|
||||
<input type="text" name="new_member_email" id="new_member_email" placeholder="email"/>
|
||||
<input type="text" name="new_member_pass" id="new_member_pass" placeholder="password"/>
|
||||
<input type="text" name="new_member_pass2" id="new_member_pass2" placeholder="password confirm"/>
|
||||
<input type="text" name="new_member_title" id="new_member_title" placeholder="title"/>
|
||||
<button id="init-blog" data-action='blog-init' type='submit'>SET UP YOUR SITE</button>
|
||||
<br/><br/>
|
||||
<button class="init-option" id="init-switch-restore">RESTORE FROM BACKUP</button>
|
||||
</form>
|
||||
21
brain/views/dash/forms/reset.twig
Normal file
21
brain/views/dash/forms/reset.twig
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<div>
|
||||
<a href="/dashboard">
|
||||
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
<form id="reset" class='login' name="reset" action="/dashboard/login" method="POST">
|
||||
|
||||
<input type="password" id="new_password" name="new_password" class="form-control" placeholder="New Password" required/>
|
||||
<input type="password" id="new_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required">
|
||||
<input type="password" id="secret" name="secret" class="form-control" placeholder="Account Secret" required/>
|
||||
<button id="reset-btn" class='login-btn' type='submit'>
|
||||
RESET PASSWORD
|
||||
</button><br/>
|
||||
<p>
|
||||
Use this to get your secret to verify it's you. If your email is set up, the secret will be sent there. If not, the form will be updated automatically(but please set up your email, once you reset your password).
|
||||
</p>
|
||||
<input type="text" id="email" name="email" class="form-control" placeholder="email to verify" required/>
|
||||
<button id="get-secret-btn" class='login-btn' type='submit'>
|
||||
VERIFY EMAIL
|
||||
</button><br/><br/>
|
||||
</form>
|
||||
|
|
@ -5,44 +5,20 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfa">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash/start.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block mainContent %}
|
||||
<div id="dash-index">
|
||||
<div id="dash-index-wrapper">
|
||||
<div id="dash-init" class="dash-init">
|
||||
<form id="init-form" method="POST">
|
||||
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
|
||||
<input type="text" name="new_member_handle" id="new_member_handle" placeholder="handle"/>
|
||||
<input type="text" name="new_member_email" id="new_member_email" placeholder="email"/>
|
||||
<input type="text" name="new_member_pass" id="new_member_pass" placeholder="password"/>
|
||||
<input type="text" name="new_member_pass2" id="new_member_pass2" placeholder="password confirm"/>
|
||||
<input type="text" name="new_member_title" id="new_member_title" placeholder="title"/>
|
||||
<button id="init-blog" data-action='blog-init' type='submit'>SET UP YOUR SITE</button>
|
||||
<br/><br/>
|
||||
<button class="init-option" id="init-switch-restore">RESTORE FROM BACKUP</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div id="dash-restore" class="dash-restore">
|
||||
<form id="init-restore" method="POST">
|
||||
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
|
||||
<input type="text" name="restore_member_handle" id="restore_member_handle" placeholder="handle"/><input type="password" name="restore_member_pass" id="restore_member_pass" placeholder="password"/>
|
||||
<div>
|
||||
<label>Grab your backup zip</label>
|
||||
<input id="backup-upload" type="file" name="backup-upload" placeholder="Backup Zip"/>
|
||||
</div>
|
||||
<br/><br/>
|
||||
<button id="blog-restore" data-action='blog-restore' type='submit'>RESTORE</button>
|
||||
<br/><br/>
|
||||
<button class="init-option" id="init-switch-fresh">OR INSTALL FROM SCRATCH</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script src="/assets/scripts/start.js?=sdfsdf" type="text/javascript"></script>
|
||||
<article role="site-restore">
|
||||
<section role="restore-fresh">
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/forms/init-fresh.twig") }}
|
||||
{% endapply %}
|
||||
</section>
|
||||
<section role="restore-backup">
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/forms/init-backup.twig") }}
|
||||
{% endapply %}
|
||||
</section>
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
{{ include("dash/partials/editor.twig") }}
|
||||
{% endapply %}
|
||||
<div role="edit-post-wrapper">
|
||||
<textarea id="edit" spellcheck="false">{{ content }}</textarea>
|
||||
<textarea id="edit" spellcheck="false" class="language-md">{{ content }}</textarea>
|
||||
<pre id="highlight">
|
||||
<code id="highlight-content" class="language-md"></code>
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -5,33 +5,14 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdfdf">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash/start.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block mainContent %}
|
||||
<div id="dash-index">
|
||||
<div id="dash-index-wrapper">
|
||||
<div id="dash-login">
|
||||
<div id="dash-reset" class="dash-reset">
|
||||
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
|
||||
<form id="reset" class='login' name="reset" action="/dashboard/login" method="POST">
|
||||
<section role="password-reset">
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/forms/reset.twig") }}
|
||||
{% endapply %}
|
||||
|
||||
<input type="password" id="new_password" name="new_password" class="form-control" placeholder="New Password" required">
|
||||
<input type="password" id="new_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required">
|
||||
<input type="password" id="secret" name="secret" class="form-control" placeholder="Account Secret" required">
|
||||
<button id="reset-btn" class='login-btn' type='submit'>
|
||||
RESET PASSWORD
|
||||
</button><br/>
|
||||
<p>
|
||||
Use this to get your secret to verify it's you. If your email is set up, the secret will be sent there. If not, the form will be updated automatically(but please set up your email, once you reset your password).
|
||||
</p>
|
||||
<input type="text" id="email" name="email" class="form-control" placeholder="email to verify" required">
|
||||
<button id="get-secret-btn" class='login-btn' type='submit'>
|
||||
VERIFY EMAIL
|
||||
</button><br/><br/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -50,5 +50,5 @@ select {
|
|||
|
||||
::placeholder {
|
||||
font: 25px var(--base-type);
|
||||
color: var(--white);
|
||||
color: var(--black);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
/* LOGIN */
|
||||
|
||||
section[role="login"] {
|
||||
section[role="login"],
|
||||
section[role="password-reset"],
|
||||
section[role="restore-fresh"],
|
||||
section[role="restore-backup"] {
|
||||
margin: 15% auto;
|
||||
padding: 10px;
|
||||
width: 500px;
|
||||
|
|
@ -8,6 +11,13 @@ section[role="login"] {
|
|||
display: grid;
|
||||
grid-template-columns: 28.5% 1fr;
|
||||
gap: 10px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
section[role="restore-backup"] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
section[role="login"] form input {
|
||||
|
|
@ -35,20 +45,69 @@ section[role="login"] form a {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* LOGIN */
|
||||
/* PASSWORD-RESET */
|
||||
|
||||
section[role="password-reset"] form button {
|
||||
padding: 10px 5px;
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
section[role="password-reset"] form input {
|
||||
width: 95%;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* SITE RESTORE */
|
||||
|
||||
section[role="restore-fresh"] form button {
|
||||
padding: 10px 5px;
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
section[role="restore-fresh"] form input {
|
||||
width: 95%;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section[role="restore-backup"] form button {
|
||||
padding: 10px 5px;
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
section[role="restore-backup"] form input {
|
||||
width: 95%;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
section[role="login"] {
|
||||
section[role="login"],
|
||||
section[role="password-reset"],
|
||||
section[role="restore-fresh"],
|
||||
section[role="restore-backup"] {
|
||||
width: 97%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 375px) {
|
||||
section[role="login"] {
|
||||
section[role="login"],
|
||||
section[role="password-reset"],
|
||||
section[role="restore-fresh"],
|
||||
section[role="restore-backup"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
section[role="login"] img {
|
||||
section[role="login"] img,
|
||||
section[role="password-reset"] img,
|
||||
section[role="restore-fresh"] img,
|
||||
section[role="restore-backup"] img {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2866,7 +2866,7 @@ class $e6c02983873e6cdf$var$TextEditor extends (0, $68b475f2a0292491$export$2e2b
|
|||
}
|
||||
break;
|
||||
case "edit-image":
|
||||
this.caretPos = (0, $bba420c8ea874359$export$5880b8b5730aff45)(this.textEditor).pos;
|
||||
//this.caretPos = position(this.textEditor).pos;
|
||||
this.emitEvent($0d6abf40542266b3$export$80082ca64f03d0e9);
|
||||
break;
|
||||
case "submit-save":
|
||||
|
|
@ -7640,7 +7640,7 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 {
|
|||
// methods
|
||||
//--------------------------
|
||||
start() {
|
||||
if (document.getElementById("login") || document.getElementById("dash-init")) {
|
||||
if (document.getElementById("login") || document.querySelector('[role="site-restore"]')) {
|
||||
var options = document.getElementsByClassName("init-option");
|
||||
for(let index = 0; index < options.length; index++)options[index].addEventListener("click", (e)=>this.handleOptions(e));
|
||||
if (document.getElementById("login")) document.getElementById("login-btn").addEventListener("click", (e)=>this.handleLogin(e));
|
||||
|
|
@ -7771,15 +7771,15 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 {
|
|||
handleOptions(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let init = document.getElementById("dash-init");
|
||||
let restore = document.getElementById("dash-restore");
|
||||
let init = document.querySelector('[role="restore-fresh"]');
|
||||
let restore = document.querySelector('[role="restore-backup"]');
|
||||
if (e.target.id === "init-switch-restore") {
|
||||
init.style.display = "none";
|
||||
init.style.visibility = "hidden";
|
||||
restore.style.display = "flex";
|
||||
restore.style.display = "grid";
|
||||
restore.style.visibility = "visible";
|
||||
} else {
|
||||
init.style.display = "flex";
|
||||
init.style.display = "grid";
|
||||
init.style.visibility = "visible";
|
||||
restore.style.display = "none";
|
||||
restore.style.visibility = "hidden";
|
||||
|
|
|
|||
|
|
@ -20,7 +20,10 @@ export default class Base {
|
|||
// methods
|
||||
//--------------------------
|
||||
start() {
|
||||
if (document.getElementById('login') || document.getElementById('dash-init')) {
|
||||
if (
|
||||
document.getElementById('login') ||
|
||||
document.querySelector('[role="site-restore"]')
|
||||
) {
|
||||
var options = document.getElementsByClassName('init-option');
|
||||
for (let index = 0; index < options.length; index++) {
|
||||
options[index].addEventListener('click', e => this.handleOptions(e));
|
||||
|
|
@ -187,16 +190,16 @@ export default class Base {
|
|||
handleOptions(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let init = document.getElementById('dash-init');
|
||||
let restore = document.getElementById('dash-restore');
|
||||
let init = document.querySelector('[role="restore-fresh"]');
|
||||
let restore = document.querySelector('[role="restore-backup"]');
|
||||
if (e.target.id === 'init-switch-restore') {
|
||||
init.style.display = 'none';
|
||||
init.style.visibility = 'hidden';
|
||||
|
||||
restore.style.display = 'flex';
|
||||
restore.style.display = 'grid';
|
||||
restore.style.visibility = 'visible';
|
||||
} else {
|
||||
init.style.display = 'flex';
|
||||
init.style.display = 'grid';
|
||||
init.style.visibility = 'visible';
|
||||
|
||||
restore.style.display = 'none';
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ class TextEditor extends EventEmitter {
|
|||
}
|
||||
break;
|
||||
case 'edit-image':
|
||||
this.caretPos = position(this.textEditor).pos;
|
||||
//this.caretPos = position(this.textEditor).pos;
|
||||
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
||||
break;
|
||||
case 'submit-save':
|
||||
|
|
|
|||
Loading…
Reference in a new issue