new ad login component

lib/login/addon/components/login-ad/component.js

@@ -0,0 +1,110 @@
+import { get, set, computed } from '@ember/object';
+import { next } from '@ember/runloop';
+import { inject as service } from '@ember/service';
+import Component from '@ember/component';
+import C from 'ui/utils/constants';
+
+export default Component.extend({
+  access: service(),
+  cookies: service(),
+  isCaas: computed('app.mode', function() {
+    return this.get('app.mode') === 'caas' ? true : false;
+  }),
+  waiting: null,
+
+  username: null,
+  rememberUsername: false,
+  password: null,
+  shown: false,
+  provider: null,
+  readableProvider: null,
+
+  actions: {
+    showLocal() {
+      this.toggleProperty('shown');
+      next(this, 'focusSomething');
+    },
+    authenticate: function() {
+      const username = get(this, 'username');
+      let password = get(this, 'password');
+      const remember = get(this, 'rememberUsername');
+
+      if (password && get(this, 'provider') === 'local') {
+        password = password.trim();
+      }
+
+      const code = {
+        username: username,
+        password: password,
+      };
+
+      if ( remember ) {
+        if (get(this, 'provider') === 'local') {
+          get(this, 'cookies').setWithOptions(C.COOKIE.USERNAME, username, {expire: 365, secure: 'auto'});
+        } else {
+          get(this, 'cookies').setWithOptions(`${get(this, 'provider').toUpperCase()}-USERNAME`, username, {expire: 365, secure: 'auto'});
+        }
+      } else {
+        get(this, 'cookies').remove(C.COOKIE.USERNAME);
+      }
+
+      set(this, 'password', '');
+      if ( get(this,'access.providers') ) {
+        this.sendAction('action', get(this, 'provider'), code);
+      }
+    }
+  },
+
+  init() {
+    this._super(...arguments);
+
+    var username = null;
+    if (get(this, 'provider') === 'local') {
+      username = get(this, `cookies.${C.COOKIE.USERNAME}`);
+    } else {
+      username = get(this, `cookies.${get(this, 'provider').toUpperCase()}-USERNAME`);
+    }
+
+    if ( username ) {
+      set(this, 'username', username);
+      set(this, 'rememberUsername', true);
+    }
+
+    if (get(this, 'provider')) {
+      let pv = null;
+      switch(get(this, 'provider')) {
+      case 'activedirectory':
+        pv = 'Active Directory';
+        break;
+      case 'local':
+      default:
+        pv = 'Local Auth';
+        break;
+      }
+
+      set(this, 'readableProvider', pv);
+
+      // console.log(this.get('provider'));
+    }
+
+  },
+
+  focusSomething() {
+    if ( this.isDestroyed || this.isDestroying ) {
+      return;
+    }
+
+    let elem = this.$('#login-username-ad');
+    if ( get(this, 'username') ) {
+      elem = this.$('#login-password-ad');
+    }
+
+    if ( elem && elem[0] ) {
+      elem[0].focus();
+    }
+  },
+
+  didInsertElement() {
+    next(this, 'focusSomething');
+  },
+});

lib/login/addon/components/login-ad/template.hbs

@@ -0,0 +1,42 @@
+{{#if shown}}
+  <form {{action "authenticate" on="submit"}} class="text-left mt-10">
+    <div class="mt-20">
+      <div>
+        {{#if isCaas}}
+          <label class="acc-label">{{t 'loginUserPass.caasLabel'}}</label>
+        {{else}}
+          <label class="acc-label">{{t 'loginUserPass.userLabel'}}</label>
+        {{/if}}
+        <div class="pull-right">
+          <label class="acc-label">{{t 'loginUserPass.remember'}} {{input type="checkbox" checked=rememberUsername}}</label>
+        </div>
+      </div>
+      <div>
+        {{input type="text" id="login-username-ad" autocomplete="username" class="form-control login-user" value=username placeholder=(t 'loginUserPass.userPlaceholder')}}
+      </div>
+    </div>
+
+    <div class="pt-15 pb-15">
+      <label class="acc-label">{{t 'loginUserPass.passwordLabel'}}</label>
+      <div>
+        {{input id="login-password-ad" autocomplete="password" type="password" class="form-control login-pass" value=password}}
+      </div>
+    </div>
+
+    <p class="text-center">
+      <button disabled={{waiting}} class="btn bg-primary" {{action "authenticate"}}>
+        {{#if waiting}}
+          <i class="icon icon-spinner icon-spin"></i> {{t 'loginUserPass.loggingInLabel'}}
+        {{else}}
+          {{t 'loginUserPass.loginLabel' provider=readableProvider}}
+        {{/if}}
+      </button>
+    </p>
+  </form>
+{{else}}
+  {{#if (eq provider 'local')}}
+    <a class="link-text text-small mt-10 hand" {{action 'showLocal'}}>{{t 'loginUserPass.local'}}</a>
+  {{else}}
+    <a class="btn bg-primary" {{action 'showLocal'}}> <i class="icon icon-key"></i> {{t 'loginUserPass.provider' kind=readableProvider}}</a>
+  {{/if}}
+{{/if}}

lib/login/addon/login/template.hbs

@@ -25,7 +25,7 @@
       {{/if}}
 
       {{#if isActiveDirectory}}
-        {{login-user-pass
+        {{login-ad
             classNames="row"
             action="authenticate"
             waiting=waiting