feat: 🎸 user can return to origin screen from authenticate

addons/core/translations/actions/en-us.yaml

@@ -27,3 +27,4 @@ add-hosts: Add Hosts
 set-password: Set Password
 change-password: Change Password
 edit-form: Edit Form
+change-origin: Change Controller URL

ui/desktop/.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "rules": {
+    "max-nesting-depth": 4,
+    "selector-max-compound-selectors": 4,
+    "scss/at-extend-no-missing-placeholder": null,
+    "function-parentheses-space-inside": null,
+    "property-no-vendor-prefix": null,
+    "at-rule-no-vendor-prefix": null
+  }
+}

ui/desktop/app/routes/scopes/scope/authenticate.js

@@ -31,4 +31,14 @@ export default class ScopesScopeAuthenticateRoute extends Route {
   redirect() {
     if (!this.origin.rendererOrigin) this.replaceWith('index');
   }
+
+  /**
+   * Adds the existing origin, if any, to the controller scope.
+   * @param {Controller} controller
+   */
+  setupController(controller) {
+    super.setupController(...arguments);
+    const origin = this.origin.rendererOrigin;
+    controller.setProperties({ origin });
+  }
 }

ui/desktop/app/styles/_notify.scss

@@ -60,19 +60,19 @@
 
 .ember-notify-show {
   -webkit-animation-duration: 500ms;
-  -webkit-animation-name: ember-notify-show;
-  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   animation-duration: 500ms;
+  -webkit-animation-name: ember-notify-show;
   animation-name: ember-notify-show;
+  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .ember-notify-hide {
   -webkit-animation-duration: 250ms;
-  -webkit-animation-name: ember-notify-hide;
-  -webkit-animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
   animation-duration: 250ms;
+  -webkit-animation-name: ember-notify-hide;
   animation-name: ember-notify-hide;
+  -webkit-animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
   animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
 
   &:hover {

ui/desktop/app/styles/app.scss

@@ -1,5 +1,6 @@
 @use 'rose/variables/sizing';
 @use 'rose/variables/media';
+@use 'rose/utilities/type';
 
 @import 'rose';
 @import 'notify';
@@ -21,7 +22,7 @@
 .rose-nav-sidebar {
   margin-top: sizing.rems(xxl);
 
-  & + .rose-nav-sidebar {
+  + .rose-nav-sidebar {
     margin-top: 0;
   }
 
@@ -100,9 +101,9 @@
 
 .rose-header {
   -webkit-app-region: drag;
-  position: relative;
-  padding-left: sizing.rems(l) * 3;
   min-height: sizing.rems(l) * 2;
+  padding-left: sizing.rems(l) * 3;
+  position: relative;
 
   .rose-header-brand {
     display: none;
@@ -205,40 +206,40 @@
 }
 
 .branded-card {
-  position: relative;
-  width: sizing.rems(l) * 16;
-  margin: 0 auto;
-  margin-top: sizing.rems(l) * 2;
-  padding: (sizing.rems(l) * 4) (sizing.rems(l) * 3) (sizing.rems(l) * 2) (sizing.rems(l) * 3);
   border: 1px solid var(--ui-border-subtler-1);
   border-radius: sizing.rems(xxxs);
+  margin: 0 auto;
+  margin-top: sizing.rems(l) * 1.25;
+  padding: (sizing.rems(l) * 4) (sizing.rems(l) * 3) (sizing.rems(l) * 2) (sizing.rems(l) * 3);
+  position: relative;
+  width: sizing.rems(l) * 16;
 
   &::before {
-    position: absolute;
-    content: " ";
-    top: 0;
-    left: 0;
-    right: 0;
-    height: sizing.rems(l) * 3.25;
     background-color: var(--black);
     background-image: url('/brand-background.svg');
-    background-repeat: no-repeat;
     background-position: right;
+    background-repeat: no-repeat;
     border-top-left-radius: sizing.rems(xxxs);
     border-top-right-radius: sizing.rems(xxxs);
+    content: ' ';
+    height: sizing.rems(l) * 3.25;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
   }
 
   &::after {
-    position: absolute;
-    content: " ";
-    top: 0;
-    left: 0;
-    right: 0;
-    height: sizing.rems(l) * 3.25;
     background-image: url('/logo-app-full.svg');
-    background-size: sizing.rems(l) * 7;
-    background-repeat: no-repeat;
     background-position: (sizing.rems(l) * 2.5) 50%;
+    background-repeat: no-repeat;
+    background-size: sizing.rems(l) * 8;
+    content: ' ';
+    height: sizing.rems(l) * 3.25;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
   }
 
   .branded-card-title {
@@ -264,7 +265,14 @@
 
 @media (max-width: media.width(medium)) {
   .branded-card {
-    width: auto;
     max-width: 100%;
+    width: auto;
   }
 }
+
+.change-origin {
+  @include type.type(s);
+  color: var(--ui-border-starker-1);
+  margin: sizing.rems(l) 0 0 0;
+  text-align: center;
+}

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

@@ -1,5 +1,5 @@
 {{page-title (t "actions.authenticate")}}
-{{!-- 
+{{!--
 <Rose::Form::Input
   @type="text"
   @name=""
@@ -38,6 +38,16 @@
 
   {{#if @model.authMethods}}
     {{outlet}}
+
+    <p class="change-origin">
+      {{t "form.origin.label"}}:
+      <code>{{this.origin}}</code>.
+      <br>
+      <LinkTo @route="origin">
+        {{t "actions.change-origin"}}
+      </LinkTo>
+    </p>
+
   {{/if}}
   {{#unless @model.authMethods}}
     <Rose::Layout::Centered>

ui/desktop/package.json

@@ -16,7 +16,7 @@
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
-    "lint:sass": "sass-lint -v -q",
+    "lint:sass": "stylelint '**/*.scss'",
     "format": "npm-run-all format:*",
     "format:js": "prettier --write '{app,config,stories,tests,electron-app/src}/**/*.js' *.js",
     "format:sass": "prettier --write app/**/*.scss",
@@ -72,8 +72,9 @@
     "qunit-dom": "^1.2.0",
     "rose": "*",
     "sass": "^1.29.0",
-    "sass-lint": "^1.13.1",
-    "sinon": "^9.2.1"
+    "sinon": "^9.2.1",
+    "stylelint": "^13.8.0",
+    "stylelint-config-sass-guidelines": "^7.1.0"
   },
   "engines": {
     "node": "10.* || >= 12"