aboutsummaryrefslogtreecommitdiff
path: root/src/site/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/site/pages')
-rw-r--r--src/site/pages/dashboard/albums/index.vue267
-rw-r--r--src/site/pages/dashboard/index.vue7
-rw-r--r--src/site/pages/faq.vue80
-rw-r--r--src/site/pages/index.vue123
-rw-r--r--src/site/pages/login.vue22
-rw-r--r--src/site/pages/register.vue28
6 files changed, 240 insertions, 287 deletions
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 9333ffa..7dee517 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -1,125 +1,3 @@
-<style lang="scss" scoped>
- @import '~/assets/styles/_colors.scss';
- div.view-container {
- padding: 2rem;
- }
- div.album {
- display: flex;
- flex-wrap: wrap;
- margin-bottom: 10px;
-
- div.arrow-container {
- width: 2em;
- height: 64px;
- position: relative;
- cursor: pointer;
-
- i {
- border: 2px solid $defaultTextColor;
- border-right: 0;
- border-top: 0;
- display: block;
- height: 1em;
- position: absolute;
- transform: rotate(-135deg);
- transform-origin: center;
- width: 1em;
- z-index: 4;
- top: 22px;
-
- -webkit-transition: transform 0.1s linear;
- -moz-transition: transform 0.1s linear;
- -ms-transition: transform 0.1s linear;
- -o-transition: transform 0.1s linear;
- transition: transform 0.1s linear;
-
- &.active {
- transform: rotate(-45deg);
- }
- }
- }
- div.thumb {
- width: 64px;
- height: 64px;
- -webkit-box-shadow: $boxShadowLight;
- box-shadow: $boxShadowLight;
- }
-
- div.info {
- margin-left: 15px;
- h4 {
- font-size: 1.5rem;
- a {
- color: $defaultTextColor;
- font-weight: 400;
- &:hover { text-decoration: underline; }
- }
- }
- span { display: block; }
- span:nth-child(3) {
- font-size: 0.9rem;
- }
- }
-
- div.latest {
- flex-grow: 1;
- justify-content: flex-end;
- display: flex;
- margin-left: 15px;
-
- span.no-files {
- font-size: 1.5em;
- color: #b1b1b1;
- padding-top: 17px;
- }
-
- div.more {
- width: 64px;
- height: 64px;
- background: white;
- display: flex;
- align-items: center;
- padding: 10px;
- text-align: center;
- a {
- line-height: 1rem;
- color: $defaultTextColor;
- &:hover { text-decoration: underline; }
- }
- }
- }
-
- div.details {
- flex: 0 1 100%;
- padding-left: 2em;
- padding-top: 1em;
- min-height: 50px;
-
- .b-table {
- padding: 2em 0em;
-
- .table-wrapper {
- -webkit-box-shadow: $boxShadowLight;
- box-shadow: $boxShadowLight;
- }
- }
- }
- }
-
- div.column > h2.subtitle { padding-top: 1px; }
-</style>
-<style lang="scss">
- @import '~/assets/styles/_colors.scss';
-
- .b-table {
- .table-wrapper {
- -webkit-box-shadow: $boxShadowLight;
- box-shadow: $boxShadowLight;
- }
- }
-</style>
-
-
<template>
<section class="hero is-fullheight dashboard">
<div class="hero-body">
@@ -234,18 +112,20 @@
</div>
</template>
<template slot="footer">
- <div class="has-text-right">
- <button :class="{ 'is-loading': album.isCreatingLink }"
- class="button is-primary"
- style="float: left"
- @click="createLink(album)">Create new link</button>
- {{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created
- </div>
+ <div class="wrapper">
+ <div class="has-text-right">
+ <button :class="{ 'is-loading': album.isCreatingLink }"
+ class="button is-primary"
+ style="float: left"
+ @click="createLink(album)">Create new link</button>
+ {{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created
+ </div>
- <div class="has-text-left">
- <button class="button is-danger"
- style="float: right"
- @click="promptDeleteAlbum(album.id)">Delete album</button>
+ <div class="has-text-left">
+ <button class="button is-danger"
+ style="float: right"
+ @click="promptDeleteAlbum(album.id)">Delete album</button>
+ </div>
</div>
</template>
</b-table>
@@ -353,3 +233,124 @@ export default {
}
};
</script>
+<style lang="scss" scoped>
+ @import '~/assets/styles/_colors.scss';
+ div.view-container {
+ padding: 2rem;
+ }
+ div.album {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 10px;
+
+ div.arrow-container {
+ width: 2em;
+ height: 64px;
+ position: relative;
+ cursor: pointer;
+
+ i {
+ border: 2px solid $defaultTextColor;
+ border-right: 0;
+ border-top: 0;
+ display: block;
+ height: 1em;
+ position: absolute;
+ transform: rotate(-135deg);
+ transform-origin: center;
+ width: 1em;
+ z-index: 4;
+ top: 22px;
+
+ -webkit-transition: transform 0.1s linear;
+ -moz-transition: transform 0.1s linear;
+ -ms-transition: transform 0.1s linear;
+ -o-transition: transform 0.1s linear;
+ transition: transform 0.1s linear;
+
+ &.active {
+ transform: rotate(-45deg);
+ }
+ }
+ }
+ div.thumb {
+ width: 64px;
+ height: 64px;
+ -webkit-box-shadow: $boxShadowLight;
+ box-shadow: $boxShadowLight;
+ }
+
+ div.info {
+ margin-left: 15px;
+ text-align: left;
+ h4 {
+ font-size: 1.5rem;
+ a {
+ color: $defaultTextColor;
+ font-weight: 400;
+ &:hover { text-decoration: underline; }
+ }
+ }
+ span { display: block; }
+ span:nth-child(3) {
+ font-size: 0.9rem;
+ }
+ }
+
+ div.latest {
+ flex-grow: 1;
+ justify-content: flex-end;
+ display: flex;
+ margin-left: 15px;
+
+ span.no-files {
+ font-size: 1.5em;
+ color: #b1b1b1;
+ padding-top: 17px;
+ }
+
+ div.more {
+ width: 64px;
+ height: 64px;
+ background: white;
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ text-align: center;
+ a {
+ line-height: 1rem;
+ color: $defaultTextColor;
+ &:hover { text-decoration: underline; }
+ }
+ }
+ }
+
+ div.details {
+ flex: 0 1 100%;
+ padding-left: 2em;
+ padding-top: 1em;
+ min-height: 50px;
+
+ .b-table {
+ padding: 2em 0em;
+
+ .table-wrapper {
+ -webkit-box-shadow: $boxShadowLight;
+ box-shadow: $boxShadowLight;
+ }
+ }
+ }
+ }
+
+ div.column > h2.subtitle { padding-top: 1px; }
+</style>
+<style lang="scss">
+ @import '~/assets/styles/_colors.scss';
+
+ .b-table {
+ .table-wrapper {
+ -webkit-box-shadow: $boxShadowLight;
+ box-shadow: $boxShadowLight;
+ }
+ }
+</style>
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 9419fa1..84b0c45 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -1,7 +1,3 @@
-<style lang="scss" scoped>
- .albumsModal .columns .column { padding: .25rem; }
-</style>
-
<template>
<section class="hero is-fullheight dashboard">
<div class="hero-body">
@@ -103,3 +99,6 @@ export default {
}
};
</script>
+<style lang="scss" scoped>
+ .albumsModal .columns .column { padding: .25rem; }
+</style>
diff --git a/src/site/pages/faq.vue b/src/site/pages/faq.vue
index ed12fd5..bd93086 100644
--- a/src/site/pages/faq.vue
+++ b/src/site/pages/faq.vue
@@ -1,59 +1,45 @@
-<style lang="scss" scoped>
- @import '~/assets/styles/_colors.scss';
- article.message { background-color: #ffffff; }
-</style>
-
<template>
- <section id="login"
- class="hero is-fullheight">
- <Navbar />
- <div class="hero-body">
- <div class="container has-text-left">
- <h2 class="subtitle">What is lolisafe?</h2>
- <article class="message">
- <div class="message-body">
- lolisafe is an easy to use, open source and completely free file upload service. We accept your files, photos, documents, anything, and give you back a shareable link for you to send to others.
- </div>
- </article>
+ <div class="container has-text-left">
+ <h2 class="subtitle">What is lolisafe?</h2>
+ <article class="message">
+ <div class="message-body">
+ lolisafe is an easy to use, open source and completely free file upload service. We accept your files, photos, documents, anything, and give you back a shareable link for you to send to others.
+ </div>
+ </article>
- <h2 class="subtitle">Can I run my own lolisafe?</h2>
- <article class="message">
- <div class="message-body">
- Definitely. Head to <a target="_blank" href="https://github.com/WeebDev/lolisafe">our GitHub repo</a> and follow the instructions to clone, build and deploy it by yourself. It's super easy too!
- </div>
- </article>
+ <h2 class="subtitle">Can I run my own lolisafe?</h2>
+ <article class="message">
+ <div class="message-body">
+ Definitely. Head to <a target="_blank" href="https://github.com/WeebDev/lolisafe">our GitHub repo</a> and follow the instructions to clone, build and deploy it by yourself. It's super easy too!
+ </div>
+ </article>
- <h2 class="subtitle">How can I keep track of my uploads?</h2>
- <article class="message">
- <div class="message-body">
- Simply create a user on the site and every upload will be associated with your account, granting you access to your uploaded files through our dashboard.
- </div>
- </article>
+ <h2 class="subtitle">How can I keep track of my uploads?</h2>
+ <article class="message">
+ <div class="message-body">
+ Simply create a user on the site and every upload will be associated with your account, granting you access to your uploaded files through our dashboard.
+ </div>
+ </article>
- <h2 class="subtitle">What are albums?</h2>
- <article class="message">
- <div class="message-body">
- Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard and use them only with <a target="_blank" href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">our chrome extension</a> which will enable you to <strong>right click -&gt; send to lolisafe</strong> or to a desired album if you have any.
- </div>
- </article>
+ <h2 class="subtitle">What are albums?</h2>
+ <article class="message">
+ <div class="message-body">
+ Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard and use them only with <a target="_blank" href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">our chrome extension</a> which will enable you to <strong>right click -&gt; send to lolisafe</strong> or to a desired album if you have any.
+ </div>
+ </article>
- <h2 class="subtitle">Why should I use this?</h2>
- <article class="message">
- <div class="message-body">
- There are too many file upload services out there, and a lot of them rely on the foundations of pomf which is ancient. In a desperate and unsuccessful attempt of finding a good file uploader that's easily extendable, lolisafe was born. We give you control over your files, we give you a way to sort your uploads into albums for ease of access and we give you an api to use with ShareX or any other thing that let's you make POST requests.
- </div>
- </article>
+ <h2 class="subtitle">Why should I use this?</h2>
+ <article class="message">
+ <div class="message-body">
+ There are too many file upload services out there, and a lot of them rely on the foundations of pomf which is ancient. In a desperate and unsuccessful attempt of finding a good file uploader that's easily extendable, lolisafe was born. We give you control over your files, we give you a way to sort your uploads into albums for ease of access and we give you an api to use with ShareX or any other thing that let's you make POST requests.
</div>
- </div>
- </section>
+ </article>
+ </div>
</template>
<script>
-import Navbar from '~/components/navbar/Navbar.vue';
-
export default {
name: 'Faq',
- components: { Navbar },
data() {
return {};
},
@@ -62,3 +48,7 @@ export default {
}
};
</script>
+<style lang="scss" scoped>
+ @import '~/assets/styles/_colors.scss';
+ article.message { background-color: #ffffff; }
+</style>
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index fe54340..0617098 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -1,85 +1,32 @@
-<style lang="scss" scoped>
- @import "~/assets/styles/_colors.scss";
- div.home {
- color: $textColor;
- .columns {
- .column {
- &.centered {
- display: flex;
- align-items: center;
- }
- }
- }
-
- h4 {
- color: $textColorHighlight;
- margin-bottom: 1em;
- }
-
- p {
- font-size: 1.25em;
- font-weight: 600;
- line-height: 1.5;
-
- strong {
- color: $textColorHighlight;
- }
- }
-
- div.background {
- position: fixed;
- top: 0;
- left: 0;
- background: no-repeat scroll 50% 50%;
- background-size: cover;
- background-image: url('~assets/images/background.jpg');
- z-index: -1;
- height: 100vh;
- width: 100%;
- pointer-events: none;
- }
- }
-</style>
-
<template>
- <div class="home">
- <section class="hero is-fullheight has-text-centered">
- <Navbar :isWhite="true" />
- <div class="hero-body">
- <div class="container">
- <div class="columns">
- <div class="column is-3 is-offset-2">
- <div class="logo">
- <Logo />
- </div>
- </div>
- <div class="column is-5 centered">
- <div class="content-wrapper">
- <h4>Blazing fast file uploader. For real.</h4>
- <p>
- A <strong>modern</strong> and <strong>self-hosted</strong> file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.
- </p>
- </div>
- </div>
+ <div>
+ <div class="container">
+ <div class="columns">
+ <div class="column is-3 is-offset-2">
+ <div class="logo">
+ <Logo />
</div>
- <div class="spacer mt7" />
- <Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
- <div v-else>
- This site has disabled public uploads. You need an account.
+ </div>
+ <div class="column is-5 centered">
+ <div class="content-wrapper">
+ <h4>Blazing fast file uploader. <br>For real.</h4>
+ <p>
+ A <strong>modern</strong> and <strong>self-hosted</strong> file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.
+ </p>
</div>
</div>
</div>
- <div class="hero-foot">
- <div class="container">
- <Links />
- </div>
+ </div>
+ <div class="container">
+ <Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
+ <div v-else>
+ This site has disabled public uploads. You need an account.
</div>
- </section>
+ <Links />
+ </div>
</div>
</template>
-
<script>
-import Navbar from '~/components/navbar/Navbar.vue';
import Logo from '~/components/logo/Logo.vue';
import Uploader from '~/components/uploader/Uploader.vue';
import Links from '~/components/home/links/Links.vue';
@@ -87,7 +34,6 @@ import Links from '~/components/home/links/Links.vue';
export default {
name: 'Home',
components: {
- Navbar,
Logo,
Uploader,
Links
@@ -105,3 +51,32 @@ export default {
}
};
</script>
+<style lang="scss" scoped>
+ @import "~/assets/styles/_colors.scss";
+ .container {
+ color: $textColor;
+ .columns {
+ .column {
+ &.centered {
+ display: flex;
+ align-items: center;
+ }
+ }
+ }
+
+ h4 {
+ color: $textColorHighlight;
+ margin-bottom: 1em;
+ }
+
+ p {
+ font-size: 1.25em;
+ font-weight: 600;
+ line-height: 1.5;
+
+ strong {
+ color: $textColorHighlight;
+ }
+ }
+ }
+</style>
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index d4f376f..cb00a9c 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -1,21 +1,15 @@
-<style lang="scss" scoped>
- @import '~/assets/styles/_colors.scss';
-</style>
-
<template>
- <section id="login"
- class="hero is-fullheight">
- <Navbar/>
+ <section class="hero is-fullheight is-login">
<div class="hero-body">
<div class="container">
<h1 class="title">
Dashboard Access
</h1>
- <h2 class="subtitle">
- Login or register
+ <h2 class="subtitle mb5">
+ Login to access your files and folders
</h2>
<div class="columns">
- <div class="column is-4">
+ <div class="column is-4 is-offset-4">
<b-field>
<b-input v-model="username"
type="text"
@@ -35,9 +29,8 @@
to="/register"
class="is-text">Don't have an account?</router-link>
<span v-else>Registration is closed at the moment</span>
- <a id="loginBtn"
- class="button"
- @click="login">Log in</a>
+ <button class="button is-primary big ml1"
+ @click="login">login</button>
</p>
</div>
</div>
@@ -72,11 +65,8 @@
</template>
<script>
-import Navbar from '~/components/navbar/Navbar.vue';
-
export default {
name: 'Login',
- components: { Navbar },
data() {
return {
username: null,
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index b780ec2..2f155c0 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -1,21 +1,15 @@
-<style lang="scss" scoped>
- @import '~/assets/styles/_colors.scss';
-</style>
-
<template>
- <section id="register"
- class="hero is-fullheight">
- <Navbar />
+ <section class="hero is-fullheight is-register">
<div class="hero-body">
<div class="container">
<h1 class="title">
Dashboard Access
</h1>
- <h2 class="subtitle">
+ <h2 class="subtitle mb5">
Register for a new account
</h2>
<div class="columns">
- <div class="column is-4">
+ <div class="column is-4 is-offset-4">
<b-field>
<b-input v-model="username"
type="text"
@@ -38,9 +32,9 @@
<p class="control has-addons is-pulled-right">
<router-link to="/login"
class="is-text">Already have an account?</router-link>
- <a :class="{ 'is-loading': isLoading }"
- class="button is-themed"
- @click="register">Register</a>
+ <button class="button is-primary big ml1"
+ :disabled="isLoading"
+ @click="register">Register</button>
</p>
</div>
</div>
@@ -50,11 +44,8 @@
</template>
<script>
-import Navbar from '~/components/navbar/Navbar.vue';
-
export default {
name: 'Register',
- components: { Navbar },
data() {
return {
username: null,
@@ -74,6 +65,13 @@ export default {
methods: {
async register() {
if (this.isLoading) return;
+ if (!this.username || !this.password || !this.rePassword) {
+ this.$store.dispatch('alert', {
+ text: 'Please fill all fields before attempting to register.',
+ error: true
+ });
+ return;
+ }
if (this.password !== this.rePassword) {
this.$store.dispatch('alert', {
text: 'Passwords don\'t match',
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-20 23:12:28 +0000