mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-12-25 12:21:31 +00:00
Ask for confirmation on leaving pages with incomplete forms. Fixes #529
This commit is contained in:
parent
c3d4538219
commit
3b82f4887b
6 changed files with 266 additions and 217 deletions
5
ui/src/components/comment-form.tsx
vendored
5
ui/src/components/comment-form.tsx
vendored
|
@ -1,4 +1,5 @@
|
||||||
import { Component, linkEvent } from 'inferno';
|
import { Component, linkEvent } from 'inferno';
|
||||||
|
import { Prompt } from 'inferno-router';
|
||||||
import {
|
import {
|
||||||
CommentNode as CommentNodeI,
|
CommentNode as CommentNodeI,
|
||||||
CommentForm as CommentFormI,
|
CommentForm as CommentFormI,
|
||||||
|
@ -87,6 +88,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
|
<Prompt
|
||||||
|
when={this.state.commentForm.content}
|
||||||
|
message={i18n.t('block_leaving')}
|
||||||
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
|
<form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<div className={`col-sm-12`}>
|
<div className={`col-sm-12`}>
|
||||||
|
|
12
ui/src/components/community-form.tsx
vendored
12
ui/src/components/community-form.tsx
vendored
|
@ -1,4 +1,5 @@
|
||||||
import { Component, linkEvent } from 'inferno';
|
import { Component, linkEvent } from 'inferno';
|
||||||
|
import { Prompt } from 'inferno-router';
|
||||||
import { Subscription } from 'rxjs';
|
import { Subscription } from 'rxjs';
|
||||||
import { retryWhen, delay, take } from 'rxjs/operators';
|
import { retryWhen, delay, take } from 'rxjs/operators';
|
||||||
import {
|
import {
|
||||||
|
@ -105,6 +106,16 @@ export class CommunityForm extends Component<
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Prompt
|
||||||
|
when={
|
||||||
|
!this.state.loading &&
|
||||||
|
(this.state.communityForm.name ||
|
||||||
|
this.state.communityForm.title ||
|
||||||
|
this.state.communityForm.description)
|
||||||
|
}
|
||||||
|
message={i18n.t('block_leaving')}
|
||||||
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
|
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-12 col-form-label" htmlFor="community-name">
|
<label class="col-12 col-form-label" htmlFor="community-name">
|
||||||
|
@ -219,6 +230,7 @@ export class CommunityForm extends Component<
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
10
ui/src/components/post-form.tsx
vendored
10
ui/src/components/post-form.tsx
vendored
|
@ -1,4 +1,5 @@
|
||||||
import { Component, linkEvent } from 'inferno';
|
import { Component, linkEvent } from 'inferno';
|
||||||
|
import { Prompt } from 'inferno-router';
|
||||||
import { PostListings } from './post-listings';
|
import { PostListings } from './post-listings';
|
||||||
import { Subscription } from 'rxjs';
|
import { Subscription } from 'rxjs';
|
||||||
import { retryWhen, delay, take } from 'rxjs/operators';
|
import { retryWhen, delay, take } from 'rxjs/operators';
|
||||||
|
@ -153,6 +154,15 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<Prompt
|
||||||
|
when={
|
||||||
|
!this.state.loading &&
|
||||||
|
(this.state.postForm.name ||
|
||||||
|
this.state.postForm.url ||
|
||||||
|
this.state.postForm.body)
|
||||||
|
}
|
||||||
|
message={i18n.t('block_leaving')}
|
||||||
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
|
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-sm-2 col-form-label" htmlFor="post-url">
|
<label class="col-sm-2 col-form-label" htmlFor="post-url">
|
||||||
|
|
5
ui/src/components/private-message-form.tsx
vendored
5
ui/src/components/private-message-form.tsx
vendored
|
@ -1,4 +1,5 @@
|
||||||
import { Component, linkEvent } from 'inferno';
|
import { Component, linkEvent } from 'inferno';
|
||||||
|
import { Prompt } from 'inferno-router';
|
||||||
import { Link } from 'inferno-router';
|
import { Link } from 'inferno-router';
|
||||||
import { Subscription } from 'rxjs';
|
import { Subscription } from 'rxjs';
|
||||||
import { retryWhen, delay, take } from 'rxjs/operators';
|
import { retryWhen, delay, take } from 'rxjs/operators';
|
||||||
|
@ -116,6 +117,10 @@ export class PrivateMessageForm extends Component<
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<Prompt
|
||||||
|
when={!this.state.loading && this.state.privateMessageForm.content}
|
||||||
|
message={i18n.t('block_leaving')}
|
||||||
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
|
<form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
|
||||||
{!this.props.privateMessage && (
|
{!this.props.privateMessage && (
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
|
|
20
ui/src/components/site-form.tsx
vendored
20
ui/src/components/site-form.tsx
vendored
|
@ -1,4 +1,5 @@
|
||||||
import { Component, linkEvent } from 'inferno';
|
import { Component, linkEvent } from 'inferno';
|
||||||
|
import { Prompt } from 'inferno-router';
|
||||||
import { Site, SiteForm as SiteFormI } from '../interfaces';
|
import { Site, SiteForm as SiteFormI } from '../interfaces';
|
||||||
import { WebSocketService } from '../services';
|
import { WebSocketService } from '../services';
|
||||||
import { capitalizeFirstLetter, randomStr, setupTribute } from '../utils';
|
import { capitalizeFirstLetter, randomStr, setupTribute } from '../utils';
|
||||||
|
@ -59,6 +60,14 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Prompt
|
||||||
|
when={
|
||||||
|
!this.state.loading &&
|
||||||
|
(this.state.siteForm.name || this.state.siteForm.description)
|
||||||
|
}
|
||||||
|
message={i18n.t('block_leaving')}
|
||||||
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
|
<form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
|
||||||
<h5>{`${
|
<h5>{`${
|
||||||
this.props.site
|
this.props.site
|
||||||
|
@ -105,7 +114,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
id="create-site-downvotes"
|
id="create-site-downvotes"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={this.state.siteForm.enable_downvotes}
|
checked={this.state.siteForm.enable_downvotes}
|
||||||
onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
|
onChange={linkEvent(
|
||||||
|
this,
|
||||||
|
this.handleSiteEnableDownvotesChange
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
<label class="form-check-label" htmlFor="create-site-downvotes">
|
<label class="form-check-label" htmlFor="create-site-downvotes">
|
||||||
{i18n.t('enable_downvotes')}
|
{i18n.t('enable_downvotes')}
|
||||||
|
@ -123,7 +135,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
checked={this.state.siteForm.enable_nsfw}
|
checked={this.state.siteForm.enable_nsfw}
|
||||||
onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
|
onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
|
||||||
/>
|
/>
|
||||||
<label class="form-check-label" htmlFor="create-site-enable-nsfw">
|
<label
|
||||||
|
class="form-check-label"
|
||||||
|
htmlFor="create-site-enable-nsfw"
|
||||||
|
>
|
||||||
{i18n.t('enable_nsfw')}
|
{i18n.t('enable_nsfw')}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -176,6 +191,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
3
ui/translations/en.json
vendored
3
ui/translations/en.json
vendored
|
@ -245,5 +245,6 @@
|
||||||
"no_private_message_edit_allowed": "Not allowed to edit private message.",
|
"no_private_message_edit_allowed": "Not allowed to edit private message.",
|
||||||
"couldnt_update_private_message": "Couldn't update private message.",
|
"couldnt_update_private_message": "Couldn't update private message.",
|
||||||
"time": "Time",
|
"time": "Time",
|
||||||
"action": "Action"
|
"action": "Action",
|
||||||
|
"block_leaving": "Are you sure you want to leave?"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue