Merge pull request #94 from hashicorp/refactor-scopes-auth-templates

Refactor scopes auth templates

addons/rose/addon/styles/rose/components/form/_input.scss

@@ -19,6 +19,7 @@
 
   .rose-form-input-field {
     @include type.type(m);
+    box-sizing: border-box;
     margin-bottom: sizing.rems(xs);
     padding: sizing.rems(xs);
     color: var(--stark);

addons/rose/addon/styles/rose/variables/_media.scss

@@ -9,7 +9,7 @@ $width-breakpoints: (
   xlarge: 1200px,
   large: 1024px,
   medium: 768px,
-  small: 480px,
+  small: 540px,
   xsmall: 320px,
 );
 

ui/core/app/authenticators/password.js

@@ -38,7 +38,7 @@ export default class PasswordAuthenticator extends BasePasswordAuthenticator {
    * @param {string} scopeID
    * @return {string}
    */
-  buildDeauthEndpointURL({ scope: { id: scopeID } }) {
+  buildDeauthEndpointURL({ org_id: scopeID }) {
     const adapter = this.store.adapterFor('application');
     const options = { adapterOptions: { method: 'deauthenticate' } };
     return adapter.buildURL('scope', scopeID, options, 'findRecord');

ui/core/app/controllers/scopes/scope.js

@@ -0,0 +1,10 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeController extends Controller {
+
+  // =services
+
+  @service session;
+
+}

ui/core/app/router.js

@@ -18,7 +18,6 @@ Router.map(function () {
         this.route('new');
       });
     });
-    this.route('cope');
   });
 
   this.route('orgs', function () {

ui/core/app/routes/scopes/scope.js

@@ -23,5 +23,4 @@ export default class ScopesScopeRoute extends Route {
         return maybeExistingScope || this.store.createRecord('scope', { id });
       });
   }
-
 }

ui/core/app/templates/scopes/scope.hbs

@@ -1,32 +1,33 @@
 <Rose::Layout::Sidebar as |sidebarLayout|>
 
