mirrors
/
dick
mirror of https://github.com/Facinorous-420/dick
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2334a5e33c'
${ noResults }
dick/views/pages/admin/tabs/appsettings.ejs

470 lines
34 KiB
Raw Normal View History Unescape

V1.1.0 (#24) ## Update Info 🍆 **DICK** v1.1.0 🍆 Our number is getting bigger! Though, I hear size is not what matters but how you use it. So, I am happy to introduce you to a bunch of new stuff within the front end! 🔀 **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 master of the current 1.0.2(old master) branch, 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 dependancies 4. Delete the `dist` folder 5. Start DICK using `npm start` 6. Enjoy > **Note** > If you load your instance and styling seems wrong, please clear your browsers cache, and reload the page. > **Note** > The first user to log into your DICK WebUI will be marked as the instance admin. You can change which users are admin by editing the user database file located at `/src/database/users.json`. This file will only appear once you've started your instance for the first time. ✏️ **CHANGELOG** ```diff ADDITIONS + Admin Dashboard > This page will be where system administrators can view their syatem settings and stats! + Database > Added DICK database, inside JSON files with management utils. + Added new app settings page to Admin Dashboard > This will allow administrators to customize their instance on the fly without having to edit the codebase. White labeling! + Added user list to Admin Dashboard > This allows administrators to view which users are registered in their ASS currently, and their roles set. You can also create new users from this page. (There are a lot of hidden divs in this page so imstance admins can add extra code to dick to enable stuff like deletion of users) + Registrations > Administrators can toggle registrations into their ASS from their DICK UI via the /register page! + Captcha > By default, when a user gets login information wrong they will be forwarded to a Rick Roll. Now you can add a hCaptcha site key to DICK to enable hCaptcha for your login and register public pages! + Added a "default profile picture" > Every users default profile picture. This is planned to be able to be set per user in the future, so users can pick their own seperate from the default. REMOVALS - Removeed STAFF_IDs from codebase. > This means you can remove this CONSTANT from your instance CONSTANTS file, please see the repo's constants example file to see if yours matches it. ``` ```fix CHANGES = Large codebase cleanup = Seperated js for components into their own files based on job = Redid some naming for tailwind colour theme classes to provide proper theming from the tailwind config file = Cleaned up a lot of the utils = Added embed gen page as a hidden extra for devs to add themselves in their own time if they wish (please PR if you achieve this 🤘) = Fixed the flash message warning colours to actually be red or green depending on error/success ``` ## Issues Resolved / Fixes In This Release Resolves #17 , Resolves #14 , Resolves #10 , Resolves #7
2 years ago
<div class="flex lg:flex-row lg:justify-center lg:items-center flex-col flex-wrap">
<div class="flex-none basis-1/2">
<div class="flex flex-col flex-wrap">
<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>
<% } %>
<% 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>
<% } %>
<form method="post" action="/admin/save/settings">
<!-- Main Setting -->
<div class="flex-1 bg-tertiary p-6 rounded-md">
<div class="py-9">
<div class="border-b w-full border-gray-300/10 pb-3">
<span class="text-lg text-color-primary font-semibold">
Main Settings
</span>
</div>
</div>
<div class="grid grid-cols-2 gap-5 text-sm md:text-base">
<div class="xl:col-span-1 lg:col-span-2 col-span-1">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
App Name
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This is the title shown in the top left of the app, as well as other various places.
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<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="<%= settingsDatabase.name ? settingsDatabase.name : "DICK" %>" name="name" type="text" />
</div>
<div class="xl:col-span-1 lg:col-span-2 col-span-1">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
App Emoji
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This is the emoji shown in the breadcrumps at the top of the screen, as well as on each file.
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid">
</div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<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="<%= settingsDatabase.appEmoji ? settingsDatabase.appEmoji : "🍆" %>" name="appEmoji" type="text" />
</div>
<div class="xl:col-span-1 lg:col-span-2 col-span-1">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Site Name
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This is the text shown on the browser tab, and title in the embed when directly linking the <%= settingsDatabase.name ? settingsDatabase.name.toUpperCase() : "DICK" %> dashboard.
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<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="<%= settingsDatabase.siteTitle ? settingsDatabase.siteTitle : "DICK (Directly Integrated Client for Keisters)" %>" name="siteTitle" type="text" />
</div>
<div class="xl:col-span-1 lg:col-span-2 col-span-1">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Site Description
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This is the description text shown in the embed when directly linking the <%= settingsDatabase.name ? settingsDatabase.name.toUpperCase() : "DICK" %> dashboard.
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<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="<%= settingsDatabase.siteDescription ? settingsDatabase.siteDescription : "The frontend for your backend" %>" name="siteDescription" type="text" />
</div>
<div class="col-span-2">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Login Text
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This is the text shown directly under the app title in the login and register pages!
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<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="<%= settingsDatabase.loginText ? settingsDatabase.loginText : "Sign in to easily manage your nudes." %>" name="loginText" type="text" />
</div>
<div class="xl:col-span-1 lg:col-span-2 col-span-1">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Captcha Site ID
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
If set, this will enable hCaptcha. If configured wrong, your users wont be able to log in. Proceed with caution. <a href="https://www.hcaptcha.com/">learn more here.</a>
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<!-- Input -->
<div class="relative">
<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="<%= settingsDatabase.captchaSiteID ? settingsDatabase.captchaSiteID : "No site ID entered. Defaulting to vanilla captcha." %>" name="captchaSiteID" type="text" />
<div class="absolute top-0 right-3 h-full">
<div class="flex items-center justify-center space-x-2 h-full">
<!-- Rounded Checkbox -->
<div class="relative">
<input id="captchaCheckbox" name="captchaCheckbox" class="hidden peer"
<%= settingsDatabase.captchaEnabled ? 'checked' : null %> type="checkbox" />
<button type="button"
class="peer border-2 focus:border-accent text-transparent peer-checked:text-color-primary border-[#354567] flex items-center justify-center peer-checked:bg-accent relative h-5 w-5 md:h-6 md:w-6 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg"
width="14" height="14" viewBox="0 0 24 24"
fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<polyline points="20 6 9 17 4 12">
</polyline>
</svg>
<label class="absolute inset-0 cursor-pointer"
for="captchaCheckbox">
</label>
</button>
</div>
<!-- End Rounded Checkbox -->
<small class="text-color-tertiary text-xs">
Enable
</small>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="xl:col-span-1 lg:col-span-2 col-span-1">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Captcha Secret Key
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This is found in your hCaptcha profile and used to verify captcha checks.
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<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="<%= settingsDatabase.captchaSecretKey ? settingsDatabase.captchaSecretKey : "No site ID entered. Defaulting to vanilla captcha." %>" name="captchaSecretKey" type="text" />
</div>
<div class="col-span-1">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Private Mode
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This will remove the app statisics from the login page.
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<!-- Switch -->
<label class="switch">
<!-- <span class="pr-2 text-color-secondary">
Off
</span> -->
<input type="checkbox" name="privateModeEnabled" value="privateModeEnabled" <%= settingsDatabase.privateModeEnabled ? 'checked' : null %>>
<span class="check"></span>
<!-- <span class="pl-2 text-color-secondary">
On
</span> -->
</label>
<!-- End Switch -->
</div>
<div class="col-span-1">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Registration Enabled
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This allows people to create accounts in your ASS instance.
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<label class="switch">
<!-- <span class="pr-2 text-color-primary">
Off
</span> -->
<input type="checkbox" name="registrationEnabled" value="registrationEnabled" <%= settingsDatabase.registrationEnabled ? 'checked' : null %>>
<span class="check"></span>
<!-- <span class="pl-2 text-color-primary">
On
</span> -->
</label>
</div>
<div class="col-span-2">
<div class="flex w-full justify-center items-center bg-tertiary p-6 rounded-md">
<button type="submit" class="bg-accentsecondary w-full hover:bg-accent rounded-md px-8 py-3 text-color-primary">
Save Settings
</button>
</div>
</div>
</div>
</div>
<!-- End Main Setting -->
</form>
<!-- Image Setting -->
<div class="flex-1 bg-tertiary p-6 rounded-md">
<div class="py-9">
<div class="border-b w-full border-gray-300/10 pb-3">
<span class="text-lg text-color-primary font-semibold">
Image Settings
</span>
</div>
</div>
<div class="grid grid-cols-2 gap-5 text-sm md:text-base">
<div class="col-span-2">
<form method="post" enctype="multipart/form-data" action="/admin/upload/logo">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
App Logo
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This is the logo shown in various areas of the app!
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<!-- Drag Drop File -->
<label for="app-logo" class="cursor-pointer flex w-full h-40 border-2 border-form border-dashed rounded-md p-5">
<div class="w-full flex flex-col justify-center items-center h-ful">
<span class="font-semibold text-color-primary text-lg">
Drop files here or click to upload.
</span>
<p class="text-sm text-color-secondary text-center">
All files uploaded are stored directly in the <%= settingsDatabase.name ? settingsDatabase.name.toUpperCase() : "DICK" %> app folder.
</p>
</div>
<input id="app-logo" name="app-logo" class="hidden" type="file" onchange="form.submit()" accept=".jpg, .jpeg, .png">
</label>
<!-- End Drag Drop File -->
</form>
</div>
<div class="col-span-2">
<form method="post" enctype="multipart/form-data" action="/admin/upload/default-pp">
<!-- Label with tooltip -->
<label class="mb-2 block text-color-tertiary text-sm">
<div class="relative w-max">
Default Profile Picture
<div class="group z-20 absolute -right-8 top-0 cursor-help">
<div>
<i data-lucide="help-circle" class="text-color-secondary"></i>
</div>
<div class="flex justify-center items-center">
<div class="lg:w-52 w-48 group-hover:block text-color-light text-sm hidden absolute bottom-10 bg-tooltip p-2 rounded-md">
<div class="break-words">
This is the default profile picture all new users have.
</div>
<div class="absolute -left-[0.10rem] flex justify-center items-center w-full">
<div class="w-0 h-0 border-t-[20px] border-l-[10px] border-r-[10px] border-tooltip border-l-transparent border-r-transparent border-solid"></div>
</div>
</div>
</div>
</div>
</div>
</label>
<!-- End Label with tooltip -->
<!-- Drag Drop File -->
<label for="default-pp" class="cursor-pointer flex w-full h-40 border-2 border-form border-dashed rounded-md p-5">
<div class="w-full flex flex-col justify-center items-center h-ful">
<span class="font-semibold text-color-primary text-lg">
Drop files here or click to upload.
</span>
<p class="text-sm text-color-secondary text-center">
All files uploaded are stored directly in the <%= settingsDatabase.name ? settingsDatabase.name.toUpperCase() : "DICK" %> app folder.
</p>
</div>
<input id="default-pp" name="default-pp" class="hidden" type="file" onchange="form.submit()" accept=".jpg, .jpeg, .png">
</label>
<!-- End Drag Drop File -->
</form>
</div>
</div>
</div>
<!-- End Image Setting -->
</div>
</div>
</div>
<!-- EMPTY CARD ON THE RIGHT -->
<!-- <div class="flex-none lg:basis-1/2 basis-full self-auto lg:self-start lg:pl-3 pl-0 lg:mt-0 mt-3">
<div class="flex flex-col flex-wrap">
<div class="flex flex-col lg:gap-8 gap-3 ">
<div class="flex-1 bg-tertiary p-6 rounded-md">
<div class="py-9">
<div class="border-b w-full border-gray-300/10 pb-3">
<span class="text-lg text-color-primary font-semibold">
Title here
</span>
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>