Compare commits
1 commit
main
...
fix-dev-en
Author | SHA1 | Date | |
---|---|---|---|
|
c17e1375b3 |
56 changed files with 1834 additions and 1811 deletions
12
.github/pull_request_template.md
vendored
12
.github/pull_request_template.md
vendored
|
@ -1,12 +0,0 @@
|
|||
## Description
|
||||
|
||||
<!-- Please describe exactly what this PR changes, including URLs and issue
|
||||
numbers. If it fixes an issue, add "Fixes #XXXX" -->
|
||||
|
||||
## Screenshots
|
||||
|
||||
<!-- Please include before and after screenshots if applicable -->
|
||||
|
||||
### Before
|
||||
|
||||
### After
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "lemmy-ui",
|
||||
"version": "0.18.1-rc.9",
|
||||
"version": "0.18.1-rc.4",
|
||||
"description": "An isomorphic UI for lemmy",
|
||||
"repository": "https://github.com/LemmyNet/lemmy-ui",
|
||||
"license": "AGPL-3.0",
|
||||
|
@ -8,7 +8,7 @@
|
|||
"scripts": {
|
||||
"analyze": "webpack --mode=none",
|
||||
"prebuild:dev": "yarn clean && node generate_translations.js",
|
||||
"build:dev": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development",
|
||||
"build:dev": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) NODE_ENV=development --mode=development",
|
||||
"prebuild:prod": "yarn clean && node generate_translations.js",
|
||||
"build:prod": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=production",
|
||||
"clean": "yarn run rimraf dist",
|
||||
|
@ -48,7 +48,6 @@
|
|||
"check-password-strength": "^2.0.7",
|
||||
"classnames": "^2.3.1",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"cookie": "^0.5.0",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"cross-fetch": "^3.1.5",
|
||||
"css-loader": "^6.7.3",
|
||||
|
@ -66,6 +65,7 @@
|
|||
"inferno-i18next-dess": "0.0.2",
|
||||
"inferno-router": "^8.1.1",
|
||||
"inferno-server": "^8.1.1",
|
||||
"isomorphic-cookie": "^1.2.4",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"lemmy-js-client": "0.18.0-rc.2",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
|
@ -97,7 +97,6 @@
|
|||
"@babel/core": "^7.21.8",
|
||||
"@types/autosize": "^4.0.0",
|
||||
"@types/bootstrap": "^5.2.6",
|
||||
"@types/cookie": "^0.5.1",
|
||||
"@types/express": "^4.17.17",
|
||||
"@types/html-to-text": "^9.0.0",
|
||||
"@types/lodash.isequal": "^4.5.6",
|
||||
|
@ -126,7 +125,6 @@
|
|||
"style-loader": "^3.3.2",
|
||||
"terser": "^5.17.3",
|
||||
"typescript": "^5.0.4",
|
||||
"typescript-language-server": "^3.3.2",
|
||||
"webpack-bundle-analyzer": "^4.9.0",
|
||||
"webpack-dev-server": "4.15.0"
|
||||
},
|
||||
|
|
|
@ -81,7 +81,6 @@
|
|||
}
|
||||
|
||||
.vote-bar {
|
||||
min-width: 5ch;
|
||||
margin-top: -6.5px;
|
||||
}
|
||||
|
||||
|
@ -254,6 +253,10 @@ hr {
|
|||
-ms-filter: blur(10px);
|
||||
}
|
||||
|
||||
.img-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.img-expanded {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
@ -346,12 +349,10 @@ br.big {
|
|||
}
|
||||
|
||||
.avatar-overlay {
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
max-width: 120px;
|
||||
max-height: 120px;
|
||||
min-width: 80px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.avatar-pushup {
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import { initializeSite, isAuthPath } from "@utils/app";
|
||||
import { getHttpBaseInternal } from "@utils/env";
|
||||
import { ErrorPageData } from "@utils/types";
|
||||
import * as cookie from "cookie";
|
||||
import fetch from "cross-fetch";
|
||||
import type { Request, Response } from "express";
|
||||
import { StaticRouter, matchPath } from "inferno-router";
|
||||
import { renderToString } from "inferno-server";
|
||||
import IsomorphicCookie from "isomorphic-cookie";
|
||||
import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
||||
import { App } from "../../shared/components/app/app";
|
||||
import {
|
||||
|
@ -25,15 +25,11 @@ import { setForwardedHeaders } from "../utils/set-forwarded-headers";
|
|||
export default async (req: Request, res: Response) => {
|
||||
try {
|
||||
const activeRoute = routes.find(route => matchPath(req.path, route));
|
||||
|
||||
let auth = req.headers.cookie
|
||||
? cookie.parse(req.headers.cookie).jwt
|
||||
: undefined;
|
||||
let auth: string | undefined = IsomorphicCookie.load("jwt", req);
|
||||
|
||||
const getSiteForm: GetSite = { auth };
|
||||
|
||||
const headers = setForwardedHeaders(req.headers);
|
||||
|
||||
const client = wrapClient(
|
||||
new LemmyHttp(getHttpBaseInternal(), { fetchFunction: fetch, headers })
|
||||
);
|
||||
|
@ -47,7 +43,6 @@ export default async (req: Request, res: Response) => {
|
|||
let routeData: RouteData = {};
|
||||
let errorPageData: ErrorPageData | undefined = undefined;
|
||||
let try_site = await client.getSite(getSiteForm);
|
||||
|
||||
if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
|
||||
console.error(
|
||||
"Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
|
||||
|
@ -90,13 +85,12 @@ export default async (req: Request, res: Response) => {
|
|||
}
|
||||
|
||||
const error = Object.values(routeData).find(
|
||||
res => res.state === "failed" && res.msg !== "couldnt_find_object" // TODO: find a better way of handling errors
|
||||
res => res.state === "failed"
|
||||
) as FailedRequestState | undefined;
|
||||
|
||||
// Redirect to the 404 if there's an API error
|
||||
if (error) {
|
||||
console.error(error.msg);
|
||||
|
||||
if (error.msg === "instance_is_private") {
|
||||
return res.redirect(`/signup`);
|
||||
} else {
|
||||
|
@ -125,7 +119,6 @@ export default async (req: Request, res: Response) => {
|
|||
// If an error is caught here, the error page couldn't even be rendered
|
||||
console.error(err);
|
||||
res.statusCode = 500;
|
||||
|
||||
return res.send(
|
||||
process.env.NODE_ENV === "development" ? err.message : "Server error"
|
||||
);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import type { NextFunction, Request, Response } from "express";
|
||||
import { hasJwtCookie } from "./utils/has-jwt-cookie";
|
||||
import { UserService } from "../shared/services";
|
||||
|
||||
export function setDefaultCsp({
|
||||
res,
|
||||
|
@ -27,10 +27,12 @@ export function setCacheControl(
|
|||
res: Response,
|
||||
next: NextFunction
|
||||
) {
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
// Avoid setting Cache-Control in development
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
return next();
|
||||
}
|
||||
|
||||
const user = UserService.Instance;
|
||||
let caching: string;
|
||||
|
||||
if (
|
||||
|
@ -40,7 +42,7 @@ export function setCacheControl(
|
|||
// Static content gets cached publicly for a day
|
||||
caching = "public, max-age=86400";
|
||||
} else {
|
||||
if (hasJwtCookie(req)) {
|
||||
if (user.auth()) {
|
||||
caching = "private";
|
||||
} else {
|
||||
caching = "public, max-age=5";
|
||||
|
|
|
@ -1,6 +0,0 @@
|
|||
import * as cookie from "cookie";
|
||||
import type { Request } from "express";
|
||||
|
||||
export function hasJwtCookie(req: Request): boolean {
|
||||
return Boolean(cookie.parse(req.headers.cookie ?? "").jwt?.length);
|
||||
}
|
|
@ -1,11 +1,10 @@
|
|||
import { isAuthPath, setIsoData } from "@utils/app";
|
||||
import { dataBsTheme } from "@utils/browser";
|
||||
import { Component, RefObject, createRef, linkEvent } from "inferno";
|
||||
import { Provider } from "inferno-i18next-dess";
|
||||
import { Route, Switch } from "inferno-router";
|
||||
import { IsoDataOptionalSite } from "../../interfaces";
|
||||
import { routes } from "../../routes";
|
||||
import { FirstLoadService, I18NextService, UserService } from "../../services";
|
||||
import { FirstLoadService, I18NextService } from "../../services";
|
||||
import AuthGuard from "../common/auth-guard";
|
||||
import ErrorGuard from "../common/error-guard";
|
||||
import { ErrorPage } from "./error-page";
|
||||
|
@ -26,13 +25,6 @@ export class App extends Component<any, any> {
|
|||
event.preventDefault();
|
||||
this.mainContentRef.current?.focus();
|
||||
}
|
||||
|
||||
user = UserService.Instance.myUserInfo;
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({ bsTheme: dataBsTheme(this.user) });
|
||||
}
|
||||
|
||||
render() {
|
||||
const siteRes = this.isoData.site_res;
|
||||
const siteView = siteRes?.site_view;
|
||||
|
@ -40,11 +32,7 @@ export class App extends Component<any, any> {
|
|||
return (
|
||||
<>
|
||||
<Provider i18next={I18NextService.i18n}>
|
||||
<div
|
||||
id="app"
|
||||
className="lemmy-site"
|
||||
data-bs-theme={this.state?.bsTheme}
|
||||
>
|
||||
<div id="app" className="lemmy-site">
|
||||
<button
|
||||
type="button"
|
||||
className="btn skip-link bg-light position-absolute start-0 z-3"
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import { setIsoData } from "@utils/app";
|
||||
import { removeAuthParam } from "@utils/helpers";
|
||||
import { Component } from "inferno";
|
||||
import { T } from "inferno-i18next-dess";
|
||||
import { Link } from "inferno-router";
|
||||
|
@ -59,7 +58,7 @@ export class ErrorPage extends Component<any, any> {
|
|||
<T
|
||||
i18nKey="error_code_message"
|
||||
parent="p"
|
||||
interpolation={{ error: removeAuthParam(errorPageData.error) }}
|
||||
interpolation={{ error: errorPageData.error }}
|
||||
>
|
||||
#<strong className="text-danger">#</strong>#
|
||||
</T>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import {
|
||||
colorList,
|
||||
getCommentParentId,
|
||||
getRoleLabelPill,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
showScores,
|
||||
|
@ -62,7 +63,6 @@ import { I18NextService, UserService } from "../../services";
|
|||
import { setupTippy } from "../../tippy";
|
||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||
import { MomentTime } from "../common/moment-time";
|
||||
import { UserBadges } from "../common/user-badges";
|
||||
import { VoteButtonsCompact } from "../common/vote-buttons";
|
||||
import { CommunityLink } from "../community/community-link";
|
||||
import { PersonListing } from "../person/person-listing";
|
||||
|
@ -299,7 +299,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
>
|
||||
<div className="d-flex flex-wrap align-items-center text-muted small">
|
||||
<button
|
||||
className="btn btn-sm btn-link text-muted me-2"
|
||||
className="btn btn-sm text-muted me-2"
|
||||
onClick={linkEvent(this, this.handleCommentCollapse)}
|
||||
aria-label={this.expandText}
|
||||
data-tippy-content={this.expandText}
|
||||
|
@ -310,19 +310,41 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
/>
|
||||
</button>
|
||||
|
||||
<PersonListing person={cv.creator} />
|
||||
<span className="me-2">
|
||||
<PersonListing person={cv.creator} />
|
||||
</span>
|
||||
|
||||
{cv.comment.distinguished && (
|
||||
<Icon icon="shield" inline classes="text-danger ms-1" />
|
||||
<Icon icon="shield" inline classes="text-danger me-2" />
|
||||
)}
|
||||
|
||||
<UserBadges
|
||||
classNames="ms-1"
|
||||
isPostCreator={this.isPostCreator}
|
||||
isMod={isMod_}
|
||||
isAdmin={isAdmin_}
|
||||
isBot={cv.creator.bot_account}
|
||||
/>
|
||||
{this.isPostCreator &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("op").toUpperCase(),
|
||||
tooltip: I18NextService.i18n.t("creator"),
|
||||
classes: "text-bg-info",
|
||||
shrink: false,
|
||||
})}
|
||||
|
||||
{isMod_ &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("mod"),
|
||||
tooltip: I18NextService.i18n.t("mod"),
|
||||
classes: "text-bg-primary",
|
||||
})}
|
||||
|
||||
{isAdmin_ &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("admin"),
|
||||
tooltip: I18NextService.i18n.t("admin"),
|
||||
classes: "text-bg-danger",
|
||||
})}
|
||||
|
||||
{cv.creator.bot_account &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("bot_account").toLowerCase(),
|
||||
tooltip: I18NextService.i18n.t("bot_account"),
|
||||
})}
|
||||
|
||||
{this.props.showCommunity && (
|
||||
<>
|
||||
|
@ -1461,7 +1483,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
comment_id: i.commentId,
|
||||
removed: !i.commentView.comment.removed,
|
||||
auth: myAuthRequired(),
|
||||
reason: i.state.removeReason,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -32,7 +32,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
|||
return (
|
||||
<span className="emoji-picker">
|
||||
<button
|
||||
className="btn btn-sm btn-link rounded-0 text-muted"
|
||||
className="btn btn-sm text-muted"
|
||||
data-tippy-content={I18NextService.i18n.t("emoji")}
|
||||
aria-label={I18NextService.i18n.t("emoji")}
|
||||
disabled={this.props.disabled}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import { randomStr } from "@utils/helpers";
|
||||
import classNames from "classnames";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { HttpService, I18NextService, UserService } from "../../services";
|
||||
import { toast } from "../../toast";
|
||||
|
@ -34,35 +33,38 @@ export class ImageUploadForm extends Component<
|
|||
render() {
|
||||
return (
|
||||
<form className="image-upload-form d-inline">
|
||||
{this.props.imageSrc && (
|
||||
<span className="d-inline-block position-relative mb-2">
|
||||
{/* TODO: Create "Current Iamge" translation for alt text */}
|
||||
<img
|
||||
alt=""
|
||||
src={this.props.imageSrc}
|
||||
height={this.props.rounded ? 60 : ""}
|
||||
width={this.props.rounded ? 60 : ""}
|
||||
className={classNames({
|
||||
"rounded-circle object-fit-cover": this.props.rounded,
|
||||
"img-fluid": !this.props.rounded,
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
|
||||
type="button"
|
||||
onClick={linkEvent(this, this.handleRemoveImage)}
|
||||
aria-label={I18NextService.i18n.t("remove")}
|
||||
>
|
||||
<Icon icon="x" classes="mini-overlay" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
<label htmlFor={this.id} className="pointer text-muted small fw-bold">
|
||||
{this.props.imageSrc ? (
|
||||
<span className="d-inline-block position-relative">
|
||||
{/* TODO: Create "Current Iamge" translation for alt text */}
|
||||
<img
|
||||
alt=""
|
||||
src={this.props.imageSrc}
|
||||
height={this.props.rounded ? 60 : ""}
|
||||
width={this.props.rounded ? 60 : ""}
|
||||
className={`img-fluid ${
|
||||
this.props.rounded ? "rounded-circle" : ""
|
||||
}`}
|
||||
/>
|
||||
<button
|
||||
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
|
||||
type="button"
|
||||
onClick={linkEvent(this, this.handleRemoveImage)}
|
||||
aria-label={I18NextService.i18n.t("remove")}
|
||||
>
|
||||
<Icon icon="x" classes="mini-overlay" />
|
||||
</button>
|
||||
</span>
|
||||
) : (
|
||||
<span className="btn btn-secondary">{this.props.uploadTitle}</span>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id={this.id}
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
className="small form-control"
|
||||
name={this.id}
|
||||
className="d-none"
|
||||
disabled={!UserService.Instance.myUserInfo}
|
||||
onChange={linkEvent(this, this.handleImageUpload)}
|
||||
/>
|
||||
|
|
|
@ -170,39 +170,31 @@ export class MarkdownTextArea extends Component<
|
|||
<EmojiPicker
|
||||
onEmojiClick={e => this.handleEmoji(this, e)}
|
||||
></EmojiPicker>
|
||||
<label
|
||||
htmlFor={`file-upload-${this.id}`}
|
||||
className={classNames("mb-0", {
|
||||
pointer: UserService.Instance.myUserInfo,
|
||||
})}
|
||||
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
||||
>
|
||||
{this.state.imageUploadStatus ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-link rounded-0 text-muted mb-0"
|
||||
onClick={() => {
|
||||
document
|
||||
.getElementById(`file-upload-${this.id}`)
|
||||
?.click();
|
||||
}}
|
||||
>
|
||||
<form className="btn btn-sm text-muted fw-bold">
|
||||
<label
|
||||
htmlFor={`file-upload-${this.id}`}
|
||||
className={`mb-0 ${
|
||||
UserService.Instance.myUserInfo && "pointer"
|
||||
}`}
|
||||
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
||||
>
|
||||
{this.state.imageUploadStatus ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon icon="image" classes="icon-inline" />
|
||||
</button>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id={`file-upload-${this.id}`}
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
name="file"
|
||||
className="d-none"
|
||||
multiple
|
||||
disabled={!UserService.Instance.myUserInfo}
|
||||
onChange={linkEvent(this, this.handleImageUpload)}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id={`file-upload-${this.id}`}
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
name="file"
|
||||
className="d-none"
|
||||
multiple
|
||||
disabled={!UserService.Instance.myUserInfo}
|
||||
onChange={linkEvent(this, this.handleImageUpload)}
|
||||
/>
|
||||
</form>
|
||||
{this.getFormatButton("header", this.handleInsertHeader)}
|
||||
{this.getFormatButton(
|
||||
"strikethrough",
|
||||
|
@ -353,7 +345,7 @@ export class MarkdownTextArea extends Component<
|
|||
|
||||
return (
|
||||
<button
|
||||
className="btn btn-sm btn-link rounded-0 text-muted"
|
||||
className="btn btn-sm text-muted"
|
||||
data-tippy-content={I18NextService.i18n.t(type)}
|
||||
aria-label={I18NextService.i18n.t(type)}
|
||||
onClick={linkEvent(this, handleClick)}
|
||||
|
@ -481,7 +473,7 @@ export class MarkdownTextArea extends Component<
|
|||
// Keybind handler
|
||||
// Keybinds inspired by github comment area
|
||||
handleKeyBinds(i: MarkdownTextArea, event: KeyboardEvent) {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
if (event.ctrlKey) {
|
||||
switch (event.key) {
|
||||
case "k": {
|
||||
i.handleInsertLink(i, event);
|
||||
|
@ -710,20 +702,18 @@ export class MarkdownTextArea extends Component<
|
|||
quoteInsert() {
|
||||
const textarea: any = document.getElementById(this.id);
|
||||
const selectedText = window.getSelection()?.toString();
|
||||
let { content } = this.state;
|
||||
const { content } = this.state;
|
||||
if (selectedText) {
|
||||
const quotedText =
|
||||
selectedText
|
||||
.split("\n")
|
||||
.map(t => `> ${t}`)
|
||||
.join("\n") + "\n\n";
|
||||
|
||||
if (!content) {
|
||||
content = "";
|
||||
this.setState({ content: "" });
|
||||
} else {
|
||||
content = `${content}\n\n`;
|
||||
this.setState({ content: `${content}\n` });
|
||||
}
|
||||
|
||||
this.setState({
|
||||
content: `${content}${quotedText}`,
|
||||
});
|
||||
|
|
|
@ -34,13 +34,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
|
|||
className={classNames("overflow-hidden pictrs-image", {
|
||||
"img-fluid": !this.props.icon && !this.props.iconOverlay,
|
||||
banner: this.props.banner,
|
||||
"thumbnail rounded object-fit-cover":
|
||||
"thumbnail rounded":
|
||||
this.props.thumbnail && !this.props.icon && !this.props.banner,
|
||||
"img-expanded slight-radius":
|
||||
!this.props.thumbnail && !this.props.icon,
|
||||
"img-blur": this.props.thumbnail && this.props.nsfw,
|
||||
"object-fit-cover img-icon me-1": this.props.icon,
|
||||
"ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
|
||||
"img-cover img-icon me-1": this.props.icon,
|
||||
"ms-2 mb-0 rounded-circle img-cover avatar-overlay":
|
||||
this.props.iconOverlay,
|
||||
"avatar-pushup": this.props.pushup,
|
||||
})}
|
||||
|
|
|
@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
|
|||
const { searchText, selectedIndex, loadingEllipses } = this.state;
|
||||
|
||||
return (
|
||||
<div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
|
||||
<div className="searchable-select dropdown">
|
||||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
|
|
|
@ -1,112 +0,0 @@
|
|||
import classNames from "classnames";
|
||||
import { Component } from "inferno";
|
||||
import { I18NextService } from "../../services";
|
||||
|
||||
interface UserBadgesProps {
|
||||
isBanned?: boolean;
|
||||
isDeleted?: boolean;
|
||||
isPostCreator?: boolean;
|
||||
isMod?: boolean;
|
||||
isAdmin?: boolean;
|
||||
isBot?: boolean;
|
||||
classNames?: string;
|
||||
}
|
||||
|
||||
export function getRoleLabelPill({
|
||||
label,
|
||||
tooltip,
|
||||
classes,
|
||||
shrink = true,
|
||||
}: {
|
||||
label: string;
|
||||
tooltip: string;
|
||||
classes?: string;
|
||||
shrink?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className={`badge ${classes ?? "text-bg-light"}`}
|
||||
aria-label={tooltip}
|
||||
data-tippy-content={tooltip}
|
||||
>
|
||||
{shrink ? label[0].toUpperCase() : label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export class UserBadges extends Component<UserBadgesProps> {
|
||||
render() {
|
||||
return (
|
||||
(this.props.isBanned ||
|
||||
this.props.isPostCreator ||
|
||||
this.props.isMod ||
|
||||
this.props.isAdmin ||
|
||||
this.props.isBot) && (
|
||||
<span
|
||||
className={classNames(
|
||||
"row d-inline-flex gx-1",
|
||||
this.props.classNames
|
||||
)}
|
||||
>
|
||||
{this.props.isBanned && (
|
||||
<span className="col">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("banned"),
|
||||
tooltip: I18NextService.i18n.t("banned"),
|
||||
classes: "text-bg-danger",
|
||||
shrink: false,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
{this.props.isDeleted && (
|
||||
<span className="col">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("deleted"),
|
||||
tooltip: I18NextService.i18n.t("deleted"),
|
||||
classes: "text-bg-danger",
|
||||
shrink: false,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{this.props.isPostCreator && (
|
||||
<span className="col">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("op").toUpperCase(),
|
||||
tooltip: I18NextService.i18n.t("creator"),
|
||||
classes: "text-bg-info",
|
||||
shrink: false,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
{this.props.isMod && (
|
||||
<span className="col">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("mod"),
|
||||
tooltip: I18NextService.i18n.t("mod"),
|
||||
classes: "text-bg-primary",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
{this.props.isAdmin && (
|
||||
<span className="col">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("admin"),
|
||||
tooltip: I18NextService.i18n.t("admin"),
|
||||
classes: "text-bg-danger",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
{this.props.isBot && (
|
||||
<span className="col">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("bot_account").toLowerCase(),
|
||||
tooltip: I18NextService.i18n.t("bot_account"),
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
|
@ -64,6 +64,8 @@ const handleUpvote = (i: VoteButtons) => {
|
|||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
|
||||
i.setState({ upvoteLoading: false });
|
||||
};
|
||||
|
||||
const handleDownvote = (i: VoteButtons) => {
|
||||
|
@ -84,6 +86,7 @@ const handleDownvote = (i: VoteButtons) => {
|
|||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
i.setState({ downvoteLoading: false });
|
||||
};
|
||||
|
||||
export class VoteButtonsCompact extends Component<
|
||||
|
@ -99,21 +102,12 @@ export class VoteButtonsCompact extends Component<
|
|||
super(props, context);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: VoteButtonsProps) {
|
||||
if (this.props !== nextProps) {
|
||||
this.setState({
|
||||
upvoteLoading: false,
|
||||
downvoteLoading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-animate btn-sm btn-link py-0 px-1 ${
|
||||
className={`btn-animate btn py-0 px-1 ${
|
||||
this.props.my_vote === 1 ? "text-info" : "text-muted"
|
||||
}`}
|
||||
data-tippy-content={tippy(this.props.counts)}
|
||||
|
@ -137,7 +131,7 @@ export class VoteButtonsCompact extends Component<
|
|||
{this.props.enableDownvotes && (
|
||||
<button
|
||||
type="button"
|
||||
className={`ms-2 btn btn-sm btn-link btn-animate btn py-0 px-1 ${
|
||||
className={`ms-2 btn-animate btn py-0 px-1 ${
|
||||
this.props.my_vote === -1 ? "text-danger" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, handleDownvote)}
|
||||
|
@ -178,18 +172,9 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
|
|||
super(props, context);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: VoteButtonsProps) {
|
||||
if (this.props !== nextProps) {
|
||||
this.setState({
|
||||
upvoteLoading: false,
|
||||
downvoteLoading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="vote-bar small text-center">
|
||||
<div className="vote-bar pe-0 small text-center">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn-animate btn btn-link p-0 ${
|
||||
|
@ -208,7 +193,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
|
|||
</button>
|
||||
{showScores() ? (
|
||||
<div
|
||||
className="unselectable pointer text-muted post-score"
|
||||
className="unselectable pointer text-muted px-1 post-score"
|
||||
data-tippy-content={tippy(this.props.counts)}
|
||||
>
|
||||
{numToSI(this.props.counts.score)}
|
||||
|
|
|
@ -102,7 +102,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
const { listingType, page } = this.getCommunitiesQueryParams();
|
||||
return (
|
||||
<div>
|
||||
<h1 className="h4 mb-4">
|
||||
<h1 className="h4">
|
||||
{I18NextService.i18n.t("list_of_communities")}
|
||||
</h1>
|
||||
<div className="row g-2 justify-content-between">
|
||||
|
|
|
@ -485,7 +485,7 @@ export class Community extends Component<
|
|||
community && (
|
||||
<div className="mb-2">
|
||||
<BannerIconHeader banner={community.banner} icon={community.icon} />
|
||||
<h1 className="h4 mb-0 overflow-wrap-anywhere">{community.title}</h1>
|
||||
<h5 className="mb-0 overflow-wrap-anywhere">{community.title}</h5>
|
||||
<CommunityLink
|
||||
community={community}
|
||||
realLink
|
||||
|
|
|
@ -39,9 +39,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
|
|||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h1 className="h4 mb-4">
|
||||
{I18NextService.i18n.t("create_community")}
|
||||
</h1>
|
||||
<h5>{I18NextService.i18n.t("create_community")}</h5>
|
||||
<CommunityForm
|
||||
onUpsertCommunity={this.handleCommunityCreate}
|
||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||
|
|
|
@ -169,7 +169,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="h5 mb-0">
|
||||
<h5 className="mb-0">
|
||||
{this.props.showIcon && !community.removed && (
|
||||
<BannerIconHeader icon={community.icon} banner={community.banner} />
|
||||
)}
|
||||
|
@ -191,7 +191,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
{I18NextService.i18n.t("nsfw")}
|
||||
</small>
|
||||
)}
|
||||
</h2>
|
||||
</h5>
|
||||
<CommunityLink
|
||||
community={community}
|
||||
realLink
|
||||
|
@ -258,7 +258,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
<Icon icon="check" classes="icon-inline me-1" />
|
||||
<Icon icon="check" classes="icon-inline text-success me-1" />
|
||||
{I18NextService.i18n.t("joined")}
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -135,9 +135,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
role="tabpanel"
|
||||
id="site-tab-pane"
|
||||
>
|
||||
<h1 className="h4 mb-4">
|
||||
{I18NextService.i18n.t("site_config")}
|
||||
</h1>
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6">
|
||||
<SiteForm
|
||||
|
@ -152,7 +149,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
{this.admins()}
|
||||
<hr />
|
||||
{this.bannedUsers()}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -253,9 +249,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
admins() {
|
||||
return (
|
||||
<>
|
||||
<h2 className="h5">
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t("admins"))}
|
||||
</h2>
|
||||
<h5>{capitalizeFirstLetter(I18NextService.i18n.t("admins"))}</h5>
|
||||
<ul className="list-unstyled">
|
||||
{this.state.siteRes.admins.map(admin => (
|
||||
<li key={admin.person.id} className="list-inline-item">
|
||||
|
@ -295,7 +289,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
const bans = this.state.bannedRes.data.banned;
|
||||
return (
|
||||
<>
|
||||
<h2 className="h5">{I18NextService.i18n.t("banned_users")}</h2>
|
||||
<h5>{I18NextService.i18n.t("banned_users")}</h5>
|
||||
<ul className="list-unstyled">
|
||||
{bans.map(banned => (
|
||||
<li key={banned.person.id} className="list-inline-item">
|
||||
|
|
|
@ -77,7 +77,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
|||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h1 className="h4 mb-4">{I18NextService.i18n.t("custom_emojis")}</h1>
|
||||
<h5 className="col-12">{I18NextService.i18n.t("custom_emojis")}</h5>
|
||||
{customEmojisLookup.size > 0 && (
|
||||
<div>
|
||||
<EmojiMart
|
||||
|
@ -87,10 +87,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
|||
</div>
|
||||
)}
|
||||
<div className="table-responsive">
|
||||
<table
|
||||
id="emojis_table"
|
||||
className="table table-sm table-hover align-middle"
|
||||
>
|
||||
<table id="emojis_table" className="table table-sm table-hover">
|
||||
<thead className="pointer">
|
||||
<tr>
|
||||
<th>{I18NextService.i18n.t("column_emoji")}</th>
|
||||
|
@ -132,31 +129,30 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
|||
/>
|
||||
)}
|
||||
{cv.image_url.length === 0 && (
|
||||
<label
|
||||
// TODO: Fix this linting violation
|
||||
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
||||
tabIndex={0}
|
||||
className="btn btn-sm btn-secondary pointer"
|
||||
htmlFor={`file-uploader-${index}`}
|
||||
data-tippy-content={I18NextService.i18n.t(
|
||||
"upload_image"
|
||||
)}
|
||||
>
|
||||
{capitalizeFirstLetter(
|
||||
I18NextService.i18n.t("upload")
|
||||
)}
|
||||
<input
|
||||
name={`file-uploader-${index}`}
|
||||
id={`file-uploader-${index}`}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="d-none"
|
||||
onChange={linkEvent(
|
||||
{ form: this, index: index },
|
||||
this.handleImageUpload
|
||||
<form>
|
||||
<label
|
||||
className="btn btn-sm btn-secondary pointer"
|
||||
htmlFor={`file-uploader-${index}`}
|
||||
data-tippy-content={I18NextService.i18n.t(
|
||||
"upload_image"
|
||||
)}
|
||||
/>
|
||||
</label>
|
||||
>
|
||||
{capitalizeFirstLetter(
|
||||
I18NextService.i18n.t("upload")
|
||||
)}
|
||||
<input
|
||||
name={`file-uploader-${index}`}
|
||||
id={`file-uploader-${index}`}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="d-none"
|
||||
onChange={linkEvent(
|
||||
{ form: this, index: index },
|
||||
this.handleImageUpload
|
||||
)}
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-right">
|
||||
|
|
|
@ -85,35 +85,24 @@ export class Instances extends Component<any, InstancesState> {
|
|||
case "success": {
|
||||
const instances = this.state.instancesRes.data.federated_instances;
|
||||
return instances ? (
|
||||
<>
|
||||
<h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
|
||||
<div className="row">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<h5>{I18NextService.i18n.t("linked_instances")}</h5>
|
||||
{this.itemList(instances.linked)}
|
||||
</div>
|
||||
{instances.allowed && instances.allowed.length > 0 && (
|
||||
<div className="col-md-6">
|
||||
<h2 className="h5 mb-3">
|
||||
{I18NextService.i18n.t("linked_instances")}
|
||||
</h2>
|
||||
{this.itemList(instances.linked)}
|
||||
<h5>{I18NextService.i18n.t("allowed_instances")}</h5>
|
||||
{this.itemList(instances.allowed)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{instances.allowed && instances.allowed.length > 0 && (
|
||||
<div className="col-md-6">
|
||||
<h2 className="h5 mb-3">
|
||||
{I18NextService.i18n.t("allowed_instances")}
|
||||
</h2>
|
||||
{this.itemList(instances.allowed)}
|
||||
</div>
|
||||
)}
|
||||
{instances.blocked && instances.blocked.length > 0 && (
|
||||
<div className="col-md-6">
|
||||
<h2 className="h5 mb-3">
|
||||
{I18NextService.i18n.t("blocked_instances")}
|
||||
</h2>
|
||||
{this.itemList(instances.blocked)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{instances.blocked && instances.blocked.length > 0 && (
|
||||
<div className="col-md-6">
|
||||
<h5>{I18NextService.i18n.t("blocked_instances")}</h5>
|
||||
{this.itemList(instances.blocked)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
|
|
|
@ -59,9 +59,9 @@ export class LoginReset extends Component<any, State> {
|
|||
loginResetForm() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handlePasswordReset)}>
|
||||
<h1 className="h4 mb-4">
|
||||
<h5>
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t("forgot_password"))}
|
||||
</h1>
|
||||
</h5>
|
||||
|
||||
<div className="form-group row">
|
||||
<label className="col-form-label">
|
||||
|
|
|
@ -69,7 +69,7 @@ export class Login extends Component<any, State> {
|
|||
return (
|
||||
<div>
|
||||
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
|
||||
<h1 className="h4 mb-4">{I18NextService.i18n.t("login")}</h1>
|
||||
<h5>{I18NextService.i18n.t("login")}</h5>
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
|
|
|
@ -145,9 +145,7 @@ export default class RateLimitsForm extends Component<
|
|||
className="rate-limit-form"
|
||||
onSubmit={linkEvent(this, submitRateLimitForm)}
|
||||
>
|
||||
<h1 className="h4 mb-4">
|
||||
{I18NextService.i18n.t("rate_limit_header")}
|
||||
</h1>
|
||||
<h5>{I18NextService.i18n.t("rate_limit_header")}</h5>
|
||||
<Tabs
|
||||
tabs={rateLimitTypes.map(rateLimitType => ({
|
||||
key: rateLimitType,
|
||||
|
|
|
@ -63,9 +63,7 @@ export class Setup extends Component<any, State> {
|
|||
<Helmet title={this.documentTitle} />
|
||||
<div className="row">
|
||||
<div className="col-12 offset-lg-3 col-lg-6">
|
||||
<h1 className="h4 mb-4">
|
||||
{I18NextService.i18n.t("lemmy_instance_setup")}
|
||||
</h1>
|
||||
<h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
|
||||
{!this.state.doneRegisteringUser ? (
|
||||
this.registerUser()
|
||||
) : (
|
||||
|
@ -86,7 +84,7 @@ export class Setup extends Component<any, State> {
|
|||
registerUser() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
|
||||
<h2 className="h5 mb-3">{I18NextService.i18n.t("setup_admin")}</h2>
|
||||
<h5>{I18NextService.i18n.t("setup_admin")}</h5>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="username">
|
||||
{I18NextService.i18n.t("username")}
|
||||
|
|
|
@ -144,7 +144,7 @@ export class Signup extends Component<any, State> {
|
|||
className="was-validated"
|
||||
onSubmit={linkEvent(this, this.handleRegisterSubmit)}
|
||||
>
|
||||
<h1 className="h4 mb-4">{this.titleName(siteView)}</h1>
|
||||
<h5>{this.titleName(siteView)}</h5>
|
||||
|
||||
{this.isLemmyMl && (
|
||||
<div className="mb-3 row">
|
||||
|
|
|
@ -136,11 +136,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
!this.state.submitted
|
||||
}
|
||||
/>
|
||||
<h2 className="h5">{`${
|
||||
<h5>{`${
|
||||
siteSetup
|
||||
? capitalizeFirstLetter(I18NextService.i18n.t("edit"))
|
||||
: capitalizeFirstLetter(I18NextService.i18n.t("setup"))
|
||||
} ${I18NextService.i18n.t("your_site")}`}</h2>
|
||||
} ${I18NextService.i18n.t("your_site")}`}</h5>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label" htmlFor="create-site-name">
|
||||
{I18NextService.i18n.t("name")}
|
||||
|
@ -158,32 +158,28 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
<div className="input-group mb-3">
|
||||
<label className="me-2 col-form-label">
|
||||
{I18NextService.i18n.t("icon")}
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<ImageUploadForm
|
||||
uploadTitle={I18NextService.i18n.t("upload_icon")}
|
||||
imageSrc={this.state.siteForm.icon}
|
||||
onUpload={this.handleIconUpload}
|
||||
onRemove={this.handleIconRemove}
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
<ImageUploadForm
|
||||
uploadTitle={I18NextService.i18n.t("upload_icon")}
|
||||
imageSrc={this.state.siteForm.icon}
|
||||
onUpload={this.handleIconUpload}
|
||||
onRemove={this.handleIconRemove}
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
<div className="input-group mb-3">
|
||||
<label className="me-2 col-form-label">
|
||||
{I18NextService.i18n.t("banner")}
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<ImageUploadForm
|
||||
uploadTitle={I18NextService.i18n.t("upload_banner")}
|
||||
imageSrc={this.state.siteForm.banner}
|
||||
onUpload={this.handleBannerUpload}
|
||||
onRemove={this.handleBannerRemove}
|
||||
/>
|
||||
</div>
|
||||
<ImageUploadForm
|
||||
uploadTitle={I18NextService.i18n.t("upload_banner")}
|
||||
imageSrc={this.state.siteForm.banner}
|
||||
onUpload={this.handleBannerUpload}
|
||||
onRemove={this.handleBannerRemove}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label" htmlFor="site-desc">
|
||||
|
|
|
@ -37,7 +37,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
|||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h1 className="h4 mb-4">{I18NextService.i18n.t("taglines")}</h1>
|
||||
<h5 className="col-12">{I18NextService.i18n.t("taglines")}</h5>
|
||||
<div className="table-responsive col-12">
|
||||
<table id="taglines_table" className="table table-sm table-hover">
|
||||
<thead className="pointer">
|
||||
|
|
|
@ -751,83 +751,87 @@ export class Modlog extends Component<
|
|||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
|
||||
<h1 className="h4 mb-4">{I18NextService.i18n.t("modlog")}</h1>
|
||||
|
||||
<div
|
||||
className="alert alert-warning text-sm-start text-xs-center"
|
||||
role="alert"
|
||||
>
|
||||
<Icon
|
||||
icon="alert-triangle"
|
||||
inline
|
||||
classes="me-sm-2 mx-auto d-sm-inline d-block"
|
||||
/>
|
||||
<T i18nKey="modlog_content_warning" class="d-inline">
|
||||
#<strong>#</strong>#
|
||||
</T>
|
||||
</div>
|
||||
{this.state.communityRes.state === "success" && (
|
||||
<h5>
|
||||
<Link
|
||||
className="text-body"
|
||||
to={`/c/${this.state.communityRes.data.community_view.community.name}`}
|
||||
>
|
||||
/c/{this.state.communityRes.data.community_view.community.name}{" "}
|
||||
</Link>
|
||||
<span>{I18NextService.i18n.t("modlog")}</span>
|
||||
</h5>
|
||||
)}
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-6">
|
||||
<select
|
||||
value={actionType}
|
||||
onChange={linkEvent(this, this.handleFilterActionChange)}
|
||||
className="form-select"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{I18NextService.i18n.t("filter_by_action")}
|
||||
</option>
|
||||
<option value={"All"}>{I18NextService.i18n.t("all")}</option>
|
||||
<option value={"ModRemovePost"}>Removing Posts</option>
|
||||
<option value={"ModLockPost"}>Locking Posts</option>
|
||||
<option value={"ModFeaturePost"}>Featuring Posts</option>
|
||||
<option value={"ModRemoveComment"}>Removing Comments</option>
|
||||
<option value={"ModRemoveCommunity"}>Removing Communities</option>
|
||||
<option value={"ModBanFromCommunity"}>
|
||||
Banning From Communities
|
||||
</option>
|
||||
<option value={"ModAddCommunity"}>Adding Mod to Community</option>
|
||||
<option value={"ModTransferCommunity"}>
|
||||
Transferring Communities
|
||||
</option>
|
||||
<option value={"ModAdd"}>Adding Mod to Site</option>
|
||||
<option value={"ModBan"}>Banning From Site</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<Filter
|
||||
filterType="user"
|
||||
onChange={this.handleUserChange}
|
||||
onSearch={this.handleSearchUsers}
|
||||
value={userId}
|
||||
options={userSearchOptions}
|
||||
loading={loadingUserSearch}
|
||||
/>
|
||||
{!this.isoData.site_res.site_view.local_site
|
||||
.hide_modlog_mod_names && (
|
||||
<Filter
|
||||
filterType="mod"
|
||||
onChange={this.handleModChange}
|
||||
onSearch={this.handleSearchMods}
|
||||
value={modId}
|
||||
options={modSearchOptions}
|
||||
loading={loadingModSearch}
|
||||
<div>
|
||||
<div
|
||||
className="alert alert-warning text-sm-start text-xs-center"
|
||||
role="alert"
|
||||
>
|
||||
<Icon
|
||||
icon="alert-triangle"
|
||||
inline
|
||||
classes="me-sm-2 mx-auto d-sm-inline d-block"
|
||||
/>
|
||||
<T i18nKey="modlog_content_warning" class="d-inline">
|
||||
#<strong>#</strong>#
|
||||
</T>
|
||||
</div>
|
||||
{this.state.communityRes.state === "success" && (
|
||||
<h5>
|
||||
<Link
|
||||
className="text-body"
|
||||
to={`/c/${this.state.communityRes.data.community_view.community.name}`}
|
||||
>
|
||||
/c/{this.state.communityRes.data.community_view.community.name}{" "}
|
||||
</Link>
|
||||
<span>{I18NextService.i18n.t("modlog")}</span>
|
||||
</h5>
|
||||
)}
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-6">
|
||||
<select
|
||||
value={actionType}
|
||||
onChange={linkEvent(this, this.handleFilterActionChange)}
|
||||
className="form-select"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{I18NextService.i18n.t("filter_by_action")}
|
||||
</option>
|
||||
<option value={"All"}>{I18NextService.i18n.t("all")}</option>
|
||||
<option value={"ModRemovePost"}>Removing Posts</option>
|
||||
<option value={"ModLockPost"}>Locking Posts</option>
|
||||
<option value={"ModFeaturePost"}>Featuring Posts</option>
|
||||
<option value={"ModRemoveComment"}>Removing Comments</option>
|
||||
<option value={"ModRemoveCommunity"}>
|
||||
Removing Communities
|
||||
</option>
|
||||
<option value={"ModBanFromCommunity"}>
|
||||
Banning From Communities
|
||||
</option>
|
||||
<option value={"ModAddCommunity"}>
|
||||
Adding Mod to Community
|
||||
</option>
|
||||
<option value={"ModTransferCommunity"}>
|
||||
Transferring Communities
|
||||
</option>
|
||||
<option value={"ModAdd"}>Adding Mod to Site</option>
|
||||
<option value={"ModBan"}>Banning From Site</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<Filter
|
||||
filterType="user"
|
||||
onChange={this.handleUserChange}
|
||||
onSearch={this.handleSearchUsers}
|
||||
value={userId}
|
||||
options={userSearchOptions}
|
||||
loading={loadingUserSearch}
|
||||
/>
|
||||
{!this.isoData.site_res.site_view.local_site
|
||||
.hide_modlog_mod_names && (
|
||||
<Filter
|
||||
filterType="mod"
|
||||
onChange={this.handleModChange}
|
||||
onSearch={this.handleSearchMods}
|
||||
value={modId}
|
||||
options={modSearchOptions}
|
||||
loading={loadingModSearch}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{this.renderModlogTable()}
|
||||
</div>
|
||||
{this.renderModlogTable()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -221,7 +221,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h1 className="h4 mb-4">
|
||||
<h5 className="mb-2">
|
||||
{I18NextService.i18n.t("inbox")}
|
||||
{inboxRss && (
|
||||
<small>
|
||||
|
@ -235,10 +235,10 @@ export class Inbox extends Component<any, InboxState> {
|
|||
/>
|
||||
</small>
|
||||
)}
|
||||
</h1>
|
||||
</h5>
|
||||
{this.hasUnreads && (
|
||||
<button
|
||||
className="btn btn-secondary mb-2 mb-sm-3"
|
||||
className="btn btn-secondary mb-2"
|
||||
onClick={linkEvent(this, this.handleMarkAllAsRead)}
|
||||
>
|
||||
{this.state.markAllAsReadRes.state == "loading" ? (
|
||||
|
@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
|
||||
unreadOrAllRadios() {
|
||||
return (
|
||||
<div className="btn-group btn-group-toggle flex-wrap">
|
||||
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
||||
<label
|
||||
className={`btn btn-outline-secondary pointer
|
||||
${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
|
||||
|
@ -319,7 +319,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
|
||||
messageTypeRadios() {
|
||||
return (
|
||||
<div className="btn-group btn-group-toggle flex-wrap">
|
||||
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
||||
<label
|
||||
className={`btn btn-outline-secondary pointer
|
||||
${this.state.messageType == MessageType.All && "active"}
|
||||
|
@ -382,15 +382,13 @@ export class Inbox extends Component<any, InboxState> {
|
|||
|
||||
selects() {
|
||||
return (
|
||||
<div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
|
||||
<div className="col">{this.unreadOrAllRadios()}</div>
|
||||
<div className="col">{this.messageTypeRadios()}</div>
|
||||
<div className="col">
|
||||
<CommentSortSelect
|
||||
sort={this.state.sort}
|
||||
onChange={this.handleSortChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<span className="me-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="me-3">{this.messageTypeRadios()}</span>
|
||||
<CommentSortSelect
|
||||
sort={this.state.sort}
|
||||
onChange={this.handleSortChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -543,9 +541,9 @@ export class Inbox extends Component<any, InboxState> {
|
|||
this.state.messagesRes.state == "loading"
|
||||
) {
|
||||
return (
|
||||
<h1 className="h4">
|
||||
<h5>
|
||||
<Spinner large />
|
||||
</h1>
|
||||
</h5>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
|
@ -558,9 +556,9 @@ export class Inbox extends Component<any, InboxState> {
|
|||
switch (this.state.repliesRes.state) {
|
||||
case "loading":
|
||||
return (
|
||||
<h1 className="h4">
|
||||
<h5>
|
||||
<Spinner large />
|
||||
</h1>
|
||||
</h5>
|
||||
);
|
||||
case "success": {
|
||||
const replies = this.state.repliesRes.data.replies;
|
||||
|
@ -605,9 +603,9 @@ export class Inbox extends Component<any, InboxState> {
|
|||
switch (this.state.mentionsRes.state) {
|
||||
case "loading":
|
||||
return (
|
||||
<h1 className="h4">
|
||||
<h5>
|
||||
<Spinner large />
|
||||
</h1>
|
||||
</h5>
|
||||
);
|
||||
case "success": {
|
||||
const mentions = this.state.mentionsRes.data.mentions;
|
||||
|
@ -655,9 +653,9 @@ export class Inbox extends Component<any, InboxState> {
|
|||
switch (this.state.messagesRes.state) {
|
||||
case "loading":
|
||||
return (
|
||||
<h1 className="h4">
|
||||
<h5>
|
||||
<Spinner large />
|
||||
</h1>
|
||||
</h5>
|
||||
);
|
||||
case "success": {
|
||||
const messages = this.state.messagesRes.data.private_messages;
|
||||
|
|
|
@ -47,9 +47,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h1 className="h4 mb-4">
|
||||
{I18NextService.i18n.t("password_change")}
|
||||
</h1>
|
||||
<h5>{I18NextService.i18n.t("password_change")}</h5>
|
||||
{this.passwordChangeForm()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -5,6 +5,7 @@ import {
|
|||
enableDownvotes,
|
||||
enableNsfw,
|
||||
getCommentParentId,
|
||||
getRoleLabelPill,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
setIsoData,
|
||||
|
@ -84,7 +85,6 @@ import { HtmlTags } from "../common/html-tags";
|
|||
import { Icon, Spinner } from "../common/icon";
|
||||
import { MomentTime } from "../common/moment-time";
|
||||
import { SortSelect } from "../common/sort-select";
|
||||
import { UserBadges } from "../common/user-badges";
|
||||
import { CommunityLink } from "../community/community-link";
|
||||
import { PersonDetails } from "./person-details";
|
||||
import { PersonListing } from "./person-listing";
|
||||
|
@ -137,7 +137,7 @@ const getCommunitiesListing = (
|
|||
communityViews.length > 0 && (
|
||||
<div className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
<h2 className="h5">{I18NextService.i18n.t(translationKey)}</h2>
|
||||
<h5>{I18NextService.i18n.t(translationKey)}</h5>
|
||||
<ul className="list-unstyled mb-0">
|
||||
{communityViews.map(({ community }) => (
|
||||
<li key={community.id}>
|
||||
|
@ -232,7 +232,7 @@ export class Profile extends Component<
|
|||
async fetchUserData() {
|
||||
const { page, sort, view } = getProfileQueryParams();
|
||||
|
||||
this.setState({ personRes: { state: "loading" } });
|
||||
this.setState({ personRes: { state: "empty" } });
|
||||
this.setState({
|
||||
personRes: await HttpService.client.getPersonDetails({
|
||||
username: this.props.match.params.username,
|
||||
|
@ -472,7 +472,7 @@ export class Profile extends Component<
|
|||
<div className="mb-0 d-flex flex-wrap">
|
||||
<div>
|
||||
{pv.person.display_name && (
|
||||
<h1 className="h4 mb-4">{pv.person.display_name}</h1>
|
||||
<h5 className="mb-0">{pv.person.display_name}</h5>
|
||||
)}
|
||||
<ul className="list-inline mb-2">
|
||||
<li className="list-inline-item">
|
||||
|
@ -484,15 +484,46 @@ export class Profile extends Component<
|
|||
hideAvatar
|
||||
/>
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<UserBadges
|
||||
classNames="ms-1"
|
||||
isBanned={isBanned(pv.person)}
|
||||
isDeleted={pv.person.deleted}
|
||||
isAdmin={pv.person.admin}
|
||||
isBot={pv.person.bot_account}
|
||||
/>
|
||||
</li>
|
||||
{isBanned(pv.person) && (
|
||||
<li className="list-inline-item">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("banned"),
|
||||
tooltip: I18NextService.i18n.t("banned"),
|
||||
classes: "text-bg-danger",
|
||||
shrink: false,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.deleted && (
|
||||
<li className="list-inline-item">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("deleted"),
|
||||
tooltip: I18NextService.i18n.t("deleted"),
|
||||
classes: "text-bg-danger",
|
||||
shrink: false,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.admin && (
|
||||
<li className="list-inline-item">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("admin"),
|
||||
tooltip: I18NextService.i18n.t("admin"),
|
||||
shrink: false,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.bot_account && (
|
||||
<li className="list-inline-item">
|
||||
{getRoleLabelPill({
|
||||
label: I18NextService.i18n
|
||||
.t("bot_account")
|
||||
.toLowerCase(),
|
||||
tooltip: I18NextService.i18n.t("bot_account"),
|
||||
shrink: false,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
{this.banDialog(pv)}
|
||||
|
|
|
@ -100,9 +100,9 @@ export class RegistrationApplications extends Component<
|
|||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h1 className="h4 mb-4">
|
||||
<h5 className="mb-2">
|
||||
{I18NextService.i18n.t("registration_applications")}
|
||||
</h1>
|
||||
</h5>
|
||||
{this.selects()}
|
||||
{this.applicationList(apps)}
|
||||
<Paginator
|
||||
|
|
|
@ -152,7 +152,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h1 className="h4 mb-4">{I18NextService.i18n.t("reports")}</h1>
|
||||
<h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5>
|
||||
{this.selects()}
|
||||
{this.section}
|
||||
<Paginator
|
||||
|
|
|
@ -316,7 +316,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
changePasswordHtmlForm() {
|
||||
return (
|
||||
<>
|
||||
<h2 className="h5">{I18NextService.i18n.t("change_password")}</h2>
|
||||
<h5>{I18NextService.i18n.t("change_password")}</h5>
|
||||
<form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-5 col-form-label" htmlFor="user-password">
|
||||
|
@ -409,7 +409,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
blockedUsersList() {
|
||||
return (
|
||||
<>
|
||||
<h2 className="h5">{I18NextService.i18n.t("blocked_users")}</h2>
|
||||
<h5>{I18NextService.i18n.t("blocked_users")}</h5>
|
||||
<ul className="list-unstyled mb-0">
|
||||
{this.state.personBlocks.map(pb => (
|
||||
<li key={pb.target.id}>
|
||||
|
@ -453,7 +453,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
blockedCommunitiesList() {
|
||||
return (
|
||||
<>
|
||||
<h2 className="h5">{I18NextService.i18n.t("blocked_communities")}</h2>
|
||||
<h5>{I18NextService.i18n.t("blocked_communities")}</h5>
|
||||
<ul className="list-unstyled mb-0">
|
||||
{this.state.communityBlocks.map(cb => (
|
||||
<li key={cb.community.id}>
|
||||
|
@ -484,7 +484,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h2 className="h5">{I18NextService.i18n.t("settings")}</h2>
|
||||
<h5>{I18NextService.i18n.t("settings")}</h5>
|
||||
<form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="display-name">
|
||||
|
|
|
@ -60,7 +60,7 @@ export class VerifyEmail extends Component<any, State> {
|
|||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h1 className="h4 mb-4">{I18NextService.i18n.t("verify_email")}</h1>
|
||||
<h5>{I18NextService.i18n.t("verify_email")}</h5>
|
||||
{this.state.verifyRes.state == "loading" && (
|
||||
<h5>
|
||||
<Spinner large />
|
||||
|
|
|
@ -170,9 +170,7 @@ export class CreatePost extends Component<
|
|||
id="createPostForm"
|
||||
className="col-12 col-lg-6 offset-lg-3 mb-4"
|
||||
>
|
||||
<h1 className="h4 mb-4">
|
||||
{I18NextService.i18n.t("create_post")}
|
||||
</h1>
|
||||
<h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
|
||||
<PostForm
|
||||
onCreate={this.handlePostCreate}
|
||||
params={locationState}
|
||||
|
|
|
@ -349,12 +349,32 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
<input
|
||||
type="url"
|
||||
id="post-url"
|
||||
className="form-control mb-3"
|
||||
className="form-control"
|
||||
value={url}
|
||||
onInput={linkEvent(this, handlePostUrlChange)}
|
||||
onPaste={linkEvent(this, handleImageUploadPaste)}
|
||||
/>
|
||||
{this.renderSuggestedTitleCopy()}
|
||||
<form>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className={`${
|
||||
UserService.Instance.myUserInfo && "pointer"
|
||||
} d-inline-block float-right text-muted fw-bold`}
|
||||
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
||||
>
|
||||
<Icon icon="image" classes="icon-inline" />
|
||||
</label>
|
||||
<input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
name="file"
|
||||
className="d-none"
|
||||
disabled={!UserService.Instance.myUserInfo}
|
||||
onChange={linkEvent(this, handleImageUpload)}
|
||||
/>
|
||||
</form>
|
||||
{url && validURL(url) && (
|
||||
<div>
|
||||
<a
|
||||
|
@ -384,73 +404,56 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 row">
|
||||
<label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t("image"))}
|
||||
<Icon icon="image" classes="icon-inline ms-1" />
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
name="file"
|
||||
className="small col-sm-10 form-control"
|
||||
disabled={!UserService.Instance.myUserInfo}
|
||||
onChange={linkEvent(this, handleImageUpload)}
|
||||
/>
|
||||
{this.state.imageLoading && <Spinner />}
|
||||
{url && isImage(url) && (
|
||||
<img src={url} className="img-fluid mt-2" alt="" />
|
||||
<img src={url} className="img-fluid" alt="" />
|
||||
)}
|
||||
{this.state.imageDeleteUrl && (
|
||||
<button
|
||||
className="btn btn-danger btn-sm mt-2"
|
||||
onClick={linkEvent(this, handleImageDelete)}
|
||||
aria-label={I18NextService.i18n.t("delete")}
|
||||
data-tippy-content={I18NextService.i18n.t("delete")}
|
||||
>
|
||||
<Icon icon="x" classes="icon-inline me-1" />
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
|
||||
</button>
|
||||
)}
|
||||
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
|
||||
<>
|
||||
<div className="my-1 text-muted small fw-bold">
|
||||
{I18NextService.i18n.t("cross_posts")}
|
||||
</div>
|
||||
<PostListings
|
||||
showCommunity
|
||||
posts={this.props.crossPosts}
|
||||
enableDownvotes={this.props.enableDownvotes}
|
||||
enableNsfw={this.props.enableNsfw}
|
||||
allLanguages={this.props.allLanguages}
|
||||
siteLanguages={this.props.siteLanguages}
|
||||
viewOnly
|
||||
// All of these are unused, since its view only
|
||||
onPostEdit={() => {}}
|
||||
onPostVote={() => {}}
|
||||
onPostReport={() => {}}
|
||||
onBlockPerson={() => {}}
|
||||
onLockPost={() => {}}
|
||||
onDeletePost={() => {}}
|
||||
onRemovePost={() => {}}
|
||||
onSavePost={() => {}}
|
||||
onFeaturePost={() => {}}
|
||||
onPurgePerson={() => {}}
|
||||
onPurgePost={() => {}}
|
||||
onBanPersonFromCommunity={() => {}}
|
||||
onBanPerson={() => {}}
|
||||
onAddModToCommunity={() => {}}
|
||||
onAddAdmin={() => {}}
|
||||
onTransferCommunity={() => {}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
|
||||
<>
|
||||
<div className="my-1 text-muted small fw-bold">
|
||||
{I18NextService.i18n.t("cross_posts")}
|
||||
</div>
|
||||
<PostListings
|
||||
showCommunity
|
||||
posts={this.props.crossPosts}
|
||||
enableDownvotes={this.props.enableDownvotes}
|
||||
enableNsfw={this.props.enableNsfw}
|
||||
allLanguages={this.props.allLanguages}
|
||||
siteLanguages={this.props.siteLanguages}
|
||||
viewOnly
|
||||
// All of these are unused, since its view only
|
||||
onPostEdit={() => {}}
|
||||
onPostVote={() => {}}
|
||||
onPostReport={() => {}}
|
||||
onBlockPerson={() => {}}
|
||||
onLockPost={() => {}}
|
||||
onDeletePost={() => {}}
|
||||
onRemovePost={() => {}}
|
||||
onSavePost={() => {}}
|
||||
onFeaturePost={() => {}}
|
||||
onPurgePerson={() => {}}
|
||||
onPurgePost={() => {}}
|
||||
onBanPersonFromCommunity={() => {}}
|
||||
onBanPerson={() => {}}
|
||||
onAddModToCommunity={() => {}}
|
||||
onAddAdmin={() => {}}
|
||||
onTransferCommunity={() => {}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-title">
|
||||
{I18NextService.i18n.t("title")}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { myAuthRequired } from "@utils/app";
|
||||
import { getRoleLabelPill, myAuthRequired } from "@utils/app";
|
||||
import { canShare, share } from "@utils/browser";
|
||||
import { getExternalHost, getHttpBase } from "@utils/env";
|
||||
import {
|
||||
|
@ -55,7 +55,6 @@ import { setupTippy } from "../../tippy";
|
|||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||
import { MomentTime } from "../common/moment-time";
|
||||
import { PictrsImage } from "../common/pictrs-image";
|
||||
import { UserBadges } from "../common/user-badges";
|
||||
import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
|
||||
import { CommunityLink } from "../community/community-link";
|
||||
import { PersonListing } from "../person/person-listing";
|
||||
|
@ -334,7 +333,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0 bg-transparent"
|
||||
className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0"
|
||||
data-tippy-content={I18NextService.i18n.t("expand_here")}
|
||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
aria-label={I18NextService.i18n.t("expand_here")}
|
||||
|
@ -407,13 +406,26 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
|
||||
return (
|
||||
<div className="small mb-1 mb-md-0">
|
||||
<PersonListing person={post_view.creator} />
|
||||
<UserBadges
|
||||
classNames="ms-1"
|
||||
isMod={this.creatorIsMod_}
|
||||
isAdmin={this.creatorIsAdmin_}
|
||||
isBot={post_view.creator.bot_account}
|
||||
/>
|
||||
<span className="me-1">
|
||||
<PersonListing person={post_view.creator} />
|
||||
</span>
|
||||
{this.creatorIsMod_ &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("mod"),
|
||||
tooltip: I18NextService.i18n.t("mod"),
|
||||
classes: "text-bg-primary",
|
||||
})}
|
||||
{this.creatorIsAdmin_ &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("admin"),
|
||||
tooltip: I18NextService.i18n.t("admin"),
|
||||
classes: "text-bg-danger",
|
||||
})}
|
||||
{post_view.creator.bot_account &&
|
||||
getRoleLabelPill({
|
||||
label: I18NextService.i18n.t("bot_account").toLowerCase(),
|
||||
tooltip: I18NextService.i18n.t("bot_account"),
|
||||
})}
|
||||
{this.props.showCommunity && (
|
||||
<>
|
||||
{" "}
|
||||
|
@ -465,8 +477,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="post-title">
|
||||
<h1 className="h5 d-inline text-break">
|
||||
<div className="post-title overflow-hidden">
|
||||
<h5 className="d-inline">
|
||||
{url && this.props.showBody ? (
|
||||
<a
|
||||
className={
|
||||
|
@ -482,15 +494,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
) : (
|
||||
this.postLink
|
||||
)}
|
||||
</h1>
|
||||
</h5>
|
||||
|
||||
{/**
|
||||
* If there is (a) a URL and an embed title, or (b) a post body, and
|
||||
* we were not told to show the body by the parent component, show the
|
||||
* MetadataCard/body toggle.
|
||||
* If there is a URL, an embed title, and we were not told to show the
|
||||
* body by the parent component, show the MetadataCard/body toggle.
|
||||
*/}
|
||||
{!this.props.showBody &&
|
||||
((post.url && post.embed_title) || post.body) &&
|
||||
post.url &&
|
||||
post.embed_title &&
|
||||
this.showPreviewButton()}
|
||||
|
||||
{post.removed && (
|
||||
|
@ -1415,7 +1427,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
UserService.Instance.myUserInfo?.local_user_view.person.id
|
||||
);
|
||||
}
|
||||
|
||||
handleEditClick(i: PostListing) {
|
||||
i.setState({ showEdit: true });
|
||||
}
|
||||
|
@ -1539,7 +1550,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
post_id: i.postView.post.id,
|
||||
removed: !i.postView.post.removed,
|
||||
auth: myAuthRequired(),
|
||||
reason: i.state.removeReason,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -1611,13 +1621,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
handlePurgeSubmit(i: PostListing, event: any) {
|
||||
event.preventDefault();
|
||||
i.setState({ purgeLoading: true });
|
||||
if (i.state.purgeType === PurgeType.Person) {
|
||||
if (i.state.purgeType == PurgeType.Person) {
|
||||
i.props.onPurgePerson({
|
||||
person_id: i.postView.creator.id,
|
||||
reason: i.state.purgeReason,
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
} else if (i.state.purgeType === PurgeType.Post) {
|
||||
} else if (i.state.purgeType == PurgeType.Post) {
|
||||
i.props.onPurgePost({
|
||||
post_id: i.postView.post.id,
|
||||
reason: i.state.purgeReason,
|
||||
|
|
|
@ -115,7 +115,7 @@ export class CreatePrivateMessage extends Component<
|
|||
return (
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h1 className="h4 mb-4">
|
||||
<h1 className="h4">
|
||||
{I18NextService.i18n.t("create_private_message")}
|
||||
</h1>
|
||||
<PrivateMessageForm
|
||||
|
|
|
@ -284,6 +284,7 @@ export class PrivateMessage extends Component<
|
|||
<div className="row">
|
||||
<div className="col-sm-6">
|
||||
<PrivateMessageForm
|
||||
privateMessageView={message_view}
|
||||
replyType={true}
|
||||
recipient={otherPerson}
|
||||
onCreate={this.props.onCreate}
|
||||
|
|
|
@ -181,8 +181,8 @@ const Filter = ({
|
|||
loading: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div className="col-sm-6">
|
||||
<label className="mb-1" htmlFor={`${filterType}-filter`}>
|
||||
<div className="mb-3 col-sm-6">
|
||||
<label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
|
||||
</label>
|
||||
<SearchableSelect
|
||||
|
@ -467,7 +467,7 @@ export class Search extends Component<any, SearchState> {
|
|||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
|
||||
<h5>{I18NextService.i18n.t("search")}</h5>
|
||||
{this.selects}
|
||||
{this.searchForm}
|
||||
{this.displayResults(type)}
|
||||
|
@ -500,11 +500,8 @@ export class Search extends Component<any, SearchState> {
|
|||
|
||||
get searchForm() {
|
||||
return (
|
||||
<form
|
||||
className="row gx-2 gy-3"
|
||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
||||
>
|
||||
<div className="col-auto flex-grow-1 flex-sm-grow-0">
|
||||
<form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control me-2 mb-2 col-sm-8"
|
||||
|
@ -545,45 +542,41 @@ export class Search extends Component<any, SearchState> {
|
|||
communitiesRes.data.communities.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
|
||||
<div className="col">
|
||||
<select
|
||||
value={type}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
className="form-select d-inline-block w-auto"
|
||||
aria-label={I18NextService.i18n.t("type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{I18NextService.i18n.t("type")}
|
||||
</option>
|
||||
{searchTypes.map(option => (
|
||||
<option value={option} key={option}>
|
||||
{I18NextService.i18n.t(
|
||||
option.toString().toLowerCase() as NoOptionI18nKeys
|
||||
)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col">
|
||||
<ListingTypeSelect
|
||||
type_={listingType}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
showSubscribed
|
||||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<SortSelect
|
||||
sort={sort}
|
||||
onChange={this.handleSortChange}
|
||||
hideHot
|
||||
hideMostComments
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row gy-2 gx-4 mb-3">
|
||||
<div className="mb-2">
|
||||
<select
|
||||
value={type}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
className="form-select d-inline-block w-auto mb-2"
|
||||
aria-label={I18NextService.i18n.t("type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{I18NextService.i18n.t("type")}
|
||||
</option>
|
||||
{searchTypes.map(option => (
|
||||
<option value={option} key={option}>
|
||||
{I18NextService.i18n.t(
|
||||
option.toString().toLowerCase() as NoOptionI18nKeys
|
||||
)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="ms-2">
|
||||
<ListingTypeSelect
|
||||
type_={listingType}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
showSubscribed
|
||||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="ms-2">
|
||||
<SortSelect
|
||||
sort={sort}
|
||||
onChange={this.handleSortChange}
|
||||
hideHot
|
||||
hideMostComments
|
||||
/>
|
||||
</span>
|
||||
<div className="row">
|
||||
{hasCommunities && (
|
||||
<Filter
|
||||
filterType="community"
|
||||
|
@ -603,7 +596,7 @@ export class Search extends Component<any, SearchState> {
|
|||
loading={searchCreatorLoading}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import { isAuthPath } from "@utils/app";
|
||||
import { isBrowser } from "@utils/browser";
|
||||
import { isHttps } from "@utils/env";
|
||||
import * as cookie from "cookie";
|
||||
import IsomorphicCookie from "isomorphic-cookie";
|
||||
import jwt_decode from "jwt-decode";
|
||||
import { LoginResponse, MyUserInfo } from "lemmy-js-client";
|
||||
import { toast } from "../toast";
|
||||
|
@ -31,15 +31,9 @@ export class UserService {
|
|||
public login(res: LoginResponse) {
|
||||
const expires = new Date();
|
||||
expires.setDate(expires.getDate() + 365);
|
||||
if (isBrowser() && res.jwt) {
|
||||
if (res.jwt) {
|
||||
toast(I18NextService.i18n.t("logged_in"));
|
||||
document.cookie = cookie.serialize("jwt", res.jwt, {
|
||||
expires,
|
||||
secure: isHttps(),
|
||||
domain: location.hostname,
|
||||
sameSite: true,
|
||||
path: "/",
|
||||
});
|
||||
IsomorphicCookie.save("jwt", res.jwt, { expires, secure: isHttps() });
|
||||
this.#setJwtInfo();
|
||||
}
|
||||
}
|
||||
|
@ -47,14 +41,8 @@ export class UserService {
|
|||
public logout() {
|
||||
this.jwtInfo = undefined;
|
||||
this.myUserInfo = undefined;
|
||||
if (isBrowser()) {
|
||||
document.cookie = cookie.serialize("jwt", "", {
|
||||
maxAge: 0,
|
||||
path: "/",
|
||||
domain: location.hostname,
|
||||
sameSite: true,
|
||||
});
|
||||
}
|
||||
IsomorphicCookie.remove("jwt"); // TODO is sometimes unreliable for some reason
|
||||
document.cookie = "jwt=; Max-Age=0; path=/; domain=" + location.hostname;
|
||||
if (isAuthPath(location.pathname)) {
|
||||
location.replace("/");
|
||||
} else {
|
||||
|
@ -78,11 +66,10 @@ export class UserService {
|
|||
}
|
||||
|
||||
#setJwtInfo() {
|
||||
if (isBrowser()) {
|
||||
const { jwt } = cookie.parse(document.cookie);
|
||||
if (jwt) {
|
||||
this.jwtInfo = { jwt, claims: jwt_decode(jwt) };
|
||||
}
|
||||
const jwt: string | undefined = IsomorphicCookie.load("jwt");
|
||||
|
||||
if (jwt) {
|
||||
this.jwtInfo = { jwt, claims: jwt_decode(jwt) };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
21
src/shared/utils/app/get-role-label-pill.tsx
Normal file
21
src/shared/utils/app/get-role-label-pill.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
export default function getRoleLabelPill({
|
||||
label,
|
||||
tooltip,
|
||||
classes,
|
||||
shrink = true,
|
||||
}: {
|
||||
label: string;
|
||||
tooltip: string;
|
||||
classes?: string;
|
||||
shrink?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className={`badge me-1 ${classes ?? "text-bg-light"}`}
|
||||
aria-label={tooltip}
|
||||
data-tippy-content={tooltip}
|
||||
>
|
||||
{shrink ? label[0].toUpperCase() : label}
|
||||
</span>
|
||||
);
|
||||
}
|
|
@ -29,6 +29,7 @@ import getDataTypeString from "./get-data-type-string";
|
|||
import getDepthFromComment from "./get-depth-from-comment";
|
||||
import getIdFromProps from "./get-id-from-props";
|
||||
import getRecipientIdFromProps from "./get-recipient-id-from-props";
|
||||
import getRoleLabelPill from "./get-role-label-pill";
|
||||
import getUpdatedSearchId from "./get-updated-search-id";
|
||||
import initializeSite from "./initialize-site";
|
||||
import insertCommentIntoTree from "./insert-comment-into-tree";
|
||||
|
@ -86,6 +87,7 @@ export {
|
|||
getDepthFromComment,
|
||||
getIdFromProps,
|
||||
getRecipientIdFromProps,
|
||||
getRoleLabelPill,
|
||||
getUpdatedSearchId,
|
||||
initializeSite,
|
||||
insertCommentIntoTree,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function isAuthPath(pathname: string) {
|
||||
return /^\/create_.*|inbox|settings|admin|reports|registration_applications/g.test(
|
||||
return /create_.*|inbox|settings|admin|reports|registration_applications/g.test(
|
||||
pathname
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,44 +1,18 @@
|
|||
import setDefaultOptions from "date-fns/setDefaultOptions";
|
||||
import { I18NextService } from "../../services";
|
||||
|
||||
const EN_US = "en-US";
|
||||
|
||||
export default async function () {
|
||||
let lang = I18NextService.i18n.language;
|
||||
if (lang === "en") {
|
||||
lang = EN_US;
|
||||
lang = "en-US";
|
||||
}
|
||||
|
||||
// if lang and country are the same, then date-fns expects only the lang
|
||||
// eg: instead of "fr-FR", we should import just "fr"
|
||||
|
||||
if (lang.includes("-")) {
|
||||
const parts = lang.split("-");
|
||||
if (parts[0] === parts[1].toLowerCase()) {
|
||||
lang = parts[0];
|
||||
}
|
||||
}
|
||||
|
||||
let locale;
|
||||
|
||||
try {
|
||||
locale = (
|
||||
await import(
|
||||
/* webpackExclude: /\.js\.flow$/ */
|
||||
`date-fns/locale/${lang}`
|
||||
)
|
||||
).default;
|
||||
} catch (e) {
|
||||
console.log(
|
||||
`Could not load locale ${lang} from date-fns, falling back to ${EN_US}`
|
||||
);
|
||||
locale = (
|
||||
await import(
|
||||
/* webpackExclude: /\.js\.flow$/ */
|
||||
`date-fns/locale/${EN_US}`
|
||||
)
|
||||
).default;
|
||||
}
|
||||
const locale = (
|
||||
await import(
|
||||
/* webpackExclude: /\.js\.flow$/ */
|
||||
`date-fns/locale/${lang}`
|
||||
)
|
||||
).default;
|
||||
setDefaultOptions({
|
||||
locale,
|
||||
});
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
import isDark from "./is-dark";
|
||||
|
||||
export default function dataBsTheme(user) {
|
||||
return (isDark() && user?.local_user_view.local_user.theme === "browser") ||
|
||||
(user &&
|
||||
["darkly", "darkly-red", "darkly-pureblack"].includes(
|
||||
user.local_user_view.local_user.theme
|
||||
))
|
||||
? "dark"
|
||||
: "light";
|
||||
}
|
|
@ -1,7 +1,5 @@
|
|||
import canShare from "./can-share";
|
||||
import dataBsTheme from "./data-bs-theme";
|
||||
import isBrowser from "./is-browser";
|
||||
import isDark from "./is-dark";
|
||||
import loadCss from "./load-css";
|
||||
import restoreScrollPosition from "./restore-scroll-position";
|
||||
import saveScrollPosition from "./save-scroll-position";
|
||||
|
@ -9,9 +7,7 @@ import share from "./share";
|
|||
|
||||
export {
|
||||
canShare,
|
||||
dataBsTheme,
|
||||
isBrowser,
|
||||
isDark,
|
||||
loadCss,
|
||||
restoreScrollPosition,
|
||||
saveScrollPosition,
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
import isBrowser from "./is-browser";
|
||||
|
||||
export default function isDark() {
|
||||
return (
|
||||
isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
);
|
||||
}
|
|
@ -17,7 +17,6 @@ import isCakeDay from "./is-cake-day";
|
|||
import numToSI from "./num-to-si";
|
||||
import poll from "./poll";
|
||||
import randomStr from "./random-str";
|
||||
import removeAuthParam from "./remove-auth-param";
|
||||
import sleep from "./sleep";
|
||||
import validEmail from "./valid-email";
|
||||
import validInstanceTLD from "./valid-instance-tld";
|
||||
|
@ -44,7 +43,6 @@ export {
|
|||
numToSI,
|
||||
poll,
|
||||
randomStr,
|
||||
removeAuthParam,
|
||||
sleep,
|
||||
validEmail,
|
||||
validInstanceTLD,
|
||||
|
|
|
@ -1,6 +0,0 @@
|
|||
export default function (err: any) {
|
||||
return err
|
||||
.toString()
|
||||
.replace(new RegExp("[?&]auth=[^&#]*(#.*)?$"), "$1")
|
||||
.replace(new RegExp("([?&])auth=[^&]*&"), "$1");
|
||||
}
|
|
@ -14,7 +14,7 @@ const banner = `
|
|||
@license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
|
||||
`;
|
||||
|
||||
function getBase(env, mode) {
|
||||
function getBase(env) {
|
||||
return {
|
||||
output: {
|
||||
filename: "js/server.js",
|
||||
|
@ -54,7 +54,6 @@ function getBase(env, mode) {
|
|||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
"process.env.COMMIT_HASH": `"${env.COMMIT_HASH}"`,
|
||||
"process.env.NODE_ENV": `"${mode}"`,
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "styles/styles.css",
|
||||
|
@ -70,7 +69,7 @@ function getBase(env, mode) {
|
|||
}
|
||||
|
||||
const createServerConfig = (env, mode) => {
|
||||
const base = getBase(env, mode);
|
||||
const base = getBase(env);
|
||||
const config = merge({}, base, {
|
||||
mode,
|
||||
entry: "./src/server/index.tsx",
|
||||
|
@ -98,7 +97,7 @@ const createServerConfig = (env, mode) => {
|
|||
};
|
||||
|
||||
const createClientConfig = (env, mode) => {
|
||||
const base = getBase(env, mode);
|
||||
const base = getBase(env);
|
||||
const config = merge({}, base, {
|
||||
mode,
|
||||
entry: "./src/client/index.tsx",
|
||||
|
@ -111,6 +110,9 @@ const createClientConfig = (env, mode) => {
|
|||
new ServiceWorkerPlugin({
|
||||
enableInDevelopment: mode !== "development", // this may seem counterintuitive, but it is correct
|
||||
workbox: {
|
||||
modifyURLPrefix: {
|
||||
"/": `/static/${env.COMMIT_HASH}/`,
|
||||
},
|
||||
cacheId: "lemmy",
|
||||
include: [/(assets|styles|js)\/.+\..+$/g],
|
||||
inlineWorkboxRuntime: true,
|
||||
|
|
Loading…
Reference in a new issue