0ct0pu5/DweebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes to app installer and new UI elements

Browse source
This commit is contained in:
lllllllillllllillll 2024-06-13 22:51:11 -07:00
parent fb38d3e4cd
commit 61d3d54126
8 changed files with 282 additions and 340 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -1,3 +1,6 @@
## v0.70 (dev)
*
## v0.60 (June 9th 2024) - Permissions system and import templates ## v0.60 (June 9th 2024) - Permissions system and import templates
* Converted JS template literals into HTML. * Converted JS template literals into HTML.
* Converted modals into HTML/HTMX. * Converted modals into HTML/HTMX.

3
controllers/dashboard.js
View file

@ -1,9 +1,8 @@
import { Readable } from 'stream'; import { Readable } from 'stream';
import { Permission, User } from '../database/models.js'; import { Permission, User } from '../database/models.js';
import { docker } from '../server.js'; import { docker } from '../server.js';
import { dockerContainerStats } from 'systeminformation';
import { readFileSync } from 'fs'; import { readFileSync } from 'fs';
import { currentLoad, mem, networkStats, fsSize } from 'systeminformation'; import { currentLoad, mem, networkStats, fsSize, dockerContainerStats } from 'systeminformation';
import { Op } from 'sequelize'; import { Op } from 'sequelize';
let hidden = ''; let hidden = '';

32
public/css/tabler.min.css vendored
View file

