fix: Move padding inside unverified user component (#4404)

Author: iamareebjamal

app/components/unverified-user-message.hbs

@@ -0,0 +1,24 @@
+{{#if this.shouldShowMessage}}
+  <div class="{{unless @padless 'mb-8'}}">
+    <div class="ui icon {{if this.isMailSent 'info' 'error'}} message eight wide column center aligned">
+      <i class="close icon" onclick={{action (mut this.isMessageVisible) false}} role="button"></i>
+      <i class="info icon"></i>
+      <div class="content">
+        {{#if this.isMailSent}}
+          <div class="header">
+            {{t 'Confirmation mail has been sent again successfully!'}}
+          </div>
+        {{else}}
+          <div class="header">
+            {{#if (eq this.session.currentRouteName 'events.view.index')}}
+              {{t 'To make your event live, please verify your account by clicking on the confirmation link that has been emailed to you.'}}
+            {{else}}
+              {{t 'Your account is unverified. Please verify by clicking on the confirmation link that has been emailed to you.'}}
+            {{/if}}
+          </div>
+          <p>{{t 'Did not get the email?'}} <a href="#" onclick={{action 'sendConfirmationMail'}}>{{t 'Please click here to resend the confirmation mail.'}}</a></p>
+        {{/if}}
+      </div>
+    </div>
+  </div>
+{{/if}}

app/components/unverified-user-message.js

@@ -1,18 +1,11 @@
 import { tracked } from '@glimmer/tracking';
-import classic from 'ember-classic-decorator';
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
 import Component from '@ember/component';
 
-@classic
 export default class UnverifiedUserMessage extends Component {
   @tracked isMessageVisible = true;
   isMailSent = false;
 
-  @computed(
-    'session.isAuthenticated',
-    'authManager.currentUser.isVerified',
-    'isMessageVisible'
-  )
   get shouldShowMessage() {
     return this.session.isAuthenticated
           && this.isMessageVisible

app/styles/partials/utils.scss

@@ -31,3 +31,7 @@
   border-bottom-left-radius: 0 !important;
   border-top-left-radius: 0 !important;
 }
+
+.mb-8 {
+  margin-bottom: 2rem;
+}

app/templates/account.hbs

@@ -1,8 +1,4 @@
-<div class="ui stackable grid">
-  <div class="sixteen wide column">
-    <UnverifiedUserMessage />
-  </div>
-</div>
+<UnverifiedUserMessage @padless="true" />
 <div class="row">
   <div class="sixteen wide column">
     <TabbedNavigation>

app/templates/components/unverified-user-message.hbs

@@ -1,9 +1,5 @@
 <div class="ui container">
-  <div class="ui stackable grid">
-    <div class="sixteen wide column">
-      <UnverifiedUserMessage />
-    </div>
-  </div>
+  <UnverifiedUserMessage />
   {{#if this.model.event.name}}
     <h2 class="weight-300">{{t 'Creating'}} <span class="weight-500">{{this.model.event.name}}</span></h2>
   {{else}}

app/templates/create.hbs

@@ -1,12 +1,6 @@
 {{#if (and (or (eq this.session.currentRouteName 'events.view.index') (eq this.session.currentRouteName 'events.view.export')) (gt this.unverified-user-message.length 0))}} 
   {{#if (eq this.model.state 'draft')}}
-    <div class="ui grid stackable">
-      <div class="row">
-        <div class="sixteen wide column">
-          <UnverifiedUserMessage />
-        </div>
-      </div>
-    </div>
+    <UnverifiedUserMessage />
   {{/if}}
 {{/if}}
 {{#if (not-includes this.session.currentRouteName 'events.view.edit')}}

app/templates/events/view.hbs

@@ -1,8 +1,4 @@
-<div class="ui stackable grid">
-  <div class="sixteen wide column">
-    <UnverifiedUserMessage />
-  </div>
-</div>
+<UnverifiedUserMessage />
 <div class="public-event ui relaxed grid">
   <div class="sixteen wide column lead {{if this.smallLead 'small'}}">
     <Widgets::SafeImage @src={{if this.model.largeImageUrl this.model.largeImageUrl this.model.originalImageUrl}} />

app/templates/public.hbs

@@ -1,42 +1,45 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-import EmberObject from '@ember/object';
 import { setupIntegrationTest } from 'open-event-frontend/tests/helpers/setup-integration-test';
 import { render } from '@ember/test-helpers';
 
 module('Integration | Component | unverified user message', function(hooks) {
   setupIntegrationTest(hooks);
 
-  test('it renders', async function(assert) {
-    this.set('shouldShowMessage', true);
+  function setShouldShowMessage(sessionExtra = {}) {
+    this.set('session', {
+      isAuthenticated: true,
+      ...sessionExtra
+    });
+    this.set('authManager', {
+      currentUser: {
+        isVerified: false
+      }
+    });
+  }
+
+  test('confirmation mail sent', async function(assert) {
+    setShouldShowMessage.call(this);
     this.set('isMailSent', true);
-    await render(hbs`{{unverified-user-message shouldShowMessage=shouldShowMessage isMailSent=isMailSent}}`);
+    await render(hbs`{{unverified-user-message isMailSent=isMailSent authManager=authManager session=session}}`);
     assert.ok(this.element.innerHTML.trim().includes('Confirmation mail has been sent again successfully'));
   });
 
-  test('it renders', async function(assert) {
-
-    let session = EmberObject.create({
+  test('event live message', async function(assert) {
+    setShouldShowMessage.call(this, {
       currentRouteName: 'events.view.index'
     });
-
-    this.set('shouldShowMessage', true);
     this.set('isMailSent', false);
-    this.set('session', session);
-    await render(hbs`{{unverified-user-message shouldShowMessage=shouldShowMessage session=session isMailSent=isMailSent}}`);
+    await render(hbs`{{unverified-user-message session=session authManager=authManager isMailSent=isMailSent}}`);
     assert.ok(this.element.innerHTML.trim().includes('To make your event live, please verify your account by clicking on the confirmation link that has been emailed to you.'));
   });
 
-  test('it renders', async function(assert) {
-
-    let session = EmberObject.create({
+  test('unverified message', async function(assert) {
+    setShouldShowMessage.call(this, {
       currentRouteName: 'else'
     });
-
-    this.set('shouldShowMessage', true);
     this.set('isMailSent', false);
-    this.set('session', session);
-    await render(hbs`{{unverified-user-message shouldShowMessage=shouldShowMessage session=session isMailSent=isMailSent}}`);
+    await render(hbs`{{unverified-user-message session=session authManager=authManager isMailSent=isMailSent}}`);
     assert.ok(this.element.innerHTML.trim().includes('Your account is unverified. Please verify by clicking on the confirmation link that has been emailed to you.'));
   });
 });