feat(signaling): ui update to soon allow user to set signaling servers

components/interactables/Input/Input.less

@@ -40,4 +40,8 @@
       color: grey !important;
     }
   }
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }

components/views/settings/pages/privacy/Privacy.html

@@ -5,34 +5,91 @@
       <TypographySubtitle :size="6" :text="$t('pages.privacy.subtitle')" />
     </div>
   </div>
-  <UiScroll verticalScroll enableWrap scrollbarVisibility="scroll">
-    <div class="columns is-desktop">
-      <SettingsUnit
-        :title="$t('pages.privacy.register.title')"
-        :text="$t('pages.privacy.register.subtitle')"
-      >
-        <InteractablesSwitch isLocked v-model="registry" />
-      </SettingsUnit>
-      <SettingsUnit
-        :title="$t('pages.privacy.pin.title')"
-        :text="$t('pages.privacy.pin.subtitle')"
-      >
-        <InteractablesSwitch v-model="storePin" />
-      </SettingsUnit>
-    </div>
-    <div class="columns is-desktop">
-      <SettingsUnit
-        :title="$t('pages.privacy.embeds.title')"
-        :text="$t('pages.privacy.embeds.subtitle')"
-      >
-        <InteractablesSwitch v-model="embeddedLinks" />
-      </SettingsUnit>
-      <SettingsUnit
-        :title="$t('pages.privacy.activity.title')"
-        :text="$t('pages.privacy.activity.subtitle')"
-      >
-        <InteractablesSwitch v-model="displayCurrentActivity" />
-      </SettingsUnit>
-    </div>
-  </UiScroll>
+  <div class="columns is-desktop">
+    <SettingsUnit
+      :title="$t('pages.privacy.register.title')"
+      :text="$t('pages.privacy.register.subtitle')"
+    >
+      <InteractablesSwitch isLocked v-model="registry" />
+    </SettingsUnit>
+    <SettingsUnit
+      :title="$t('pages.privacy.pin.title')"
+      :text="$t('pages.privacy.pin.subtitle')"
+    >
+      <InteractablesSwitch v-model="storePin" />
+    </SettingsUnit>
+  </div>
+  <div class="columns is-desktop">
+    <SettingsUnit
+      :title="$t('pages.privacy.embeds.title')"
+      :text="$t('pages.privacy.embeds.subtitle')"
+    >
+      <InteractablesSwitch v-model="embeddedLinks" />
+    </SettingsUnit>
+    <SettingsUnit
+      :title="$t('pages.privacy.activity.title')"
+      :text="$t('pages.privacy.activity.subtitle')"
+    >
+      <InteractablesSwitch v-model="displayCurrentActivity" />
+    </SettingsUnit>
+  </div>
+
+  <div class="columns is-desktop">
+    <SettingsUnit
+      :title="$t('pages.privacy.serverType.title')"
+      :text="$t('pages.privacy.serverType.subtitle')"
+    >
+      <InteractablesSelect
+        :options="serverTypes"
+        v-model="serverType"
+        size="small"
+        class="form-control"
+      />
+    </SettingsUnit>
+  </div>
+
+  <div
+    v-if="serverType === 'own'"
+    class="columns is-desktop ownInfo-input-part"
+  >
+    <SettingsUnit
+      :title="$t('pages.privacy.ownInfo.title')"
+      :text="$t('pages.privacy.ownInfo.subtitle')"
+    >
+      <InteractablesInput
+        v-model="ownInfo"
+        type="dark"
+        size="small"
+        :placeholder="$t('pages.privacy.ownInfo.placeholder')"
+        class="ownInfo-input"
+      />
+      <TypographyText
+        class="color-danger"
+        type="danger"
+        :size="6"
+        :text="$t('pages.privacy.ownInfo.lengthErrorMsg')"
+        v-if="lengthError"
+      />
+      <span v-if="formatError">
+        <TypographyText
+          class="color-danger"
+          type="danger"
+          :size="6"
+          :text="$t('pages.privacy.ownInfo.formatErrorMsg')"
+        />
+        <TypographyText
+          class="color-danger ml-3"
+          type="danger"
+          :size="6"
+          :text="$t('pages.privacy.ownInfo.errorSampleUrl1')"
+        />
+        <TypographyText
+          class="color-danger ml-3"
+          type="danger"
+          :size="6"
+          :text="$t('pages.privacy.ownInfo.errorSampleUrl2')"
+        />
+      </span>
+    </SettingsUnit>
+  </div>
 </div>

components/views/settings/pages/privacy/Privacy.less

@@ -0,0 +1,12 @@
+.ownInfo-input {
+  margin-bottom: 5px;
+}
+
+@media only screen and (max-width: @mobile-breakpoint) {
+  #privacy-settings {
+    margin-bottom: 70px;
+  }
+  .ownInfo-input-part {
+    height: 200px;
+  }
+}

components/views/settings/pages/privacy/index.vue

@@ -4,11 +4,57 @@
 import Vue from 'vue'
 import { mapState } from 'vuex'
 import { Themes, Flairs, ThemeNames } from '~/store/ui/types.ts'
