mirror of
https://github.com/mollersuite/monofile.git
synced 2024-11-22 05:46:26 -08:00
this isn't spaghetti code this is an abomination
This commit is contained in:
parent
e9766ec5b9
commit
3271fab6d8
|
|
@ -138,7 +138,7 @@ authRoutes.post("/change_password", (req,res) => {
|
|||
return
|
||||
}
|
||||
|
||||
if (body.password.length < 8) {
|
||||
if (typeof body.password != "string" || body.password.length < 8) {
|
||||
ServeError(res,400,"password must be 8 characters or longer")
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
@use "pulldown/help";
|
||||
@use "pulldown/accounts";
|
||||
@use "pulldown/files";
|
||||
@use "pulldown/modals";
|
||||
|
||||
#overlay {
|
||||
#overlay, .modalContainer {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
top:0px;
|
||||
opacity:0.25;
|
||||
border:none;
|
||||
outline:none;
|
||||
background-color:#AAAAAA;
|
||||
background-color:rgba(170, 170, 170, 0.25);
|
||||
|
||||
z-index: 1000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,79 +161,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accountOptions {
|
||||
|
||||
button {
|
||||
position:relative;
|
||||
width:100%;
|
||||
cursor:pointer;
|
||||
height:50px;
|
||||
background-color: #191919;
|
||||
border:none;
|
||||
border-bottom:1px solid #AAAAAA;
|
||||
transition-duration:150ms;
|
||||
|
||||
img {
|
||||
position:absolute;
|
||||
left:13px;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
}
|
||||
|
||||
p {
|
||||
text-align:left;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50px;
|
||||
color:#DDDDDD;
|
||||
transform:translateY(-50%);
|
||||
font-size:14px;
|
||||
|
||||
span {
|
||||
color:#777777;
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition-duration:150ms;
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
@media screen and (max-width:500px) {
|
||||
height:70px;
|
||||
p {
|
||||
font-size:16px;
|
||||
left:70px;
|
||||
|
||||
span {
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width:30px;
|
||||
height:30px;
|
||||
left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.category {
|
||||
border-bottom: 1px solid #AAAAAA;
|
||||
|
||||
p {
|
||||
color: #AAAAAA;
|
||||
font-size: 14px;
|
||||
margin: 10px 0px 3px 0px;
|
||||
|
||||
@media screen and (max-width:500px) {
|
||||
font-size:16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
99
src/style/app/pulldown/modals.scss
Normal file
99
src/style/app/pulldown/modals.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
.optPicker {
|
||||
|
||||
button, .inp {
|
||||
position:relative;
|
||||
width:100%;
|
||||
height:50px;
|
||||
background-color: #191919;
|
||||
border:none;
|
||||
border-bottom:1px solid #AAAAAA;
|
||||
transition-duration:150ms;
|
||||
|
||||
img {
|
||||
position:absolute;
|
||||
left:13px;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
}
|
||||
|
||||
p,input {
|
||||
text-align:left;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50px;
|
||||
color:#DDDDDD;
|
||||
transform:translateY(-50%);
|
||||
font-size:14px;
|
||||
background-color:#00000000;
|
||||
border:none;
|
||||
|
||||
span {
|
||||
color:#777777;
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height:100%;
|
||||
width:calc(100% - 50px);
|
||||
outline:none; /* bad idea but i don't even care anymore */
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:500px) {
|
||||
height:70px;
|
||||
p,input {
|
||||
font-size:16px;
|
||||
left:70px;
|
||||
|
||||
span {
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width:calc( 100% - 70px );
|
||||
}
|
||||
|
||||
img {
|
||||
width:30px;
|
||||
height:30px;
|
||||
left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
cursor:pointer;
|
||||
|
||||
&:hover {
|
||||
transition-duration:150ms;
|
||||
background-color: #252525;
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
border-bottom: 1px solid #AAAAAA;
|
||||
|
||||
p {
|
||||
color: #AAAAAA;
|
||||
font-size: 14px;
|
||||
margin: 10px 0px 3px 0px;
|
||||
|
||||
@media screen and (max-width:500px) {
|
||||
font-size:16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
position:absolute;
|
||||
background-color:#191919;
|
||||
width:100%;
|
||||
transform:translateY(-100%);
|
||||
top:100%;
|
||||
left:0%;
|
||||
}
|
||||
77
src/svelte/elem/prompts/OptionPicker.svelte
Normal file
77
src/svelte/elem/prompts/OptionPicker.svelte
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script>
|
||||
import { fade, slide } from "svelte/transition";
|
||||
|
||||
|
||||
let activeModal;
|
||||
let modalResults;
|
||||
|
||||
/**
|
||||
*
|
||||
* @param mdl {name:string,icon:string,description:string,id:string}[]
|
||||
* @returns Promise
|
||||
*/
|
||||
export function picker(title,mdl) {
|
||||
if (activeModal) forceCancel()
|
||||
|
||||
return new Promise((resolve,reject) => {
|
||||
activeModal = {
|
||||
resolve,
|
||||
title,
|
||||
modal:mdl
|
||||
}
|
||||
|
||||
modalResults = {
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function forceCancel() {
|
||||
if (activeModal && activeModal.resolve) {
|
||||
activeModal.resolve(null)
|
||||
}
|
||||
activeModal = null
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if activeModal}
|
||||
<button class="modalContainer" on:click|self={forceCancel} transition:fade={{duration:200}}>
|
||||
<div class="modal" transition:slide={{duration:200}}>
|
||||
|
||||
<div class="optPicker">
|
||||
|
||||
<div class="category">
|
||||
<p>{activeModal.title}</p>
|
||||
</div>
|
||||
|
||||
{#each activeModal.modal as option (option.id)}
|
||||
{#if option.inputSettings}
|
||||
<div class="inp">
|
||||
<img src={option.icon} alt={option.id}>
|
||||
|
||||
<!-- i have to do this stupidness because of svelte but -->
|
||||
<!-- its reason for blocking this is pretty good sooooo -->
|
||||
|
||||
{#if option.inputSettings.password}
|
||||
<input placeholder={option.name} type="password" bind:value={modalResults[option.id]}>
|
||||
{:else}
|
||||
<input placeholder={option.name} bind:value={modalResults[option.id]}>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<button on:click={() => {activeModal.resolve({...modalResults,selected:option.id});activeModal=null;modalResults=null;}}>
|
||||
<img src={option.icon} alt={option.id}>
|
||||
<p>{option.name}<span><br />{option.description}</span></p>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<button on:click={forceCancel}>
|
||||
<img src="/static/assets/icons/delete.svg" alt="cancel">
|
||||
<p>Cancel</p>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
31
src/svelte/elem/prompts/passwordChange.js
Normal file
31
src/svelte/elem/prompts/passwordChange.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
export function pwdChng(optPicker) {
|
||||
optPicker.picker("Change password",[
|
||||
{
|
||||
name: "New password",
|
||||
icon: "/static/assets/icons/change_password.svg",
|
||||
id: "password",
|
||||
inputSettings: {
|
||||
password: true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "OK",
|
||||
icon: "/static/assets/icons/update.svg",
|
||||
description: "This will log you out of all sessions",
|
||||
id: true
|
||||
}
|
||||
]).then((exp) => {
|
||||
if (exp && exp.selected) {
|
||||
fetch(`/auth/change_password`,{method:"POST", body:JSON.stringify({
|
||||
password:exp.password
|
||||
})}).then((response) => {
|
||||
|
||||
if (response.status != 200) {
|
||||
optPicker.picker(`${response.status} ${response.statusText}`,[])
|
||||
}
|
||||
|
||||
fetchAccountData()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
import { circIn,circOut } from "svelte/easing"
|
||||
import { account, fetchAccountData, serverStats } from "../stores.mjs";
|
||||
import { fade } from "svelte/transition";
|
||||
import OptionPicker from "../prompts/OptionPicker.svelte";
|
||||
import { pwdChng } from "../prompts/passwordChange";
|
||||
|
||||
let targetAction
|
||||
let inProgress
|
||||
|
|
@ -11,6 +13,8 @@
|
|||
|
||||
let pwErr
|
||||
|
||||
let optPicker;
|
||||
|
||||
// lazy
|
||||
|
||||
let username
|
||||
|
|
@ -59,6 +63,7 @@
|
|||
</script>
|
||||
|
||||
<Pulldown name="accounts">
|
||||
<OptionPicker bind:this={optPicker} />
|
||||
{#if Object.keys($account).length == 0}
|
||||
|
||||
<div class="notLoggedIn" transition:fade={{duration:200}}>
|
||||
|
|
@ -108,7 +113,7 @@
|
|||
Hey there, <span class="monospace">@{$account.username}</span>
|
||||
</h1>
|
||||
|
||||
<div class="accountOptions">
|
||||
<div class="optPicker">
|
||||
|
||||
<div class="category">
|
||||
<p>Account</p>
|
||||
|
|
@ -119,7 +124,7 @@
|
|||
<p>Change username</p>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<button on:click={() => pwdChng(optPicker)}>
|
||||
<img src="/static/assets/icons/change_password.svg" alt="change password">
|
||||
<p>Change password<span><br />You will be logged out of all sessions</span></p>
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue