mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-09-19 12:20:11 +00:00
feat: Accomodate 2FA changes in UI
* feat: Add modal for totp settings * Make inputs show up on totp modal * Make modal work when enabling and disabling 2FA * Give user better feedback when en/disabling totp * Use new 2FA flow for login * Refactor 2fa modal to prevent implementation details from leaking * chore: Use constant objects where appropriate * Incorporate translations
This commit is contained in:
SleeplessOne1917
GitHub
parent
0c18224cf2
commit
c6d6107ddc
|
|
@ -42,6 +42,7 @@
|
|||
"@babel/preset-typescript": "^7.21.5",
|
||||
"@babel/runtime": "^7.21.5",
|
||||
"@emoji-mart/data": "^1.1.0",
|
||||
"@shortcm/qr-image": "^9.0.2",
|
||||
"autosize": "^6.0.1",
|
||||
"babel-loader": "^9.1.2",
|
||||
"babel-plugin-inferno": "^6.6.0",
|
||||
|
|
@ -69,7 +70,7 @@
|
|||
"inferno-router": "^8.2.2",
|
||||
"inferno-server": "^8.2.2",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"lemmy-js-client": "^0.19.0-rc.12",
|
||||
"lemmy-js-client": "^0.19.0-rc.13",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-container": "^3.0.0",
|
||||
|
|
|
|||
|
|
@ -448,3 +448,7 @@ br.big {
|
|||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.totp-link {
|
||||
width: fit-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { I18NextService } from "../../services";
|
|||
import { Icon, Spinner } from "../common/icon";
|
||||
import { PersonListing } from "../person/person-listing";
|
||||
import { CommentNode } from "./comment-node";
|
||||
import { EMPTY_REQUEST } from "../../services/HttpService";
|
||||
|
||||
interface CommentReportProps {
|
||||
report: CommentReportView;
|
||||
|
|
@ -97,8 +98,8 @@ export class CommentReport extends Component<
|
|||
onPersonMentionRead={() => {}}
|
||||
onBanPersonFromCommunity={() => {}}
|
||||
onBanPerson={() => {}}
|
||||
onCreateComment={() => Promise.resolve({ state: "empty" })}
|
||||
onEditComment={() => Promise.resolve({ state: "empty" })}
|
||||
onCreateComment={() => Promise.resolve(EMPTY_REQUEST)}
|
||||
onEditComment={() => Promise.resolve(EMPTY_REQUEST)}
|
||||
/>
|
||||
<div>
|
||||
{I18NextService.i18n.t("reporter")}:{" "}
|
||||
|
|
|
|||
268
src/shared/components/common/totp-modal.tsx
Normal file
268
src/shared/components/common/totp-modal.tsx
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
import {
|
||||
Component,
|
||||
MouseEventHandler,
|
||||
RefObject,
|
||||
createRef,
|
||||
linkEvent,
|
||||
} from "inferno";
|
||||
import { I18NextService } from "../../services";
|
||||
import { toast } from "../../toast";
|
||||
import type { Modal } from "bootstrap";
|
||||
|
||||
interface TotpModalProps {
|
||||
/**Takes totp as param, returns whether submit was successful*/
|
||||
onSubmit: (totp: string) => Promise<boolean>;
|
||||
onClose: MouseEventHandler;
|
||||
type: "login" | "remove" | "generate";
|
||||
secretUrl?: string;
|
||||
show?: boolean;
|
||||
}
|
||||
|
||||
interface TotpModalState {
|
||||
totp: string;
|
||||
qrCode?: string;
|
||||
}
|
||||
|
||||
const TOTP_LENGTH = 6;
|
||||
|
||||
async function handleSubmit(modal: TotpModal, totp: string) {
|
||||
const successful = await modal.props.onSubmit(totp);
|
||||
|
||||
if (!successful) {
|
||||
modal.setState({ totp: "" });
|
||||
modal.inputRefs[0]?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handleInput(
|
||||
{ modal, i }: { modal: TotpModal; i: number },
|
||||
event: any,
|
||||
) {
|
||||
if (isNaN(event.target.value)) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
modal.setState(prev => ({ ...prev, totp: prev.totp + event.target.value }));
|
||||
modal.inputRefs[i + 1]?.focus();
|
||||
|
||||
const { totp } = modal.state;
|
||||
if (totp.length >= TOTP_LENGTH) {
|
||||
handleSubmit(modal, totp);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyUp(
|
||||
{ modal, i }: { modal: TotpModal; i: number },
|
||||
event: any,
|
||||
) {
|
||||
if (event.key === "Backspace" && i > 0) {
|
||||
event.preventDefault();
|
||||
|
||||
modal.setState(prev => ({
|
||||
...prev,
|
||||
totp: prev.totp.slice(0, prev.totp.length - 1),
|
||||
}));
|
||||
modal.inputRefs[i - 1]?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handlePaste(modal: TotpModal, event: any) {
|
||||
event.preventDefault();
|
||||
const text: string = event.clipboardData.getData("text");
|
||||
|
||||
if (text.length > TOTP_LENGTH || isNaN(Number(text))) {
|
||||
toast(I18NextService.i18n.t("invalid_totp_code"), "danger");
|
||||
modal.setState({ totp: "" });
|
||||
} else {
|
||||
modal.setState({ totp: text });
|
||||
handleSubmit(modal, text);
|
||||
}
|
||||
}
|
||||
|
||||
export default class TotpModal extends Component<
|
||||
TotpModalProps,
|
||||
TotpModalState
|
||||
> {
|
||||
private readonly modalDivRef: RefObject<HTMLDivElement>;
|
||||
inputRefs: (HTMLInputElement | null)[] = [];
|
||||
modal: Modal;
|
||||
state: TotpModalState = {
|
||||
totp: "",
|
||||
};
|
||||
|
||||
constructor(props: TotpModalProps, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.modalDivRef = createRef();
|
||||
|
||||
this.clearTotp = this.clearTotp.bind(this);
|
||||
this.handleShow = this.handleShow.bind(this);
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
this.modalDivRef.current?.addEventListener(
|
||||
"shown.bs.modal",
|
||||
this.handleShow,
|
||||
);
|
||||
|
||||
this.modalDivRef.current?.addEventListener(
|
||||
"hidden.bs.modal",
|
||||
this.clearTotp,
|
||||
);
|
||||
|
||||
const Modal = (await import("bootstrap/js/dist/modal")).default;
|
||||
this.modal = new Modal(this.modalDivRef.current!);
|
||||
|
||||
if (this.props.show) {
|
||||
this.modal.show();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.modalDivRef.current?.removeEventListener(
|
||||
"shown.bs.modal",
|
||||
this.handleShow,
|
||||
);
|
||||
|
||||
this.modalDivRef.current?.removeEventListener(
|
||||
"hidden.bs.modal",
|
||||
this.clearTotp,
|
||||
);
|
||||
|
||||
this.modal.dispose();
|
||||
}
|
||||
|
||||
componentDidUpdate({ show: prevShow }: TotpModalProps) {
|
||||
if (!!prevShow !== !!this.props.show) {
|
||||
if (this.props.show) {
|
||||
this.modal.show();
|
||||
} else {
|
||||
this.modal.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { type, secretUrl, onClose } = this.props;
|
||||
const { totp } = this.state;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal fade"
|
||||
id="totpModal"
|
||||
tabIndex={-1}
|
||||
aria-hidden
|
||||
aria-labelledby="#totpModalTitle"
|
||||
data-bs-backdrop="static"
|
||||
ref={this.modalDivRef}
|
||||
>
|
||||
<div className="modal-dialog modal-fullscreen-sm-down">
|
||||
<div className="modal-content">
|
||||
<header className="modal-header">
|
||||
<h3 className="modal-title" id="totpModalTitle">
|
||||
{I18NextService.i18n.t(
|
||||
type === "generate"
|
||||
? "enable_totp"
|
||||
: type === "remove"
|
||||
? "disable_totp"
|
||||
: "enter_totp_code",
|
||||
)}
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
aria-label="Close"
|
||||
onClick={onClose}
|
||||
/>
|
||||
</header>
|
||||
<div className="modal-body d-flex flex-column align-items-center justify-content-center">
|
||||
{type === "generate" && (
|
||||
<div>
|
||||
<a
|
||||
className="btn btn-secondary mx-auto d-block totp-link"
|
||||
href={secretUrl}
|
||||
>
|
||||
{I18NextService.i18n.t("totp_link")}
|
||||
</a>
|
||||
<div className="mx-auto mt-3 w-50 h-50 text-center">
|
||||
<strong className="fw-semibold">
|
||||
{I18NextService.i18n.t("totp_qr_segue")}
|
||||
</strong>
|
||||
<img
|
||||
src={this.state.qrCode}
|
||||
className="d-block mt-1 mx-auto"
|
||||
alt={I18NextService.i18n.t("totp_qr")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<form id="totp-form">
|
||||
<label
|
||||
className="form-label ms-2 mt-4 fw-bold"
|
||||
id="totp-input-label"
|
||||
htmlFor="totp-input-0"
|
||||
>
|
||||
{I18NextService.i18n.t("enter_totp_code")}
|
||||
</label>
|
||||
<div className="d-flex justify-content-between align-items-center p-2">
|
||||
{Array.from(Array(TOTP_LENGTH).keys()).map(i => (
|
||||
<input
|
||||
key={
|
||||
i /*While using indices as keys is usually bad practice, in this case we don't have to worry about the order of the list items changing.*/
|
||||
}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
maxLength={1}
|
||||
value={totp[i] ?? ""}
|
||||
disabled={totp.length !== i}
|
||||
aria-labelledby="totp-input-label"
|
||||
id={`totp-input-${i}`}
|
||||
className="form-control form-control-lg mx-2 p-1 p-md-2 text-center"
|
||||
onInput={linkEvent({ modal: this, i }, handleInput)}
|
||||
onKeyUp={linkEvent({ modal: this, i }, handleKeyUp)}
|
||||
onPaste={linkEvent(this, handlePaste)}
|
||||
ref={element => {
|
||||
this.inputRefs[i] = element;
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<footer className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={onClose}
|
||||
>
|
||||
{I18NextService.i18n.t("cancel")}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
clearTotp() {
|
||||
this.setState({ totp: "" });
|
||||
}
|
||||
|
||||
async handleShow() {
|
||||
this.inputRefs[0]?.focus();
|
||||
|
||||
if (this.props.type === "generate") {
|
||||
const { getSVG } = await import("@shortcm/qr-image/lib/svg");
|
||||
|
||||
this.setState({
|
||||
qrCode: URL.createObjectURL(
|
||||
new Blob([(await getSVG(this.props.secretUrl!)).buffer], {
|
||||
type: "image/svg+xml",
|
||||
}),
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,7 +18,12 @@ import {
|
|||
} from "lemmy-js-client";
|
||||
import { InitialFetchRequest } from "../../interfaces";
|
||||
import { FirstLoadService, I18NextService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
import { ListingTypeSelect } from "../common/listing-type-select";
|
||||
|
|
@ -64,7 +69,7 @@ function getCommunitiesQueryParams() {
|
|||
export class Communities extends Component<any, CommunitiesState> {
|
||||
private isoData = setIsoData<CommunitiesData>(this.context);
|
||||
state: CommunitiesState = {
|
||||
listCommunitiesResponse: { state: "empty" },
|
||||
listCommunitiesResponse: EMPTY_REQUEST,
|
||||
siteRes: this.isoData.site_res,
|
||||
searchText: "",
|
||||
isIsomorphic: false,
|
||||
|
|
@ -333,7 +338,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
}
|
||||
|
||||
async refetch() {
|
||||
this.setState({ listCommunitiesResponse: { state: "loading" } });
|
||||
this.setState({ listCommunitiesResponse: LOADING_REQUEST });
|
||||
|
||||
const { listingType, sort, page } = getCommunitiesQueryParams();
|
||||
|
||||
|
|
|
|||
|
|
@ -83,7 +83,12 @@ import {
|
|||
InitialFetchRequest,
|
||||
} from "../../interfaces";
|
||||
import { FirstLoadService, I18NextService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { setupTippy } from "../../tippy";
|
||||
import { toast } from "../../toast";
|
||||
import { CommentNodes } from "../comment/comment-nodes";
|
||||
|
|
@ -146,9 +151,9 @@ export class Community extends Component<
|
|||
> {
|
||||
private isoData = setIsoData<CommunityData>(this.context);
|
||||
state: State = {
|
||||
communityRes: { state: "empty" },
|
||||
postsRes: { state: "empty" },
|
||||
commentsRes: { state: "empty" },
|
||||
communityRes: EMPTY_REQUEST,
|
||||
postsRes: EMPTY_REQUEST,
|
||||
commentsRes: EMPTY_REQUEST,
|
||||
siteRes: this.isoData.site_res,
|
||||
showSidebarMobile: false,
|
||||
finished: new Map(),
|
||||
|
|
@ -212,7 +217,7 @@ export class Community extends Component<
|
|||
}
|
||||
|
||||
async fetchCommunity() {
|
||||
this.setState({ communityRes: { state: "loading" } });
|
||||
this.setState({ communityRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
communityRes: await HttpService.client.getCommunity({
|
||||
name: this.props.match.params.name,
|
||||
|
|
@ -248,10 +253,8 @@ export class Community extends Component<
|
|||
|
||||
const page = getPageFromString(urlPage);
|
||||
|
||||
let postsResponse: RequestState<GetPostsResponse> = { state: "empty" };
|
||||
let commentsResponse: RequestState<GetCommentsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let postsResponse: RequestState<GetPostsResponse> = EMPTY_REQUEST;
|
||||
let commentsResponse: RequestState<GetCommentsResponse> = EMPTY_REQUEST;
|
||||
|
||||
if (dataType === DataType.Post) {
|
||||
const getPostsForm: GetPosts = {
|
||||
|
|
@ -585,7 +588,7 @@ export class Community extends Component<
|
|||
const { name } = this.props.match.params;
|
||||
|
||||
if (dataType === DataType.Post) {
|
||||
this.setState({ postsRes: { state: "loading" } });
|
||||
this.setState({ postsRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
postsRes: await HttpService.client.getPosts({
|
||||
page,
|
||||
|
|
@ -597,7 +600,7 @@ export class Community extends Component<
|
|||
}),
|
||||
});
|
||||
} else {
|
||||
this.setState({ commentsRes: { state: "loading" } });
|
||||
this.setState({ commentsRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
commentsRes: await HttpService.client.getComments({
|
||||
page,
|
||||
|
|
|
|||
|
|
@ -16,7 +16,12 @@ import {
|
|||
import { InitialFetchRequest } from "../../interfaces";
|
||||
import { removeFromEmojiDataModel, updateEmojiDataModel } from "../../markdown";
|
||||
import { FirstLoadService, I18NextService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { toast } from "../../toast";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
|
|
@ -50,9 +55,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
siteRes: this.isoData.site_res,
|
||||
banned: [],
|
||||
currentTab: "site",
|
||||
bannedRes: { state: "empty" },
|
||||
instancesRes: { state: "empty" },
|
||||
leaveAdminTeamRes: { state: "empty" },
|
||||
bannedRes: EMPTY_REQUEST,
|
||||
instancesRes: EMPTY_REQUEST,
|
||||
leaveAdminTeamRes: EMPTY_REQUEST,
|
||||
loading: false,
|
||||
themeList: [],
|
||||
isIsomorphic: false,
|
||||
|
|
@ -231,8 +236,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
|
||||
async fetchData() {
|
||||
this.setState({
|
||||
bannedRes: { state: "loading" },
|
||||
instancesRes: { state: "loading" },
|
||||
bannedRes: LOADING_REQUEST,
|
||||
instancesRes: LOADING_REQUEST,
|
||||
themeList: [],
|
||||
});
|
||||
|
||||
|
|
@ -333,7 +338,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
}
|
||||
|
||||
async handleLeaveAdminTeam(i: AdminSettings) {
|
||||
i.setState({ leaveAdminTeamRes: { state: "loading" } });
|
||||
i.setState({ leaveAdminTeamRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
leaveAdminTeamRes: await HttpService.client.leaveAdmin(),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -85,7 +85,12 @@ import {
|
|||
I18NextService,
|
||||
UserService,
|
||||
} from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { setupTippy } from "../../tippy";
|
||||
import { toast } from "../../toast";
|
||||
import { CommentNodes } from "../comment/comment-nodes";
|
||||
|
|
@ -221,9 +226,9 @@ const LinkButton = ({
|
|||
export class Home extends Component<any, HomeState> {
|
||||
private isoData = setIsoData<HomeData>(this.context);
|
||||
state: HomeState = {
|
||||
postsRes: { state: "empty" },
|
||||
commentsRes: { state: "empty" },
|
||||
trendingCommunitiesRes: { state: "empty" },
|
||||
postsRes: EMPTY_REQUEST,
|
||||
commentsRes: EMPTY_REQUEST,
|
||||
trendingCommunitiesRes: EMPTY_REQUEST,
|
||||
scrolled: true,
|
||||
siteRes: this.isoData.site_res,
|
||||
showSubscribedMobile: false,
|
||||
|
|
@ -321,10 +326,8 @@ export class Home extends Component<any, HomeState> {
|
|||
|
||||
const page = urlPage ? Number(urlPage) : 1;
|
||||
|
||||
let postsRes: RequestState<GetPostsResponse> = { state: "empty" };
|
||||
let commentsRes: RequestState<GetCommentsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let postsRes: RequestState<GetPostsResponse> = EMPTY_REQUEST;
|
||||
let commentsRes: RequestState<GetCommentsResponse> = EMPTY_REQUEST;
|
||||
|
||||
if (dataType === DataType.Post) {
|
||||
const getPostsForm: GetPosts = {
|
||||
|
|
@ -790,7 +793,7 @@ export class Home extends Component<any, HomeState> {
|
|||
}
|
||||
|
||||
async fetchTrendingCommunities() {
|
||||
this.setState({ trendingCommunitiesRes: { state: "loading" } });
|
||||
this.setState({ trendingCommunitiesRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
trendingCommunitiesRes: await HttpService.client.listCommunities({
|
||||
type_: "Local",
|
||||
|
|
@ -814,7 +817,7 @@ export class Home extends Component<any, HomeState> {
|
|||
behavior: "instant",
|
||||
});
|
||||
} else {
|
||||
this.setState({ postsRes: { state: "loading" } });
|
||||
this.setState({ postsRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
postsRes: await HttpService.client.getPosts({
|
||||
page,
|
||||
|
|
@ -828,7 +831,7 @@ export class Home extends Component<any, HomeState> {
|
|||
HomeCacheService.postsRes = this.state.postsRes;
|
||||
}
|
||||
} else {
|
||||
this.setState({ commentsRes: { state: "loading" } });
|
||||
this.setState({ commentsRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
commentsRes: await HttpService.client.getComments({
|
||||
page,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,12 @@ import classNames from "classnames";
|
|||
import { relTags } from "../../config";
|
||||
import { InitialFetchRequest } from "../../interfaces";
|
||||
import { FirstLoadService, I18NextService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
import Tabs from "../common/tabs";
|
||||
|
|
@ -28,7 +33,7 @@ interface InstancesState {
|
|||
export class Instances extends Component<any, InstancesState> {
|
||||
private isoData = setIsoData<InstancesData>(this.context);
|
||||
state: InstancesState = {
|
||||
instancesRes: { state: "empty" },
|
||||
instancesRes: EMPTY_REQUEST,
|
||||
siteRes: this.isoData.site_res,
|
||||
isIsomorphic: false,
|
||||
};
|
||||
|
|
@ -54,7 +59,7 @@ export class Instances extends Component<any, InstancesState> {
|
|||
|
||||
async fetchInstances() {
|
||||
this.setState({
|
||||
instancesRes: { state: "loading" },
|
||||
instancesRes: LOADING_REQUEST,
|
||||
});
|
||||
|
||||
this.setState({
|
||||
|
|
|
|||
|
|
@ -5,11 +5,17 @@ import { Component, linkEvent } from "inferno";
|
|||
import { RouteComponentProps } from "inferno-router/dist/Route";
|
||||
import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
|
||||
import { I18NextService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { toast } from "../../toast";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
import PasswordInput from "../common/password-input";
|
||||
import TotpModal from "../common/totp-modal";
|
||||
|
||||
interface LoginProps {
|
||||
prev?: string;
|
||||
|
|
@ -25,57 +31,57 @@ const getLoginQueryParams = () =>
|
|||
interface State {
|
||||
loginRes: RequestState<LoginResponse>;
|
||||
form: {
|
||||
username_or_email?: string;
|
||||
password?: string;
|
||||
totp_2fa_token?: string;
|
||||
username_or_email: string;
|
||||
password: string;
|
||||
};
|
||||
showTotp: boolean;
|
||||
siteRes: GetSiteResponse;
|
||||
show2faModal: boolean;
|
||||
}
|
||||
|
||||
async function handleLoginSuccess(i: Login, loginRes: LoginResponse) {
|
||||
UserService.Instance.login({
|
||||
res: loginRes,
|
||||
});
|
||||
const site = await HttpService.client.getSite();
|
||||
|
||||
if (site.state === "success") {
|
||||
UserService.Instance.myUserInfo = site.data.my_user;
|
||||
}
|
||||
|
||||
const { prev } = getLoginQueryParams();
|
||||
|
||||
prev
|
||||
? i.props.history.replace(prev)
|
||||
: i.props.history.action === "PUSH"
|
||||
? i.props.history.back()
|
||||
: i.props.history.replace("/");
|
||||
}
|
||||
|
||||
async function handleLoginSubmit(i: Login, event: any) {
|
||||
event.preventDefault();
|
||||
const { password, totp_2fa_token, username_or_email } = i.state.form;
|
||||
const { password, username_or_email } = i.state.form;
|
||||
|
||||
if (username_or_email && password) {
|
||||
i.setState({ loginRes: { state: "loading" } });
|
||||
i.setState({ loginRes: LOADING_REQUEST });
|
||||
|
||||
const loginRes = await HttpService.client.login({
|
||||
username_or_email,
|
||||
password,
|
||||
totp_2fa_token,
|
||||
});
|
||||
switch (loginRes.state) {
|
||||
case "failed": {
|
||||
if (loginRes.msg === "missing_totp_token") {
|
||||
i.setState({ showTotp: true });
|
||||
toast(I18NextService.i18n.t("enter_two_factor_code"), "info");
|
||||
i.setState({ show2faModal: true });
|
||||
} else {
|
||||
toast(I18NextService.i18n.t(loginRes.msg), "danger");
|
||||
}
|
||||
|
||||
i.setState({ loginRes: { state: "failed", msg: loginRes.msg } });
|
||||
i.setState({ loginRes });
|
||||
break;
|
||||
}
|
||||
|
||||
case "success": {
|
||||
UserService.Instance.login({
|
||||
res: loginRes.data,
|
||||
});
|
||||
const site = await HttpService.client.getSite();
|
||||
|
||||
if (site.state === "success") {
|
||||
UserService.Instance.myUserInfo = site.data.my_user;
|
||||
}
|
||||
|
||||
const { prev } = getLoginQueryParams();
|
||||
|
||||
prev
|
||||
? i.props.history.replace(prev)
|
||||
: i.props.history.action === "PUSH"
|
||||
? i.props.history.back()
|
||||
: i.props.history.replace("/");
|
||||
|
||||
handleLoginSuccess(i, loginRes.data);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -88,14 +94,14 @@ function handleLoginUsernameChange(i: Login, event: any) {
|
|||
);
|
||||
}
|
||||
|
||||
function handleLoginTotpChange(i: Login, event: any) {
|
||||
i.setState(prevState => (prevState.form.totp_2fa_token = event.target.value));
|
||||
}
|
||||
|
||||
function handleLoginPasswordChange(i: Login, event: any) {
|
||||
i.setState(prevState => (prevState.form.password = event.target.value));
|
||||
}
|
||||
|
||||
function handleClose2faModal(i: Login) {
|
||||
i.setState({ show2faModal: false });
|
||||
}
|
||||
|
||||
export class Login extends Component<
|
||||
RouteComponentProps<Record<string, never>>,
|
||||
State
|
||||
|
|
@ -103,14 +109,19 @@ export class Login extends Component<
|
|||
private isoData = setIsoData(this.context);
|
||||
|
||||
state: State = {
|
||||
loginRes: { state: "empty" },
|
||||
form: {},
|
||||
showTotp: false,
|
||||
loginRes: EMPTY_REQUEST,
|
||||
form: {
|
||||
username_or_email: "",
|
||||
password: "",
|
||||
},
|
||||
siteRes: this.isoData.site_res,
|
||||
show2faModal: false,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.handleSubmitTotp = this.handleSubmitTotp.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -137,6 +148,12 @@ export class Login extends Component<
|
|||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<TotpModal
|
||||
type="login"
|
||||
onSubmit={this.handleSubmitTotp}
|
||||
show={this.state.show2faModal}
|
||||
onClose={linkEvent(this, handleClose2faModal)}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
|
||||
</div>
|
||||
|
|
@ -144,6 +161,24 @@ export class Login extends Component<
|
|||
);
|
||||
}
|
||||
|
||||
async handleSubmitTotp(totp: string) {
|
||||
const loginRes = await HttpService.client.login({
|
||||
password: this.state.form.password,
|
||||
username_or_email: this.state.form.username_or_email,
|
||||
totp_2fa_token: totp,
|
||||
});
|
||||
|
||||
const successful = loginRes.state === "success";
|
||||
if (successful) {
|
||||
this.setState({ show2faModal: false });
|
||||
handleLoginSuccess(this, loginRes.data);
|
||||
} else {
|
||||
toast(I18NextService.i18n.t("incorrect_totp_code"), "danger");
|
||||
}
|
||||
|
||||
return successful;
|
||||
}
|
||||
|
||||
loginForm() {
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -178,28 +213,6 @@ export class Login extends Component<
|
|||
showForgotLink
|
||||
/>
|
||||
</div>
|
||||
{this.state.showTotp && (
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="login-totp-token"
|
||||
>
|
||||
{I18NextService.i18n.t("two_factor_token")}
|
||||
</label>
|
||||
<div className="col-sm-6">
|
||||
<input
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
className="form-control"
|
||||
id="login-totp-token"
|
||||
pattern="[0-9]*"
|
||||
autoComplete="one-time-code"
|
||||
value={this.state.form.totp_2fa_token}
|
||||
onInput={linkEvent(this, handleLoginTotpChange)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,12 @@ import {
|
|||
Register,
|
||||
} from "lemmy-js-client";
|
||||
import { I18NextService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { Spinner } from "../common/icon";
|
||||
import PasswordInput from "../common/password-input";
|
||||
import { SiteForm } from "./site-form";
|
||||
|
|
@ -35,7 +40,7 @@ export class Setup extends Component<any, State> {
|
|||
private isoData = setIsoData(this.context);
|
||||
|
||||
state: State = {
|
||||
registerRes: { state: "empty" },
|
||||
registerRes: EMPTY_REQUEST,
|
||||
themeList: [],
|
||||
form: {
|
||||
show_nsfw: true,
|
||||
|
|
@ -157,7 +162,7 @@ export class Setup extends Component<any, State> {
|
|||
|
||||
async handleRegisterSubmit(i: Setup, event: any) {
|
||||
event.preventDefault();
|
||||
i.setState({ registerRes: { state: "loading" } });
|
||||
i.setState({ registerRes: LOADING_REQUEST });
|
||||
const {
|
||||
username,
|
||||
password_verify,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,12 @@ import {
|
|||
import { joinLemmyUrl } from "../../config";
|
||||
import { mdToHtml } from "../../markdown";
|
||||
import { I18NextService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { toast } from "../../toast";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Icon, Spinner } from "../common/icon";
|
||||
|
|
@ -43,8 +48,8 @@ export class Signup extends Component<any, State> {
|
|||
private audio?: HTMLAudioElement;
|
||||
|
||||
state: State = {
|
||||
registerRes: { state: "empty" },
|
||||
captchaRes: { state: "empty" },
|
||||
registerRes: EMPTY_REQUEST,
|
||||
captchaRes: EMPTY_REQUEST,
|
||||
form: {
|
||||
show_nsfw: false,
|
||||
},
|
||||
|
|
@ -65,7 +70,7 @@ export class Signup extends Component<any, State> {
|
|||
}
|
||||
|
||||
async fetchCaptcha() {
|
||||
this.setState({ captchaRes: { state: "loading" } });
|
||||
this.setState({ captchaRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
captchaRes: await HttpService.client.getCaptcha(),
|
||||
});
|
||||
|
|
@ -368,7 +373,7 @@ export class Signup extends Component<any, State> {
|
|||
username,
|
||||
} = i.state.form;
|
||||
if (username && password && password_verify) {
|
||||
i.setState({ registerRes: { state: "loading" } });
|
||||
i.setState({ registerRes: LOADING_REQUEST });
|
||||
|
||||
const registerRes = await HttpService.client.register({
|
||||
username,
|
||||
|
|
@ -384,7 +389,7 @@ export class Signup extends Component<any, State> {
|
|||
switch (registerRes.state) {
|
||||
case "failed": {
|
||||
toast(registerRes.msg, "danger");
|
||||
i.setState({ registerRes: { state: "empty" } });
|
||||
i.setState({ registerRes: EMPTY_REQUEST });
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,12 @@ import {
|
|||
import { fetchLimit } from "../config";
|
||||
import { InitialFetchRequest } from "../interfaces";
|
||||
import { FirstLoadService, I18NextService } from "../services";
|
||||
import { HttpService, RequestState } from "../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../services/HttpService";
|
||||
import { HtmlTags } from "./common/html-tags";
|
||||
import { Icon, Spinner } from "./common/icon";
|
||||
import { MomentTime } from "./common/moment-time";
|
||||
|
|
@ -647,8 +652,8 @@ export class Modlog extends Component<
|
|||
private isoData = setIsoData<ModlogData>(this.context);
|
||||
|
||||
state: ModlogState = {
|
||||
res: { state: "empty" },
|
||||
communityRes: { state: "empty" },
|
||||
res: EMPTY_REQUEST,
|
||||
communityRes: EMPTY_REQUEST,
|
||||
loadingModSearch: false,
|
||||
loadingUserSearch: false,
|
||||
userSearchOptions: [],
|
||||
|
|
@ -954,7 +959,7 @@ export class Modlog extends Component<
|
|||
const { communityId: urlCommunityId } = this.props.match.params;
|
||||
const communityId = getIdFromString(urlCommunityId);
|
||||
|
||||
this.setState({ res: { state: "loading" } });
|
||||
this.setState({ res: LOADING_REQUEST });
|
||||
this.setState({
|
||||
res: await HttpService.client.getModlog({
|
||||
community_id: communityId,
|
||||
|
|
@ -970,7 +975,7 @@ export class Modlog extends Component<
|
|||
});
|
||||
|
||||
if (communityId) {
|
||||
this.setState({ communityRes: { state: "loading" } });
|
||||
this.setState({ communityRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
communityRes: await HttpService.client.getCommunity({
|
||||
id: communityId,
|
||||
|
|
@ -1001,9 +1006,7 @@ export class Modlog extends Component<
|
|||
other_person_id: userId,
|
||||
};
|
||||
|
||||
let communityResponse: RequestState<GetCommunityResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let communityResponse: RequestState<GetCommunityResponse> = EMPTY_REQUEST;
|
||||
|
||||
if (communityId) {
|
||||
const communityForm: GetCommunity = {
|
||||
|
|
@ -1013,9 +1016,7 @@ export class Modlog extends Component<
|
|||
communityResponse = await client.getCommunity(communityForm);
|
||||
}
|
||||
|
||||
let modUserResponse: RequestState<GetPersonDetailsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let modUserResponse: RequestState<GetPersonDetailsResponse> = EMPTY_REQUEST;
|
||||
|
||||
if (modId) {
|
||||
const getPersonForm: GetPersonDetails = {
|
||||
|
|
@ -1025,9 +1026,7 @@ export class Modlog extends Component<
|
|||
modUserResponse = await client.getPersonDetails(getPersonForm);
|
||||
}
|
||||
|
||||
let userResponse: RequestState<GetPersonDetailsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let userResponse: RequestState<GetPersonDetailsResponse> = EMPTY_REQUEST;
|
||||
|
||||
if (userId) {
|
||||
const getPersonForm: GetPersonDetails = {
|
||||
|
|
|
|||
|
|
@ -64,8 +64,10 @@ import { CommentViewType, InitialFetchRequest } from "../../interfaces";
|
|||
import { FirstLoadService, I18NextService, UserService } from "../../services";
|
||||
import { UnreadCounterService } from "../../services";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
EmptyRequestState,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { toast } from "../../toast";
|
||||
|
|
@ -129,10 +131,10 @@ export class Inbox extends Component<any, InboxState> {
|
|||
sort: "New",
|
||||
page: 1,
|
||||
siteRes: this.isoData.site_res,
|
||||
repliesRes: { state: "empty" },
|
||||
mentionsRes: { state: "empty" },
|
||||
messagesRes: { state: "empty" },
|
||||
markAllAsReadRes: { state: "empty" },
|
||||
repliesRes: EMPTY_REQUEST,
|
||||
mentionsRes: EMPTY_REQUEST,
|
||||
messagesRes: EMPTY_REQUEST,
|
||||
markAllAsReadRes: EMPTY_REQUEST,
|
||||
finished: new Map(),
|
||||
isIsomorphic: false,
|
||||
};
|
||||
|
|
@ -725,7 +727,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
client,
|
||||
}: InitialFetchRequest): Promise<InboxData> {
|
||||
const sort: CommentSortType = "New";
|
||||
const empty: EmptyRequestState = { state: "empty" };
|
||||
const empty: EmptyRequestState = EMPTY_REQUEST;
|
||||
let inboxData: InboxData = {
|
||||
mentionsRes: empty,
|
||||
messagesRes: empty,
|
||||
|
|
@ -765,7 +767,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
const page = this.state.page;
|
||||
const limit = fetchLimit;
|
||||
|
||||
this.setState({ repliesRes: { state: "loading" } });
|
||||
this.setState({ repliesRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
repliesRes: await HttpService.client.getReplies({
|
||||
sort,
|
||||
|
|
@ -775,7 +777,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
}),
|
||||
});
|
||||
|
||||
this.setState({ mentionsRes: { state: "loading" } });
|
||||
this.setState({ mentionsRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
mentionsRes: await HttpService.client.getPersonMentions({
|
||||
sort,
|
||||
|
|
@ -785,7 +787,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
}),
|
||||
});
|
||||
|
||||
this.setState({ messagesRes: { state: "loading" } });
|
||||
this.setState({ messagesRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
messagesRes: await HttpService.client.getPrivateMessages({
|
||||
unread_only,
|
||||
|
|
@ -802,7 +804,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
}
|
||||
|
||||
async handleMarkAllAsRead(i: Inbox) {
|
||||
i.setState({ markAllAsReadRes: { state: "loading" } });
|
||||
i.setState({ markAllAsReadRes: LOADING_REQUEST });
|
||||
|
||||
i.setState({
|
||||
markAllAsReadRes: await HttpService.client.markAllAsRead(),
|
||||
|
|
@ -810,9 +812,9 @@ export class Inbox extends Component<any, InboxState> {
|
|||
|
||||
if (i.state.markAllAsReadRes.state === "success") {
|
||||
i.setState({
|
||||
repliesRes: { state: "empty" },
|
||||
mentionsRes: { state: "empty" },
|
||||
messagesRes: { state: "empty" },
|
||||
repliesRes: EMPTY_REQUEST,
|
||||
mentionsRes: EMPTY_REQUEST,
|
||||
messagesRes: EMPTY_REQUEST,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@ import { capitalizeFirstLetter } from "@utils/helpers";
|
|||
import { Component, linkEvent } from "inferno";
|
||||
import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
|
||||
import { HttpService, I18NextService, UserService } from "../../services";
|
||||
import { RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
import PasswordInput from "../common/password-input";
|
||||
|
|
@ -22,7 +26,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
private isoData = setIsoData(this.context);
|
||||
|
||||
state: State = {
|
||||
passwordChangeRes: { state: "empty" },
|
||||
passwordChangeRes: EMPTY_REQUEST,
|
||||
siteRes: this.isoData.site_res,
|
||||
form: {
|
||||
token: this.props.match.params.token,
|
||||
|
|
@ -106,7 +110,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
|
||||
async handlePasswordChangeSubmit(i: PasswordChange, event: any) {
|
||||
event.preventDefault();
|
||||
i.setState({ passwordChangeRes: { state: "loading" } });
|
||||
i.setState({ passwordChangeRes: LOADING_REQUEST });
|
||||
|
||||
const password = i.state.form.password;
|
||||
const password_verify = i.state.form.password_verify;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,12 @@ import { fetchLimit, relTags } from "../../config";
|
|||
import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
|
||||
import { mdToHtml } from "../../markdown";
|
||||
import { FirstLoadService, I18NextService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { setupTippy } from "../../tippy";
|
||||
import { toast } from "../../toast";
|
||||
import { BannerIconHeader } from "../common/banner-icon-header";
|
||||
|
|
@ -171,7 +176,7 @@ export class Profile extends Component<
|
|||
> {
|
||||
private isoData = setIsoData<ProfileData>(this.context);
|
||||
state: ProfileState = {
|
||||
personRes: { state: "empty" },
|
||||
personRes: EMPTY_REQUEST,
|
||||
personBlocked: false,
|
||||
siteRes: this.isoData.site_res,
|
||||
showBanDialog: false,
|
||||
|
|
@ -245,7 +250,7 @@ export class Profile extends Component<
|
|||
async fetchUserData() {
|
||||
const { page, sort, view } = getProfileQueryParams();
|
||||
|
||||
this.setState({ personRes: { state: "loading" } });
|
||||
this.setState({ personRes: LOADING_REQUEST });
|
||||
const personRes = await HttpService.client.getPersonDetails({
|
||||
username: this.props.match.params.username,
|
||||
sort,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,12 @@ import {
|
|||
import { fetchLimit } from "../../config";
|
||||
import { InitialFetchRequest } from "../../interfaces";
|
||||
import { FirstLoadService, I18NextService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { setupTippy } from "../../tippy";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
|
|
@ -42,7 +47,7 @@ export class RegistrationApplications extends Component<
|
|||
> {
|
||||
private isoData = setIsoData<RegistrationApplicationsData>(this.context);
|
||||
state: RegistrationApplicationsState = {
|
||||
appsRes: { state: "empty" },
|
||||
appsRes: EMPTY_REQUEST,
|
||||
siteRes: this.isoData.site_res,
|
||||
unreadOrAll: UnreadOrAll.Unread,
|
||||
page: 1,
|
||||
|
|
@ -210,14 +215,14 @@ export class RegistrationApplications extends Component<
|
|||
page: 1,
|
||||
limit: fetchLimit,
|
||||
})
|
||||
: { state: "empty" },
|
||||
: EMPTY_REQUEST,
|
||||
};
|
||||
}
|
||||
|
||||
async refetch() {
|
||||
const unread_only = this.state.unreadOrAll === UnreadOrAll.Unread;
|
||||
this.setState({
|
||||
appsRes: { state: "loading" },
|
||||
appsRes: LOADING_REQUEST,
|
||||
});
|
||||
this.setState({
|
||||
appsRes: await HttpService.client.listRegistrationApplications({
|
||||
|
|
|
|||
|
|
@ -35,7 +35,11 @@ import {
|
|||
I18NextService,
|
||||
UserService,
|
||||
} from "../../services";
|
||||
import { RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { CommentReport } from "../comment/comment-report";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
|
|
@ -88,9 +92,9 @@ interface ReportsState {
|
|||
export class Reports extends Component<any, ReportsState> {
|
||||
private isoData = setIsoData<ReportsData>(this.context);
|
||||
state: ReportsState = {
|
||||
commentReportsRes: { state: "empty" },
|
||||
postReportsRes: { state: "empty" },
|
||||
messageReportsRes: { state: "empty" },
|
||||
commentReportsRes: EMPTY_REQUEST,
|
||||
postReportsRes: EMPTY_REQUEST,
|
||||
messageReportsRes: EMPTY_REQUEST,
|
||||
unreadOrAll: UnreadOrAll.Unread,
|
||||
messageType: MessageType.All,
|
||||
page: 1,
|
||||
|
|
@ -551,7 +555,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
const data: ReportsData = {
|
||||
commentReportsRes: await client.listCommentReports(commentReportsForm),
|
||||
postReportsRes: await client.listPostReports(postReportsForm),
|
||||
messageReportsRes: { state: "empty" },
|
||||
messageReportsRes: EMPTY_REQUEST,
|
||||
};
|
||||
|
||||
if (amAdmin()) {
|
||||
|
|
@ -575,9 +579,9 @@ export class Reports extends Component<any, ReportsState> {
|
|||
const limit = fetchLimit;
|
||||
|
||||
this.setState({
|
||||
commentReportsRes: { state: "loading" },
|
||||
postReportsRes: { state: "loading" },
|
||||
messageReportsRes: { state: "loading" },
|
||||
commentReportsRes: LOADING_REQUEST,
|
||||
postReportsRes: LOADING_REQUEST,
|
||||
messageReportsRes: LOADING_REQUEST,
|
||||
});
|
||||
|
||||
const form:
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import {
|
|||
BlockPersonResponse,
|
||||
CommunityBlockView,
|
||||
DeleteAccountResponse,
|
||||
GenerateTotpSecretResponse,
|
||||
GetFederatedInstancesResponse,
|
||||
GetSiteResponse,
|
||||
Instance,
|
||||
|
|
@ -32,10 +33,16 @@ import {
|
|||
LoginResponse,
|
||||
PersonBlockView,
|
||||
SortType,
|
||||
UpdateTotpResponse,
|
||||
} from "lemmy-js-client";
|
||||
import { elementUrl, emDash, relTags } from "../../config";
|
||||
import { FirstLoadService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { I18NextService, languages } from "../../services/I18NextService";
|
||||
import { setupTippy } from "../../tippy";
|
||||
import { toast } from "../../toast";
|
||||
|
|
@ -52,6 +59,7 @@ import Tabs from "../common/tabs";
|
|||
import { CommunityLink } from "../community/community-link";
|
||||
import { PersonListing } from "./person-listing";
|
||||
import { InitialFetchRequest } from "../../interfaces";
|
||||
import TotpModal from "../common/totp-modal";
|
||||
|
||||
type SettingsData = RouteDataResponse<{
|
||||
instancesRes: GetFederatedInstancesResponse;
|
||||
|
|
@ -62,6 +70,8 @@ interface SettingsState {
|
|||
changePasswordRes: RequestState<LoginResponse>;
|
||||
deleteAccountRes: RequestState<DeleteAccountResponse>;
|
||||
instancesRes: RequestState<GetFederatedInstancesResponse>;
|
||||
generateTotpRes: RequestState<GenerateTotpSecretResponse>;
|
||||
updateTotpRes: RequestState<UpdateTotpResponse>;
|
||||
// TODO redo these forms
|
||||
saveUserSettingsForm: {
|
||||
show_nsfw?: boolean;
|
||||
|
|
@ -85,7 +95,6 @@ interface SettingsState {
|
|||
show_read_posts?: boolean;
|
||||
show_new_post_notifs?: boolean;
|
||||
discussion_languages?: number[];
|
||||
generate_totp_2fa?: boolean;
|
||||
open_links_in_new_tab?: boolean;
|
||||
};
|
||||
changePasswordForm: {
|
||||
|
|
@ -109,6 +118,7 @@ interface SettingsState {
|
|||
searchPersonOptions: Choice[];
|
||||
searchInstanceOptions: Choice[];
|
||||
isIsomorphic: boolean;
|
||||
show2faModal: boolean;
|
||||
}
|
||||
|
||||
type FilterType = "user" | "community" | "instance";
|
||||
|
|
@ -147,13 +157,37 @@ const Filter = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
async function handleGenerateTotp(i: Settings) {
|
||||
i.setState({ generateTotpRes: LOADING_REQUEST });
|
||||
|
||||
const generateTotpRes = await HttpService.client.generateTotpSecret();
|
||||
|
||||
if (generateTotpRes.state === "failed") {
|
||||
toast(generateTotpRes.msg, "danger");
|
||||
} else {
|
||||
i.setState({ show2faModal: true });
|
||||
}
|
||||
|
||||
i.setState({
|
||||
generateTotpRes,
|
||||
});
|
||||
}
|
||||
|
||||
function handleShowTotpModal(i: Settings) {
|
||||
i.setState({ show2faModal: true });
|
||||
}
|
||||
|
||||
function handleClose2faModal(i: Settings) {
|
||||
i.setState({ show2faModal: false });
|
||||
}
|
||||
|
||||
export class Settings extends Component<any, SettingsState> {
|
||||
private isoData = setIsoData<SettingsData>(this.context);
|
||||
state: SettingsState = {
|
||||
saveRes: { state: "empty" },
|
||||
deleteAccountRes: { state: "empty" },
|
||||
changePasswordRes: { state: "empty" },
|
||||
instancesRes: { state: "empty" },
|
||||
saveRes: EMPTY_REQUEST,
|
||||
deleteAccountRes: EMPTY_REQUEST,
|
||||
changePasswordRes: EMPTY_REQUEST,
|
||||
instancesRes: EMPTY_REQUEST,
|
||||
saveUserSettingsForm: {},
|
||||
changePasswordForm: {},
|
||||
deleteAccountShowConfirm: false,
|
||||
|
|
@ -170,6 +204,9 @@ export class Settings extends Component<any, SettingsState> {
|
|||
searchPersonOptions: [],
|
||||
searchInstanceOptions: [],
|
||||
isIsomorphic: false,
|
||||
generateTotpRes: EMPTY_REQUEST,
|
||||
updateTotpRes: EMPTY_REQUEST,
|
||||
show2faModal: false,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
|
|
@ -193,6 +230,10 @@ export class Settings extends Component<any, SettingsState> {
|
|||
this.handleBlockCommunity = this.handleBlockCommunity.bind(this);
|
||||
this.handleBlockInstance = this.handleBlockInstance.bind(this);
|
||||
|
||||
this.handleToggle2fa = this.handleToggle2fa.bind(this);
|
||||
this.handleEnable2fa = this.handleEnable2fa.bind(this);
|
||||
this.handleDisable2fa = this.handleDisable2fa.bind(this);
|
||||
|
||||
const mui = UserService.Instance.myUserInfo;
|
||||
if (mui) {
|
||||
const {
|
||||
|
|
@ -271,7 +312,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
|
||||
if (!this.state.isIsomorphic) {
|
||||
this.setState({
|
||||
instancesRes: { state: "loading" },
|
||||
instancesRes: LOADING_REQUEST,
|
||||
});
|
||||
|
||||
this.setState({
|
||||
|
|
@ -1001,57 +1042,89 @@ export class Settings extends Component<any, SettingsState> {
|
|||
}
|
||||
|
||||
totpSection() {
|
||||
const totpUrl =
|
||||
UserService.Instance.myUserInfo?.local_user_view.local_user.totp_2fa_url;
|
||||
const totpEnabled =
|
||||
!!UserService.Instance.myUserInfo?.local_user_view.local_user
|
||||
.totp_2fa_enabled;
|
||||
const { generateTotpRes } = this.state;
|
||||
|
||||
return (
|
||||
<>
|
||||
{!totpUrl && (
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
id="user-generate-totp"
|
||||
type="checkbox"
|
||||
checked={this.state.saveUserSettingsForm.generate_totp_2fa}
|
||||
onChange={linkEvent(this, this.handleGenerateTotp)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="user-generate-totp">
|
||||
{I18NextService.i18n.t("set_up_two_factor")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totpUrl && (
|
||||
<>
|
||||
<div>
|
||||
<a className="btn btn-secondary mb-2" href={totpUrl}>
|
||||
{I18NextService.i18n.t("two_factor_link")}
|
||||
</a>
|
||||
</div>
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
id="user-remove-totp"
|
||||
type="checkbox"
|
||||
checked={
|
||||
this.state.saveUserSettingsForm.generate_totp_2fa === false
|
||||
}
|
||||
onChange={linkEvent(this, this.handleRemoveTotp)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="user-remove-totp">
|
||||
{I18NextService.i18n.t("remove_two_factor")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary my-2"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
totpEnabled ? handleShowTotpModal : handleGenerateTotp,
|
||||
)}
|
||||
>
|
||||
{I18NextService.i18n.t(totpEnabled ? "disable_totp" : "enable_totp")}
|
||||
</button>
|
||||
{totpEnabled ? (
|
||||
<TotpModal
|
||||
type="remove"
|
||||
onSubmit={this.handleDisable2fa}
|
||||
show={this.state.show2faModal}
|
||||
onClose={linkEvent(this, handleClose2faModal)}
|
||||
/>
|
||||
) : (
|
||||
<TotpModal
|
||||
type="generate"
|
||||
onSubmit={this.handleEnable2fa}
|
||||
secretUrl={
|
||||
generateTotpRes.state === "success"
|
||||
? generateTotpRes.data.totp_secret_url
|
||||
: undefined
|
||||
}
|
||||
show={this.state.show2faModal}
|
||||
onClose={linkEvent(this, handleClose2faModal)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
async handleToggle2fa(totp: string, enabled: boolean) {
|
||||
this.setState({ updateTotpRes: LOADING_REQUEST });
|
||||
|
||||
const updateTotpRes = await HttpService.client.updateTotp({
|
||||
enabled,
|
||||
totp_token: totp,
|
||||
});
|
||||
|
||||
this.setState({ updateTotpRes });
|
||||
|
||||
const successful = updateTotpRes.state === "success";
|
||||
if (successful) {
|
||||
this.setState({ show2faModal: false });
|
||||
|
||||
const siteRes = await HttpService.client.getSite();
|
||||
UserService.Instance.myUserInfo!.local_user_view.local_user.totp_2fa_enabled =
|
||||
enabled;
|
||||
|
||||
if (siteRes.state === "success") {
|
||||
this.setState({ siteRes: siteRes.data });
|
||||
}
|
||||
|
||||
toast(
|
||||
I18NextService.i18n.t(
|
||||
enabled ? "enable_totp_success" : "disable_totp_success",
|
||||
),
|
||||
);
|
||||
} else {
|
||||
toast(I18NextService.i18n.t("incorrect_totp_code"), "danger");
|
||||
}
|
||||
|
||||
return successful;
|
||||
}
|
||||
|
||||
handleEnable2fa(totp: string) {
|
||||
return this.handleToggle2fa(totp, true);
|
||||
}
|
||||
|
||||
handleDisable2fa(totp: string) {
|
||||
return this.handleToggle2fa(totp, false);
|
||||
}
|
||||
|
||||
handlePersonSearch = debounce(async (text: string) => {
|
||||
this.setState({ searchPersonLoading: true });
|
||||
|
||||
|
|
@ -1248,19 +1321,12 @@ export class Settings extends Component<any, SettingsState> {
|
|||
);
|
||||
}
|
||||
|
||||
handleGenerateTotp(i: Settings, event: any) {
|
||||
// Coerce false to undefined here, so it won't generate it.
|
||||
const checked: boolean | undefined = event.target.checked || undefined;
|
||||
if (checked) {
|
||||
toast(I18NextService.i18n.t("two_factor_setup_instructions"));
|
||||
}
|
||||
i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
|
||||
}
|
||||
async handleGenerateTotp(i: Settings) {
|
||||
i.setState({ generateTotpRes: LOADING_REQUEST });
|
||||
|
||||
handleRemoveTotp(i: Settings, event: any) {
|
||||
// Coerce true to undefined here, so it won't generate it.
|
||||
const checked: boolean | undefined = !event.target.checked && undefined;
|
||||
i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
|
||||
i.setState({
|
||||
generateTotpRes: await HttpService.client.generateTotpSecret(),
|
||||
});
|
||||
}
|
||||
|
||||
handleSendNotificationsToEmailChange(i: Settings, event: any) {
|
||||
|
|
@ -1365,7 +1431,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
|
||||
async handleSaveSettingsSubmit(i: Settings, event: any) {
|
||||
event.preventDefault();
|
||||
i.setState({ saveRes: { state: "loading" } });
|
||||
i.setState({ saveRes: LOADING_REQUEST });
|
||||
|
||||
const saveRes = await HttpService.client.saveUserSettings({
|
||||
...i.state.saveUserSettingsForm,
|
||||
|
|
@ -1400,7 +1466,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
i.state.changePasswordForm;
|
||||
|
||||
if (new_password && old_password && new_password_verify) {
|
||||
i.setState({ changePasswordRes: { state: "loading" } });
|
||||
i.setState({ changePasswordRes: LOADING_REQUEST });
|
||||
const changePasswordRes = await HttpService.client.changePassword({
|
||||
new_password,
|
||||
new_password_verify,
|
||||
|
|
@ -1431,7 +1497,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
event.preventDefault();
|
||||
const password = i.state.deleteAccountForm.password;
|
||||
if (password) {
|
||||
i.setState({ deleteAccountRes: { state: "loading" } });
|
||||
i.setState({ deleteAccountRes: LOADING_REQUEST });
|
||||
const deleteAccountRes = await HttpService.client.deleteAccount({
|
||||
password,
|
||||
// TODO: promt user weather he wants the content to be deleted
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@ import { setIsoData } from "@utils/app";
|
|||
import { Component } from "inferno";
|
||||
import { GetSiteResponse, VerifyEmailResponse } from "lemmy-js-client";
|
||||
import { I18NextService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { toast } from "../../toast";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
|
|
@ -16,7 +21,7 @@ export class VerifyEmail extends Component<any, State> {
|
|||
private isoData = setIsoData(this.context);
|
||||
|
||||
state: State = {
|
||||
verifyRes: { state: "empty" },
|
||||
verifyRes: EMPTY_REQUEST,
|
||||
siteRes: this.isoData.site_res,
|
||||
};
|
||||
|
||||
|
|
@ -26,7 +31,7 @@ export class VerifyEmail extends Component<any, State> {
|
|||
|
||||
async verify() {
|
||||
this.setState({
|
||||
verifyRes: { state: "loading" },
|
||||
verifyRes: LOADING_REQUEST,
|
||||
});
|
||||
|
||||
this.setState({
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {
|
|||
import { InitialFetchRequest, PostFormParams } from "../../interfaces";
|
||||
import { FirstLoadService, I18NextService } from "../../services";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
RequestState,
|
||||
WrappedLemmyHttp,
|
||||
|
|
@ -57,7 +58,7 @@ export class CreatePost extends Component<
|
|||
state: CreatePostState = {
|
||||
siteRes: this.isoData.site_res,
|
||||
loading: true,
|
||||
initialCommunitiesRes: { state: "empty" },
|
||||
initialCommunitiesRes: EMPTY_REQUEST,
|
||||
isIsomorphic: false,
|
||||
};
|
||||
|
||||
|
|
@ -242,7 +243,7 @@ export class CreatePost extends Component<
|
|||
>): Promise<CreatePostData> {
|
||||
const data: CreatePostData = {
|
||||
initialCommunitiesRes: await fetchCommunitiesForOptions(client),
|
||||
communityResponse: { state: "empty" },
|
||||
communityResponse: EMPTY_REQUEST,
|
||||
};
|
||||
|
||||
if (communityId) {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,12 @@ import {
|
|||
} from "../../config";
|
||||
import { PostFormParams } from "../../interfaces";
|
||||
import { I18NextService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { setupTippy } from "../../tippy";
|
||||
import { toast } from "../../toast";
|
||||
import { Icon, Spinner } from "../common/icon";
|
||||
|
|
@ -116,7 +121,7 @@ function copySuggestedTitle(d: { i: PostForm; suggestedTitle?: string }) {
|
|||
d.i.setState(
|
||||
s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s),
|
||||
);
|
||||
d.i.setState({ suggestedPostsRes: { state: "empty" } });
|
||||
d.i.setState({ suggestedPostsRes: EMPTY_REQUEST });
|
||||
setTimeout(() => {
|
||||
const textarea: any = document.getElementById("post-title");
|
||||
autosize.update(textarea);
|
||||
|
|
@ -215,8 +220,8 @@ function handleImageDelete(i: PostForm) {
|
|||
|
||||
export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||
state: PostFormState = {
|
||||
suggestedPostsRes: { state: "empty" },
|
||||
metadataRes: { state: "empty" },
|
||||
suggestedPostsRes: EMPTY_REQUEST,
|
||||
metadataRes: EMPTY_REQUEST,
|
||||
form: {},
|
||||
loading: false,
|
||||
imageLoading: false,
|
||||
|
|
@ -648,7 +653,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
async fetchPageTitle() {
|
||||
const url = this.state.form.url;
|
||||
if (url && validURL(url)) {
|
||||
this.setState({ metadataRes: { state: "loading" } });
|
||||
this.setState({ metadataRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
metadataRes: await HttpService.client.getSiteMetadata({ url }),
|
||||
});
|
||||
|
|
@ -658,7 +663,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
async fetchSimilarPosts() {
|
||||
const q = this.state.form.name;
|
||||
if (q && q !== "") {
|
||||
this.setState({ suggestedPostsRes: { state: "loading" } });
|
||||
this.setState({ suggestedPostsRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
suggestedPostsRes: await HttpService.client.search({
|
||||
q,
|
||||
|
|
|
|||
|
|
@ -83,7 +83,12 @@ import {
|
|||
InitialFetchRequest,
|
||||
} from "../../interfaces";
|
||||
import { FirstLoadService, I18NextService, UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { setupTippy } from "../../tippy";
|
||||
import { toast } from "../../toast";
|
||||
import { CommentForm } from "../comment/comment-form";
|
||||
|
|
@ -120,8 +125,8 @@ export class Post extends Component<any, PostState> {
|
|||
private isoData = setIsoData<PostData>(this.context);
|
||||
private commentScrollDebounced: () => void;
|
||||
state: PostState = {
|
||||
postRes: { state: "empty" },
|
||||
commentsRes: { state: "empty" },
|
||||
postRes: EMPTY_REQUEST,
|
||||
commentsRes: EMPTY_REQUEST,
|
||||
postId: getIdFromProps(this.props),
|
||||
commentId: getCommentIdFromProps(this.props),
|
||||
commentSort: "Hot",
|
||||
|
|
@ -196,8 +201,8 @@ export class Post extends Component<any, PostState> {
|
|||
|
||||
async fetchPost() {
|
||||
this.setState({
|
||||
postRes: { state: "loading" },
|
||||
commentsRes: { state: "loading" },
|
||||
postRes: LOADING_REQUEST,
|
||||
commentsRes: LOADING_REQUEST,
|
||||
});
|
||||
|
||||
const [postRes, commentsRes] = await Promise.all([
|
||||
|
|
@ -697,8 +702,8 @@ export class Post extends Component<any, PostState> {
|
|||
i.setState({
|
||||
commentSort: event.target.value as CommentSortType,
|
||||
commentViewType: CommentViewType.Tree,
|
||||
commentsRes: { state: "loading" },
|
||||
postRes: { state: "loading" },
|
||||
commentsRes: LOADING_REQUEST,
|
||||
postRes: LOADING_REQUEST,
|
||||
});
|
||||
await i.fetchPost();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,12 @@ import {
|
|||
} from "lemmy-js-client";
|
||||
import { InitialFetchRequest } from "../../interfaces";
|
||||
import { FirstLoadService, I18NextService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../../services/HttpService";
|
||||
import { toast } from "../../toast";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
|
|
@ -33,7 +38,7 @@ export class CreatePrivateMessage extends Component<
|
|||
private isoData = setIsoData<CreatePrivateMessageData>(this.context);
|
||||
state: CreatePrivateMessageState = {
|
||||
siteRes: this.isoData.site_res,
|
||||
recipientRes: { state: "empty" },
|
||||
recipientRes: EMPTY_REQUEST,
|
||||
recipientId: getRecipientIdFromProps(this.props),
|
||||
isIsomorphic: false,
|
||||
};
|
||||
|
|
@ -78,7 +83,7 @@ export class CreatePrivateMessage extends Component<
|
|||
|
||||
async fetchPersonDetails() {
|
||||
this.setState({
|
||||
recipientRes: { state: "loading" },
|
||||
recipientRes: LOADING_REQUEST,
|
||||
});
|
||||
|
||||
this.setState({
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@ import { Component, linkEvent } from "inferno";
|
|||
import { CommunityView, ResolveObjectResponse } from "lemmy-js-client";
|
||||
import { InitialFetchRequest } from "../interfaces";
|
||||
import { FirstLoadService, HttpService, I18NextService } from "../services";
|
||||
import { RequestState } from "../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../services/HttpService";
|
||||
import { HtmlTags } from "./common/html-tags";
|
||||
import { Spinner } from "./common/icon";
|
||||
import { LoadingEllipses } from "./common/loading-ellipses";
|
||||
|
|
@ -76,7 +80,7 @@ const handleUnfollow = (i: RemoteFetch) => handleToggleFollow(i, false);
|
|||
export class RemoteFetch extends Component<any, RemoteFetchState> {
|
||||
private isoData = setIsoData<RemoteFetchData>(this.context);
|
||||
state: RemoteFetchState = {
|
||||
resolveObjectRes: { state: "empty" },
|
||||
resolveObjectRes: EMPTY_REQUEST,
|
||||
isIsomorphic: false,
|
||||
followCommunityLoading: false,
|
||||
};
|
||||
|
|
@ -100,7 +104,7 @@ export class RemoteFetch extends Component<any, RemoteFetchState> {
|
|||
const { uri } = getRemoteFetchQueryParams();
|
||||
|
||||
if (uri) {
|
||||
this.setState({ resolveObjectRes: { state: "loading" } });
|
||||
this.setState({ resolveObjectRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
resolveObjectRes: await HttpService.client.resolveObject({
|
||||
q: uriToQuery(uri),
|
||||
|
|
@ -208,7 +212,7 @@ export class RemoteFetch extends Component<any, RemoteFetchState> {
|
|||
}: InitialFetchRequest<
|
||||
QueryParams<RemoteFetchProps>
|
||||
>): Promise<RemoteFetchData> {
|
||||
const data: RemoteFetchData = { resolveObjectRes: { state: "empty" } };
|
||||
const data: RemoteFetchData = { resolveObjectRes: EMPTY_REQUEST };
|
||||
|
||||
if (uri && auth) {
|
||||
data.resolveObjectRes = await client.resolveObject({
|
||||
|
|
|
|||
|
|
@ -48,7 +48,12 @@ import {
|
|||
import { fetchLimit } from "../config";
|
||||
import { CommentViewType, InitialFetchRequest } from "../interfaces";
|
||||
import { FirstLoadService, I18NextService } from "../services";
|
||||
import { HttpService, RequestState } from "../services/HttpService";
|
||||
import {
|
||||
EMPTY_REQUEST,
|
||||
HttpService,
|
||||
LOADING_REQUEST,
|
||||
RequestState,
|
||||
} from "../services/HttpService";
|
||||
import { CommentNodes } from "./comment/comment-nodes";
|
||||
import { HtmlTags } from "./common/html-tags";
|
||||
import { Spinner } from "./common/icon";
|
||||
|
|
@ -239,14 +244,14 @@ export class Search extends Component<any, SearchState> {
|
|||
private isoData = setIsoData<SearchData>(this.context);
|
||||
|
||||
state: SearchState = {
|
||||
resolveObjectRes: { state: "empty" },
|
||||
creatorDetailsRes: { state: "empty" },
|
||||
communitiesRes: { state: "empty" },
|
||||
communityRes: { state: "empty" },
|
||||
resolveObjectRes: EMPTY_REQUEST,
|
||||
creatorDetailsRes: EMPTY_REQUEST,
|
||||
communitiesRes: EMPTY_REQUEST,
|
||||
communityRes: EMPTY_REQUEST,
|
||||
siteRes: this.isoData.site_res,
|
||||
creatorSearchOptions: [],
|
||||
communitySearchOptions: [],
|
||||
searchRes: { state: "empty" },
|
||||
searchRes: EMPTY_REQUEST,
|
||||
searchCreatorLoading: false,
|
||||
searchCommunitiesLoading: false,
|
||||
isIsomorphic: false,
|
||||
|
|
@ -343,7 +348,7 @@ export class Search extends Component<any, SearchState> {
|
|||
}
|
||||
|
||||
async fetchCommunities() {
|
||||
this.setState({ communitiesRes: { state: "loading" } });
|
||||
this.setState({ communitiesRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
communitiesRes: await HttpService.client.listCommunities({
|
||||
type_: defaultListingType,
|
||||
|
|
@ -362,12 +367,9 @@ export class Search extends Component<any, SearchState> {
|
|||
query: { communityId, creatorId, q, type, sort, listingType, page },
|
||||
}: InitialFetchRequest<QueryParams<SearchProps>>): Promise<SearchData> {
|
||||
const community_id = getIdFromString(communityId);
|
||||
let communityResponse: RequestState<GetCommunityResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let listCommunitiesResponse: RequestState<ListCommunitiesResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let communityResponse: RequestState<GetCommunityResponse> = EMPTY_REQUEST;
|
||||
let listCommunitiesResponse: RequestState<ListCommunitiesResponse> =
|
||||
EMPTY_REQUEST;
|
||||
if (community_id) {
|
||||
const getCommunityForm: GetCommunity = {
|
||||
id: community_id,
|
||||
|
|
@ -387,9 +389,8 @@ export class Search extends Component<any, SearchState> {
|
|||
}
|
||||
|
||||
const creator_id = getIdFromString(creatorId);
|
||||
let creatorDetailsResponse: RequestState<GetPersonDetailsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let creatorDetailsResponse: RequestState<GetPersonDetailsResponse> =
|
||||
EMPTY_REQUEST;
|
||||
if (creator_id) {
|
||||
const getCreatorForm: GetPersonDetails = {
|
||||
person_id: creator_id,
|
||||
|
|
@ -400,10 +401,9 @@ export class Search extends Component<any, SearchState> {
|
|||
|
||||
const query = getSearchQueryFromQuery(q);
|
||||
|
||||
let searchResponse: RequestState<SearchResponse> = { state: "empty" };
|
||||
let resolveObjectResponse: RequestState<ResolveObjectResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let searchResponse: RequestState<SearchResponse> = EMPTY_REQUEST;
|
||||
let resolveObjectResponse: RequestState<ResolveObjectResponse> =
|
||||
EMPTY_REQUEST;
|
||||
|
||||
if (query) {
|
||||
const form: SearchForm = {
|
||||
|
|
@ -430,7 +430,7 @@ export class Search extends Component<any, SearchState> {
|
|||
// If we return this object with a state of failed, the catch-all-handler will redirect
|
||||
// to an error page, so we ignore it by covering up the error with the empty state.
|
||||
if (resolveObjectResponse.state === "failed") {
|
||||
resolveObjectResponse = { state: "empty" };
|
||||
resolveObjectResponse = EMPTY_REQUEST;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -744,8 +744,8 @@ export class Search extends Component<any, SearchState> {
|
|||
onPersonMentionRead={() => {}}
|
||||
onBanPersonFromCommunity={() => {}}
|
||||
onBanPerson={() => {}}
|
||||
onCreateComment={() => Promise.resolve({ state: "empty" })}
|
||||
onEditComment={() => Promise.resolve({ state: "empty" })}
|
||||
onCreateComment={() => Promise.resolve(EMPTY_REQUEST)}
|
||||
onEditComment={() => Promise.resolve(EMPTY_REQUEST)}
|
||||
/>
|
||||
)}
|
||||
{i.type_ === "communities" && (
|
||||
|
|
@ -805,8 +805,8 @@ export class Search extends Component<any, SearchState> {
|
|||
onPersonMentionRead={() => {}}
|
||||
onBanPersonFromCommunity={() => {}}
|
||||
onBanPerson={() => {}}
|
||||
onCreateComment={() => Promise.resolve({ state: "empty" })}
|
||||
onEditComment={() => Promise.resolve({ state: "empty" })}
|
||||
onCreateComment={() => Promise.resolve(EMPTY_REQUEST)}
|
||||
onEditComment={() => Promise.resolve(EMPTY_REQUEST)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -948,7 +948,7 @@ export class Search extends Component<any, SearchState> {
|
|||
getSearchQueryParams();
|
||||
|
||||
if (q) {
|
||||
this.setState({ searchRes: { state: "loading" } });
|
||||
this.setState({ searchRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
searchRes: await HttpService.client.search({
|
||||
q,
|
||||
|
|
@ -965,7 +965,7 @@ export class Search extends Component<any, SearchState> {
|
|||
restoreScrollPosition(this.context);
|
||||
|
||||
if (myAuth()) {
|
||||
this.setState({ resolveObjectRes: { state: "loading" } });
|
||||
this.setState({ resolveObjectRes: LOADING_REQUEST });
|
||||
this.setState({
|
||||
resolveObjectRes: await HttpService.silent_client.resolveObject({
|
||||
q,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { GetPostsResponse } from "lemmy-js-client";
|
||||
import { RequestState } from "./HttpService.js";
|
||||
import { EMPTY_REQUEST, RequestState } from "./HttpService";
|
||||
|
||||
/**
|
||||
* Service to cache home post listings and restore home state when user uses the browser back buttons.
|
||||
|
|
@ -8,7 +8,7 @@ export class HomeCacheService {
|
|||
static #_instance: HomeCacheService;
|
||||
historyIdx = 0;
|
||||
scrollY = 0;
|
||||
posts: RequestState<GetPostsResponse> = { state: "empty" };
|
||||
posts: RequestState<GetPostsResponse> = EMPTY_REQUEST;
|
||||
|
||||
get active() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -3,13 +3,17 @@ import { LemmyHttp } from "lemmy-js-client";
|
|||
import { toast } from "../toast";
|
||||
import { I18NextService } from "./I18NextService";
|
||||
|
||||
export type EmptyRequestState = {
|
||||
state: "empty";
|
||||
};
|
||||
export const EMPTY_REQUEST = {
|
||||
state: "empty",
|
||||
} as const;
|
||||
|
||||
type LoadingRequestState = {
|
||||
state: "loading";
|
||||
};
|
||||
export type EmptyRequestState = typeof EMPTY_REQUEST;
|
||||
|
||||
export const LOADING_REQUEST = {
|
||||
state: "loading",
|
||||
} as const;
|
||||
|
||||
type LoadingRequestState = typeof LOADING_REQUEST;
|
||||
|
||||
export type FailedRequestState = {
|
||||
state: "failed";
|
||||
|
|
|
|||
73
yarn.lock
73
yarn.lock
|
|
@ -1613,6 +1613,20 @@
|
|||
"@nodelib/fs.scandir" "2.1.5"
|
||||
fastq "^1.6.0"
|
||||
|
||||
"@pdf-lib/standard-fonts@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz#8ba691c4421f71662ed07c9a0294b44528af2d7f"
|
||||
integrity sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==
|
||||
dependencies:
|
||||
pako "^1.0.6"
|
||||
|
||||
"@pdf-lib/upng@^1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@pdf-lib/upng/-/upng-1.0.1.tgz#7dc9c636271aca007a9df4deaf2dd7e7960280cb"
|
||||
integrity sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==
|
||||
dependencies:
|
||||
pako "^1.0.10"
|
||||
|
||||
"@pkgjs/parseargs@^0.11.0":
|
||||
version "0.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
|
||||
|
|
@ -1685,6 +1699,16 @@
|
|||
domhandler "^5.0.3"
|
||||
selderee "^0.11.0"
|
||||
|
||||
"@shortcm/qr-image@^9.0.2":
|
||||
version "9.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@shortcm/qr-image/-/qr-image-9.0.2.tgz#a24ed06026466974badb7fc7fc863d704d496bbe"
|
||||
integrity sha512-/hz2NqFlT0Xmd5FDiYSsb/lDucZbByWeFUiEz1ekFnz6MHtdpv03mSMSsLm+LF8n/LgumjBcKci3gG2TMirIJA==
|
||||
dependencies:
|
||||
color-string "^1.9.1"
|
||||
js-base64 "^3.7.5"
|
||||
pdf-lib "^1.17.1"
|
||||
sharp "^0.32.5"
|
||||
|
||||
"@surma/rollup-plugin-off-main-thread@^2.2.3":
|
||||
version "2.2.3"
|
||||
resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
|
||||
|
|
@ -3210,7 +3234,7 @@ color-name@^1.0.0, color-name@~1.1.4:
|
|||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
color-string@^1.9.0:
|
||||
color-string@^1.9.0, color-string@^1.9.1:
|
||||
version "1.9.1"
|
||||
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
|
||||
integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
|
||||
|
|
@ -5874,6 +5898,11 @@ jest-worker@^27.4.5:
|
|||
merge-stream "^2.0.0"
|
||||
supports-color "^8.0.0"
|
||||
|
||||
js-base64@^3.7.5:
|
||||
version "3.7.5"
|
||||
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
|
||||
integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
|
||||
|
||||
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||
|
|
@ -6035,10 +6064,10 @@ leac@^0.6.0:
|
|||
resolved "https://registry.yarnpkg.com/leac/-/leac-0.6.0.tgz#dcf136e382e666bd2475f44a1096061b70dc0912"
|
||||
integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==
|
||||
|
||||
lemmy-js-client@^0.19.0-rc.12:
|
||||
version "0.19.0-rc.12"
|
||||
resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.19.0-rc.12.tgz#e3bd4e21b1966d583ab790ef70ece8394b012b48"
|
||||
integrity sha512-1iu2fW9vlb3TrI+QR/ODP3+5pWZB0rUqL1wH09IzomDXohCqoQvfmXpwArmgF4Eq8GZgjkcfeMDC2gMrfw/i7Q==
|
||||
lemmy-js-client@^0.19.0-rc.13:
|
||||
version "0.19.0-rc.13"
|
||||
resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.19.0-rc.13.tgz#e0e15ba6fe3a08cb85130eea7eec4bd2773999f9"
|
||||
integrity sha512-JP9oEh1+Wfttqx5O5EMAVIR/hFVS66iVKmEo8/Uxw8fJfyUeQo7BhKvG8LTYegBE39Womgyu3KxXb7Jy9DRI5A==
|
||||
dependencies:
|
||||
cross-fetch "^3.1.5"
|
||||
form-data "^4.0.0"
|
||||
|
|
@ -7451,6 +7480,11 @@ pacote@^8.1.6:
|
|||
unique-filename "^1.1.0"
|
||||
which "^1.3.0"
|
||||
|
||||
pako@^1.0.10, pako@^1.0.11, pako@^1.0.6:
|
||||
version "1.0.11"
|
||||
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
|
||||
integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
|
||||
|
||||
parallel-transform@^1.1.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
|
||||
|
|
@ -7570,6 +7604,16 @@ path-type@^4.0.0:
|
|||
resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
|
||||
integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
|
||||
|
||||
pdf-lib@^1.17.1:
|
||||
version "1.17.1"
|
||||
resolved "https://registry.yarnpkg.com/pdf-lib/-/pdf-lib-1.17.1.tgz#9e7dd21261a0c1fb17992580885b39e7d08f451f"
|
||||
integrity sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==
|
||||
dependencies:
|
||||
"@pdf-lib/standard-fonts" "^1.0.0"
|
||||
"@pdf-lib/upng" "^1.0.1"
|
||||
pako "^1.0.11"
|
||||
tslib "^1.11.1"
|
||||
|
||||
peberminta@^0.9.0:
|
||||
version "0.9.0"
|
||||
resolved "https://registry.yarnpkg.com/peberminta/-/peberminta-0.9.0.tgz#8ec9bc0eb84b7d368126e71ce9033501dca2a352"
|
||||
|
|
@ -8570,6 +8614,20 @@ sharp@^0.32.4:
|
|||
tar-fs "^3.0.4"
|
||||
tunnel-agent "^0.6.0"
|
||||
|
||||
sharp@^0.32.5:
|
||||
version "0.32.6"
|
||||
resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a"
|
||||
integrity sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==
|
||||
dependencies:
|
||||
color "^4.2.3"
|
||||
detect-libc "^2.0.2"
|
||||
node-addon-api "^6.1.0"
|
||||
prebuild-install "^7.1.1"
|
||||
semver "^7.5.4"
|
||||
simple-get "^4.0.1"
|
||||
tar-fs "^3.0.4"
|
||||
tunnel-agent "^0.6.0"
|
||||
|
||||
shebang-command@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
|
||||
|
|
@ -9386,6 +9444,11 @@ ts-api-utils@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.1.tgz#8144e811d44c749cd65b2da305a032510774452d"
|
||||
integrity sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==
|
||||
|
||||
tslib@^1.11.1:
|
||||
version "1.14.1"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||
|
||||
tslib@^2.1.0, tslib@^2.5.0, tslib@^2.6.0:
|
||||
version "2.6.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
|
||||
|
|
|
|||
Loading…
Reference in a new issue