Adding dismissable new user, and anonymous login. Fixes #203. Changin…

…g enter your name to enter user name. Fixes #202.
dessalines · Sep 25, 2018 · a7f8f09 · a7f8f09
1 parent fa0a150
commit a7f8f09
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 service/src/main/resources/dist/
 service/flowchat.properties
 service/flowchat.db.changelog-master.xml
+.vscode/
diff --git a/service/src/main/java/com/chat/db/Actions.java b/service/src/main/java/com/chat/db/Actions.java
@@ -342,6 +342,12 @@ public static User createNewSimpleUser(String name) {
 
   }
 
+  public static User createNewAnonymousUser() {
+      Long lastId = Tables.User.findAll().orderBy("id desc").limit(1).get(0).getLongId();
+      String userName = "user_" + ++lastId;
+      return createNewSimpleUser(userName);
+  }
+
   public static User login(String userOrEmail, String password) {
 
     // Find the user, then create a login for them

diff --git a/service/src/main/java/com/chat/webservice/Endpoints.java b/service/src/main/java/com/chat/webservice/Endpoints.java
@@ -91,7 +91,8 @@ public static void user() {
       Map<String, String> vars = Tools.createMapFromReqBody(req.body());
 
       String name = vars.get("name");
-      User user = Actions.createNewSimpleUser(name);
+
+      User user = (name != null) ? Actions.createNewSimpleUser(name) : Actions.createNewAnonymousUser();
 
       return user.getJwt();
 
@@ -156,8 +157,7 @@ public static void user() {
 
       JsonNode j = Tools.JACKSON.readTree(json);
 
-      //       json = json.replaceAll("\\\\", "\n").replaceAll("\n", "\\n");
-
+      // json = json.replaceAll("\\\\", "\n").replaceAll("\n", "\\n");
 
       return j.toString();
 

diff --git a/ui/src/app/components/discussion-card/discussion-card.component.html b/ui/src/app/components/discussion-card/discussion-card.component.html
@@ -1,14 +1,18 @@
-<div [class.card]="isCard()" [class.list-group-item]="!isCard()" [class.card-body]="isCard()" [class.mr-1]="isCard()" [class.border-primary]="discussion.stickied">
+<div [class.card]="isCard()" [class.list-group-item]="!isCard()" [class.card-body]="isCard()" [class.mr-1]="isCard()"
+  [class.border-primary]="discussion.stickied">
   <div *ngIf="!discussion.deleted">
     <div *ngIf="!editing">
       <div class="row">
         <div class="px-1 col-sm-1 col-1 text-center vote-width">
           <ng-template #voteTemplate>
             <div [innerHtml]="voteHtml()"></div>
           </ng-template>
-          <div class="fa fa-fw fa-arrow-up vote-thumb" [class.pointer]="!this.isCreator"[class.text-success]="discussion.userRank > 50" (click)="upvote()" placement="right" [tooltip]="voteTemplate" container="body"></div>
-          <div class="pointer vote-number" placement="bottom" placement="right" [class.pointer]="!this.isCreator" [tooltip]="voteTemplate" container="body" (click)="toggleShowVoteSlider()">{{avgVote()}}</div>
-          <div class="fa fa-fw fa-arrow-down vote-thumb" [class.pointer]="!this.isCreator" [class.text-danger]="voteExists() && discussion.userRank < 50" (click)="downvote()" placement="right" [tooltip]="voteTemplate" container="body"></div>
+          <div class="fa fa-fw fa-arrow-up vote-thumb" [class.pointer]="!this.isCreator" [class.text-success]="discussion.userRank > 50"
+            (click)="upvote()" placement="right" [tooltip]="voteTemplate" container="body"></div>
+          <div class="pointer vote-number" placement="bottom" placement="right" [class.pointer]="!this.isCreator"
+            [tooltip]="voteTemplate" container="body" (click)="toggleShowVoteSlider()">{{avgVote()}}</div>
+          <div class="fa fa-fw fa-arrow-down vote-thumb" [class.pointer]="!this.isCreator" [class.text-danger]="voteExists() && discussion.userRank < 50"
+            (click)="downvote()" placement="right" [tooltip]="voteTemplate" container="body"></div>
         </div>
         <div *ngIf="hasImage()" [ngClass]="{'col-sm-1 col-11': !isCard(),
         'col-sm-11': isCard()}">
@@ -60,11 +64,12 @@ <h5 [class.card-title]="isCard()" class="card-body-no-bottom">
                 <span *ngIf="!discussion.nsfw">mark as nsfw</span>
               </li>
               <li role="button" *ngIf="(isModerator)" (click)="toggleSticky()" class="list-inline-item pointer">
-                  <span *ngIf="discussion.stickied">unsticky</span>
-                  <span *ngIf="!discussion.stickied">make sticky</span>
+                <span *ngIf="discussion.stickied">unsticky</span>
+                <span *ngIf="!discussion.stickied">make sticky</span>
               </li>
               <li *ngIf="discussion.numberOfComments" class="list-inline-item" role="button">
-                <a [routerLink]="['/discussion', discussion.id]" class="link-unstyled">{{discussion.numberOfComments}} comments
+                <a [routerLink]="['/discussion', discussion.id]" class="link-unstyled">{{discussion.numberOfComments}}
+                  comments
                 </a>
               </li>
               <li *ngIf="discussion.link" class="list-inline-item">
@@ -112,8 +117,9 @@ <h5 [class.card-title]="isCard()" class="card-body-no-bottom">
         <div class="form-group row">
           <label class="col-sm-2 form-control-label">Link</label>
           <div class="col-sm-10">
-            <input [(ngModel)]="discussion.link" #discussionLink="ngModel" placeholder="optional" class="form-control" pattern="[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?"
-              name="discussion_link" autocomplete="off" />
+            <input [(ngModel)]="discussion.link" #discussionLink="ngModel" placeholder="optional" class="form-control"
+              pattern="[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?" name="discussion_link"
+              autocomplete="off" />
             <div *ngIf="discussionLink.dirty" class="row col-sm-12 help-block text-danger">
               <small *ngIf="discussionLink.errors?.pattern">Invalid URL</small>
             </div>
@@ -122,8 +128,9 @@ <h5 [class.card-title]="isCard()" class="card-body-no-bottom">
         <div class="form-group row">
           <label class="col-sm-2 form-control-label">Community</label>
           <div class="col-sm-4">
-            <input [(ngModel)]="communitySearchSelected" [typeahead]="communitySearchResultsObservable" (typeaheadOnSelect)="communityTypeaheadOnSelect($event.item)"
-              [typeaheadOptionField]="'name'" (typeaheadLoading)="communityChangeTypeaheadLoading($event)" (typeaheadNoResults)="communityChangeTypeaheadNoResults($event)"
+            <input [(ngModel)]="communitySearchSelected" [typeahead]="communitySearchResultsObservable"
+              (typeaheadOnSelect)="communityTypeaheadOnSelect($event.item)" [typeaheadOptionField]="'name'"
+              (typeaheadLoading)="communityChangeTypeaheadLoading($event)" (typeaheadNoResults)="communityChangeTypeaheadNoResults($event)"
               [typeaheadWaitMs]="200" class="form-control" autocomplete="off" name="community_search">
             <div *ngIf="communityTypeaheadLoading===true">
               <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
@@ -145,7 +152,8 @@ <h5 [class.card-title]="isCard()" class="card-body-no-bottom">
         </div>
         <div class="checkbox">
           <label>
-            <input [disabled]="discussion.community.nsfw" [(ngModel)]="discussion.nsfw" type="checkbox" name="discussion_nsfw" /> NSFW
+            <input [disabled]="discussion.community.nsfw" [(ngModel)]="discussion.nsfw" type="checkbox" name="discussion_nsfw" />
+            NSFW
           </label>
         </div>
         <app-markdown-edit [focus]="false" [inputText]="discussion.text" (textEvent)="setEditText($event)"></app-markdown-edit>
@@ -154,9 +162,9 @@ <h5 [class.card-title]="isCard()" class="card-body-no-bottom">
           <label class="col-sm-2 form-control-label">Tags</label>
           <div class="col-sm-4 input-group">
             <input [(ngModel)]="tagSearchSelected" [typeahead]="tagSearchResultsObservable" (typeaheadOnSelect)="tagTypeaheadOnSelect($event.item)"
-              [typeaheadOptionField]="'name'" (typeaheadLoading)="tagChangeTypeaheadLoading($event)" (typeaheadNoResults)="tagChangeTypeaheadNoResults($event)"
-              [typeaheadWaitMs]="200" class="form-control" minlength="5" maxlength="20" pattern="[a-zA-Z0-9_-]+" name="tag_search"
-              #tagTerm="ngModel" autocomplete="off">
+              [typeaheadOptionField]="'name'" (typeaheadLoading)="tagChangeTypeaheadLoading($event)"
+              (typeaheadNoResults)="tagChangeTypeaheadNoResults($event)" [typeaheadWaitMs]="200" class="form-control"
+              minlength="5" maxlength="20" pattern="[a-zA-Z0-9_-]+" name="tag_search" #tagTerm="ngModel" autocomplete="off">
             <button [disabled]="tagSearchSelected.length < 5 || tagSearchSelected.length > 20 || rgex.test(tagSearchSelected) == false"
               (click)="createTag()" class="input-group-addon btn btn-outline-primary">
               <i class="fa fa-fw fa-plus"></i>
@@ -189,8 +197,9 @@ <h5 [class.card-title]="isCard()" class="card-body-no-bottom">
           <label class="col-sm-2 form-control-label">Invite Users</label>
           <div class="col-sm-4">
             <input [(ngModel)]="userSearchSelected" [typeahead]="userSearchResultsObservable" (typeaheadOnSelect)="userTypeaheadOnSelect($event.item)"
-              [typeaheadOptionField]="'name'" (typeaheadLoading)="userChangeTypeaheadLoading($event)" (typeaheadNoResults)="userChangeTypeaheadNoResults($event)"
-              [typeaheadWaitMs]="200" class="form-control" autocomplete="off" name="user_search">
+              [typeaheadOptionField]="'name'" (typeaheadLoading)="userChangeTypeaheadLoading($event)"
+              (typeaheadNoResults)="userChangeTypeaheadNoResults($event)" [typeaheadWaitMs]="200" class="form-control"
+              autocomplete="off" name="user_search">
             <div *ngIf="userTypeaheadLoading===true">
               <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
             </div>
@@ -209,8 +218,9 @@ <h5 [class.card-title]="isCard()" class="card-body-no-bottom">
         <div class="form-group row">
           <label class="col-sm-2 form-control-label">Block Users</label>
           <div class="col-sm-4">
-            <input [(ngModel)]="blockedUserSearchSelected" [typeahead]="blockedUserSearchResultsObservable" (typeaheadOnSelect)="blockedUserTypeaheadOnSelect($event.item)"
-              [typeaheadOptionField]="'name'" (typeaheadLoading)="blockedUserChangeTypeaheadLoading($event)" (typeaheadNoResults)="blockedUserChangeTypeaheadNoResults($event)"
+            <input [(ngModel)]="blockedUserSearchSelected" [typeahead]="blockedUserSearchResultsObservable"
+              (typeaheadOnSelect)="blockedUserTypeaheadOnSelect($event.item)" [typeaheadOptionField]="'name'"
+              (typeaheadLoading)="blockedUserChangeTypeaheadLoading($event)" (typeaheadNoResults)="blockedUserChangeTypeaheadNoResults($event)"
               [typeaheadWaitMs]="200" class="form-control" autocomplete="off" name="block_user_search">
             <div *ngIf="blockedUserTypeaheadLoading===true">
               <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>

diff --git a/ui/src/app/components/new-user-modal/new-user-modal.component.html b/ui/src/app/components/new-user-modal/new-user-modal.component.html
@@ -1,21 +1,27 @@
-<div bsModal #smModal="bs-modal" class="modal fade"
-  [config]="{backdrop: 'static'}" tabindex="-1" role="dialog"
+<div bsModal #smModal="bs-modal" class="modal fade" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog"
   aria-labelledby="mySmallModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title pull-left">Welcome!</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="dismiss()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
       <div class="modal-body">
         <form #userForm="ngForm" (ngSubmit)="onSubmit()">
           <div class="form-group">
             <div class="input-group">
-              <input id="new-user-input" type="text" class="form-control"
-                required maxlength="100" pattern="[a-zA-Z0-9_-]+"
-                [(ngModel)]="name" name="name" placeholder="Enter your name...."
-                #namev="ngModel" autofocus="" [class.is-invalid]="!(namev.valid || namev.pristine)">
+              <input id="new-user-input" type="text" class="form-control" required maxlength="100" pattern="[a-zA-Z0-9_-]+"
+                [(ngModel)]="name" name="name" placeholder="Enter a username..." #namev="ngModel" autofocus=""
+                [class.is-invalid]="!(namev.valid || namev.pristine)">
               <span class="input-group-btn">
-                  <button type="submit" class="btn btn-primary btn-block" [disabled]="!userForm.form.valid">Okay</button>
+                <button type="submit" class="btn btn-primary btn-block" [disabled]="!userForm.form.valid">Okay</button>
               </span>
             </div>
-            <div [hidden]="namev.valid || namev.pristine" class="text-danger">Name must be < 100 characters and contain no spaces.
+
+            <div [hidden]="namev.valid || namev.pristine" class="text-danger">Name must be less than 100 characters and
+              contain no spaces.
             </div>
           </div>
         </form>
@@ -24,5 +30,4 @@
     </div>
   </div>
 </div>
-<app-login-modal *ngIf="showLoginModal" (hideEvent)="hiddenEvent()"></app-login-modal>
-
+<app-login-modal *ngIf="showLoginModal" (hideEvent)="hiddenEvent()"></app-login-modal>
diff --git a/ui/src/app/components/new-user-modal/new-user-modal.component.ts b/ui/src/app/components/new-user-modal/new-user-modal.component.ts
@@ -28,7 +28,6 @@ export class NewUserModalComponent implements OnInit {
 	ngOnInit() {
 		// focus when the modal is shown
 		this.smModal.onShown.subscribe(() => document.getElementById("new-user-input").focus());
-
 		if (this.userService.getUser() == null) {
 			setTimeout(() => this.smModal.show(), 100);
 		} else {
@@ -51,6 +50,20 @@ export class NewUserModalComponent implements OnInit {
 			});
 	}
 
+	dismiss() {
+		let obs: Observable<string> = this.userService.createAnonymousUser();
+		obs.subscribe(rJWT => {
+			Tools.createCookie('jwt', rJWT, 9999);
+			this.userService.setUserFromCookie();
+			this.smModal.hide();
+			this.userCreated.emit();
+		},
+			error => {
+				console.error(error);
+				this.toasterService.pop("error", error._body);
+			});
+	}
+
 	hiddenEvent() {
 		this.smModal.hide();
 	}

diff --git a/ui/src/app/services/user.service.ts b/ui/src/app/services/user.service.ts
@@ -81,6 +81,12 @@ export class UserService {
       .catch(this.handleError);
   }
 
+  createAnonymousUser(): Observable<string> {
+    return this.http.post(this.userUrl, "")
+      .map(r => r.text())
+      .catch(this.handleError);
+  }
+
   logout() {
     // Log out
     this.user = {