UI for reactivation email

app/components/reactivate-component/component.js

@@ -0,0 +1,30 @@
+import Ember from 'ember';
+import { task } from 'ember-concurrency';
+import { on } from '@ember/object/evented';
+import ENV from 'irene/config/environment';
+
+export default Ember.Component.extend({
+
+  isSuccess: false,
+
+  reactivate: task(function *() {
+    const email = this.get("email");
+    if(Ember.isEmpty(email)) return this.get("notify").error("Please enter the registered email ID", ENV.notifications);
+    const data = {
+      email
+    };
+    yield this.get("ajax").post(ENV.endpoints.reactivate, {data});
+    this.set("isSuccess", true);
+  }).evented(),
+
+  reactivateErrored: on('reactivate:errored', function(_, error) {
+    let errMsg = this.get('tPleaseTryAgain');
+
+    if(error.payload) {
+      errMsg = error.payload[Object.keys(error.payload)][0]
+    }
+
+    this.get("notify").error(errMsg);
+  })
+
+});

app/components/reactivate-component/styles.sass

@@ -0,0 +1,19 @@
+.reactivate-form
+  &.success
+    .email-form
+      display: none
+    .confirm-box
+      display: flex
+
+  .confirm-box
+    display: none
+    &-icon
+      font-size: 3em
+      margin: auto
+    &-text
+      margin-top: -10px
+      font-size: 1.2em
+      padding: 1em 1em 0
+
+.is-success
+  color: $success

app/components/reactivate-component/template.emblem

@@ -0,0 +1,21 @@
+.activate-container
+  .activate-main
+    .reactivate-form class=isSuccess:success
+      .email-form
+        h6
+          | Hey, looks like the activation token is expired or invalid
+        h6
+          | Do you want to recieve the activation email again? If yes, please enter the registered email id below
+
+        .column.is-half
+          form
+            p.control.has-icon.has-icon-left
+                = input class="input" placeholder="Email" value=email autofocus="autofocus" autocomplete="username"
+                = fa-icon class="is-primary" "user"
+            p.control.margin-top20
+               button.button.is-primary.highlighted-button click={(perform reactivate)}
+                  | Resend Email
+      .confirm-box
+        = fa-icon "check-circle" class="is-success confirm-box-icon"
+        .confirm-box-text
+          = t "registerConfirmation"

app/locales/en/translations.js

