Logging in working, languages working.

2024-12-22 19:01:26 +00:00 · 2020-09-09 15:33:40 -05:00 · 2020-09-09 15:33:40 -05:00 · e8e3612cdb
commit e8e3612cdb
parent 06955a0e37
8 changed files with 77 additions and 66 deletions
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@ -84,6 +84,12 @@ server.get('/*', async (req, res) => {
           </head>

           <body>
+             <noscript>
+               <nav class="navbar fixed-bottom navbar-light bg-light">
+                Javascript is disabled. Actions will not work.
+               </nav>
+             </noscript>
+            
             <div id='root'>${renderToString(wrapper)}</div>
             <script src='/static/js/client.js'></script>
           </body>
--- a/src/shared/components/comment-form.tsx
+++ b/src/shared/components/comment-form.tsx
@ -99,7 +99,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
            </svg>
            <T i18nKey="must_login" class="d-inline">
              #
-              <Link class="alert-link" to="/login">
+              <Link className="alert-link" to="/login">
                #
              </Link>
            </T>
--- a/src/shared/components/create-community.tsx
+++ b/src/shared/components/create-community.tsx
@ -43,8 +43,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
    this.parseMessage = this.parseMessage.bind(this);
    this.subscription = wsSubscribe(this.parseMessage);

-    // TODO not sure if this works
-    if (!UserService.Instance.user) {
+    if (!UserService.Instance.user && isBrowser()) {
      toast(i18n.t('not_logged_in'), 'danger');
      this.context.router.history.push(`/login`);
    }
--- a/src/shared/components/create-post.tsx
+++ b/src/shared/components/create-post.tsx
@ -44,7 +44,7 @@ export class CreatePost extends Component<any, CreatePostState> {
    this.handlePostCreate = this.handlePostCreate.bind(this);
    this.state = this.emptyState;

-    if (!UserService.Instance.user) {
+    if (!UserService.Instance.user && isBrowser()) {
      toast(i18n.t('not_logged_in'), 'danger');
      this.context.router.history.push(`/login`);
    }
--- a/src/shared/components/navbar.tsx
+++ b/src/shared/components/navbar.tsx
@ -1,7 +1,6 @@
 import { Component, linkEvent, createRef, RefObject } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from 'rxjs';
-import { retryWhen, delay, take } from 'rxjs/operators';
 import { WebSocketService, UserService } from '../services';
 import {
  UserOperation,
@ -30,6 +29,7 @@ import {
  notifyComment,
  notifyPrivateMessage,
  isBrowser,
+  wsSubscribe,
 } from '../utils';
 import { i18n } from '../i18next';

@ -64,56 +64,56 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
    searchParam: '',
    toggleSearch: false,
  };
+  subscription: any;

  constructor(props: any, context: any) {
    super(props, context);
    this.state = this.emptyState;

-    if (isBrowser()) {
-      this.wsSub = WebSocketService.Instance.subject
-        .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        .subscribe(
-          msg => this.parseMessage(msg),
-          err => console.error(err),
-          () => console.log('complete')
-        );
-
-      this.searchTextField = createRef();
-    }
+    this.parseMessage = this.parseMessage.bind(this);
+    this.subscription = wsSubscribe(this.parseMessage);

    // The login
    // TODO this needs some work
-    if (this.props.site.my_user) {
-      UserService.Instance.user = this.props.site.my_user;
-      // i18n.changeLanguage(getLanguage());
-
-      if (isBrowser()) {
-        WebSocketService.Instance.userJoin();
-        // On the first load, check the unreads
-        if (this.state.isLoggedIn == false) {
-          this.requestNotificationPermission();
-          this.fetchUnreads();
-          // setTheme(data.my_user.theme, true);
-          // i18n.changeLanguage(getLanguage());
-          // i18n.changeLanguage('de');
-        }
-      }
+    UserService.Instance.user = this.props.site.my_user;
+    i18n.changeLanguage(getLanguage());
+    setTheme();
+    if (UserService.Instance.user) {
    }
+
+    // if (!!this.props.site.my_user) {
+    //   UserService.Instance.this.props.site.my_user);
+    //   // UserService.Instance.user = this.props.site.my_user;
+    // } else {
+    //   UserService.Instance.setUser(undefined);
+    // }
  }

  componentDidMount() {
    // Subscribe to jwt changes
    if (isBrowser()) {
+      this.searchTextField = createRef();
+      console.log(`isLoggedIn = ${this.state.isLoggedIn}`);
+
+      // On the first load, check the unreads
+      if (this.state.isLoggedIn == false) {
+        // setTheme(data.my_user.theme, true);
+        // i18n.changeLanguage(getLanguage());
+        // i18n.changeLanguage('de');
+      } else {
+        this.requestNotificationPermission();
+        WebSocketService.Instance.userJoin();
+        this.fetchUnreads();
+      }
+
      this.userSub = UserService.Instance.jwtSub.subscribe(res => {
        // A login
        if (res !== undefined) {
          this.requestNotificationPermission();
+          WebSocketService.Instance.getSite();
        } else {
-          this.state.isLoggedIn = false;
+          this.setState({ isLoggedIn: false });
        }
-        console.log('a new login');
-        // WebSocketService.Instance.getSite();
-        this.setState(this.state);
      });

      // Subscribe to unread count changes
@ -415,6 +415,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
      this.state.unreadCount = this.calculateUnreadCount();
      this.setState(this.state);
      this.sendUnreadCount();
+    } else if (res.op == UserOperation.GetSite) {
+      // This is only called on a successful login
+      let data = res.data as GetSiteResponse;
+      UserService.Instance.user = data.my_user;
+      this.state.isLoggedIn = true;
+      this.setState(this.state);
    } else if (res.op == UserOperation.CreateComment) {
      let data = res.data as CommentResponse;

--- a/src/shared/components/post-listing.tsx
+++ b/src/shared/components/post-listing.tsx
@ -143,18 +143,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
            this.props.post.embed_title && (
              <IFramelyCard post={this.props.post} />
            )}
-          {this.props.showBody && this.props.post.body && (
-            <>
-              {this.state.viewSource ? (
-                <pre>{this.props.post.body}</pre>
-              ) : (
-                <div
-                  className="md-div"
-                  dangerouslySetInnerHTML={mdToHtml(this.props.post.body)}
-                />
-              )}
-            </>
-          )}
+          {this.props.showBody &&
+            this.props.post.body &&
+            (this.state.viewSource ? (
+              <pre>{this.props.post.body}</pre>
+            ) : (
+              <div
+                className="md-div"
+                dangerouslySetInnerHTML={mdToHtml(this.props.post.body)}
+              />
+            ))}
        </div>
      </div>
    );
--- a/src/shared/services/UserService.ts
+++ b/src/shared/services/UserService.ts
@ -20,9 +20,8 @@ export class UserService {
  );

  private constructor() {
-    let jwt = IsomorphicCookie.load('jwt');
-    if (jwt) {
-      this.setClaims(jwt);
+    if (this.auth) {
+      this.setClaims(this.auth);
    } else {
      // setTheme();
      console.log('No JWT cookie found.');
@ -30,17 +29,17 @@ export class UserService {
  }

  public login(res: LoginResponse) {
-    this.setClaims(res.jwt);
    let expires = new Date();
    expires.setDate(expires.getDate() + 365);
-    IsomorphicCookie.save('jwt', res.jwt, { expires });
+    IsomorphicCookie.save('jwt', res.jwt, { expires, secure: false });
    console.log('jwt cookie set');
+    this.setClaims(res.jwt);
  }

  public logout() {
+    IsomorphicCookie.remove('jwt', { secure: false });
    this.claims = undefined;
    this.user = undefined;
-    IsomorphicCookie.remove('jwt');
    // setTheme();
    this.jwtSub.next();
    console.log('Logged out.');
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@ -358,15 +358,14 @@ export function debounce(

 // TODO
 export function getLanguage(override?: string): string {
-  return 'en';
-  // let user = UserService.Instance.user;
-  // let lang = override || (user && user.lang ? user.lang : 'browser');
+  let user = UserService.Instance.user;
+  let lang = override || (user && user.lang ? user.lang : 'browser');

-  // if (lang == 'browser') {
-  //   return getBrowserLanguage();
-  // } else {
-  //   return lang;
-  // }
+  if (lang == 'browser' && isBrowser()) {
+    return getBrowserLanguage();
+  } else {
+    return lang;
+  }
 }

 // TODO
@ -440,6 +439,11 @@ export function getMomentLanguage(): string {

 // TODO
 export function setTheme(theme: string = 'darkly', loggedIn: boolean = false) {
+  // require('../assets/css/themes/_variables.darkly.scss');
+  // require('../../node_modules/bootstrap/scss/bootstrap.scss');
+  // require('../assets/css/themes/_variables.darkly.scss');
+  // require('../assets/css/themes/_variables.darkly.scss');
+  // require('../assets/css/themes/_variables.darkly.scss');
  // unload all the other themes
  // for (var i = 0; i < themes.length; i++) {
  //   let styleSheet = document.getElementById(themes[i]);
@ -1138,11 +1142,10 @@ export function setAuth(obj: any, auth: string) {
 }

 export function setIsoData(context: any): IsoData {
-  if (isBrowser()) {
-    return window.isoData;
-  } else {
-    return context.router.staticContext;
-  }
+  let isoData: IsoData = isBrowser()
+    ? window.isoData
+    : context.router.staticContext;
+  return isoData;
 }

 export function wsSubscribe(parseMessage: any): Subscription {