mirror of
https://github.com/superseriousbusiness/gotosocial
synced 2025-06-05 21:59:39 +02:00
[frontend] Restructure Frontend Sources (#634)
* 🐸restructure frontend stuff, include admin and future user panel in main repo, properly deduplicate bundles for css+js across uses * rename bundled to dist, caught by gitignore * re-include status.css for profile template * default to localhost * serve frontend panels * add todo message for abstraction * refactor oauth registration flow * oauth restructure * update footer template * change panel routes * remove superfluous css imports * write bundle to disk from test server, use forked budo-express * wrap all page content in container for robustness with addons etc injection other elements in body * update documentation, goreleaser, Dockerfile * update template meta tags * add AGPL-3.0+ license header everywhere * only attach update listener on EventEmitter * cleaner config for various frontend bundles * fix bundler script paths * Merge commit 'd191931932b9293ce1be44ed08a1e69b9fcc1e25' * fix up dockerfile, goreleaser * go mod tidy * add uglifyify * move status hide/show js to frontend bundle * fix stylesheet color( func regressions * update contributing docs for new build path * update goreleaser + docker building * resolve dependency paths properly * update package name * use api errorhandler Co-authored-by: tsmethurst <tobi.smethurst@protonmail.com>
This commit is contained in:
f0x52
GitHub
3
web/source/.eslintrc.js
Normal file
3
web/source/.eslintrc.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
"extends": ["@f0x52/eslint-config-react"]
|
||||
};
|
||||
2
web/source/.gitignore
vendored
Normal file
2
web/source/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
public/bundle.*
|
||||
35
web/source/css/_colors.css
Normal file
35
web/source/css/_colors.css
Normal file
@ -0,0 +1,35 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/*
|
||||
This stylesheets defines (color) variables to be used by other stylesheets on the page
|
||||
postcss-custom-prop-vars will transpile these to css --variables
|
||||
*/
|
||||
|
||||
$bg: #525c66;
|
||||
$fg: #fafaff;
|
||||
$fg_dark: #b0b0b5;
|
||||
|
||||
$bg_darker3: color-mod($bg lightness(-3%));
|
||||
$bg_darker5: color-mod($bg lightness(-5%));
|
||||
|
||||
$bg_lighter3: color-mod($bg lightness(+3%));
|
||||
|
||||
$acc1: #de8957; // sloth light orange
|
||||
$acc2: #c76d33; // sloth dark orange
|
||||
$blue: #5897df;
|
||||
253
web/source/css/base.css
Normal file
253
web/source/css/base.css
Normal file
@ -0,0 +1,253 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $bg_darker5;
|
||||
color: $fg;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.5em;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
main {
|
||||
background: $bg;
|
||||
display: grid;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
grid-template-columns: 1fr 50% 1fr;
|
||||
grid-template-columns: auto min(92%, 90ch) auto;
|
||||
|
||||
.left {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.right {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
&.lightgray {
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
& > * {
|
||||
align-self: start;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background: $bg_darker5;
|
||||
padding: 2rem 0;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
height: 4rem;
|
||||
padding-left: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
margin: 0 2rem;
|
||||
margin-top: -2rem;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
align-self: center;
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* color: $acc1; */
|
||||
margin: 0;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $acc1;
|
||||
}
|
||||
|
||||
.button, button {
|
||||
border-radius: 0.2rem;
|
||||
background: $acc1;
|
||||
color: $fg;
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
padding: 0.5rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $acc2;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
background: $bg_darker5;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.nounderline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: $acc1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
justify-self: center;
|
||||
img {
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
|
||||
section.apps {
|
||||
align-self: start;
|
||||
|
||||
.applist {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 0.5rem;
|
||||
align-content: start;
|
||||
|
||||
.entry {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 1fr;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: $bg_darker5;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.logo {
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.logo.redraw {
|
||||
fill: $fg;
|
||||
stroke: $fg;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 1rem 0;
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.login {
|
||||
form {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto 100%;
|
||||
grid-gap: 0.7rem;
|
||||
|
||||
button {
|
||||
place-self: center;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.error {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 2em;
|
||||
}
|
||||
pre {
|
||||
border: 1px solid #ff000080;
|
||||
margin-left: 1em;
|
||||
padding: 0 0.7em;
|
||||
border-radius: 0.5em;
|
||||
background-color: #ff000010;
|
||||
font-size: 1.3em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px solid $fg;
|
||||
color: $fg;
|
||||
background: $bg;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
align-self: end;
|
||||
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
main {
|
||||
grid-template-columns: 1fr 92% 1fr;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 2rem;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
div {
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
section.apps .applist {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
131
web/source/css/profile.css
Normal file
131
web/source/css/profile.css
Normal file
@ -0,0 +1,131 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
main {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.headerimage {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 15em;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
position: relative;
|
||||
background: $bg_darker3;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
.basic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 25em;
|
||||
gap: 0.5rem;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 25em;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container:before {
|
||||
content: "";
|
||||
float: left;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
|
||||
.displayname {
|
||||
font-weight: bold;
|
||||
font-size: 1.6rem;
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.detailed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 25em;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.bio {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: $acc1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accountstats {
|
||||
position: relative;
|
||||
background: $bg_darker3;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
.entry {
|
||||
background: $bg_lighter3;
|
||||
padding: 0.5rem;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
footer + div {
|
||||
/* something weird from the devstack.. */
|
||||
display: none;
|
||||
}
|
||||
245
web/source/css/status.css
Normal file
245
web/source/css/status.css
Normal file
@ -0,0 +1,245 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
main {
|
||||
background: transparent;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
.thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toot {
|
||||
position: relative;
|
||||
background: $bg_darker3;
|
||||
padding: 2rem;
|
||||
/* padding-bottom: 0; */
|
||||
display: grid;
|
||||
grid-template-columns: 3.2rem auto 1fr;
|
||||
column-gap: 0.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
grid-row: span 2;
|
||||
|
||||
img {
|
||||
height: 3.2rem;
|
||||
width: 3.2rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.displayname {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.username {
|
||||
color: $fg_dark;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
input.spoiler:checked ~ .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
label {
|
||||
background: $acc1;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.3rem;
|
||||
margin-left: 0.4rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
grid-column: span 2;
|
||||
|
||||
a {
|
||||
color: $acc1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
margin-top: 0.6rem;
|
||||
border-radius: 0.2rem;
|
||||
grid-column: span 3;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-auto-rows: 10rem;
|
||||
overflow: hidden;
|
||||
gap: 0.3rem;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no-image-desc {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0.1rem;
|
||||
right: 0.4rem;
|
||||
color: white;
|
||||
background: $blue;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 100%;
|
||||
z-index: 3;
|
||||
|
||||
i.fa {
|
||||
display: block;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 0.3rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&.single a {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
&.odd a:first-child, &.double a {
|
||||
grid-row: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: none;
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
padding-right: 1.3rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
color: #b0b0b5;
|
||||
grid-column: span 3;
|
||||
margin-top: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
div.stats::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div::after {
|
||||
$size: 0.25rem;
|
||||
display: block;
|
||||
background: $fg_dark;
|
||||
height: $size;
|
||||
width: $size;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc((1.5rem - $size) / 2);
|
||||
right: 0.55rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-link {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
$border-radius: 0.3rem;
|
||||
&:first-child {
|
||||
/* top left, top right */
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
/* bottom left, bottom right */
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
background: $bg;
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
.displayname {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.text {
|
||||
grid-column: span 3;
|
||||
grid-row: span 1;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.media {
|
||||
grid-auto-rows: 1fr;
|
||||
max-height: 120rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer + div { /* something weird from the devstack.. */
|
||||
display: none;
|
||||
}
|
||||
73
web/source/dev-server.js
Normal file
73
web/source/dev-server.js
Normal file
@ -0,0 +1,73 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const express = require("express");
|
||||
|
||||
const app = express();
|
||||
|
||||
function html(title, css, js) {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
${["_colors.css", "base.css", ...css].map((file) => {
|
||||
return `<link rel="stylesheet" href="/${file}"></link>`;
|
||||
}).join("\n")}
|
||||
<title>GoToSocial ${title} Panel</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="/assets/logo.png" alt="Instance Logo">
|
||||
<div>
|
||||
<h1>
|
||||
GoToSocial ${title} Panel
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main class="lightgray">
|
||||
<div id="root"></div>
|
||||
</main>
|
||||
${["bundle.js", ...js].map((file) => {
|
||||
return `<script src="/${file}"></script>`;
|
||||
}).join("\n")}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
app.get("/admin", (req, res) => {
|
||||
res.send(html("Admin", ["panels-admin-style.css"], ["admin-panel.js"]));
|
||||
});
|
||||
|
||||
app.get("/user", (req, res) => {
|
||||
res.send(html("Settings", ["panels-user-style.css"], ["user-panel.js"]));
|
||||
});
|
||||
|
||||
app.use("/assets", express.static("../assets/"));
|
||||
|
||||
if (process.env.NODE_ENV != "development") {
|
||||
console.log("adding static asset route");
|
||||
app.use(express.static("../assets/dist"));
|
||||
}
|
||||
|
||||
module.exports = app;
|
||||
41
web/source/frontend/index.js
Normal file
41
web/source/frontend/index.js
Normal file
@ -0,0 +1,41 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
// WARNING: currently dependencies get deduplicated with factor-bundle, but
|
||||
// our frontend templates don't load the common bundle.js since it contains React etc
|
||||
// so we can't use any dependencies that would deduplicate with the other files
|
||||
|
||||
Array.from(document.getElementsByClassName("spoiler-label")).forEach((label) => {
|
||||
let checkbox = document.getElementById(label.htmlFor);
|
||||
console.log(label, checkbox);
|
||||
if (checkbox != undefined) {
|
||||
function update() {
|
||||
if(checkbox.checked) {
|
||||
label.innerHTML = "Show more";
|
||||
} else {
|
||||
label.innerHTML = "Show less";
|
||||
}
|
||||
}
|
||||
update();
|
||||
|
||||
label.addEventListener("click", () => {setTimeout(update, 1);});
|
||||
}
|
||||
});
|
||||
108
web/source/index.js
Normal file
108
web/source/index.js
Normal file
@ -0,0 +1,108 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
/*
|
||||
Bundle the frontend panels for admin and user settings
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
const budoExpress = require('@f0x52/budo-express');
|
||||
const babelify = require('babelify');
|
||||
const fs = require("fs");
|
||||
const EventEmitter = require('events');
|
||||
|
||||
function out(name = "") {
|
||||
return path.join(__dirname, "../assets/dist/", name);
|
||||
}
|
||||
|
||||
module.exports = {out};
|
||||
|
||||
const splitCSS = require("./lib/split-css.js");
|
||||
|
||||
const bundles = {
|
||||
"./frontend/index.js": "frontend.js",
|
||||
"./panels/admin/index.js": "admin-panel.js",
|
||||
"./panels/user/index.js": "user-panel.js",
|
||||
};
|
||||
|
||||
const postcssPlugins = [
|
||||
"postcss-import",
|
||||
"postcss-strip-inline-comments",
|
||||
"postcss-nested",
|
||||
"autoprefixer",
|
||||
"postcss-custom-prop-vars",
|
||||
"postcss-color-mod-function"
|
||||
].map((plugin) => require(plugin)());
|
||||
|
||||
const browserifyConfig = {
|
||||
transform: [
|
||||
babelify.configure({
|
||||
presets: [
|
||||
require.resolve("@babel/preset-env"),
|
||||
require.resolve("@babel/preset-react")
|
||||
]
|
||||
}),
|
||||
[require("uglifyify"), {
|
||||
global: true,
|
||||
exts: ".js"
|
||||
}]
|
||||
],
|
||||
plugin: [
|
||||
[require("icssify"), {
|
||||
parser: require('postcss-scss'),
|
||||
before: postcssPlugins,
|
||||
mode: 'global'
|
||||
}],
|
||||
[require("css-extract"), { out: splitCSS }],
|
||||
[require("factor-bundle"), {
|
||||
outputs: Object.values(bundles).map((file) => {
|
||||
return out(file);
|
||||
})
|
||||
}]
|
||||
]
|
||||
};
|
||||
|
||||
const entryFiles = Object.keys(bundles);
|
||||
|
||||
fs.readdirSync(path.join(__dirname, "./css")).forEach((file) => {
|
||||
entryFiles.push(path.join(__dirname, "./css", file));
|
||||
});
|
||||
|
||||
if (!fs.existsSync(out())){
|
||||
fs.mkdirSync(out(), { recursive: true });
|
||||
}
|
||||
|
||||
const server = budoExpress({
|
||||
port: 8081,
|
||||
host: "localhost",
|
||||
entryFiles: entryFiles,
|
||||
basePath: __dirname,
|
||||
bundlePath: "bundle.js",
|
||||
staticPath: out(),
|
||||
expressApp: require("./dev-server.js"),
|
||||
browserify: browserifyConfig,
|
||||
livereloadPattern: "**/*.{html,js,svg}"
|
||||
});
|
||||
|
||||
if (server instanceof EventEmitter) {
|
||||
server.on("update", (contents) => {
|
||||
fs.writeFileSync(out("bundle.js"), contents);
|
||||
});
|
||||
}
|
||||
220
web/source/lib/oauth.js
Normal file
220
web/source/lib/oauth.js
Normal file
@ -0,0 +1,220 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const Promise = require("bluebird");
|
||||
|
||||
function getCurrentUrl() {
|
||||
return window.location.origin + window.location.pathname; // strips ?query=string and #hash
|
||||
}
|
||||
|
||||
module.exports = function oauthClient(config, initState) {
|
||||
/* config:
|
||||
instance: instance domain (https://testingtesting123.xyz)
|
||||
client_name: "GoToSocial Admin Panel"
|
||||
scope: []
|
||||
website:
|
||||
*/
|
||||
|
||||
let state = initState;
|
||||
if (initState == undefined) {
|
||||
state = localStorage.getItem("oauth");
|
||||
if (state == undefined) {
|
||||
state = {
|
||||
config
|
||||
};
|
||||
storeState();
|
||||
} else {
|
||||
state = JSON.parse(state);
|
||||
}
|
||||
}
|
||||
|
||||
function storeState() {
|
||||
localStorage.setItem("oauth", JSON.stringify(state));
|
||||
}
|
||||
|
||||
/* register app
|
||||
/api/v1/apps
|
||||
*/
|
||||
function register() {
|
||||
if (state.client_id != undefined) {
|
||||
return true; // we already have a registration
|
||||
}
|
||||
let url = new URL(config.instance);
|
||||
url.pathname = "/api/v1/apps";
|
||||
|
||||
return fetch(url.href, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
client_name: config.client_name,
|
||||
redirect_uris: getCurrentUrl(),
|
||||
scopes: config.scope.join(" "),
|
||||
website: getCurrentUrl()
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.status != 200) {
|
||||
throw res;
|
||||
}
|
||||
return res.json();
|
||||
}).then((json) => {
|
||||
state.client_id = json.client_id;
|
||||
state.client_secret = json.client_secret;
|
||||
storeState();
|
||||
});
|
||||
}
|
||||
|
||||
/* authorize:
|
||||
/oauth/authorize
|
||||
?client_id=CLIENT_ID
|
||||
&redirect_uri=window.location.href
|
||||
&response_type=code
|
||||
&scope=admin
|
||||
*/
|
||||
function authorize() {
|
||||
let url = new URL(config.instance);
|
||||
url.pathname = "/oauth/authorize";
|
||||
url.searchParams.set("client_id", state.client_id);
|
||||
url.searchParams.set("redirect_uri", getCurrentUrl());
|
||||
url.searchParams.set("response_type", "code");
|
||||
url.searchParams.set("scope", config.scope.join(" "));
|
||||
|
||||
window.location.assign(url.href);
|
||||
}
|
||||
|
||||
function callback() {
|
||||
if (state.access_token != undefined) {
|
||||
return; // we're already done :)
|
||||
}
|
||||
let params = (new URL(window.location)).searchParams;
|
||||
|
||||
let token = params.get("code");
|
||||
if (token != null) {
|
||||
console.log("got token callback:", token);
|
||||
}
|
||||
|
||||
return authorizeToken(token)
|
||||
.catch((e) => {
|
||||
console.log("Error processing oauth callback:", e);
|
||||
logout(); // just to be sure
|
||||
});
|
||||
}
|
||||
|
||||
function authorizeToken(token) {
|
||||
let url = new URL(config.instance);
|
||||
url.pathname = "/oauth/token";
|
||||
return fetch(url.href, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
client_id: state.client_id,
|
||||
client_secret: state.client_secret,
|
||||
redirect_uri: getCurrentUrl(),
|
||||
grant_type: "authorization_code",
|
||||
code: token
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.status != 200) {
|
||||
throw res;
|
||||
}
|
||||
return res.json();
|
||||
}).then((json) => {
|
||||
state.access_token = json.access_token;
|
||||
storeState();
|
||||
window.location = getCurrentUrl(); // clear ?token=
|
||||
});
|
||||
}
|
||||
|
||||
function isAuthorized() {
|
||||
return (state.access_token != undefined);
|
||||
}
|
||||
|
||||
function apiRequest(path, method, data, type="json") {
|
||||
if (!isAuthorized()) {
|
||||
throw new Error("Not Authenticated");
|
||||
}
|
||||
let url = new URL(config.instance);
|
||||
let [p, s] = path.split("?");
|
||||
url.pathname = p;
|
||||
if (s != undefined) {
|
||||
url.search = s;
|
||||
}
|
||||
let headers = {
|
||||
"Authorization": `Bearer ${state.access_token}`
|
||||
};
|
||||
let body = data;
|
||||
if (type == "json" && body != undefined) {
|
||||
headers["Content-Type"] = "application/json";
|
||||
body = JSON.stringify(data);
|
||||
}
|
||||
return fetch(url.href, {
|
||||
method,
|
||||
headers,
|
||||
body
|
||||
}).then((res) => {
|
||||
return Promise.all([res.json(), res]);
|
||||
}).then(([json, res]) => {
|
||||
if (res.status != 200) {
|
||||
if (json.error) {
|
||||
throw new Error(json.error);
|
||||
} else {
|
||||
throw new Error(`${res.status}: ${res.statusText}`);
|
||||
}
|
||||
} else {
|
||||
return json;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function logout() {
|
||||
let url = new URL(config.instance);
|
||||
url.pathname = "/oauth/revoke";
|
||||
return fetch(url.href, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
client_id: state.client_id,
|
||||
client_secret: state.client_secret,
|
||||
token: state.access_token,
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.status != 200) {
|
||||
// GoToSocial doesn't actually implement this route yet,
|
||||
// so error is to be expected
|
||||
return;
|
||||
}
|
||||
return res.json();
|
||||
}).catch(() => {
|
||||
// see above
|
||||
}).then(() => {
|
||||
localStorage.removeItem("oauth");
|
||||
window.location = getCurrentUrl();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
register, authorize, callback, isAuthorized, apiRequest, logout
|
||||
};
|
||||
};
|
||||
76
web/source/lib/split-css.js
Normal file
76
web/source/lib/split-css.js
Normal file
@ -0,0 +1,76 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const {Writable} = require("stream");
|
||||
const {out} = require("../index.js");
|
||||
|
||||
const fromRegex = /\/\* from (.+?) \*\//;
|
||||
module.exports = function splitCSS() {
|
||||
let chunks = [];
|
||||
return new Writable({
|
||||
write: function(chunk, encoding, next) {
|
||||
chunks.push(chunk);
|
||||
next();
|
||||
},
|
||||
final: function() {
|
||||
let stream = chunks.join("");
|
||||
let input;
|
||||
let content = [];
|
||||
|
||||
function write() {
|
||||
if (content.length != 0) {
|
||||
if (input == undefined) {
|
||||
throw new Error("Got CSS content without filename, can't output: ", content);
|
||||
} else {
|
||||
console.log("writing to", out(input));
|
||||
fs.writeFileSync(out(input), content.join("\n"));
|
||||
}
|
||||
content = [];
|
||||
}
|
||||
}
|
||||
|
||||
const cssDir = path.join(__dirname, "../css");
|
||||
|
||||
stream.split("\n").forEach((line) => {
|
||||
if (line.startsWith("/* from")) {
|
||||
let found = fromRegex.exec(line);
|
||||
if (found != null) {
|
||||
write();
|
||||
|
||||
let parts = path.parse(found[1]);
|
||||
if (path.relative(cssDir, path.join(process.cwd(), parts.dir)) == "") {
|
||||
input = parts.base;
|
||||
} else {
|
||||
// prefix filename with path
|
||||
let relative = path.relative(path.join(__dirname, "../"), path.join(process.cwd(), found[1]));
|
||||
input = relative.replace(/\//g, "-");
|
||||
}
|
||||
}
|
||||
} else {
|
||||
content.push(line);
|
||||
}
|
||||
});
|
||||
write();
|
||||
}
|
||||
});
|
||||
};
|
||||
47
web/source/package.json
Normal file
47
web/source/package.json
Normal file
@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "gotosocial-frontend",
|
||||
"version": "0.3.4",
|
||||
"description": "GoToSocial frontend sources",
|
||||
"main": "index.js",
|
||||
"author": "f0x",
|
||||
"license": "AGPL-3.0",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.12.13",
|
||||
"@babel/preset-env": "^7.12.13",
|
||||
"@babel/preset-react": "^7.12.13",
|
||||
"@f0x52/budo-express": "^1.1.0",
|
||||
"autoprefixer": "^9.8.0",
|
||||
"babelify": "^10.0.0",
|
||||
"bluebird": "^3.7.2",
|
||||
"browserify": "^17.0.0",
|
||||
"browserlist": "^1.0.1",
|
||||
"css-extract": "^2.0.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"express": "^4.18.1",
|
||||
"factor-bundle": "^2.5.0",
|
||||
"from2-string": "^1.1.0",
|
||||
"icssify": "^1.2.1",
|
||||
"js-file-download": "^0.4.12",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-color-function": "^4.1.0",
|
||||
"postcss-color-mod-function": "3.0.0",
|
||||
"postcss-comment": "^2.0.0",
|
||||
"postcss-custom-prop-vars": "0.0.3",
|
||||
"postcss-import": "12",
|
||||
"postcss-mixins": "^6.2.3",
|
||||
"postcss-nested": "^4.2.1",
|
||||
"postcss-scss": "^4.0.0",
|
||||
"postcss-simple-vars": "^5.0.2",
|
||||
"postcss-strip-inline-comments": "^0.1.5",
|
||||
"pretty-bytes": "^5.6.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"reactify": "^1.1.1",
|
||||
"uglifyify": "^5.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@f0x52/eslint-config-react": "^1.1.0",
|
||||
"eslint": "^7.30.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0"
|
||||
}
|
||||
}
|
||||
21
web/source/panels/admin/README.md
Normal file
21
web/source/panels/admin/README.md
Normal file
@ -0,0 +1,21 @@
|
||||
# GoToSocial Admin Panel
|
||||
|
||||
Standalone web admin panel for [GoToSocial](https://github.com/superseriousbusiness/gotosocial).
|
||||
|
||||
A public hosted instance is also available at https://gts.superseriousbusiness.org/admin/, so you can fill your own instance URL in there.
|
||||
|
||||
## Installation
|
||||
Build requirements: some version of Node.js with npm,
|
||||
```
|
||||
git clone https://github.com/superseriousbusiness/gotosocial-admin.git && cd gotosocial-admin
|
||||
npm install
|
||||
node index.js
|
||||
```
|
||||
All processed build output will now be in `public/`, which you can copy over to a folder in your GoToSocial installation like `web/assets/admin`, or serve elsewhere.
|
||||
No further configuration is required, authentication happens through normal OAUTH flow.
|
||||
|
||||
## Development
|
||||
Follow the installation steps, but run `NODE_ENV=development node index.js` to start the livereloading dev server instead.
|
||||
|
||||
## License, donations
|
||||
[AGPL-3.0](https://www.gnu.org/licenses/agpl-3.0.html). If you want to support my work, you can: <a href="https://liberapay.com/f0x/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a>
|
||||
96
web/source/panels/admin/auth.js
Normal file
96
web/source/panels/admin/auth.js
Normal file
@ -0,0 +1,96 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const Promise = require("bluebird");
|
||||
const React = require("react");
|
||||
const oauthLib = require("../../lib/oauth");
|
||||
|
||||
module.exports = function Auth({setOauth}) {
|
||||
const [ instance, setInstance ] = React.useState("");
|
||||
|
||||
React.useEffect(() => {
|
||||
let isStillMounted = true;
|
||||
// check if current domain runs an instance
|
||||
let thisUrl = new URL(window.location.origin);
|
||||
thisUrl.pathname = "/api/v1/instance";
|
||||
Promise.try(() => {
|
||||
return fetch(thisUrl.href);
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
return res.json();
|
||||
}
|
||||
}).then((json) => {
|
||||
if (json && json.uri && isStillMounted) {
|
||||
setInstance(json.uri);
|
||||
}
|
||||
}).catch((e) => {
|
||||
console.log("error checking instance response:", e);
|
||||
});
|
||||
|
||||
return () => {
|
||||
// cleanup function
|
||||
isStillMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
function doAuth() {
|
||||
return Promise.try(() => {
|
||||
return new URL(instance);
|
||||
}).catch(TypeError, () => {
|
||||
return new URL(`https://${instance}`);
|
||||
}).then((parsedURL) => {
|
||||
let url = parsedURL.toString();
|
||||
let oauth = oauthLib({
|
||||
instance: url,
|
||||
client_name: "GoToSocial Admin Panel",
|
||||
scope: ["admin"],
|
||||
website: window.location.href
|
||||
});
|
||||
setOauth(oauth);
|
||||
setInstance(url);
|
||||
return oauth.register().then(() => {
|
||||
return oauth;
|
||||
});
|
||||
}).then((oauth) => {
|
||||
return oauth.authorize();
|
||||
}).catch((e) => {
|
||||
console.log("error authenticating:", e);
|
||||
});
|
||||
}
|
||||
|
||||
function updateInstance(e) {
|
||||
if (e.key == "Enter") {
|
||||
doAuth();
|
||||
} else {
|
||||
setInstance(e.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="login">
|
||||
<h1>OAUTH Login:</h1>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<label htmlFor="instance">Instance: </label>
|
||||
<input value={instance} onChange={updateInstance} id="instance"/>
|
||||
<button onClick={doAuth}>Authenticate</button>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
318
web/source/panels/admin/blocks.js
Normal file
318
web/source/panels/admin/blocks.js
Normal file
@ -0,0 +1,318 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const Promise = require("bluebird");
|
||||
const React = require("react");
|
||||
const fileDownload = require("js-file-download");
|
||||
|
||||
function sortBlocks(blocks) {
|
||||
return blocks.sort((a, b) => { // alphabetical sort
|
||||
return a.domain.localeCompare(b.domain);
|
||||
});
|
||||
}
|
||||
|
||||
function deduplicateBlocks(blocks) {
|
||||
let a = new Map();
|
||||
blocks.forEach((block) => {
|
||||
a.set(block.id, block);
|
||||
});
|
||||
return Array.from(a.values());
|
||||
}
|
||||
|
||||
module.exports = function Blocks({oauth}) {
|
||||
const [blocks, setBlocks] = React.useState([]);
|
||||
const [info, setInfo] = React.useState("Fetching blocks");
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [checked, setChecked] = React.useState(new Set());
|
||||
|
||||
React.useEffect(() => {
|
||||
Promise.try(() => {
|
||||
return oauth.apiRequest("/api/v1/admin/domain_blocks", undefined, undefined, "GET");
|
||||
}).then((json) => {
|
||||
setInfo("");
|
||||
setError("");
|
||||
setBlocks(sortBlocks(json));
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setInfo("");
|
||||
});
|
||||
}, []);
|
||||
|
||||
let blockList = blocks.map((block) => {
|
||||
function update(e) {
|
||||
let newChecked = new Set(checked.values());
|
||||
if (e.target.checked) {
|
||||
newChecked.add(block.id);
|
||||
} else {
|
||||
newChecked.delete(block.id);
|
||||
}
|
||||
setChecked(newChecked);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment key={block.id}>
|
||||
<div><input type="checkbox" onChange={update} checked={checked.has(block.id)}></input></div>
|
||||
<div>{block.domain}</div>
|
||||
<div>{(new Date(block.created_at)).toLocaleString()}</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
function clearChecked() {
|
||||
setChecked(new Set());
|
||||
}
|
||||
|
||||
function undoChecked() {
|
||||
let amount = checked.size;
|
||||
if(confirm(`Are you sure you want to remove ${amount} block(s)?`)) {
|
||||
setInfo("");
|
||||
Promise.map(Array.from(checked.values()), (block) => {
|
||||
console.log("deleting", block);
|
||||
return oauth.apiRequest(`/api/v1/admin/domain_blocks/${block}`, "DELETE");
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
setInfo(`Deleted ${amount} blocks: ${res.map((a) => a.domain).join(", ")}`);
|
||||
}).catch((e) => {
|
||||
setError(e);
|
||||
});
|
||||
|
||||
let newBlocks = blocks.filter((block) => {
|
||||
if (checked.size > 0 && checked.has(block.id)) {
|
||||
checked.delete(block.id);
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
setBlocks(newBlocks);
|
||||
clearChecked();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="blocks">
|
||||
<h1>Blocks</h1>
|
||||
<div className="error accent">{errorMsg}</div>
|
||||
<div>{info}</div>
|
||||
<AddBlock oauth={oauth} blocks={blocks} setBlocks={setBlocks} />
|
||||
<h3>Blocks:</h3>
|
||||
<div style={{display: "grid", gridTemplateColumns: "1fr auto"}}>
|
||||
<span onClick={clearChecked} className="accent" style={{alignSelf: "end"}}>uncheck all</span>
|
||||
<button onClick={undoChecked}>Unblock selected</button>
|
||||
</div>
|
||||
<div className="blocklist overflow">
|
||||
{blockList}
|
||||
</div>
|
||||
<BulkBlocking oauth={oauth} blocks={blocks} setBlocks={setBlocks}/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
function BulkBlocking({oauth, blocks, setBlocks}) {
|
||||
const [bulk, setBulk] = React.useState("");
|
||||
const [blockMap, setBlockMap] = React.useState(new Map());
|
||||
const [output, setOutput] = React.useState();
|
||||
|
||||
React.useEffect(() => {
|
||||
let newBlockMap = new Map();
|
||||
blocks.forEach((block) => {
|
||||
newBlockMap.set(block.domain, block);
|
||||
});
|
||||
setBlockMap(newBlockMap);
|
||||
}, [blocks]);
|
||||
|
||||
const fileRef = React.useRef();
|
||||
|
||||
function error(e) {
|
||||
setOutput(<div className="error accent">{e}</div>);
|
||||
throw e;
|
||||
}
|
||||
|
||||
function fileUpload() {
|
||||
let reader = new FileReader();
|
||||
reader.addEventListener("load", (e) => {
|
||||
try {
|
||||
// TODO: use validatem?
|
||||
let json = JSON.parse(e.target.result);
|
||||
json.forEach((block) => {
|
||||
console.log("block:", block);
|
||||
});
|
||||
} catch(e) {
|
||||
error(e.message);
|
||||
}
|
||||
});
|
||||
reader.readAsText(fileRef.current.files[0]);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (fileRef && fileRef.current) {
|
||||
fileRef.current.addEventListener("change", fileUpload);
|
||||
}
|
||||
return function cleanup() {
|
||||
fileRef.current.removeEventListener("change", fileUpload);
|
||||
};
|
||||
});
|
||||
|
||||
function textImport() {
|
||||
Promise.try(() => {
|
||||
if (bulk[0] == "[") {
|
||||
// assume it's json
|
||||
return JSON.parse(bulk);
|
||||
} else {
|
||||
return bulk.split("\n").map((val) => {
|
||||
return {
|
||||
domain: val.trim()
|
||||
};
|
||||
});
|
||||
}
|
||||
}).then((domains) => {
|
||||
console.log(domains);
|
||||
let before = domains.length;
|
||||
setOutput(`Importing ${before} domain(s)`);
|
||||
domains = domains.filter(({domain}) => {
|
||||
return (domain != "" && !blockMap.has(domain));
|
||||
});
|
||||
setOutput(<span>{output}<br/>{`Deduplicated ${before - domains.length}/${before} with existing blocks, adding ${domains.length} block(s)`}</span>);
|
||||
if (domains.length > 0) {
|
||||
let data = new FormData();
|
||||
data.append("domains", new Blob([JSON.stringify(domains)], {type: "application/json"}), "import.json");
|
||||
return oauth.apiRequest("/api/v1/admin/domain_blocks?import=true", "POST", data, "form");
|
||||
}
|
||||
}).then((json) => {
|
||||
console.log("bulk import result:", json);
|
||||
setBlocks(sortBlocks(deduplicateBlocks([...json, ...blocks])));
|
||||
}).catch((e) => {
|
||||
error(e.message);
|
||||
});
|
||||
}
|
||||
|
||||
function textExport() {
|
||||
setBulk(blocks.reduce((str, val) => {
|
||||
if (typeof str == "object") {
|
||||
return str.domain;
|
||||
} else {
|
||||
return str + "\n" + val.domain;
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
function jsonExport() {
|
||||
Promise.try(() => {
|
||||
return oauth.apiRequest("/api/v1/admin/domain_blocks?export=true", "GET");
|
||||
}).then((json) => {
|
||||
fileDownload(JSON.stringify(json), "block-export.json");
|
||||
}).catch((e) => {
|
||||
error(e);
|
||||
});
|
||||
}
|
||||
|
||||
function textAreaUpdate(e) {
|
||||
setBulk(e.target.value);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h3>Bulk import/export</h3>
|
||||
<label htmlFor="bulk">Domains, one per line:</label>
|
||||
<textarea value={bulk} rows={20} onChange={textAreaUpdate}></textarea>
|
||||
<div className="controls">
|
||||
<button onClick={textImport}>Import All From Field</button>
|
||||
<button onClick={textExport}>Export To Field</button>
|
||||
<label className="button" htmlFor="upload">Upload .json</label>
|
||||
<button onClick={jsonExport}>Download .json</button>
|
||||
</div>
|
||||
{output}
|
||||
<input type="file" id="upload" className="hidden" ref={fileRef}></input>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function AddBlock({oauth, blocks, setBlocks}) {
|
||||
const [domain, setDomain] = React.useState("");
|
||||
const [type, setType] = React.useState("suspend");
|
||||
const [obfuscated, setObfuscated] = React.useState(false);
|
||||
const [privateDescription, setPrivateDescription] = React.useState("");
|
||||
const [publicDescription, setPublicDescription] = React.useState("");
|
||||
|
||||
function addBlock() {
|
||||
console.log(`${type}ing`, domain);
|
||||
Promise.try(() => {
|
||||
return oauth.apiRequest("/api/v1/admin/domain_blocks", "POST", {
|
||||
domain: domain,
|
||||
obfuscate: obfuscated,
|
||||
private_comment: privateDescription,
|
||||
public_comment: publicDescription
|
||||
}, "json");
|
||||
}).then((json) => {
|
||||
setDomain("");
|
||||
setPrivateDescription("");
|
||||
setPublicDescription("");
|
||||
setBlocks([json, ...blocks]);
|
||||
});
|
||||
}
|
||||
|
||||
function onDomainChange(e) {
|
||||
setDomain(e.target.value);
|
||||
}
|
||||
|
||||
function onTypeChange(e) {
|
||||
setType(e.target.value);
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
if (e.key == "Enter") {
|
||||
addBlock();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h3>Add Block:</h3>
|
||||
<div className="addblock">
|
||||
<input id="domain" placeholder="instance" onChange={onDomainChange} value={domain} onKeyDown={onKeyDown} />
|
||||
<select value={type} onChange={onTypeChange}>
|
||||
<option id="suspend">Suspend</option>
|
||||
<option id="silence">Silence</option>
|
||||
</select>
|
||||
<button onClick={addBlock}>Add</button>
|
||||
<div>
|
||||
<label htmlFor="private">Private description:</label><br/>
|
||||
<textarea id="private" value={privateDescription} onChange={(e) => setPrivateDescription(e.target.value)}></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="public">Public description:</label><br/>
|
||||
<textarea id="public" value={publicDescription} onChange={(e) => setPublicDescription(e.target.value)}></textarea>
|
||||
</div>
|
||||
<div className="single">
|
||||
<label htmlFor="obfuscate">Obfuscate:</label>
|
||||
<input id="obfuscate" type="checkbox" value={obfuscated} onChange={(e) => setObfuscated(e.target.checked)}/>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
// function Blocklist() {
|
||||
// return (
|
||||
// <section className="blocklists">
|
||||
// <h1>Blocklists</h1>
|
||||
// </section>
|
||||
// );
|
||||
// }
|
||||
95
web/source/panels/admin/index.js
Normal file
95
web/source/panels/admin/index.js
Normal file
@ -0,0 +1,95 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const Promise = require("bluebird");
|
||||
const React = require("react");
|
||||
const ReactDom = require("react-dom");
|
||||
|
||||
const oauthLib = require("../../lib/oauth.js");
|
||||
const Auth = require("./auth");
|
||||
const Settings = require("./settings");
|
||||
const Blocks = require("./blocks");
|
||||
|
||||
require("./style.css");
|
||||
|
||||
function App() {
|
||||
const [oauth, setOauth] = React.useState();
|
||||
const [hasAuth, setAuth] = React.useState(false);
|
||||
const [oauthState, setOauthState] = React.useState(localStorage.getItem("oauth"));
|
||||
|
||||
React.useEffect(() => {
|
||||
let state = localStorage.getItem("oauth");
|
||||
if (state != undefined) {
|
||||
state = JSON.parse(state);
|
||||
let restoredOauth = oauthLib(state.config, state);
|
||||
Promise.try(() => {
|
||||
return restoredOauth.callback();
|
||||
}).then(() => {
|
||||
setAuth(true);
|
||||
});
|
||||
setOauth(restoredOauth);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (!hasAuth && oauth && oauth.isAuthorized()) {
|
||||
setAuth(true);
|
||||
}
|
||||
|
||||
if (oauth && oauth.isAuthorized()) {
|
||||
return <AdminPanel oauth={oauth} />;
|
||||
} else if (oauthState != undefined) {
|
||||
return "processing oauth...";
|
||||
} else {
|
||||
return <Auth setOauth={setOauth} />;
|
||||
}
|
||||
}
|
||||
|
||||
function AdminPanel({oauth}) {
|
||||
/*
|
||||
Features: (issue #78)
|
||||
- [ ] Instance information updating
|
||||
GET /api/v1/instance PATCH /api/v1/instance
|
||||
- [ ] Domain block creation, viewing, and deletion
|
||||
GET /api/v1/admin/domain_blocks
|
||||
POST /api/v1/admin/domain_blocks
|
||||
GET /api/v1/admin/domain_blocks/DOMAIN_BLOCK_ID, DELETE /api/v1/admin/domain_blocks/DOMAIN_BLOCK_ID
|
||||
- [ ] Blocklist import/export
|
||||
GET /api/v1/admin/domain_blocks?export=true
|
||||
POST json file as form field domains to /api/v1/admin/domain_blocks
|
||||
*/
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Logout oauth={oauth}/>
|
||||
<Settings oauth={oauth} />
|
||||
<Blocks oauth={oauth}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function Logout({oauth}) {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={oauth.logout}>Logout</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDom.render(<App/>, document.getElementById("root"));
|
||||
175
web/source/panels/admin/settings.js
Normal file
175
web/source/panels/admin/settings.js
Normal file
@ -0,0 +1,175 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const Promise = require("bluebird");
|
||||
const React = require("react");
|
||||
|
||||
module.exports = function Settings({oauth}) {
|
||||
const [info, setInfo] = React.useState({});
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [statusMsg, setStatus] = React.useState("Fetching instance info");
|
||||
|
||||
React.useEffect(() => {
|
||||
Promise.try(() => {
|
||||
return oauth.apiRequest("/api/v1/instance", "GET");
|
||||
}).then((json) => {
|
||||
setInfo(json);
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setStatus("");
|
||||
});
|
||||
}, []);
|
||||
|
||||
function submit() {
|
||||
setStatus("PATCHing");
|
||||
setError("");
|
||||
return Promise.try(() => {
|
||||
let formDataInfo = new FormData();
|
||||
Object.entries(info).forEach(([key, val]) => {
|
||||
if (key == "contact_account") {
|
||||
key = "contact_username";
|
||||
val = val.username;
|
||||
}
|
||||
if (key == "email") {
|
||||
key = "contact_email";
|
||||
}
|
||||
if (typeof val != "object") {
|
||||
formDataInfo.append(key, val);
|
||||
}
|
||||
});
|
||||
return oauth.apiRequest("/api/v1/instance", "PATCH", formDataInfo, "form");
|
||||
}).then((json) => {
|
||||
setStatus("Config saved");
|
||||
console.log(json);
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setStatus("");
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="info login">
|
||||
<h1>Instance Information <button onClick={submit}>Save</button></h1>
|
||||
<div className="error accent">
|
||||
{errorMsg}
|
||||
</div>
|
||||
<div>
|
||||
{statusMsg}
|
||||
</div>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
{editableObject(info)}
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
function editableObject(obj, path=[]) {
|
||||
const readOnlyKeys = ["uri", "version", "urls_streaming_api", "stats"];
|
||||
const hiddenKeys = ["contact_account_", "urls"];
|
||||
const explicitShownKeys = ["contact_account_username"];
|
||||
const implementedKeys = "title, contact_account_username, email, short_description, description, terms, avatar, header".split(", ");
|
||||
|
||||
let listing = Object.entries(obj).map(([key, val]) => {
|
||||
let fullkey = [...path, key].join("_");
|
||||
|
||||
if (
|
||||
hiddenKeys.includes(fullkey) ||
|
||||
hiddenKeys.includes(path.join("_")+"_") // also match just parent path
|
||||
) {
|
||||
if (!explicitShownKeys.includes(fullkey)) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(val)) {
|
||||
// FIXME: handle this
|
||||
} else if (typeof val == "object") {
|
||||
return (<React.Fragment key={fullkey}>
|
||||
{editableObject(val, [...path, key])}
|
||||
</React.Fragment>);
|
||||
}
|
||||
|
||||
let isImplemented = "";
|
||||
if (!implementedKeys.includes(fullkey)) {
|
||||
isImplemented = " notImplemented";
|
||||
}
|
||||
|
||||
let isReadOnly = (
|
||||
readOnlyKeys.includes(fullkey) ||
|
||||
readOnlyKeys.includes(path.join("_")) ||
|
||||
isImplemented != ""
|
||||
);
|
||||
|
||||
let label = key.replace(/_/g, " ");
|
||||
if (path.length > 0) {
|
||||
label = `\u00A0`.repeat(4 * path.length) + label;
|
||||
}
|
||||
|
||||
let inputProps;
|
||||
let changeFunc;
|
||||
if (val === true || val === false) {
|
||||
inputProps = {
|
||||
type: "checkbox",
|
||||
defaultChecked: val,
|
||||
disabled: isReadOnly
|
||||
};
|
||||
changeFunc = (e) => e.target.checked;
|
||||
} else if (val.length != 0 && !isNaN(val)) {
|
||||
inputProps = {
|
||||
type: "number",
|
||||
defaultValue: val,
|
||||
readOnly: isReadOnly
|
||||
};
|
||||
changeFunc = (e) => e.target.value;
|
||||
} else {
|
||||
inputProps = {
|
||||
type: "text",
|
||||
defaultValue: val,
|
||||
readOnly: isReadOnly
|
||||
};
|
||||
changeFunc = (e) => e.target.value;
|
||||
}
|
||||
|
||||
function setRef(element) {
|
||||
if (element != null) {
|
||||
element.addEventListener("change", (e) => {
|
||||
obj[key] = changeFunc(e);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment key={fullkey}>
|
||||
<label htmlFor={key} className="capitalize">{label}</label>
|
||||
<div className={isImplemented}>
|
||||
<input className={isImplemented} ref={setRef} {...inputProps} />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
{path != "" &&
|
||||
<><b>{path}:</b> <span id="filler"></span></>
|
||||
}
|
||||
{listing}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
141
web/source/panels/admin/style.css
Normal file
141
web/source/panels/admin/style.css
Normal file
@ -0,0 +1,141 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
body {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
section.info {
|
||||
form {
|
||||
grid-template-columns: auto 1fr;
|
||||
width: calc(100% - 0.35rem);
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
label, input {
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
justify-self: start;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
input:read-only {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
section.blocks {
|
||||
.overflow {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.blocklist {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-gap: 0.35rem 0;
|
||||
|
||||
div {
|
||||
background: rgb(70, 79, 88);
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.addblock {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-gap: 0.35rem;
|
||||
|
||||
input, select {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
div {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
div.single input {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notImplemented {
|
||||
border: 2px solid rgb(70, 79, 88);
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#525c66,
|
||||
#525c66 10px,
|
||||
rgb(70, 79, 88) 10px,
|
||||
rgb(70, 79, 88) 20px
|
||||
) !important;
|
||||
}
|
||||
31
web/source/panels/user/index.js
Normal file
31
web/source/panels/user/index.js
Normal file
@ -0,0 +1,31 @@
|
||||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const Promise = require("bluebird");
|
||||
const React = require("react");
|
||||
const ReactDom = require("react-dom");
|
||||
|
||||
// require("./style.css");
|
||||
|
||||
function App() {
|
||||
return "hello world - user panel";
|
||||
}
|
||||
|
||||
ReactDom.render(<App/>, document.getElementById("root"));
|
||||
6307
web/source/yarn.lock
Normal file
6307
web/source/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user