+import { validURL } from '~/libraries/ui/Common'
+
 export default Vue.extend({
   name: 'PrivacySettings',
   layout: 'settings',
+  data() {
+    return {
+      maxChars: this.$Config.chat.maxChars,
+      formatError: false,
+      lengthError: false,
+      serverTypes: [
+        {
+          text: this.$t('pages.privacy.ownInfo.satelliteServer'),
+          value: 'satellite',
+        },
+        {
+          text: this.$t('pages.privacy.ownInfo.publicServer'),
+          value: 'public',
+        },
+      ],
+    }
+  },
   computed: {
     ...mapState(['ui', 'accounts', 'settings']),
+    serverType: {
+      set(state) {
+        this.$store.commit('settings/setServerType', state)
+      },
+      get() {
+        return this.settings.serverType
+      },
+    },
+    ownInfo: {
+      set(state) {
+        if (validURL(state) && state.length < this.maxChars + 1) {
+          this.formatError = false
+          this.lengthError = false
+          this.$store.commit('settings/setOwnInfo', state)
+          return
+        }
+        if (state.length > this.maxChars) {
+          this.lengthError = true
+        }
+        if (!validURL(state)) {
+          this.formatError = true
+        }
+      },
+      get() {
+        return this.settings.ownInfo
+      },
+    },
     registry: {
       get() {
         return !this.accounts ? false : this.accounts.registry
@@ -41,3 +87,5 @@ export default Vue.extend({
   },
 })
 </script>
+
+<style lang="less" scoped src="./Privacy.less"></style>

libraries/ui/Common.ts

@@ -0,0 +1,4 @@
+export function validURL(text: string): boolean {
+  const pattern = /^(http|https|ws|wss|udp):\/\//
+  return !!pattern.test(text) || !text
+}

locales/en-US.js

@@ -196,6 +196,25 @@ export default {
       title: 'Privacy Settings',
       subtitle:
         'Choose which features to enable to best suit your privacy preferences.',
+      serverType: {
+        title: 'Signaling Servers',
+        subtitle:
+          "Choose which signaling server group you want to use. If you use 'Satellite + Public Signaling Servers', you are using public servers and Satellite hosted servers to connect with your friends. We do not track connections. We only track server utilization (memory and cpu usage) to know if we need to turn on more signaling servers. If you opt to use 'Only Public Signaling Servers', those are totally outside of Satellite control, so we can not see or have any insight into their operation, logging, or data sharing practices, and you may experience difficulties connecting with friends if the signaling servers are overloaded.",
+      },
+      ownInfo: {
+        title: 'Set my own Signaling Server',
+        subtitle:
+          'Enter your http, udp, or websocket URL for your signaling server here',
+        placeholder: 'Please enter ...',
+        lengthErrorMsg: 'URL Too long, please limit to 2048 characters',
+        formatErrorMsg:
+          'Invalid input format. Please add on the following format',
+        errorSampleUrl1: '- http://localhost:3000',
+        errorSampleUrl2: '- wss://www.example.com/socketserver',
+        satelliteServer: 'Satellite + Public Signaling Servers',
+        publicServer: 'Only Public Signaling Servers',
+        userDefinedServer: 'Set my own',
+      },
       continue: 'Continue',
       register: {
         title: 'Register Username Publicly',

pages/setup/privacy/Privacy.html

@@ -1,85 +1,22 @@
-<div class="container">
-  <div class="privacy-body">
-    <div class="columns">
-      <div class="column center">
-        <TypographySubtitle :size="6" :text="$t('pages.privacy.title')" />
-        <TypographyText :text="$t('pages.privacy.subtitle')" />
-      </div>
-    </div>
-    <UiScroll verticalScroll enableWrap scrollbarVisibility="scroll">
-      <div class="columns">
-        <div class="column">
-          <div class="columns is-mobile">
-            <div class="column switch-column">
-              <InteractablesSwitch v-model="registry" isLocked small />
-            </div>
-            <div class="column">
-              <TypographySubtitle
-                :size="6"
-                :text="$t('pages.privacy.register.title')"
-              />
-              <TypographyText :text="$t('pages.privacy.register.subtitle')" />
-            </div>
-          </div>
-        </div>
-        <div class="column">
-          <div class="columns is-mobile">
-            <div class="column switch-column">
-              <InteractablesSwitch v-model="storePin" small />
-            </div>
-            <div class="column">
-              <TypographySubtitle
-                :size="6"
-                :text="$t('pages.privacy.pin.title')"
-              />
-              <TypographyText :text="$t('pages.privacy.pin.subtitle')" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="columns">
-        <div class="column">
-          <div class="columns is-mobile">
-            <div class="column switch-column">
-              <InteractablesSwitch v-model="embeddedLinks" small />
-            </div>
-            <div class="column">
-              <TypographySubtitle
-                :size="6"
-                :text="$t('pages.privacy.embeds.title')"
-              />
-              <TypographyText :text="$t('pages.privacy.embeds.subtitle')" />
-            </div>
+<div class="hidden-scroll privacy-setup" v-scroll-lock="true">
+  <UiScroll verticalScroll scrollbarVisibility="scroll" enableWrap>
+    <div class="container">
+      <div class="privacy-body">
+        <SettingsPagesPrivacy ref="privacy"></SettingsPagesPrivacy>
+        <div class="spacer"></div>
+        <div class="columns is-mobile buttons">
+          <div class="column">
+            <InteractablesButton
+              class="right"
+              type="primary"
+              :disabled="isDisabled()"
+              :action="generateWallet"
+            >
+              {{ $t('pages.privacy.continue') }}
+            </InteractablesButton>
           </div>
         </div>
-        <div class="column">
-          <div class="columns is-mobile">
-            <div class="column switch-column">
-              <InteractablesSwitch v-model="displayCurrentActivity" small />
-            </div>
-            <div class="column">
-              <TypographySubtitle
-                :size="6"
-                :text="$t('pages.privacy.activity.title')"
-              />
-              <TypographyText :text="$t('pages.privacy.activity.subtitle')" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </UiScroll>
-    <br />
-    <div class="spacer"></div>
-    <div class="columns is-mobile buttons">
-      <div class="column">
-        <InteractablesButton
-          class="right"
-          type="primary"
-          :action="generateWallet"
-        >
-          {{ $t('pages.privacy.continue') }}
-        </InteractablesButton>
       </div>
     </div>
-  </div>
+  </UiScroll>
 </div>