Adding show_avatar user setting, and option to send notifications to inbox.

- Fixes #254
- Fixes #394

10 files changed, 86 insertions, 9 deletions

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index b3ca682b..64bc7134 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -23,6 +23,7 @@ import {
   canMod,
   isMod,
   pictshareAvatarThumbnail,
+  showAvatars,
 } from '../utils';
 import * as moment from 'moment';
 import { MomentTime } from './moment-time';
@@ -138,7 +139,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 className="text-info"
                 to={`/u/${node.comment.creator_name}`}
               >
-                {node.comment.creator_avatar && (
+                {node.comment.creator_avatar && showAvatars() && (
                   <img
                     height="32"
                     width="32"
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index d1042f38..373889f9 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -32,6 +32,7 @@ import {
   routeListingTypeToEnum,
   postRefetchSeconds,
   pictshareAvatarThumbnail,
+  showAvatars,
 } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -345,7 +346,7 @@ export class Main extends Component<any, MainState> {
               {this.state.site.admins.map(admin => (
                 <li class="list-inline-item">
                   <Link class="text-info" to={`/u/${admin.name}`}>
-                    {admin.avatar && (
+                    {admin.avatar && showAvatars() && (
                       <img
                         height="32"
                         width="32"
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index f1a98941..f1c35b1f 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -13,7 +13,7 @@ import {
   GetSiteResponse,
   Comment,
 } from '../interfaces';
-import { msgOp, pictshareAvatarThumbnail } from '../utils';
+import { msgOp, pictshareAvatarThumbnail, showAvatars } from '../utils';
 import { version } from '../version';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -152,7 +152,7 @@ export class Navbar extends Component<any, NavbarState> {
                     to={`/u/${UserService.Instance.user.username}`}
                   >
                     <span>
-                      {UserService.Instance.user.avatar && (
+                      {UserService.Instance.user.avatar && showAvatars() && (
                         <img
                           src={pictshareAvatarThumbnail(
                             UserService.Instance.user.avatar
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index 1f3a74ac..8b4c1cb6 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -26,6 +26,7 @@ import {
   isVideo,
   getUnixTime,
   pictshareAvatarThumbnail,
+  showAvatars,
 } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -249,7 +250,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             <li className="list-inline-item">
               <span>{i18n.t('by')} </span>
               <Link className="text-info" to={`/u/${post.creator_name}`}>
-                {post.creator_avatar && (
+                {post.creator_avatar && showAvatars() && (
                   <img
                     height="32"
                     width="32"
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index d92c06e1..00c670d8 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -20,6 +20,7 @@ import {
   routeSearchTypeToEnum,
   routeSortTypeToEnum,
   pictshareAvatarThumbnail,
+  showAvatars,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { SortSelect } from './sort-select';
@@ -288,7 +289,7 @@ export class Search extends Component<any, SearchState> {
                     className="text-info"
                     to={`/u/${(i.data as UserView).name}`}
                   >
-                    {(i.data as UserView).avatar && (
+                    {(i.data as UserView).avatar && showAvatars() && (
                       <img
                         height="32"
                         width="32"
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 0e95666f..089dd558 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -8,7 +8,12 @@ import {
   UserView,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { mdToHtml, getUnixTime, pictshareAvatarThumbnail } from '../utils';
+import {
+  mdToHtml,
+  getUnixTime,
+  pictshareAvatarThumbnail,
+  showAvatars,
+} from '../utils';
 import { CommunityForm } from './community-form';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -194,7 +199,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               {this.props.moderators.map(mod => (
                 <li class="list-inline-item">
                   <Link class="text-info" to={`/u/${mod.user_name}`}>
-                    {mod.avatar && (
+                    {mod.avatar && showAvatars() && (
                       <img
                         height="32"
                         width="32"
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 99c340c5..30ee3dcf 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -28,6 +28,7 @@ import {
   themes,
   setTheme,
   languages,
+  showAvatars,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { SortSelect } from './sort-select';
@@ -80,6 +81,8 @@ export class User extends Component<any, UserState> {
       comment_score: null,
       banned: null,
       avatar: null,
+      show_avatars: null,
+      send_notifications_to_email: null,
     },
     user_id: null,
     username: null,
@@ -99,6 +102,8 @@ export class User extends Component<any, UserState> {
       default_sort_type: null,
       default_listing_type: null,
       lang: null,
+      show_avatars: null,
+      send_notifications_to_email: null,
       auth: null,
     },
     userSettingsLoading: null,
@@ -207,7 +212,7 @@ export class User extends Component<any, UserState> {
           <div class="row">
             <div class="col-12 col-md-8">
               <h5>
-                {this.state.user.avatar && (
+                {this.state.user.avatar && showAvatars() && (
                   <img
                     height="80"
                     width="80"
@@ -611,6 +616,41 @@ export class User extends Component<any, UserState> {
                 </div>
               )}
               <div class="form-group">
+                <div class="form-check">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    checked={this.state.userSettingsForm.show_avatars}
+                    onChange={linkEvent(
+                      this,
+                      this.handleUserSettingsShowAvatarsChange
+                    )}
+                  />
+                  <label class="form-check-label">
+                    <T i18nKey="show_avatars">#</T>
+                  </label>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="form-check">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    disabled={!this.state.user.email}
+                    checked={
+                      this.state.userSettingsForm.send_notifications_to_email
+                    }
+                    onChange={linkEvent(
+                      this,
+                      this.handleUserSettingsSendNotificationsToEmailChange
+                    )}
+                  />
+                  <label class="form-check-label">
+                    <T i18nKey="send_notifications_to_email">#</T>
+                  </label>
+                </div>
+              </div>
+              <div class="form-group">
                 <button type="submit" class="btn btn-block btn-secondary mr-4">
                   {this.state.userSettingsLoading ? (
                     <svg class="icon icon-spinner spin">
@@ -804,6 +844,17 @@ export class User extends Component<any, UserState> {
     i.setState(i.state);
   }
 
+  handleUserSettingsShowAvatarsChange(i: User, event: any) {
+    i.state.userSettingsForm.show_avatars = event.target.checked;
+    UserService.Instance.user.show_avatars = event.target.checked; // Just for instant updates
+    i.setState(i.state);
+  }
+
+  handleUserSettingsSendNotificationsToEmailChange(i: User, event: any) {
+    i.state.userSettingsForm.send_notifications_to_email = event.target.checked;
+    i.setState(i.state);
+  }
+
   handleUserSettingsThemeChange(i: User, event: any) {
     i.state.userSettingsForm.theme = event.target.value;
     setTheme(event.target.value);
@@ -957,6 +1008,9 @@ export class User extends Component<any, UserState> {
         this.state.userSettingsForm.lang = UserService.Instance.user.lang;
         this.state.userSettingsForm.avatar = UserService.Instance.user.avatar;
         this.state.userSettingsForm.email = this.state.user.email;
+        this.state.userSettingsForm.send_notifications_to_email = this.state.user.send_notifications_to_email;
+        this.state.userSettingsForm.show_avatars =
+          UserService.Instance.user.show_avatars;
       }
       document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
       window.scrollTo(0, 0);
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 1762bd60..7fc7a252 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -81,6 +81,7 @@ export interface User {
   default_listing_type: ListingType;
   lang: string;
   avatar?: string;
+  show_avatars: boolean;
 }
 
 export interface UserView {
@@ -95,6 +96,8 @@ export interface UserView {
   number_of_comments: number;
   comment_score: number;
   banned: boolean;
+  show_avatars: boolean;
+  send_notifications_to_email: boolean;
 }
 
 export interface CommunityUser {
@@ -486,6 +489,8 @@ export interface UserSettingsForm {
   new_password?: string;
   new_password_verify?: string;
   old_password?: string;
+  show_avatars: boolean;
+  send_notifications_to_email: boolean;
   auth: string;
 }
 
diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts
index 5e0adbaa..bd7e39cc 100644
--- a/ui/src/translations/en.ts
+++ b/ui/src/translations/en.ts
@@ -29,6 +29,7 @@ export const en = {
     preview: 'Preview',
     upload_image: 'upload image',
     avatar: 'Avatar',
+    show_avatars: 'Show Avatars',
     formatting_help: 'formatting help',
     view_source: 'view source',
     unlock: 'unlock',
@@ -126,6 +127,7 @@ export const en = {
     new_password: 'New Password',
     no_email_setup: "This server hasn't correctly set up email.",
     email: 'Email',
+    send_notifications_to_email: 'Send notifications to Email',
     optional: 'Optional',
     expires: 'Expires',
     language: 'Language',
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 29aabdcf..b9da6cb6 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -345,3 +345,10 @@ export function pictshareAvatarThumbnail(src: string): string {
   let out = `${split[0]}pictshare/96x96${split[1]}`;
   return out;
 }
+
+export function showAvatars(): boolean {
+  return (
+    (UserService.Instance.user && UserService.Instance.user.show_avatars) ||
+    !UserService.Instance.user
+  );
+}