diff options
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/setup.tsx | 1 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 66 | ||||
-rw-r--r-- | ui/src/interfaces.ts | 7 | ||||
-rw-r--r-- | ui/src/services/WebSocketService.ts | 7 | ||||
-rw-r--r-- | ui/src/translations/en.ts | 1 |
5 files changed, 76 insertions, 6 deletions
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); } } } diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts index 7078ccac..ebd42340 100644 --- a/ui/src/interfaces.ts +++ b/ui/src/interfaces.ts @@ -1,5 +1,5 @@ export enum UserOperation { - Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, SaveComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, SavePost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails, GetReplies, GetModlog, BanFromCommunity, AddModToCommunity, CreateSite, EditSite, GetSite, AddAdmin, BanUser, Search, MarkAllAsRead + Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, SaveComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, SavePost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails, GetReplies, GetModlog, BanFromCommunity, AddModToCommunity, CreateSite, EditSite, GetSite, AddAdmin, BanUser, Search, MarkAllAsRead, SaveUserSettings } export enum CommentSortType { @@ -347,7 +347,10 @@ export interface LoginResponse { jwt: string; } - +export interface UserSettingsForm { + show_nsfw: boolean; + auth: string; +} export interface CommunityForm { name: string; diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts index c192c2b7..c34b6b3c 100644 --- a/ui/src/services/WebSocketService.ts +++ b/ui/src/services/WebSocketService.ts @@ -1,5 +1,5 @@ import { wsUri } from '../env'; -import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, SavePostForm, CommentForm, SaveCommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm, GetUserDetailsForm, ListCommunitiesForm, GetModlogForm, BanFromCommunityForm, AddModToCommunityForm, AddAdminForm, BanUserForm, SiteForm, Site, UserView, GetRepliesForm, SearchForm } from '../interfaces'; +import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, SavePostForm, CommentForm, SaveCommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm, GetUserDetailsForm, ListCommunitiesForm, GetModlogForm, BanFromCommunityForm, AddModToCommunityForm, AddAdminForm, BanUserForm, SiteForm, Site, UserView, GetRepliesForm, SearchForm, UserSettingsForm } from '../interfaces'; import { webSocket } from 'rxjs/webSocket'; import { Subject } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; @@ -184,6 +184,11 @@ export class WebSocketService { this.subject.next(this.wsSendWrapper(UserOperation.MarkAllAsRead, form)); } + public saveUserSettings(userSettingsForm: UserSettingsForm) { + this.setAuth(userSettingsForm); + this.subject.next(this.wsSendWrapper(UserOperation.SaveUserSettings, userSettingsForm)); + } + private wsSendWrapper(op: UserOperation, data: any) { let send = { op: UserOperation[op], data: data }; console.log(send); diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts index a8726b79..1f79bef2 100644 --- a/ui/src/translations/en.ts +++ b/ui/src/translations/en.ts @@ -29,6 +29,7 @@ export const en = { mod: 'mod', mods: 'mods', moderates: 'Moderates', + settings: 'Settings', remove_as_mod: 'remove as mod', appoint_as_mod: 'appoint as mod', modlog: 'Modlog', |