Compare commits

..

1 commit

Author SHA1 Message Date
Alec Armbruster
c17e1375b3
fix dev env caching 2023-06-29 16:27:28 -04:00
56 changed files with 1834 additions and 1811 deletions

View file

@ -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

View file

@ -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"
},

View file

@ -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 {

View file

@ -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"
);

View file

@ -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";

View file

@ -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);
}

View file

@ -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"

View file

@ -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>

View file

@ -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,
});
}

View file

@ -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}

View file

@ -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)}
/>

View file

@ -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}`,
});

View file

@ -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,
})}

View file

@ -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"

View file

@ -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>
)
);
}
}

View file

@ -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)}

View file

@ -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">

View file

@ -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

View file

@ -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)}

View file

@ -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")}
</>
)}

View file

@ -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">

View file

@ -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">

View file

@ -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>
) : (
<></>
);

View file

@ -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">

View file

@ -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"

View file

@ -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,

View file

@ -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")}

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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>
);
}

View file

@ -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;

View file

@ -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>

View file

@ -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)}

View file

@ -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

View file

@ -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

View file

@ -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">

View file

@ -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 />

View file

@ -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}

View file

@ -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")}

View file

@ -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,

View file

@ -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

View file

@ -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}

View file

@ -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>
);
}

View file

@ -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) };
}
}

View 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>
);
}

View file

@ -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,

View file

@ -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
);
}

View file

@ -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,
});

View file

@ -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";
}

View file

@ -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,

View file

@ -1,7 +0,0 @@
import isBrowser from "./is-browser";
export default function isDark() {
return (
isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
);
}

View file

@ -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,

View file

@ -1,6 +0,0 @@
export default function (err: any) {
return err
.toString()
.replace(new RegExp("[?&]auth=[^&#]*(#.*)?$"), "$1")
.replace(new RegExp("([?&])auth=[^&]*&"), "$1");
}

View file

@ -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,

2403
yarn.lock

File diff suppressed because it is too large Load diff