core: make iframe logins less confusing. show hostname on login screen.

plugins/core/package-lock.json

@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.135",
+   "version": "0.1.136",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.1.135",
+         "version": "0.1.136",
          "license": "Apache-2.0",
          "dependencies": {
             "@scrypted/common": "file:../../common",

plugins/core/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.135",
+   "version": "0.1.136",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",

plugins/core/ui/package.json

@@ -3,9 +3,9 @@
   "private": true,
   "scripts": {
     "dev": "concurrently --names 'server,client' --prefix-colors 'gray,white.bold' --prefix '{time} ({name})\t' --timestamp-format 'HH:mm:ss.SSS' --kill-others npm:serve-server npm:serve",
-    "serve": "vue-cli-service serve --open",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve --open",
     "serve-server": "cd ../../../server && npm run serve",
-    "build": "vue-cli-service build --dest ../fs/dist",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --dest ../fs/dist",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

plugins/core/ui/src/Launcher.vue

@@ -10,10 +10,18 @@
                     <v-card width="300px" class="elevation-24">
                         <v-card-title style="justify-content: center;" class="headline text-uppercase">Scrypted
                         </v-card-title>
-                        <v-card-subtitle style="text-align: center;">{{ $store.state.version }}</v-card-subtitle>
+                        <v-card-subtitle v-if="$store.state.loginHostname"
+                            style="text-align: center; font-weight: 300; font-size: .75rem !important; font-family: Quicksand, sans-serif!important;"
+                            class="text-subtitle-2 text-uppercase">
+                            {{ $store.state.version }}
+                            <br />
+                            Logged into: {{ $store.state.loginHostname
+                            }}
+                        </v-card-subtitle>
+                        <v-card-subtitle v-else style="text-align: center;">{{ $store.state.version }}</v-card-subtitle>
                         <v-list class="transparent">
-                            <v-list-item v-for="application in applications" :key="application.name"
-                                :to="application.to" :href="application.href">
+                            <v-list-item v-for="application in applications" :key="application.name" :to="application.to"
+                                :href="application.href">
                                 <v-icon small>{{ application.icon }}</v-icon>
                                 <v-list-item-title style="text-align: center;">{{ application.name }}
                                 </v-list-item-title>

plugins/core/ui/src/Login.vue

@@ -7,6 +7,9 @@
           </v-card-title>
           <v-card-subtitle v-if="$store.state.hasLogin === false" style="display: flex; justify-content: center;" class="text-uppercase">Create Account
           </v-card-subtitle>
+          <v-card-subtitle v-if="$store.state.loginHostname"
+                    style="text-align: center; font-weight: 300; font-size: .75rem !important; font-family: Quicksand, sans-serif!important;"
+                    class="text-subtitle-2 text-uppercase">Log into: {{ $store.state.loginHostname }}</v-card-subtitle>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12>

plugins/core/ui/src/client.ts

@@ -37,6 +37,7 @@ Vue.use(Vue => {
             baseUrl: getCurrentBaseUrl(),
         });
 
+        store.commit("setLoginHostname", undefined);
         store.commit("setHasLogin", undefined);
         store.commit("setIsLoggedIn", undefined);
         store.commit("setUsername", undefined);
@@ -53,6 +54,7 @@ Vue.use(Vue => {
                     });
                     return;
                 }
+                store.commit("setLoginHostname", response.hostname);
                 if (!response.expiration) {
                     store.commit("setHasLogin", response.hasLogin);
                     throw new Error("Login failed.");

plugins/core/ui/src/interfaces/OauthClient.vue

@@ -1,13 +1,37 @@
 <template>
-  <v-btn text color="primary" @click="onClick">Login</v-btn>
+  <div>
+    <v-dialog v-model="loginDialog" max-width="300px">
+      <v-card>
+        <v-card-title>Login Required</v-card-title>
+        <v-card-text>Scrypted Management Console is currently inside a browser iframe. For web security, a new tab will be
+          opened, and the
+          browser may prompt to log into this server again.
+          <br />
+          <br />
+          <b>Home Assistant Addon installations must create a new Administrator user</b> within the Scrypted Users sidebar menu to log in from outside of Home Assistant.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer>
+          </v-spacer>
+          <v-btn icon @click="loginDialog = false">Cancel</v-btn>
+          <v-btn icon @click="onClickContinue">OK</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-btn text color="primary" @click="onClick">Login</v-btn>
+  </div>
 </template>
 <script>
 import qs from 'query-string';
 import RPCInterface from "./RPCInterface.vue";
-import { getCurrentBaseUrl } from '../../../../../packages/client/src';
 
 export default {
   mixins: [RPCInterface],
+  data() {
+    return {
+      loginDialog: false,
+    };
+  },
   methods: {
     onChange() { },
     isIFrame() {
@@ -17,15 +41,18 @@ export default {
         return true;
       }
     },
+    onClickContinue: async function () {
+      const endpointManager = this.$scrypted.endpointManager;
+      const ep = await endpointManager.getPublicLocalEndpoint();
+      const u = new URL(ep);
+      u.hash = window.location.hash;
+      u.pathname = '/endpoint/@scrypted/core/public/';
+      window.open(u.toString(), '_blank');
+    },
     onClick: async function () {
       // must escape iframe for login.
       if (this.isIFrame()) {
-        const endpointManager = this.$scrypted.endpointManager;
-        const ep = await endpointManager.getPublicLocalEndpoint();
-        const u = new URL(ep);
-        u.hash = window.location.hash;
-        u.pathname = '/endpoint/@scrypted/core/public/';
-        window.open(u.toString(), '_blank');
+        this.loginDialog = true;
         return;
       }
 

plugins/core/ui/src/store.ts

@@ -16,7 +16,8 @@ const store = new Vuex.Store({
     isLoggedIn: undefined,
     isLoggedIntoCloud: undefined,
     isConnected: undefined,
-    hasLogin: undefined
+    hasLogin: undefined,
+    loginHostname: undefined,
   },
   mutations: {
     setSystemState: function (store, systemState) {
@@ -65,6 +66,9 @@ const store = new Vuex.Store({
     setHasLogin(store, hasLogin) {
       store.hasLogin = hasLogin;
     },
+    setLoginHostname(store, hostname) {
+      store.loginHostname = hostname;
+    },
     setVersion(store, version) {
       store.version = version;
     },