projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

Responsive Pt 3 - Pass Reset, Site Create/Restore

Browse source 
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 2023-03-31 16:20:11 -07:00
parent 5adf196783
commit e7fd91c152
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
11 changed files with 153 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
brain/views/dash/forms/init-backup.twig Normal file
View 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
View 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
View 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>

50
brain/views/dash/init.twig
View file

@ -5,44 +5,20 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}
<div id="dash-index"> <article role="site-restore">
<div id="dash-index-wrapper"> <section role="restore-fresh">
<div id="dash-init" class="dash-init"> {% apply spaceless %}
<form id="init-form" method="POST"> {{ include("dash/forms/init-fresh.twig") }}
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/> {% endapply %}
<input type="text" name="new_member_handle" id="new_member_handle" placeholder="handle"/> </section>
<input type="text" name="new_member_email" id="new_member_email" placeholder="email"/> <section role="restore-backup">
<input type="text" name="new_member_pass" id="new_member_pass" placeholder="password"/> {% apply spaceless %}
<input type="text" name="new_member_pass2" id="new_member_pass2" placeholder="password confirm"/> {{ include("dash/forms/init-backup.twig") }}
<input type="text" name="new_member_title" id="new_member_title" placeholder="title"/> {% endapply %}
<button id="init-blog" data-action='blog-init' type='submit'>SET UP YOUR SITE</button> </section>
<br/><br/> </article>
<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>
{% endblock %} {% endblock %}

2
brain/views/dash/page-edit.twig
View file

@ -197,7 +197,7 @@
{{ include("dash/partials/editor.twig") }} {{ include("dash/partials/editor.twig") }}
{% endapply %} {% endapply %}
<div role="edit-post-wrapper"> <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"> <pre id="highlight">
<code id="highlight-content" class="language-md"></code> <code id="highlight-content" class="language-md"></code>
</pre> </pre>

33
brain/views/dash/reset-password.twig
View file

@ -5,33 +5,14 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}
<div id="dash-index"> <section role="password-reset">
<div id="dash-index-wrapper"> {% apply spaceless %}
<div id="dash-login"> {{ include("dash/forms/reset.twig") }}
<div id="dash-reset" class="dash-reset"> {% endapply %}
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
<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"> </section>
<input type="password" id="new_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required"> {% endblock %}
<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>
{% endblock %}

2
public/assets/css/dash/forms.css
View file

@ -50,5 +50,5 @@ select {
::placeholder { ::placeholder {
font: 25px var(--base-type); font: 25px var(--base-type);
color: var(--white); color: var(--black);
} }

69
public/assets/css/dash/init.css
View file

@ -1,6 +1,9 @@
/* LOGIN */ /* LOGIN */
section[role="login"] { section[role="login"],
section[role="password-reset"],
section[role="restore-fresh"],
section[role="restore-backup"] {
margin: 15% auto; margin: 15% auto;
padding: 10px; padding: 10px;
width: 500px; width: 500px;
@ -8,6 +11,13 @@ section[role="login"] {
display: grid; display: grid;
grid-template-columns: 28.5% 1fr; grid-template-columns: 28.5% 1fr;
gap: 10px; gap: 10px;
visibility: visible;
}
section[role="restore-backup"] {
display: none;
visibility: hidden;
color: var(--white);
} }
section[role="login"] form input { section[role="login"] form input {
@ -35,20 +45,69 @@ section[role="login"] form a {
font-weight: 600; 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) { @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%; width: 97%;
} }
} }
@media only screen and (max-width: 375px) { @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; 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; width: 50px;
} }
} }

12
public/assets/scripts/Start.js
View file

@ -2866,7 +2866,7 @@ class $e6c02983873e6cdf$var$TextEditor extends (0, $68b475f2a0292491$export$2e2b
} }
break; break;
case "edit-image": case "edit-image":
this.caretPos = (0, $bba420c8ea874359$export$5880b8b5730aff45)(this.textEditor).pos; //this.caretPos = position(this.textEditor).pos;
this.emitEvent($0d6abf40542266b3$export$80082ca64f03d0e9); this.emitEvent($0d6abf40542266b3$export$80082ca64f03d0e9);
break; break;
case "submit-save": case "submit-save":
@ -7640,7 +7640,7 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 {
// methods // methods
//-------------------------- //--------------------------
start() { start() {
if (document.getElementById("login") || document.getElementById("dash-init")) { if (document.getElementById("login") || document.querySelector('[role="site-restore"]')) {
var options = document.getElementsByClassName("init-option"); var options = document.getElementsByClassName("init-option");
for(let index = 0; index < options.length; index++)options[index].addEventListener("click", (e)=>this.handleOptions(e)); 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)); if (document.getElementById("login")) document.getElementById("login-btn").addEventListener("click", (e)=>this.handleLogin(e));
@ -7771,15 +7771,15 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 {
handleOptions(e) { handleOptions(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
let init = document.getElementById("dash-init"); let init = document.querySelector('[role="restore-fresh"]');
let restore = document.getElementById("dash-restore"); let restore = document.querySelector('[role="restore-backup"]');
if (e.target.id === "init-switch-restore") { if (e.target.id === "init-switch-restore") {
init.style.display = "none"; init.style.display = "none";
init.style.visibility = "hidden"; init.style.visibility = "hidden";
restore.style.display = "flex"; restore.style.display = "grid";
restore.style.visibility = "visible"; restore.style.visibility = "visible";
} else { } else {
init.style.display = "flex"; init.style.display = "grid";
init.style.visibility = "visible"; init.style.visibility = "visible";
restore.style.display = "none"; restore.style.display = "none";
restore.style.visibility = "hidden"; restore.style.visibility = "hidden";

13
src/com/Base.js
View file

@ -20,7 +20,10 @@ export default class Base {
// methods // methods
//-------------------------- //--------------------------
start() { start() {
if (document.getElementById('login') || document.getElementById('dash-init')) { if (
document.getElementById('login') ||
document.querySelector('[role="site-restore"]')
) {
var options = document.getElementsByClassName('init-option'); var options = document.getElementsByClassName('init-option');
for (let index = 0; index < options.length; index++) { for (let index = 0; index < options.length; index++) {
options[index].addEventListener('click', e => this.handleOptions(e)); options[index].addEventListener('click', e => this.handleOptions(e));
@ -187,16 +190,16 @@ export default class Base {
handleOptions(e) { handleOptions(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
let init = document.getElementById('dash-init'); let init = document.querySelector('[role="restore-fresh"]');
let restore = document.getElementById('dash-restore'); let restore = document.querySelector('[role="restore-backup"]');
if (e.target.id === 'init-switch-restore') { if (e.target.id === 'init-switch-restore') {
init.style.display = 'none'; init.style.display = 'none';
init.style.visibility = 'hidden'; init.style.visibility = 'hidden';
restore.style.display = 'flex'; restore.style.display = 'grid';
restore.style.visibility = 'visible'; restore.style.visibility = 'visible';
} else { } else {
init.style.display = 'flex'; init.style.display = 'grid';
init.style.visibility = 'visible'; init.style.visibility = 'visible';
restore.style.display = 'none'; restore.style.display = 'none';

2
src/com/ui/TextEditor.js
View file

@ -170,7 +170,7 @@ class TextEditor extends EventEmitter {
} }
break; break;
case 'edit-image': case 'edit-image':
this.caretPos = position(this.textEditor).pos; //this.caretPos = position(this.textEditor).pos;
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE); this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
break; break;
case 'submit-save': case 'submit-save':