@@ -295,7 +295,7 @@ export default {
   "recover": "Recover",
   "recoverPassword": "Recover your password",
   "register": "Register",
-  "registerConfirmation": "Thank you for registering with Appknox. An activation link has been send to the email provided.",
+  "registerConfirmation": "Thank you for registering with Appknox. An activation link has been sent to the email provided.",
   "invitationRegisterConfirmation": "Thank you for registering with Appknox. Please login to continue.",
   "regulatory": "Regulatory",
   "reject": "Reject",

app/router.js

@@ -17,6 +17,7 @@ Router.map(function() {
   if (!ENV.isEnterprise) {
     this.route('register');
     this.route('activate', {path: '/activate/:pk/:token'});
+    this.route('reactivate');
   }
   this.route('recover');
   this.route('reset', {path: '/reset/:uuid/:token'});

app/routes/activate.js

@@ -6,10 +6,13 @@ export default Ember.Route.extend({
   title: `Activate${config.platform}`,
   model(params) {
     const url = [ENV.endpoints.activate, params.pk, params.token].join('/');
-    return this.get('ajax').request(url);
+    return this.get('ajax').request(url)
+    .then(() => {
+      this.get("notify").info("Your account has been activated. Please login to continue");
+      this.transitionTo('login');
+    })
+    .catch(() => {
+      this.transitionTo('reactivate');
+    });
   },
-  redirect() {
-    this.get("notify").info("Your account has been activated. Please login to continue");
-    this.transitionTo('login');
-  }
 });

app/routes/reactivate.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import config from 'irene/config/environment';
+
+export default Ember.Route.extend({
+  title: `Reactivate${config.platform}`,
+});

app/styles/app.sass

@@ -1,4 +1,5 @@
 @import "bohemia"
+@import "pod-styles"
 @import "ember-power-select"
 $FreestyleGuide-color--primary: $primary
 $FreestyleGuide-color--accent: $primary
@@ -2549,7 +2550,7 @@ $attachment-icon-width: 4em
   overflow: hidden
   &.success
     .register-form
-      display: None
+      display: none
     .register-confirm
       display: flex
 

app/templates/activate.emblem

@@ -1,7 +0,0 @@
-.auth-main-container
-  = auth-assets
-  .activate-container
-    .activate-main
-      = fa-icon "check-circle" class="is-success activate-main-icon"
-      p.activate-main-text
-        = t "activationSuccess"

app/templates/reactivate.emblem

@@ -0,0 +1,4 @@
+.auth-main-container
+  = auth-assets
+
+  = reactivate-component

config/environment.js

@@ -171,28 +171,29 @@ module.exports = function(environment) {
       signedInvoiceUrl: 'download_url',
       invoices: 'invoices',
       chargebeeCallback: "chargebee/callback",
-      subscriptions: "subscriptions",
-      rescan: "rescan",
-      personaltokens: "personaltokens",
-      unknownAnalysisStatus: "unknown_analysis_status",
-      reportPreference: "report_preference",
-      registration: "registration",
-      activate: "activate",
-      saml2: "sso/saml2",
-      saml2Login: "sso/saml2/login",
-      files: "files",
-      profiles: "profiles",
-      analyses: "analyses",
-      vulnerabilityPreferences: "vulnerability_preferences",
+      subscriptions: 'subscriptions',
+      rescan: 'rescan',
+      personaltokens: 'personaltokens',
+      unknownAnalysisStatus: 'unknown_analysis_status',
+      reportPreference: 'report_preference',
+      registration: 'registration',
+      activate: 'activate',
+      saml2: 'sso/saml2',
+      saml2Login: 'sso/saml2/login',
+      files: 'files',
+      profiles: 'profiles',
+      analyses: 'analyses',
+      vulnerabilityPreferences: 'vulnerability_preferences',
       uploadFile: 'attachments',
       uploadedAttachment: 'attachments/upload_finished',
       deleteAttachment: 'delete_attachment',
       downloadAttachment: 'download',
       purgeAPIAnalyses: 'purge_api',
       apps: 'apps',
       reports: 'reports',
-      setUnknownAnalysisStatus: "set_unknown_analysis_status",
-      userSearch: "user_search"
+      setUnknownAnalysisStatus: 'set_unknown_analysis_status',
+      userSearch: 'user_search',
+      reactivate: 'reactivate',
     },
     csb: {
       reportDownload: { feature: "Account Settings", module: "Setup", product: "Appknox" },

mirage/config.js

@@ -57,6 +57,10 @@ export default function() {
     return {};
   });
 
+  this.get('/activate/:id/1', () => {
+    return {};
+  });
+
   this.get('/manual/:id', () => {
     return {};
   });
@@ -97,6 +101,10 @@ export default function() {
     return {};
   });
 
+  this.post('/reactivate', () => {
+    return {};
+  });
+
   this.put('/files/:id/vulnerability_preferences/:id/risk', () => {
     return {};
   });

package.json

@@ -65,6 +65,7 @@
     "ember-cli-sass": "7.0.0",
     "ember-cli-test-loader": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
+    "ember-component-css": "^0.6.5",
     "ember-concurrency": "^0.8.19",
     "ember-data": "2.12.2",
     "ember-django-adapter": "^2.0.0",

tests/integration/components/reactivate-component/component-test.js

@@ -0,0 +1,16 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('reactivate-component', 'Integration | Component | reactivate component', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{reactivate-component}}`);
+
+  assert.equal(this.$().text().trim(), 'Hey, looks like the activation token is expired or invalidDo you want to recieve the activation email again? If yes, please enter the registered email id belowResend EmailThank you for registering with Appknox. An activation link has been sent to the email provided.');
+});

tests/unit/routes/reactivate-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:reactivate', 'Unit | Route | reactivate', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});