Merge pull request #30 from Facinorous-420/v1.1.1

> **Warning**
> V1.x.x will no longer have any more updates besides hot fixes beyond this point. All work will be focused on the v2.0.0 React rewrite!

## Update Info

🍆 **DICK** v1.1.1 🍆

🔀 **UPDATING**

Updating your instance should be easy, unless you already edited the
code base, at that point your on your own.

If you have a direct clone of the old master  of v1.1.0 release, then all you need to do is
1. Browse to your DICK folder
2. Run `git pull` to pull new changes
3. Run `npm i` to install new dependencies, if any
4. Delete the `dist` folder
5. Start DICK using `npm start` (or use the docker compose run command)
6. Enjoy

✏️ **CHANGELOG**

```diff
ADDITIONS
+ Docker
  > Added Dockerfile and docker-compose so people can run DICK using Docker now

REMOVALS
- Removed user count from user list in admin page
  > Unneeded information
- Removed hover effect when hovering over stat cards on user and admin pages
  > Unneeded as they do nothing (such as link somewhere)
```
```fix
CHANGES
= Codebase cleanup
= Optimized some images
= Cleaned up start up message in console
```

## Issues Resolved / Fixes In This Release
None
master v1.1.1
Facinorous 2 years ago committed by GitHub
commit 02deef1123
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,24 @@
FROM archlinux:latest
# Update the repositories
RUN pacman -Sy
# Install nodejs
RUN pacman -S --noconfirm git nodejs npm
# Generate directories and set up project
RUN mkdir /app && mkdir /app/dick && mkdir /app/ass
COPY . /app/dick
RUN cd /app/dick
#RUN nvm install node
RUN npm install -g npm@latest
RUN npm --version
RUN node --version
WORKDIR /app/dick
RUN npm i
# Expose port
EXPOSE 3000

@ -63,7 +63,7 @@ Dick was created to be an easy to use front end for <a href="https://github.com/
7. hCaptcha on login and register pages <a href="https://www.hcaptcha.com/">You can learn more here</a>.
**Planned Feautres:**
1. There are a lot of good ideas out there, to keep track of what is currently planned see <a href="https://github.com/Facinorous-420/dick/projects/2">the v1.1 project board</a>
1. There are a lot of good ideas out there, to keep track of what is currently planned see <a href="https://github.com/users/Facinorous-420/projects/2">the project board</a>
The front end is built using <a href="https://tailwindcss.com">Tailwind CSS</a>, <a href="https://lucide.dev/">Lucide Icons,</a> as well as hand crafted components all templated using <a href="https://ejs.co/">EJS</a>. I plan to eventually rewrite this in React.
@ -83,11 +83,10 @@ Inside this file, is some basic configuration you can change for your set up. Th
| Variable | Description |
| --------------------------------------------- | :---------------------: |
| `DICK_SUBMODULE = false` | Put this to true if you wish to run DICK as an ASS submoduke, false if seperate |
| `ASS_LOCATION = "../ass"` | If running DICK seperately, DICK will use this to find your ASS install folder |
| `ASS_SECURE = false` | Put this to true if you are running ASS behind a domain with HTTPS,. false if HTTP |
| `ASSDOMAIN = "127.0.0.1:40115"` | Put this to your ASS domain. Can be an ip, or domain for example `https://cdn.mydomain.com` |
| `PORT = "3000"` | Change this number to the port you wish DICK to run on |
| `ASS_LOCATION = "../ass"` | If running DICK seperately, DICK will use this to find your ASS install folder. Leave this alone if using Docker. |
| `PORT = "3000"` | Change this number to the port you wish DICK to run on. Leave this alone if using Docker. |
> **Note**
> If you want to set a user as admin, currently you must do it via the database file generated at `/src/database/users.json` and change the users role from `user` to `admin`. By default, the first user to login to your dick instance will be admin.
@ -114,7 +113,21 @@ Inside this file, is some basic configuration you can change for your set up. Th
#### Production
<details>
<summary>
<sub>Open to view the production set up steps</sub>
<sub>Open to view the docker production set up steps</sub>
</summary><br/>
1. Create a folder, call it whatever you wish
2. Install, and run ASS https://github.com/tycrek/ass#installation (This will create an `ass` folder)
3. Go back into the folder you created and clone this repo `git clone https://github.com/Facinorous-420/dick.git`
4. Go into the newly created `dick` folder `cd dick`
5. Go into `/src` and copy `constants.ts.example` to `constants.ts` and edit it as needed
6. Go back to the root of `dick` and edit the `docker-compose.yml` to match your specific needs by changing the port, and voluime location where your ass files are on your system.
7. Run the docker compose file `docker-compose up -d` this will create a new container named `dick`.
</details>
<details>
<summary>
<sub>Open to view the source production set up steps</sub>
</summary><br/>
1. Create a folder, call it whatever you wish
@ -124,7 +137,6 @@ Inside this file, is some basic configuration you can change for your set up. Th
5. Go into `/src` and copy `constants.ts.example` to `constants.ts` and edit it as needed
6. Go back to the root of `dick` and install the dependancies for the frontend, `npm i`
7. Run `npm start` to compile the code base and run DICK
</details>
When you approach the login screen, the login information is your ASS username, and the secret key generated by ASS is your password.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 145 KiB

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

