src/app/modules/comments/list/list.component.scss

@@ -404,9 +404,24 @@ m-comments__tree,
   font-size: 12px;
   text-align: center;
   margin: ($minds-padding * 2) 0;
+
   @include m-theme() {
     color: themed($m-grey-300);
   }
+
+  a {
+    font-weight: inherit;
+    color: inherit;
+    cursor: pointer;
+
+    b {
+      font-weight: bold;
+
+      @include m-theme() {
+        color: themed($m-blue);
+      }
+    }
+  }
 }
 
 .m-comments--load-error-label {

src/app/modules/comments/poster/poster.component.html

-<div class="m-comment m-comment--poster minds-block" *ngIf="!readonly">
+<div
+  class="m-comment m-comment--poster minds-block"
+  *ngIf="!readonly && isLoggedIn"
+>
   <div class="minds-avatar">
     <a [routerLink]="['/', session.getLoggedInUser().username]">
       <img [src]="getAvatar()" class="mdl-shadow--2dp" />
@@ -146,3 +149,18 @@
     </div>
   </div>
 </div>
+
+<div
+  class="m-comments--start-conversation-label"
+  *ngIf="!isLoggedIn && level < 1"
+>
+  <a (click)="showLoginModal(); $event.preventDefault()">
+    <ng-container *ngIf="!conversation; else loggedOutConversationMessage" i18n>
+      <b>Log in</b> to comment
+    </ng-container>
+
+    <ng-template #loggedOutConversationMessage>
+      <ng-container i18n> <b>Log in</b> to send a message </ng-container>
+    </ng-template>
+  </a>
+</div>

src/app/modules/comments/poster/poster.component.ts

@@ -18,6 +18,7 @@ import { Textarea } from '../../../common/components/editors/textarea.component'
 import { SocketsService } from '../../../services/sockets';
 import autobind from '../../../helpers/autobind';
 import { AutocompleteSuggestionsService } from '../../suggestions/services/autocomplete-suggestions.service';
+import { SignupModalService } from '../../modals/signup/service';
 
 @Component({
   selector: 'm-comment__poster',
@@ -33,6 +34,7 @@ export class CommentPosterComponent {
   @Input() readonly: boolean = false;
   @Input() currentIndex: number = -1;
   @Input() conversation: boolean = false;
+  @Input() level: number = 0;
   @Output('optimisticPost') optimisticPost$: EventEmitter<
     any
   > = new EventEmitter();
@@ -47,6 +49,7 @@ export class CommentPosterComponent {
   constructor(
     public session: Session,
     public client: Client,
+    private signupModal: SignupModalService,
     public attachment: AttachmentService,
     public sockets: SocketsService,
     public suggestions: AutocompleteSuggestionsService,
@@ -196,6 +199,14 @@ export class CommentPosterComponent {
     return true; // TODO: fix
   }
 
+  get isLoggedIn() {
+    return this.session.isLoggedIn();
+  }
+
+  showLoginModal() {
+    this.signupModal.open();
+  }
+
   detectChanges() {
     this.cd.markForCheck();
     this.cd.detectChanges();

src/app/modules/comments/thread/thread.component.html

@@ -42,6 +42,7 @@
   <p
     class="m-comments--start-conversation-label"
     *ngIf="
+      isLoggedIn &&
       !inProgress &&
       !error &&
       comments?.length === 0 &&
@@ -119,6 +120,7 @@
   [entity]="entity"
   [currentIndex]="comments.length - 1"
   [conversation]="conversation"
+  [level]="level"
   (posted)="onPosted($event)"
   (optimisticPost)="onOptimisticPost($event)"
 >

src/app/modules/comments/thread/thread.component.ts

@@ -315,6 +315,10 @@ export class CommentsThreadComponent implements OnInit {
     return true;
   }
 
+  get isLoggedIn() {
+    return this.session.isLoggedIn();
+  }
+
   ngOnChanges(changes) {
     //  console.log('[comment:list]: on changes', changes);
   }

src/app/modules/modals/modal.scss

@@ -10,7 +10,7 @@ m-modal-signup-on-action {
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 101;
+    z-index: 9999990;
   }
 
   .m-modal-container {

src/app/modules/modals/signup/signup.html

@@ -2,6 +2,7 @@
   [open]="open"
   (closed)="onClose($event)"
   *ngIf="!session.isLoggedIn() || display != 'initial'"
+  (click)="$event.stopPropagation()"
 >
   <div
     class="mdl-card__title"