@ -8,6 +8,13 @@
*/ */
@charset "UTF-8"; @charset "UTF-8";
.form-label:focus,
.form-control:focus {
outline: none;
box-shadow: none;
}
:root, :root,
[data-bs-theme=light] { [data-bs-theme=light] {
--tblr-blue: #206bc4; --tblr-blue: #206bc4;
@ -3187,13 +3194,7 @@ progress {
cursor: pointer cursor: pointer
} }
.form-control:focus {
color: inherit;
background-color: var(--tblr-bg-forms);
border-color: #90b5e2;
outline: 0;
box-shadow: 0 0 transparent, 0 0 0 .25rem rgba(32, 107, 196, .25)
}
.form-control::-webkit-date-and-time-value { .form-control::-webkit-date-and-time-value {
min-width: 85px; min-width: 85px;
@ -3417,11 +3418,6 @@ textarea.form-control-lg {
} }
} }
.form-select:focus {
border-color: #90b5e2;
outline: 0;
box-shadow: 0 0 transparent, 0 0 0 .25rem rgba(32, 107, 196, .25)
}
.form-select[multiple], .form-select[multiple],
.form-select[size]:not([size="1"]) { .form-select[size]:not([size="1"]) {
@ -3514,11 +3510,6 @@ textarea.form-control-lg {
filter: brightness(90%) filter: brightness(90%)
} }
.form-check-input:focus {
border-color: #90b5e2;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(32, 107, 196, .25)
}
.form-check-input:checked { .form-check-input:checked {
background-color: var(--tblr-primary); background-color: var(--tblr-primary);
@ -3571,7 +3562,7 @@ textarea.form-control-lg {
} }
} }
.form-switch .form-check-input:focus { .form-switch .form-check-input {
--tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2390b5e2'/%3e%3c/svg%3e") --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2390b5e2'/%3e%3c/svg%3e")
} }
@ -24270,10 +24261,7 @@ textarea[cols] {
border-color: #90b5e2 !important border-color: #90b5e2 !important
} }
.input-group-flat .form-control:focus {
border-color: var(--tblr-border-color);
box-shadow: none
}
.input-group-flat .form-control:not(:last-child) { .input-group-flat .form-control:not(:last-child) {
border-right: 0 border-right: 0

4
server.js
View file

@ -2,10 +2,10 @@ import express from 'express';
import session from 'express-session'; import session from 'express-session';
import memorystore from 'memorystore'; import memorystore from 'memorystore';
import ejs from 'ejs'; import ejs from 'ejs';
import Docker from 'dockerode';
import { router } from './router/index.js'; import { router } from './router/index.js';
import { sequelize } from './database/models.js'; import { sequelize } from './database/models.js';
export const docker = new Docker(); import Docker from 'dockerode';
export var docker = new Docker();
// Session middleware // Session middleware
const MemoryStore = memorystore(session); const MemoryStore = memorystore(session);

222
utils/install.js
View file

@ -1,82 +1,95 @@
import { writeFileSync, mkdirSync, readFileSync, readdirSync, writeFile } from "fs"; import { writeFileSync, mkdirSync, readFileSync, readdirSync, writeFile } from "fs";
import yaml from 'js-yaml';
import { execSync } from "child_process"; import { execSync } from "child_process";
import { docker } from "../server.js";
import DockerodeCompose from "dockerode-compose";
import { Syslog } from "../database/models.js"; import { Syslog } from "../database/models.js";
import { addAlert } from "../controllers/dashboard.js"; import { addAlert } from "../controllers/dashboard.js";
import { docker } from "../server.js";
import DockerodeCompose from "dockerode-compose";
import yaml from 'js-yaml';
// This entire page hurts to look at.
export const Install = async (req, res) => { export const Install = async (req, res) => {
let data = req.body; let data = req.body;
let name = data.name;
let containers = await docker.listContainers({ all: true }); let { name, service_name, image, command_check, command, net_mode, restart_policy } = data;
for (let i = 0; i < containers.length; i++) {
if (containers[i].Names[0].includes(name)) {
addAlert(req.session, 'danger', `App ${name} already exists. Please remove it first.`);
res.redirect('/');
return;
}
}
if (req.body.compose) {
mkdirSync(`./appdata/${name}`, { recursive: true });
writeFileSync(`./templates/compose/${name}/compose.yaml`, req.body.compose, function (err) { console.log(err) });
let compose = new DockerodeCompose(docker, `./templates/compose/${name}/compose.yaml`, `${name}`);
addAlert(req.session, 'success', `Installing ${name}. It should appear on the dashboard shortly.`);
try {
(async () => {
await compose.pull();
await compose.up();
await Syslog.create({
user: req.session.user,
email: null,
event: "App Installation",
message: `${app} installed successfully`,
ip: req.socket.remoteAddress
});
})();
} catch (err) {
await Syslog.create({
user: req.session.user,
email: null,
event: "App Installation",
message: `${app} installation failed: ${err}`,
ip: req.socket.remoteAddress
});
}
} else {
let { service_name, image, command_check, command, net_mode, restart_policy } = data;
let { port0, port1, port2, port3, port4, port5 } = data; let { port0, port1, port2, port3, port4, port5 } = data;
let { volume0, volume1, volume2, volume3, volume4, volume5 } = data; let { volume0, volume1, volume2, volume3, volume4, volume5 } = data;
let { env0, env1, env2, env3, env4, env5, env6, env7, env8, env9, env10, env11 } = data; let { env0, env1, env2, env3, env4, env5, env6, env7, env8, env9, env10, env11 } = data;
let { label0, label1, label2, label3, label4, label5, label6, label7, label8, label9, label10, label11 } = data; let { label0, label1, label2, label3, label4, label5, label6, label7, label8, label9, label10, label11 } = data;
let ports = [port0, port1, port2, port3, port4, port5] let ports = [ port0, port1, port2, port3, port4, port5 ];
let volumes = [volume0, volume1, volume2, volume3, volume4, volume5];
let env_vars = [env0, env1, env2, env3, env4, env5, env6, env7, env8, env9, env10, env11];
let labels = [label0, label1, label2, label3, label4, label5, label6, label7, label8, label9, label10, label11];
let docker_volumes = []; let docker_volumes = [];
// Make sure there isn't a container already running that has the same name
let containers = await docker.listContainers({ all: true });
for (let i = 0; i < containers.length; i++) {
if (containers[i].Names[0].includes(name)) {
addAlert(req.session, 'danger', `App '${name}' already exists. Please choose a different name.`);
res.redirect('/');
return;
}
}
// async function composeInstall (compose) {
// await compose.pull();
// await compose.up();
// }
// (async () => {
// await compose.pull().then(() => {
// compose.up();
// });
// })();
async function composeInstall (name, compose, req) {
try {
await compose.pull().then(() => {
compose.up();
Syslog.create({
user: req.session.user,
email: null,
event: "App Installation",
message: `${name} installed successfully`,
ip: req.socket.remoteAddress
});
});
} catch (err) {
await Syslog.create({
user: req.session.user,
email: null,
event: "App Installation",
message: `${name} installation failed: ${err}`,
ip: req.socket.remoteAddress
});
}
}
addAlert(req.session, 'success', `Installing ${name}. It should appear on the dashboard shortly.`); addAlert(req.session, 'success', `Installing ${name}. It should appear on the dashboard shortly.`);
if (image.startsWith('https://')){ // Compose file installation
if (req.body.compose) {
// Create the directory
mkdirSync(`./appdata/${name}`, { recursive: true }); mkdirSync(`./appdata/${name}`, { recursive: true });
execSync(`curl -o ./appdata/${name}/${name}_stack.yml -L ${image}`); // Write the form data to the compose file
console.log(`Downloaded stackfile: ${image}`); writeFileSync(`./templates/compose/${name}/compose.yaml`, req.body.compose, function (err) { console.log(err) });
let stackfile = yaml.load(readFileSync(`./appdata/${name}/${name}_stack.yml`, 'utf8')); var compose = new DockerodeCompose(docker, `./templates/compose/${name}/compose.yaml`, `${name}`);
let services = Object.keys(stackfile.services); composeInstall(name, compose, req);
res.redirect('/');
for ( let i = 0; i < services.length; i++ ) { return;
try {
console.log(stackfile.services[Object.keys(stackfile.services)[i]].environment);
} catch { console.log('no env') }
} }
} else {
// Convert a JSON template into a compose file
let compose_file = `version: '3'`; let compose_file = `version: '3'`;
compose_file += `\nservices:` compose_file += `\nservices:`
compose_file += `\n ${service_name}:` compose_file += `\n ${service_name}:`
@ -84,22 +97,14 @@ export const Install = async (req, res) => {
compose_file += `\n image: ${image}`; compose_file += `\n image: ${image}`;
// Command // Command
if (command_check == 'on') { if (command_check == 'on') { compose_file += `\n command: ${command}` }
compose_file += `\n command: ${command}`
}
// Network mode // Network mode
if (net_mode == 'host') { if (net_mode == 'host') { compose_file += `\n network_mode: 'host'` }
compose_file += `\n network_mode: 'host'` else if (net_mode != 'host' && net_mode != 'docker') { compose_file += `\n network_mode: '${net_mode}'` }
}
else if (net_mode != 'host' && net_mode != 'docker') {
compose_file += `\n network_mode: '${net_mode}'`
}
// Restart policy // Restart policy
if (restart_policy != '') { if (restart_policy != '') { compose_file += `\n restart: ${restart_policy}` }
compose_file += `\n restart: ${restart_policy}`
}
// Ports // Ports
for (let i = 0; i < ports.length; i++) { for (let i = 0; i < ports.length; i++) {
@ -108,16 +113,14 @@ export const Install = async (req, res) => {
break; break;
} }
} }
for (let i = 0; i < ports.length; i++) { for (let i = 0; i < ports.length; i++) {
if ((ports[i] == 'on') && (net_mode != 'host')) { if ((ports[i] == 'on') && (net_mode != 'host')) {
compose_file += `\n - ${data[`port_${i}_external`]}:${data[`port_${i}_internal`]}/${data[`port_${i}_protocol`]}` compose_file += `\n - ${data[`port_${i}_external`]}:${data[`port_${i}_internal`]}/${data[`port_${i}_protocol`]}`
} }
} }
// Volumes // Volumes
let volumes = [volume0, volume1, volume2, volume3, volume4, volume5]
for (let i = 0; i < volumes.length; i++) { for (let i = 0; i < volumes.length; i++) {
if (volumes[i] == 'on') { if (volumes[i] == 'on') {
compose_file += `\n volumes:` compose_file += `\n volumes:`
@ -126,24 +129,19 @@ export const Install = async (req, res) => {
} }
for (let i = 0; i < volumes.length; i++) { for (let i = 0; i < volumes.length; i++) {
// if volume is on and neither bind or container is empty, it's a bind mount (ex /mnt/user/appdata/config:/config ) // if volume is on and neither bind or container is empty, it's a bind mount (ex /mnt/user/appdata/config:/config )
if ((data[`volume${i}`] == 'on') && (data[`volume_${i}_bind`] != '') && (data[`volume_${i}_container`] != '')) { if ((data[`volume${i}`] == 'on') && (data[`volume_${i}_bind`] != '') && (data[`volume_${i}_container`] != '')) {
compose_file += `\n - ${data[`volume_${i}_bind`]}:${data[`volume_${i}_container`]}:${data[`volume_${i}_readwrite`]}` compose_file += `\n - ${data[`volume_${i}_bind`]}:${data[`volume_${i}_container`]}:${data[`volume_${i}_readwrite`]}`
} }
// if bind is empty create a docker volume (ex container_name_config:/config) convert any '/' in container name to '_' // if bind is empty create a docker volume (ex container_name_config:/config) convert any '/' in container name to '_'
else if ((data[`volume${i}`] == 'on') && (data[`volume_${i}_bind`] == '') && (data[`volume_${i}_container`] != '')) { else if ((data[`volume${i}`] == 'on') && (data[`volume_${i}_bind`] == '') && (data[`volume_${i}_container`] != '')) {
let volume_name = data[`volume_${i}_container`].replace(/\//g, '_'); let volume_name = data[`volume_${i}_container`].replace(/\//g, '_');
compose_file += `\n - ${name}_${volume_name}:${data[`volume_${i}_container`]}:${data[`volume_${i}_readwrite`]}` compose_file += `\n - ${name}_${volume_name}:${data[`volume_${i}_container`]}:${data[`volume_${i}_readwrite`]}`
docker_volumes.push(`${name}_${volume_name}`); docker_volumes.push(`${name}_${volume_name}`);
} }
} }
// Environment variables // Environment variables
let env_vars = [env0, env1, env2, env3, env4, env5, env6, env7, env8, env9, env10, env11]
for (let i = 0; i < env_vars.length; i++) { for (let i = 0; i < env_vars.length; i++) {
if (env_vars[i] == 'on') { if (env_vars[i] == 'on') {
compose_file += `\n environment:` compose_file += `\n environment:`
@ -157,8 +155,6 @@ export const Install = async (req, res) => {
} }
// Labels // Labels
let labels = [label0, label1, label2, label3, label4, label5, label6, label7, label8, label9, label10, label11]
for (let i = 0; i < labels.length; i++) { for (let i = 0; i < labels.length; i++) {
if (labels[i] == 'on') { if (labels[i] == 'on') {
compose_file += `\n labels:` compose_file += `\n labels:`
@ -173,9 +169,7 @@ export const Install = async (req, res) => {
} }
// Privileged mode // Privileged mode
if (data.privileged == 'on') { if (data.privileged == 'on') { compose_file += `\n privileged: true` }
compose_file += `\n privileged: true`
}
// Hardware acceleration // Hardware acceleration
for (let i = 0; i < env_vars.length; i++) { for (let i = 0; i < env_vars.length; i++) {
@ -191,15 +185,12 @@ export const Install = async (req, res) => {
} }
} }
// add volumes to the compose file
// add any docker volumes to the docker-compose file
if ( docker_volumes.length > 0 ) { if ( docker_volumes.length > 0 ) {
compose_file += `\n` compose_file += `\n`
compose_file += `\nvolumes:` compose_file += `\nvolumes:`
// Removed any duplicates from docker_volumes
// check docker_volumes for duplicates and remove them completely
docker_volumes = docker_volumes.filter((item, index) => docker_volumes.indexOf(item) === index) docker_volumes = docker_volumes.filter((item, index) => docker_volumes.indexOf(item) === index)
for (let i = 0; i < docker_volumes.length; i++) { for (let i = 0; i < docker_volumes.length; i++) {
if ( docker_volumes[i] != '') { if ( docker_volumes[i] != '') {
compose_file += `\n ${docker_volumes[i]}:` compose_file += `\n ${docker_volumes[i]}:`
@ -207,44 +198,27 @@ export const Install = async (req, res) => {
} }
} }
try {
mkdirSync(`./appdata/${name}`, { recursive: true }); mkdirSync(`./appdata/${name}`, { recursive: true });
writeFileSync(`./appdata/${name}/docker-compose.yml`, compose_file, function (err) { console.log(err) }); writeFileSync(`./appdata/${name}/compose.yaml`, compose_file, function (err) { console.log(err) });
var compose = new DockerodeCompose(docker, `./appdata/${name}/docker-compose.yml`, `${name}`); var compose = new DockerodeCompose(docker, `./appdata/${name}/compose.yaml`, `${name}`);
} catch { composeInstall(name, compose, req);
await Syslog.create({
user: req.session.user,
email: null,
event: "App Installation",
message: `${name} installation failed - error creating directory or compose file`,
ip: req.socket.remoteAddress
});
}
try {
(async () => {
await compose.pull();
await compose.up();
await Syslog.create({
user: req.session.user,
email: null,
event: "App Installation",
message: `${name} installed successfully`,
ip: req.socket.remoteAddress
});
})();
} catch (err) {
await Syslog.create({
user: req.session.user,
email: null,
event: "App Installation",
message: `${name} installation failed: ${err}`,
ip: req.socket.remoteAddress
});
}
}
}
res.redirect('/'); res.redirect('/');
} }
// im just going to leave this old stackfile snippet here for now
// if (image.startsWith('https://')){
// mkdirSync(`./appdata/${name}`, { recursive: true });
// execSync(`curl -o ./appdata/${name}/${name}_stack.yml -L ${image}`);
// console.log(`Downloaded stackfile: ${image}`);
// let stackfile = yaml.load(readFileSync(`./appdata/${name}/${name}_stack.yml`, 'utf8'));
// let services = Object.keys(stackfile.services);
// for ( let i = 0; i < services.length; i++ ) {
// try {
// console.log(stackfile.services[Object.keys(stackfile.services)[i]].environment);
// } catch { console.log('no env') }
// }
// }

34
views/account.html
View file

@ -46,40 +46,36 @@
<div class="col d-flex flex-column"> <div class="col d-flex flex-column">
<div class="card-body"> <div class="card-body">
<h2 class="mb-4">My Account</h2> <h2 class="mb-4">My Account</h2>
<h3 class="card-title">Profile Details</h3>
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"><span class="avatar avatar-xl"><%- avatar %></span> <div class="col-auto mb-4">
<span class="avatar avatar-xl bg-green-lt">
<%- avatar %>
</span>
</div> </div>
<div class="col-auto"><a href="#" class="btn"> <div class="col-auto"><a href="#" class="btn">
Change avatar Change avatar
</a> </a>
</div> </div>
<div class="col-auto"><a href="#" class="btn btn-ghost-danger">
Delete avatar
</a>
</div> </div>
</div>
<h3 class="card-title mt-4">Profile</h3>
<div class="row g-3"> <div class="row g-3">
<div class="col-md"> <div class="col-md">
<div class="form-label">Full Name</div> <div class="form-label">Display Name</div>
<input type="text" class="form-control" value="<%= name %>" readonly="<%= name %>"> <input type="text" class="form-control" value="<%= name %>">
</div> </div>
<div class="col-md"> <div class="col-md">
<div class="form-label">First Name</div> <div class="form-label">First Name</div>
<input type="text" class="form-control" value="<%= first_name %>" readonly="<%= first_name %>"> <input type="text" class="form-control" value="<%= first_name %>">
</div> </div>
<div class="col-md"> <div class="col-md">
<div class="form-label">Last Name</div> <div class="form-label">Last Name</div>
<input type="text" class="form-control" value="<%= last_name %>" readonly="<%= last_name %>"> <input type="text" class="form-control" value="<%= last_name %>">
</div> </div>
</div> </div>
<h3 class="card-title mt-4">Email</h3> <h3 class="card-title mt-4">Email</h3>
<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
<div> <div>
<div class="row g-2"> <div class="row g-2">
<div class="col-auto"> <div class="col-auto">
<input type="text" class="form-control w-auto" value="<%= email %>" readonly="<%= email %>"> <input type="text" class="form-control w-auto" value="<%= email %>">
</div> </div>
<div class="col-auto"> <div class="col-auto">
<a href="#" class="btn">Change</a> <a href="#" class="btn">Change</a>
@ -87,23 +83,11 @@
</div> </div>
</div> </div>
<h3 class="card-title mt-4">Password</h3> <h3 class="card-title mt-4">Password</h3>
<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
<div> <div>
<a href="#" class="btn"> <a href="#" class="btn">
Set new password Set new password
</a> </a>
</div> </div>
<h3 class="card-title mt-4">Public profile</h3>
<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
you.</p>
<div>
<label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" >
<span class="form-check-label form-check-label-on">You're currently visible</span>
<span class="form-check-label form-check-label-off">You're
currently invisible</span>
</label>
</div>
</div> </div>
<div class="card-footer bg-transparent mt-auto"> <div class="card-footer bg-transparent mt-auto">
<div class="btn-list justify-content-end"> <div class="btn-list justify-content-end">

2
views/partials/footer.html
View file

@ -23,7 +23,7 @@
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="https://github.com/lllllllillllllillll/DweebUI/releases" class="link-secondary" rel="noopener"> <a href="https://github.com/lllllllillllllillll/DweebUI/releases" class="link-secondary" rel="noopener">
v0.60 v0.70
</a> </a>
</li> </li>
</ul> </ul>

78
views/settings.html
View file

@ -49,57 +49,51 @@
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col"> <div class="col">
<!-- <a href="./QuickConnect.bat" class="btn" download="QuickConnect.bat"> <a href="./QuickConnect.bat" class="btn" download="QuickConnect.bat">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-windows" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M17.8 20l-12 -1.5c-1 -.1 -1.8 -.9 -1.8 -1.9v-9.2c0 -1 .8 -1.8 1.8 -1.9l12 -1.5c1.2 -.1 2.2 .8 2.2 1.9v12.1c0 1.2 -1.1 2.1 -2.2 1.9z"></path> <path d="M12 5l0 14"></path> <path d="M4 12l16 0"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-windows" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M17.8 20l-12 -1.5c-1 -.1 -1.8 -.9 -1.8 -1.9v-9.2c0 -1 .8 -1.8 1.8 -1.9l12 -1.5c1.2 -.1 2.2 .8 2.2 1.9v12.1c0 1.2 -1.1 2.1 -2.2 1.9z"></path> <path d="M12 5l0 14"></path> <path d="M4 12l16 0"></path> </svg>
Windows QuickConnect Windows QuickConnect
</a> --> </a>
</div> </div>
</div> </div>
<div class="row mt-4">
<div class="col-md">
<div class="form-label">Full Name</div> <h3 class="card-title mt-4">Container Links</h3>
<input type="text" class="form-control" value="" readonly=""> <p class="card-subtitle"> Set the default behaviour for container links. </p>
</div>
<div class="col-md">
<div class="form-label">First Name</div>
<input type="text" class="form-control" value="" readonly="">
</div>
<div class="col-md">
<div class="form-label">Last Name</div>
<input type="text" class="form-control" value="" readonly="">
</div>
</div>
<h3 class="card-title mt-4">Email</h3>
<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
<div>
<div class="row g-2">
<div class="col-auto">
<input type="text" class="form-control w-auto" value="" readonly="">
</div>
<div class="col-auto">
<a href="#" class="btn">Change</a>
</div>
</div>
</div>
<h3 class="card-title mt-4">Password</h3>
<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
<div>
<a href="#" class="btn">
Set new password
</a>
</div>
<h3 class="card-title mt-4">Public profile</h3>
<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
you.</p>
<div> <div>
<label class="form-check form-switch form-switch-lg"> <label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" > <input class="form-check-input" type="checkbox">
<span class="form-check-label form-check-label-on">You're currently visible</span> <span class="form-check-label form-check-label-on">
<span class="form-check-label form-check-label-off">You're Host IP
currently invisible</span> </span>
<span class="form-check-label form-check-label-off">
Localhost
</span>
</label> </label>
</div> </div>
<h3 class="mt-4">User Registration</h3>
<label class="text-muted">Allow other users to register.</label>
<div class="row align-items-center">
<div class="col-auto">
<label class="form-check form-switch form-switch-lg mt-2">
<input class="form-check-input" type="checkbox">
<span class="form-check-label form-check-label-on text-success">
Enabled
</span>
<span class="form-check-label form-check-label-off text-danger">
Disabled
</span>
</label>
</div>
<div class="col-6">
<input type="text" class="form-control" placeholder="Registration Secret">
</div>
</div>
</div> </div>
</div> </div>