summaryrefslogtreecommitdiffstats
path: root/ui/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src/components')
-rw-r--r--ui/src/components/community-form.tsx17
-rw-r--r--ui/src/components/community.tsx4
-rw-r--r--ui/src/components/login.tsx15
-rw-r--r--ui/src/components/post-form.tsx15
-rw-r--r--ui/src/components/post-listing.tsx6
-rw-r--r--ui/src/components/setup.tsx1
-rw-r--r--ui/src/components/user.tsx66
7 files changed, 119 insertions, 5 deletions
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index b039fb4d..833d8a3f 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -30,7 +30,8 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
communityForm: {
name: null,
title: null,
- category_id: null
+ category_id: null,
+ nsfw: false,
},
categories: [],
loading: false
@@ -48,6 +49,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
category_id: this.props.community.category_id,
description: this.props.community.description,
edit_id: this.props.community.id,
+ nsfw: this.props.community.nsfw,
auth: null
}
}
@@ -105,6 +107,14 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
</div>
<div class="form-group row">
<div class="col-12">
+ <div class="form-check">
+ <input class="form-check-input" type="checkbox" checked={this.state.communityForm.nsfw} onChange={linkEvent(this, this.handleCommunityNsfwChange)}/>
+ <label class="form-check-label"><T i18nKey="nsfw">#</T></label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <div class="col-12">
<button type="submit" class="btn btn-secondary mr-2">
{this.state.loading ?
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
@@ -147,6 +157,11 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
i.setState(i.state);
}
+ handleCommunityNsfwChange(i: CommunityForm, event: any) {
+ i.state.communityForm.nsfw = event.target.checked;
+ i.setState(i.state);
+ }
+
handleCancel(i: CommunityForm) {
i.props.onCancel();
}
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index 480b909e..b9f9c8b2 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -37,6 +37,7 @@ export class Community extends Component<any, State> {
number_of_comments: null,
published: null,
removed: null,
+ nsfw: false,
deleted: null,
},
moderators: [],
@@ -105,6 +106,9 @@ export class Community extends Component<any, State> {
{this.state.community.removed &&
<small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small>
}
+ {this.state.community.nsfw &&
+ <small className="ml-2 text-muted font-italic"><T i18nKey="nsfw">#</T></small>
+ }
</h5>
{this.selects()}
<PostListings posts={this.state.posts} />
diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index e7af89ca..66962acc 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -28,6 +28,7 @@ export class Login extends Component<any, State> {
password: undefined,
password_verify: undefined,
admin: false,
+ show_nsfw: false,
},
loginLoading: false,
registerLoading: false,
@@ -127,9 +128,16 @@ export class Login extends Component<any, State> {
</div>
<div class="form-group row">
<div class="col-sm-10">
+ <div class="form-check">
+ <input class="form-check-input" type="checkbox" checked={this.state.registerForm.show_nsfw} onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}/>
+ <label class="form-check-label"><T i18nKey="show_nsfw">#</T></label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <div class="col-sm-10">
<button type="submit" class="btn btn-secondary">{this.state.registerLoading ?
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : i18n.t('sign_up')}</button>
-
</div>
</div>
</form>
@@ -181,6 +189,11 @@ export class Login extends Component<any, State> {
i.setState(i.state);
}
+ handleRegisterShowNsfwChange(i: Login, event: any) {
+ i.state.registerForm.show_nsfw = event.target.checked;
+ i.setState(i.state);
+ }
+
parseMessage(msg: any) {
let op: UserOperation = msgOp(msg);
if (msg.error) {
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 79d37b42..704b1cdd 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -31,6 +31,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
private emptyState: PostFormState = {
postForm: {
name: null,
+ nsfw: false,
auth: null,
community_id: null,
creator_id: (UserService.Instance.user) ? UserService.Instance.user.id : null,
@@ -54,6 +55,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
edit_id: this.props.post.id,
creator_id: this.props.post.creator_id,
url: this.props.post.url,
+ nsfw: this.props.post.nsfw,
auth: null
}
}
@@ -128,6 +130,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
}
<div class="form-group row">
<div class="col-sm-10">
+ <div class="form-check">
+ <input class="form-check-input" type="checkbox" checked={this.state.postForm.nsfw} onChange={linkEvent(this, this.handlePostNsfwChange)}/>
+ <label class="form-check-label"><T i18nKey="nsfw">#</T></label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <div class="col-sm-10">
<button type="submit" class="btn btn-secondary mr-2">
{this.state.loading ?
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
@@ -196,6 +206,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
i.setState(i.state);
}
+ handlePostNsfwChange(i: PostForm, event: any) {
+ i.state.postForm.nsfw = event.target.checked;
+ i.setState(i.state);
+ }
+
handleCancel(i: PostForm) {
i.props.onCancel();
}
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index ff70783c..ca03b980 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -93,6 +93,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{post.locked &&
<small className="ml-2 text-muted font-italic"><T i18nKey="locked">#</T></small>
}
+ {post.nsfw &&
+ <small className="ml-2 text-muted font-italic"><T i18nKey="nsfw">#</T></small>
+ }
{ post.url && isImage(post.url) &&
<>
{ !this.state.imageExpanded
@@ -251,6 +254,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
edit_id: i.props.post.id,
creator_id: i.props.post.creator_id,
deleted: !i.props.post.deleted,
+ nsfw: i.props.post.nsfw,
auth: null
};
WebSocketService.Instance.editPost(deleteForm);
@@ -285,6 +289,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
creator_id: i.props.post.creator_id,
removed: !i.props.post.removed,
reason: i.state.removeReason,
+ nsfw: i.props.post.nsfw,
auth: null,
};
WebSocketService.Instance.editPost(form);
@@ -299,6 +304,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
community_id: i.props.post.community_id,
edit_id: i.props.post.id,
creator_id: i.props.post.creator_id,
+ nsfw: i.props.post.nsfw,
locked: !i.props.post.locked,
auth: null,
};
diff --git a/ui/src/components/setup.tsx b/ui/src/components/setup.tsx
index f11dc14e..24a5f2d6 100644
--- a/ui/src/components/setup.tsx
+++ b/ui/src/components/setup.tsx
@@ -23,6 +23,7 @@ export class Setup extends Component<any, State> {
password: undefined,
password_verify: undefined,
admin: true,
+ show_nsfw: true,
},
doneRegisteringUser: false,
userLoading: false,
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index c6a70560..39a13e16 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -2,8 +2,8 @@ import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router';
import { Subscription } from "rxjs";
import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView, CommentResponse } from '../interfaces';
-import { WebSocketService } from '../services';
+import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView, CommentResponse, UserSettingsForm, LoginResponse } from '../interfaces';
+import { WebSocketService, UserService } from '../services';
import { msgOp, fetchLimit, routeSortTypeToEnum, capitalizeFirstLetter } from '../utils';
import { PostListing } from './post-listing';
import { CommentNodes } from './comment-nodes';
@@ -28,6 +28,8 @@ interface UserState {
sort: SortType;
page: number;
loading: boolean;
+ userSettingsForm: UserSettingsForm;
+ userSettingsLoading: boolean;
}
export class User extends Component<any, UserState> {
@@ -54,6 +56,11 @@ export class User extends Component<any, UserState> {
view: this.getViewFromProps(this.props),
sort: this.getSortTypeFromProps(this.props),
page: this.getPageFromProps(this.props),
+ userSettingsForm: {
+ show_nsfw: null,
+ auth: null,
+ },
+ userSettingsLoading: null,
}
constructor(props: any, context: any) {
@@ -75,6 +82,10 @@ export class User extends Component<any, UserState> {
this.refetch();
}
+ get isCurrentUser() {
+ return UserService.Instance.user && UserService.Instance.user.id == this.state.user.id;
+ }
+
getViewFromProps(props: any): View {
return (props.match.params.view) ?
View[capitalizeFirstLetter(props.match.params.view)] :
@@ -131,6 +142,9 @@ export class User extends Component<any, UserState> {
</div>
<div class="col-12 col-md-3">
{this.userInfo()}
+ {this.isCurrentUser &&
+ this.userSettings()
+ }
{this.moderates()}
{this.follows()}
</div>
@@ -219,7 +233,7 @@ export class User extends Component<any, UserState> {
return (
<div>
<h5>{user.name}</h5>
- <div>{i18n.t('joined')}<MomentTime data={user} /></div>
+ <div>{i18n.t('joined')} <MomentTime data={user} /></div>
<table class="table table-bordered table-sm mt-2">
<tr>
<td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td>
@@ -235,6 +249,30 @@ export class User extends Component<any, UserState> {
)
}
+ userSettings() {
+ return (
+ <div>
+ <h5><T i18nKey="settings">#</T></h5>
+ <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
+ <div class="form-group row">
+ <div class="col-12">
+ <div class="form-check">
+ <input class="form-check-input" type="checkbox" checked={this.state.userSettingsForm.show_nsfw} onChange={linkEvent(this, this.handleUserSettingsShowNsfwChange)}/>
+ <label class="form-check-label"><T i18nKey="show_nsfw">#</T></label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <div class="col-12">
+ <button type="submit" class="btn btn-secondary">{this.state.userSettingsLoading ?
+ <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('save'))}</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ )
+ }
+
moderates() {
return (
<div>
@@ -329,6 +367,19 @@ export class User extends Component<any, UserState> {
i.refetch();
}
+ handleUserSettingsShowNsfwChange(i: User, event: any) {
+ i.state.userSettingsForm.show_nsfw = event.target.checked;
+ i.setState(i.state);
+ }
+
+ handleUserSettingsSubmit(i: User, event: any) {
+ event.preventDefault();
+ i.state.userSettingsLoading = true;
+ i.setState(i.state);
+
+ WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm);
+ }
+
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
@@ -343,6 +394,9 @@ export class User extends Component<any, UserState> {
this.state.moderates = res.moderates;
this.state.posts = res.posts;
this.state.loading = false;
+ if (this.isCurrentUser) {
+ this.state.userSettingsForm.show_nsfw = UserService.Instance.user.show_nsfw;
+ }
document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
window.scrollTo(0,0);
this.setState(this.state);
@@ -378,6 +432,12 @@ export class User extends Component<any, UserState> {
if (res.comment.my_vote !== null)
found.my_vote = res.comment.my_vote;
this.setState(this.state);
+ } else if (op == UserOperation.SaveUserSettings) {
+ this.state = this.emptyState;
+ this.state.userSettingsLoading = false;
+ this.setState(this.state);
+ let res: LoginResponse = msg;
+ UserService.Instance.login(res);
}
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-15 18:52:57 +0000