-  <sidebarLayout.sidebar>
+  {{#if this.session.isAuthenticated}}
+    <sidebarLayout.sidebar>
+      <Rose::Nav::Sidebar @title={{t "titles.general"}} as |nav|>
+        <nav.link @route="scopes.scope.projects">
+          {{t "resources.projects"}}
+        </nav.link>
+      </Rose::Nav::Sidebar>
 
-    <Rose::Nav::Sidebar @title={{t "titles.general"}} as |nav|>
-      <nav.link @route="scopes.scope.projects">
-        {{t "resources.projects"}}
-      </nav.link>
-    </Rose::Nav::Sidebar>
+      {{outlet "sidebar"}}
 
-    {{outlet "sidebar"}}
-    
-    {{!--
-    <Rose::Nav::Sidebar @title={{t "titles.iam"}} as |nav|>
-      <nav.link @route="orgs.org.users">
-        {{t "resources.users"}}
-      </nav.link>
 
-      <nav.link @route="orgs.org.groups">
-        {{t "resources.groups"}}
-      </nav.link>
+      {{!--
+      <Rose::Nav::Sidebar @title={{t "titles.iam"}} as |nav|>
+        <nav.link @route="orgs.org.users">
+          {{t "resources.users"}}
+        </nav.link>
 
-      <nav.link @route="orgs.org.roles">
-        {{t "resources.roles"}}
-      </nav.link>
-    </Rose::Nav::Sidebar>
-    --}}
+        <nav.link @route="orgs.org.groups">
+          {{t "resources.groups"}}
+        </nav.link>
 
-  </sidebarLayout.sidebar>
+        <nav.link @route="orgs.org.roles">
+          {{t "resources.roles"}}
+        </nav.link>
+      </Rose::Nav::Sidebar>
+      --}}
+    </sidebarLayout.sidebar>
+  {{/if}}
 
   <sidebarLayout.body>
     <main>

ui/core/app/templates/scopes/scope/authenticate.hbs

@@ -1 +1,54 @@
-{{outlet}}
+{{title (t "actions.authenticate")}}
+
+<Rose::Layout::Centered>
+  <Rose::Layout::Page as |page|>
+
+    <page.header>
+      <h2>{{t "actions.authenticate"}}</h2>
+      <p>{{t "auth.descriptions.authenticating-with-org" name=@model.scope.displayName}}</p>
+    </page.header>
+
+    <page.navigation>
+
+      <Rose::Dropdown
+        @text={{t "actions.choose-different-org"}}
+        @icon="user-organization"
+      as |dropdown|>
+        {{#each @model.scopes as |scope|}}
+          <dropdown.link @route="scopes.scope.authenticate" @model={{scope}}>
+            {{scope.displayName}}
+          </dropdown.link>
+        {{/each}}
+      </Rose::Dropdown>
+
+      <Rose::Separator />
+
+      <Rose::Nav::Tabs as |nav|>
+        {{#each @model.authMethods as |authMethod|}}
+          <nav.link @route="scopes.scope.authenticate.method" @model={{authMethod}}>
+            {{t (concat "auth.method-types." authMethod.type)}}
+          </nav.link>
+        {{/each}}
+      </Rose::Nav::Tabs>
+    </page.navigation>
+
+    <page.body>
+      {{#if @model.authMethods}}
+        {{outlet}}
+      {{/if}}
+      {{#unless @model.authMethods}}
+        <Rose::Layout::Centered>
+          <Rose::Message
+            @title={{t "auth.titles.no-methods"}}
+            @icon="alert-circle-outline"
+          as |message|>
+            <message.description>
+              {{t "auth.descriptions.no-methods"}}
+            </message.description>
+          </Rose::Message>
+        </Rose::Layout::Centered>
+      {{/unless}}
+    </page.body>
+
+  </Rose::Layout::Page>
+</Rose::Layout::Centered>

ui/core/app/templates/scopes/scope/authenticate/index.hbs

@@ -1 +1,12 @@
-{{outlet}}
+{{#unless @model}}
+  <Rose::Layout::Centered>
+    <Rose::Message
+      @title={{t "auth.titles.no-methods"}}
+      @icon="alert-circle-outline"
+    as |message|>
+      <message.description>
+        {{t "auth.descriptions.no-methods"}}
+      </message.description>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}

ui/core/app/templates/scopes/scope/index.hbs

@@ -1 +1 @@
-{{outlet}}
+{{outlet}}

ui/core/mirage/scenarios/default.js

@@ -10,6 +10,17 @@ export default function(server) {
 
   const scope = { id: orgScope.id, type: orgScope.type };
 
+  // Create additional scopes for authentication organization selection
+  server.create('scope', {
+    type: 'org',
+    scope: { id: globalScope.id, type: globalScope.type }
+  }, 'withChildren');
+
+  server.create('scope', {
+    type: 'org',
+    scope: { id: globalScope.id, type: globalScope.type }
+  }, 'withChildren');
+
   // Auth
 
   // Auth methods exist both at the global scope and the org scope.

ui/core/tests/unit/controllers/scopes/scope-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope');
+    assert.ok(controller);
+  });
+});

ui/core/translations/en-us.yaml

@@ -4,6 +4,21 @@ actions:
   dismiss: Dismiss
   save: Save
   help: Need help?
+  authenticate: Authenticate
+  deauthenticate: Deauthenticate
+  choose-org: Choose Org
+  choose-different-org: Choose a Different Org
+auth:
+  titles:
+    no-orgs: No Organizations Available
+    no-methods: No Authentication Method
+  descriptions:
+    no-orgs: No organizations were found.  To authenticate, ask your administrator to create an organization and grant you access.
+    no-methods: No authentication methods were found for this organization.  Switch organizations and try again.
+    choose-org: Choose an organization to authenticate.
+    authenticating-with-org: "You're authenticating with {name}."
+  method-types:
+    password: Password
 resources:
   user: User
   users: Users
@@ -46,6 +61,8 @@ form:
     name: Name
     description: Description
     type: Type
+    identification: Username
+    password: Password
 errors:
   titles:
     unauthenticated-error: You are not signed in