client - support for admin/mod users

2026-03-05 15:25:24 +00:00 · 2018-01-16 22:02:19 -06:00
parent b30af0cd09
commit 8de5dba9e3
15 changed files with 175 additions and 59 deletions
--- a/client/app/pages/forum/forum.tsx
+++ b/client/app/pages/forum/forum.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
+import { orderBy } from 'lodash';
 import { ThreadService } from '../../services';
 import { Editor, ForumNav, LoginButton, ScrollToTop } from '../../components';
 import { ThreadModel } from '../../model';
@@ -8,6 +9,8 @@ import { UserStore } from '../../stores/user-store';
 import './forum.scss';
 import { Oauth } from '../../util';

+const stickyImage = require('../../assets/sticky.gif');
+
 interface Props extends RouteComponentProps<any> {
  userStore: UserStore;
 }
@@ -40,10 +43,15 @@ export class Forum extends React.Component<Props, State> {
  }

  private async getThreads(categoryId: string) {
-    const threads = await ThreadService.getCategoryThreads(categoryId);
+    let threads = await ThreadService.getCategoryThreads(categoryId);
+    threads = this.orderBy(threads);
    this.setState({ threads });
  }

+  private orderBy(threads: ThreadModel[]) {
+    return orderBy(threads, ['sticky', 'updated_at'], ['desc', 'desc']);
+  }
+
  onNewTopic() {
    if (this.props.userStore.user) {
      this.setState({ showEditor: true });
@@ -94,7 +102,7 @@ export class Forum extends React.Component<Props, State> {

  renderCell(content: JSX.Element | string, style: any, center?: boolean, header?: boolean) {
    let classNames: string = '';
-    classNames += center && ' forum-cell--center';
+    classNames += center ? ' forum-cell--center': '';
    classNames += header ? ' forum-cell--header' : ' forum-cell--body';
    return <div className={`forum-cell flex-1 ${classNames}`} style={style}>{content}</div>;
  }
@@ -102,15 +110,20 @@ export class Forum extends React.Component<Props, State> {
  renderThreadRows() {
    const categoryId = this.props.match.params['id'];
    return this.state.threads.map((thread, index) => {
+      const authorBluePost = thread.user.permissions === 'admin' ? 'blue' : '';
+      const lastReplyBluePost = thread.last_reply.permissions === 'admin' ? 'blue' : '';
+      const sticky = thread.sticky ? <img src={stickyImage} title="Sticky"/> : '';
      return (
        <div className={`forum-row ${index % 2 === 0 && 'forum-row--dark'}`} key={index}>
-          {this.renderCell('flag', { maxWidth: '50px' })}
+          {this.renderCell(sticky, { maxWidth: '50px' }, true)}
          {this.renderCell(<Link to={`/f/${categoryId}/${thread.id}`}>{thread.title}</Link>, { minWidth: '200px' })}
-          {this.renderCell(<b>{thread.user.character_name || thread.user.battletag}</b>, { maxWidth: '150px' })}
+          {this.renderCell(<b className={authorBluePost}>{thread.user.character_name || thread.user.battletag}</b>, { maxWidth: '150px' })}
          {this.renderCell(<b>{thread.reply_count}</b>, { maxWidth: '150px' }, true)}
          {this.renderCell(<b>{thread.view_count}</b>, { maxWidth: '150px' }, true)}
          {this.renderCell(
-            <span>by <b>{thread.last_reply.character_name || thread.last_reply.battletag}</b></span>,
+            <div style={{ fontSize: '8pt' }}>
+              by <b className={lastReplyBluePost}>{thread.last_reply.character_name || thread.last_reply.battletag}</b>
+            </div>,
            { maxWidth: '200px' },
          )}
        </div>
--- a/client/app/pages/index.ts
+++ b/client/app/pages/index.ts
@@ -1,4 +1,5 @@
 export * from './forum/forum';
+export * from './login/login';
 export * from './home/home';
 export * from './not-found/not-found';
 export * from './oauth/oauth';
--- a/client/app/pages/login/login.tsx
+++ b/client/app/pages/login/login.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { ContentContainer } from '../../components';
+import { UserService } from '../../services';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {
+  username: string;
+  password: string;
+  errorMessage?: string;
+}
+
+export class Login extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      username: '',
+      password: '',
+    };
+  }
+
+  private async login(event: any) {
+    event.preventDefault();
+    const { username, password } = this.state;
+
+    try {
+      await UserService.login(username, password);
+      window.location.pathname = '/';
+    } catch (e) {
+      console.error(e);
+      this.setState({ errorMessage: 'Invalid login.' });
+    }
+  }
+
+  render() {
+    const { username, password } = this.state;
+
+    return (
+      <ContentContainer>
+        <form onSubmit={e => this.login(e)}>
+          <div className="form-group">
+            <label>Username</label>
+            <input
+              autoFocus
+              type="text"
+              className="input"
+              value={username}
+              onChange={event => this.setState({ username: event.target.value })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Password</label>
+            <input type="password" className="input" value={password} onChange={event => this.setState({ password: event.target.value })} />
+          </div>
+
+          <div className="form-group">
+            <input className="input__button" type="submit" value="Submit" />
+            <span className="red" style={{ marginLeft: '10px' }}>
+              {this.state.errorMessage}
+            </span>
+          </div>
+        </form>
+      </ContentContainer>
+    );
+  }
+}
--- a/client/app/pages/thread/thread.tsx
+++ b/client/app/pages/thread/thread.tsx
@@ -84,7 +84,7 @@ export class Thread extends React.Component<Props, State> {
  }

  renderUserInfo(reply: ReplyModel) {
-    const { battletag, character_avatar, character_class, character_guild, character_name, character_realm } = reply.user;
+    const { battletag, character_avatar, character_class, character_guild, character_name, character_realm, permissions } = reply.user;
    return (
      <div className="reply__user-container">
        <Portrait imageSrc={CharacterService.getAvatar(character_avatar)}/>
@@ -93,6 +93,7 @@ export class Thread extends React.Component<Props, State> {
          {character_class && <div><small>{character_class}</small></div>}
          {character_guild && <div><small><b>Guild: </b>{character_guild}</small></div>}
          {character_realm && <div><small><b>Realm: </b>{character_realm}</small></div>}
+          {permissions === 'admin' && <div className="blue">Admin Poster</div>}
        </div>
      </div>
    );
@@ -101,6 +102,7 @@ export class Thread extends React.Component<Props, State> {
  renderReplies(): any {
    return this.state.thread!.replies.map((reply, index) => {
      const replyDark = index % 2 === 0 ? 'reply--dark' : '';
+      const bluePost = reply.user.permissions === 'admin' ? 'blue-post' : '';
      return (
        <div className="reply-container" key={index}>
          <div className={`reply ${replyDark}`}>
@@ -124,7 +126,7 @@ export class Thread extends React.Component<Props, State> {

              <div className="reply__content markdown-container">
                {this.renderQuotedReply(reply)}
-                <div dangerouslySetInnerHTML={{ __html: marked(reply.content, { sanitize: true }) }}/>
+                <div className={bluePost} dangerouslySetInnerHTML={{ __html: marked(reply.content, { sanitize: true }) }}/>
              </div>

            </div>
--- a/client/app/pages/user-account/user-account.tsx
+++ b/client/app/pages/user-account/user-account.tsx
@@ -35,7 +35,10 @@ export class UserAccount extends React.Component<Props, State> {
  }

  componentDidMount() {
-    this.getCharacters();
+    // only load characters if user is battenet user
+    if (get(this.props, 'userStore.user.access_token')) {
+      this.getCharacters();
+    }
  }

  private selectedCharacter(): CharacterModel {
@@ -85,43 +88,6 @@ export class UserAccount extends React.Component<Props, State> {
    this.setState({ selectedAvatarIndex });
  }

-  renderDropDowns() {
-    if (!this.selectedCharacter()) {
-      return <div></div>;
-    }
-    return (
-      <div>
-        <h2>Set your default character</h2>
-        <div style={{ margin: '0 10px 10px 0', display: 'inline-block' }}>
-          <select value={this.selectedCharacter().realm}
-            onChange={event => this.onRealmSelect(event)}>
-            {map(this.state.characters, (_, realm: string) => {
-              return <option key={`realm${realm}`}>{realm}</option>;
-            })}
-          </select>
-          <select style={{ marginLeft: '5px' }}
-            onChange={event => this.onCharSelect(event)}>
-            {map(this.state.characters[this.state.selectedRealm!], (value, index) => {
-              return <option key={this.state.selectedRealm! + index} value={index}>{value.name}</option>;
-            })}
-          </select>
-        </div>
-
-        <a onClick={() => this.onSave()}>Save</a>
-        <div className="avatar-list">
-          {this.selectedCharacter().avatarList!.map((val, index) => {
-            const avatarClass = this.state.selectedAvatarIndex === index ? 'avatar-list__item--selected' : '';
-            return (
-              <div key={index} className={`avatar-list__item ${avatarClass}`} onClick={() => this.onAvatarSelect(index)}>
-                <img src={val.imageSrc}/>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-
  private async onSave() {
    const { name, guild, realm } = this.selectedCharacter();
    const selectedAvatar = this.selectedCharacter().avatarList![this.state.selectedAvatarIndex].title;
@@ -160,6 +126,43 @@ export class UserAccount extends React.Component<Props, State> {
    );
  }

+  renderDropDowns() {
+    if (!this.selectedCharacter()) {
+      return <div></div>;
+    }
+    return (
+      <div>
+        <h2>Set your default character</h2>
+        <div style={{ margin: '0 10px 10px 0', display: 'inline-block' }}>
+          <select value={this.selectedCharacter().realm}
+            onChange={event => this.onRealmSelect(event)}>
+            {map(this.state.characters, (_, realm: string) => {
+              return <option key={`realm${realm}`}>{realm}</option>;
+            })}
+          </select>
+          <select style={{ marginLeft: '5px' }}
+            onChange={event => this.onCharSelect(event)}>
+            {map(this.state.characters[this.state.selectedRealm!], (value, index) => {
+              return <option key={this.state.selectedRealm! + index} value={index}>{value.name}</option>;
+            })}
+          </select>
+        </div>
+
+        <a onClick={() => this.onSave()}>Save</a>
+        <div className="avatar-list">
+          {this.selectedCharacter().avatarList!.map((val, index) => {
+            const avatarClass = this.state.selectedAvatarIndex === index ? 'avatar-list__item--selected' : '';
+            return (
+              <div key={index} className={`avatar-list__item ${avatarClass}`} onClick={() => this.onAvatarSelect(index)}>
+                <img src={val.imageSrc}/>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
  render() {

    if (this.state.noCharacters) {