@ -0,0 +1,14 @@
version: "2.1"
services:
dick:
container_name: dick
build:
context: ./
dockerfile: Dockerfile
command: npm start
volumes:
- ./src/constants.ts:/app/dick/src/constants.ts # DICK constants file
- ../ass:/app/ass # Path to your ASS install
ports:
- 3000:3000
restart: unless-stopped

@ -1,6 +1,6 @@
{
"name": "dick",
"version": "1.1.0",
"version": "1.1.1",
"description": "A frontend for ASS",
"main": "./dist/dashboard.js",
"repository": {

@ -65,9 +65,9 @@ app.use(async (req, res) => await Pager.render(res, req, TEMPLATE.ERRORS[404]))
// Run DICK
app.listen(app.get("port"), () => {
console.log(
" Dick is running at http://localhost:%d in %s mode",
"[DICK] Listening on Port: %d\n[DICK] Running in: %s mode",
app.get("port"),
app.get("env")
)
console.log(" Press CTRL-C to stop\n")
console.log("[DICK] Press CTRL+C to stop")
})

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 61 KiB

@ -2,7 +2,7 @@
<!-- Modal Outscreen -->
<div class="buttonModal absolute inset-0 bg-gradient-to-tr opacity-90 from-gray-700 via-gray-900 to-gray-700">
</div>
<!-- Modal Outscreen -->
<!-- End Modal Outscreen -->
<form action="/admin/add/user" method="POST"
class="rounded-2xl flex-col bg-tertiary flex shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50">
@ -37,24 +37,19 @@
<div class="grid grid-cols-2 gap-5 text-sm md:text-base">
<div class="md:col-span-1 col-span-2">
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Username
</div>
<div class="relative w-max">Username</div>
</label>
<input
class="form-input block w-full mt-1 rounded text-sm text-color-tertiary border-form bg-forminput transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-formaccent focus:text-color-accent"
placeholder="Imposter" name="username" type="text" />
name="username" type="text" />
</div>
<div class="md:col-span-1 col-span-2">
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Secret Key
</div>
<div class="relative w-max">Password</div>
</label>
<input
class="form-input block w-full mt-1 rounded text-sm text-color-tertiary border-form bg-forminput transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-formaccent focus:text-color-accent"
placeholder="***************" name="password" type="password" />
name="password" type="password" />
</div>
</div>
</div>
@ -64,9 +59,7 @@
<div class="p-6">
<div class="flex items-center justify-end flex-wrap -mb-3">
<button type="submit"
class="bg-accentsecondary w-auto hover:bg-accent rounded-md px-5 py-2 text-color-primary">
Add User
</button>
class="bg-accentsecondary w-auto hover:bg-accent rounded-md px-5 py-2 text-color-primary">Create User</button>
</div>
<div>
<!-- End Modal Footer -->

@ -11,7 +11,7 @@
<div class="flex flex-wrap lg:flex-row gap-6 pb-5">
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="users" class="text-color-accent mr-2"></i>
</div>
@ -25,7 +25,7 @@
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="files" class="text-color-accent mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
@ -46,7 +46,7 @@
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover ">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="image" class="text-blue-400 mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
@ -63,7 +63,7 @@
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="video" class="text-yellow-400 mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
@ -80,7 +80,7 @@
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="headphones" class="text-orange-400 mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
@ -97,7 +97,7 @@
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="ghost" class="text-green-400 mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">

@ -4,18 +4,14 @@
<div class="flex flex-col lg:gap-8 gap-3 ">
<% if(success_alert_message !='' ){ %>
<div class="flex-1 bg-tertiary p-6 rounded-md">
<p class="text-green-600 pb-2 text-center">
<%= success_alert_message %>
</p>
<div class="p-2 mb-4 text-sm text-green-600 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
<span class="font-medium">Success!</span> <%= success_alert_message %>.
</div>
<% } %>
<% if(error_message !='' ){ %>
<div class="flex-1 bg-tertiary p-6 rounded-md">
<p class="text-red-600 pb-2 text-center">
<%= error_message %>
</p>
<div class="p-2 mb-4 text-sm text-red-600 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
<span class="font-medium">Error!</span> <%= error_message %>.
</div>
<% } %>

@ -7,7 +7,7 @@
<button type="button"
class="buttonModal rounded-md bg-accentsecondary py-2 px-2.5 font-medium text-color-primary hover:bg-accent">
Add New user
Create User
</button>
<!--
<button
@ -19,14 +19,6 @@
</div>
<!-- End Add User -->
<!-- Total User -->
<div class="flex-1 lg:order-2 order-3 lg:basis-auto basis-full">
<div class="text-sm text-color-secondary lg:text-center text-right">
Showing <%= totalUsers %> users
</div>
</div>
<!-- End Total User -->
<!-- Search User -->
<!--
<div
@ -48,6 +40,7 @@
-->
<!-- End Search user -->
</div>
<div class="mt-8">
<!-- Table User -->
<table class="table-fixed w-full md:text-base text-sm text-black">
@ -90,13 +83,9 @@
</div>
</td>
<!--
<td class="p-4 bg-tertiary text-color-secondary text-center">66</td>
<td class="p-4 bg-tertiary text-color-secondary text-center ">
66
</td>
<td class="p-4 bg-tertiary text-color-secondary text-center ">
<div class="sm:border-r border-slate-700 border-r-0">
65GB
</div>
<div class="sm:border-r border-slate-700 border-r-0">65GB</div>
</td>
-->
<!--
@ -104,9 +93,7 @@
<div class="flex justify-center">
<button class="text-red-500 flex sm:flex-row flex-col justify-center items-center space-x-1 ">
<i data-lucide="trash-2" class="text-color-red"></i>
<div>
Delete
</div>
<div>Delete</div>
</button>
</div>
</td>

@ -10,27 +10,27 @@
</p>
<% if(success_alert_message !='' ){ %>
<p class="text-green-600 pb-2 text-center">
<%= success_alert_message %>
</p>
<div class="p-2 mb-4 text-sm text-green-600 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
<span class="font-medium">Success!</span> <%= success_alert_message %>.
</div>
<% } %>
<% if(error_message !='' ){ %>
<p class="text-red-600 pb-2 text-center">
<%= error_message %>
</p>
<div class="p-2 mb-4 text-sm text-red-600 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
<span class="font-medium">Error!</span> <%= error_message %>.
</div>
<% } %>
<form class="flex flex-col" method="post" action="/auth/login">
<label class="block text-sm">
<span class="text-color-tertiary">Username</span>
<input class="form-input block w-full mt-1 rounded text-sm text-color-tertiary border-form bg-forminput transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-formaccent focus:text-color-accent"
placeholder="Imposter" name="username" type="text" />
name="username" type="text" />
</label>
<label class="block mt-4 text-sm">
<span class="text-color-tertiary">Secret Key</span>
<span class="text-color-tertiary">Password</span>
<input class="form-input block w-full mt-1 rounded text-sm text-color-tertiary border-form bg-forminput transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-formaccent focus:text-color-accent"
placeholder="***************" name="password" type="password" />
name="password" type="password" />
</label>
<% if(settingsDatabase.captchaEnabled) { %>
<div class="h-captcha mt-4" data-theme="dark" data-sitekey=<%= settingsDatabase.captchaSiteID %>></div>

@ -10,15 +10,15 @@
</p>
<% if(success_alert_message !='' ){ %>
<p class="text-green-600 pb-2 text-center">
<%= success_alert_message %>
</p>
<div class="p-2 mb-4 text-sm text-green-600 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
<span class="font-medium">Success!</span> <%= success_alert_message %>.
</div>
<% } %>
<% if(error_message !='' ){ %>
<p class="text-red-600 pb-2 text-center">
<%= error_message %>
</p>
<div class="p-2 mb-4 text-sm text-red-600 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
<span class="font-medium">Error!</span> <%= error_message %>.
</div>
<% } %>
<form class="flex flex-col" method="post" action="/auth/register">

@ -1,6 +1,4 @@
<span class="text-lg font-semibold text-color-secondary md:text-xl lg:text-xl">
Your Profile
</span>
<span class="text-lg font-semibold text-color-secondary md:text-xl lg:text-xl">Your Profile</span>
<div class="bg-tertiary mt-6 h-auto w-full rounded-lg">
<div class="flex w-full flex-row flex-wrap items-center space-x-3 border-b border-purple-400/25 py-3 px-6 md:space-x-6 md:px-5 md:py-5 lg:space-x-6 lg:px-5 lg:py-5">
@ -23,26 +21,20 @@
<div class="flex flex-wrap lg:flex-row gap-6 items-center justify-center pb-5 -mx-5">
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="files" class="text-color-accent mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
<%= totalSize %>
</p>
</div>
<div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
<%= usersDataObj.totalFiles %>
</div>
<div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
Total Files
<p class="ml-auto text-slate-500 text-sm"><%= totalSize %></p>
</div>
<div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6"><%= usersDataObj.totalFiles %></div>
<div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">Files</div>
</div>
</div>
<div class="col-span-6 sm:col-span-3 xl:col-span-1 w-px h-40 border border-r border-accent border-dashed mx-4 xl:mx-6 hidden md:table-cell" ></div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover ">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="image" class="text-blue-400 mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
@ -59,7 +51,7 @@
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="video" class="text-yellow-400 mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
@ -76,7 +68,7 @@
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="headphones" class="text-orange-400 mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
@ -93,7 +85,7 @@
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
<div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
<div class="bg-secondary shadow-xl rounded-lg p-5">
<div class="flex">
<i data-lucide="ghost" class="text-green-400 mr-2"></i>
<p class="ml-auto text-slate-500 text-sm">
@ -125,9 +117,7 @@
class="tabUser inline-flex w-full items-center space-x-2 px-6 pb-5 text-sm text-color-primary md:w-auto md:text-base lg:w-auto lg:text-base">
<i data-lucide="Settings" class="text-color-secondary"></i>
<span>Config Gen</span>
<span class="text-xs inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-yellow-600 text-black rounded-full">
TBA
</span>
<span class="text-xs inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-yellow-600 text-black rounded-full">TBA</span>
</button>
</div>
<!-- End Profile Tabs -->

@ -6,6 +6,6 @@
<line x1="9" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
<span class="font-semibold text-color-primary">You have no more files to load! <%= settingsDatabase.appEmoji ? settingsDatabase.appEmoji : '🍆' %></span>
<span class="font-semibold text-color-primary">There are no more files to load.</span>
</div>
</div>

@ -4,12 +4,10 @@
<div class="flex flex-col items-center justify-center min-h-screen p-6">
<div class="flex-col lg:flex-row items-center justify-center h-screen text-center lg:text-left">
<div class="text-color-primary mt-10 lg:mt-0">
<div class="text-8xl font-medium">404</div>
<div class="text-xl lg:text-3xl font-medium mt-5">Oops. This page does not exist.</div>
<div class="text-lg mt-3">You may have mistyped the address or <%= settingsDatabase.name ? settingsDatabase.name.toUpperCase() : "DICK" %> seems to be malfunctioning</div>
<a href="/login" class="py-3 px-4 text-color-primary border-white dark:border-darkmode-400 dark:text-slate-200 mt-10">
Back to Home
</a>
<div class="text-8xl font-medium">Error 404</div>
<div class="text-xl lg:text-3xl font-medium mt-5">Page Not Found</div>
<div class="text-lg mt-3">The page you were looking for does not exist. You may have mistyped the URL or the page may have moved.</div>
<a href="/" class="py-3 px-4 text-color-primary border-white dark:border-darkmode-400 dark:text-slate-200 mt-10">Return Home</a>
</div>
</div>
</div>

@ -10,7 +10,6 @@
</svg>
<% if(path == '/'){ %><div href="#" class="inline-block text-gray-300">Dashboard</div> <% } %>
<% if(path == '/admin'){ %><div href="#" class="inline-block text-gray-300">Admin Dashboard</div> <% } %>
<% if(path == '/admin'){ %><div href="#" class="inline-block text-gray-300">Admin</div> <% } %>
</div>
</div>

@ -17,16 +17,14 @@
</svg>
</button>
<div id="themeTogglerToolTip" role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-color-primary bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
Toggle theme
class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-color-primary bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">Toggle Theme
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<!-- End Theme Toggler -->
<!-- Navbar Profile Image -->
<div class="dropdownProfileBtn relative z-[100] cursor-pointer hover:scale-110">
<img class="relative h-10 w-10 rounded-full object-cover object-center" src=<%= settingsDatabase.defaultProfilePicture ? settingsDatabase.defaultProfilePicture : "./images/profile.png" %>
alt="Profile" />
<img class="relative h-10 w-10 rounded-full object-cover object-center" src=<%= settingsDatabase.defaultProfilePicture ? settingsDatabase.defaultProfilePicture : "./images/profile.png" %> alt="Profile" />
</div>
<!-- End Navbar Profile Image -->
</div>

@ -24,6 +24,5 @@
<% } %>
<%- include("./partials/footer") %>
</body>
</html>
Loading…
Cancel
Save