Add http link on client connect error

src/components/autojoin.vue

@@ -8,6 +8,13 @@
         :loading="loading"
         class="pa-4"
       >
+        <v-card-title>
+          <v-img
+            contain
+            :src="getLogos.light.long"
+          />
+        </v-card-title>
+
         <v-alert
           v-if="error"
           type="error"
@@ -15,10 +22,6 @@
           Unable to autojoin
         </v-alert>
 
-        <v-card-title>
-          Welcome to SyncLounge
-        </v-card-title>
-
         <v-card-actions>
           <v-btn
             class="primary"
@@ -39,8 +42,6 @@
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
-  name: 'AutoJoin',
-
   data() {
     return {
       error: false,
@@ -55,7 +56,7 @@ export default {
   },
 
   methods: {
-    ...mapActions([
+    ...mapActions('synclounge', [
       'JOIN_CONFIG_SYNCLOUNGE_SERVER',
     ]),
 
@@ -72,7 +73,7 @@ export default {
       this.loading = false;
 
       if (!this.error) {
-        this.$router.push('/browse');
+        this.$router.push({ name: 'browse' });
       }
     },
   },

src/components/clientpicker.vue

@@ -4,9 +4,28 @@
   >
     <v-alert
       v-if="error"
+      prominent
       type="error"
     >
-      Unable to connect to client
+      <v-row align="center">
+        <v-col>
+          Unable to connect to client.
+        </v-col>
+
+        <v-col
+          v-if="isHttps"
+          cols="auto"
+        >
+          Try with http
+          <v-btn
+            :href="httpLink"
+            class="ml-1"
+            color="warning"
+          >
+            Try
+          </v-btn>
+        </v-col>
+      </v-row>
     </v-alert>
 
     <v-subheader>
@@ -14,7 +33,8 @@
       <v-btn
         icon
         x-small
-        @click="FETCH_PLEX_DEVICES"
+        @click="
+          FETCH_PLEX_DEVICES"
       >
         <v-icon>refresh</v-icon>
       </v-btn>
@@ -32,6 +52,8 @@
         :client-id="id"
       />
     </v-list-item-group>
+    </span>
+    </v-alert>
   </v-list>
 </template>
 
@@ -58,6 +80,14 @@ export default {
       'GET_CHOSEN_CLIENT_ID',
       'GET_PLEX_CLIENT_IDS_SORTED_BY_LAST_SEEN',
     ]),
+
+    isHttps() {
+      return window.location.protocol === 'https:';
+    },
+
+    httpLink() {
+      return `http:${window.location.href.substring(window.location.protocol.length)}`;
+    },
   },
 
   mounted() {

src/components/createroom.vue

@@ -7,7 +7,7 @@
       <v-col>
         <v-card
           class="mx-auto"
-          max-width="500"
+          max-width="550"
           :loading="loading"
         >
           <v-card-title>