vircadia · pankaj2k9 · Jan 30, 2022 · Jan 30, 2022 · Jan 30, 2022 · Feb 11, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
         "axios": "^0.21.4",
         "core-js": "^3.19.1",
         "quasar": "^2.3.3",
+        "vue": "^3.2.29",
+        "vue-router": "^4.0.12",
         "vuex": "^4.0.1"
     },
     "devDependencies": {

diff --git a/src/components/components/login/MetaverseLogin.vue b/src/components/components/login/MetaverseLogin.vue
@@ -9,18 +9,16 @@
 -->
 
 <template>
-    <q-form
-        @submit="onSubmit"
-        @reset="onReset"
-        class="q-gutter-md"
-    >
+    <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
         <q-input
             v-model="username"
             filled
             label="Username"
             hint="Enter your username."
             lazy-rules
-            :rules="[ val => val && val.length > 0 || 'Please enter a username.']"
+            :rules="[
+                (val) => (val && val.length > 0) || 'Please enter a username.',
+            ]"
         />
 
         <q-input
@@ -30,7 +28,9 @@
             :type="showPassword ? 'text' : 'password'"
             hint="Enter your password."
             lazy-rules
-            :rules="[ val => val && val.length > 0 || 'Please enter a password.']"
+            :rules="[
+                (val) => (val && val.length > 0) || 'Please enter a password.',
+            ]"
         >
             <template v-slot:append>
                 <q-icon
@@ -42,31 +42,92 @@
         </q-input>
 
         <div align="right">
-            <q-btn label="Reset" type="reset" color="primary" flat class="q-mr-sm" />
-            <q-btn label="Login" type="submit" color="primary"/>
+            <q-btn
+                label="Reset"
+                type="reset"
+                color="primary"
+                flat
+                class="q-mr-sm"
+            />
+            <q-btn label="Login" type="submit" color="primary" />
         </div>
     </q-form>
+
+    <q-expansion-item
+        v-model="metaverseServerSettingExpansion"
+        expand-icon="language"
+        label="Advanced"
+        expand-icon-class="text-red"
+        header-class="clean-header"
+    >
+        <q-card class="no-padding">
+            <q-card-section class="no-padding">
+                <q-input
+                    v-model="metaverseServerSetting"
+                    label="Metaverse Server"
+                >
+                    <template v-slot:before>
+                        <q-icon name="language" size="18px" color="primary" />
+                    </template>
+
+                    <template v-slot:append>
+                        <q-icon
+                            name="save"
+                            size="18px"
+                            color="primary"
+                            @click="
+                                metaverseServerStore = metaverseServerSetting;
+                                metaverseServerSettingExpansion = false;
+                            "
+                            class="cursor-pointer"
+                        />
+                    </template>
+                </q-input>
+            </q-card-section>
+        </q-card>
+    </q-expansion-item>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import { Account } from "@Modules/account";
+import { Utility } from "@Modules/utility";
 
 export default defineComponent({
     name: "MetaverseLogin",
 
     emits: ["closeDialog"],
 
-    data: () => ({
-        username: "",
-        password: "",
-        showPassword: false
-    }),
+    data: function() {
+        return {
+            username: "",
+            password: "",
+            showPassword: false,
+            metaverseServerSettingExpansion: false,
+            metaverseServerSetting: this.$store.state.metaverse.server
+        };
+    },
+    computed: {
+        metaverseServerStore: {
+            get() {
+                return this.$store.state.metaverse.server;
+            },
+            async set(newValue: string) {
+                await Utility.metaverseConnectionSetup(
+                    newValue
+                );
+            }
+        }
+    },
 
     methods: {
         async onSubmit() {
             try {
-                const loginResponse = await Account.login(this.username, this.password);
+                const loginResponse = await Account.login(
+                    this.username,
+                    this.password,
+                    this.$store.state.metaverse.server
+                );
 
                 if (loginResponse) {
                     this.$q.notify({

diff --git a/src/components/components/login/MetaverseRegister.vue b/src/components/components/login/MetaverseRegister.vue
@@ -73,31 +73,85 @@
             <q-btn label="Register" type="submit" color="primary"/>
         </div>
     </q-form>
+    {{$store.state.metaverse.server}}
+
+    <q-expansion-item
+        v-model="metaverseServerSettingExpansion"
+        expand-icon="language"
+        label="Advanced"
+        expand-icon-class="text-red"
+        header-class="clean-header"
+    >
+        <q-card class="no-padding">
+            <q-card-section class="no-padding">
+                <q-input
+                    v-model="metaverseServerSetting"
+                    label="Metaverse Server"
+                >
+                    <template v-slot:before>
+                        <q-icon name="language" size="18px" color="primary" />
+                    </template>
+
+                    <template v-slot:append>
+                        <q-icon
+                            name="save"
+                            size="18px"
+                            color="primary"
+                            @click="
+                                metaverseServerStore = metaverseServerSetting;
+                                metaverseServerSettingExpansion = false;
+                            "
+                            class="cursor-pointer"
+                        />
+                    </template>
+                </q-input>
+            </q-card-section>
+        </q-card>
+    </q-expansion-item>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import { useQuasar } from "quasar";
+import { Utility } from "@Modules/utility";
 
 import { Account } from "@Modules/account";
 
 export default defineComponent({
     name: "MetaverseRegister",
 
-    data: () => ({
-        username: "",
-        email: "",
-        password: "",
-        confirmPassword: "",
-        showPassword: false,
-        showConfirmPassword: false
-    }),
+    data: function() {
+        return {
+            username: "",
+            email: "",
+            password: "",
+            confirmPassword: "",
+            showPassword: false,
+            showConfirmPassword: false,
+            metaverseServerSettingExpansion: false,
+            metaverseServerSetting: this.$store.state.metaverse.server
+        };
+    },
+
+    computed: {
+        metaverseServerStore: {
+            get() {
+                return this.$store.state.metaverse.server;
+            },
+            async set(newValue: string) {
+                await Utility.metaverseConnectionSetup(
+                    newValue
+                );
+            }
+        }
+    },
 
     methods: {
         async onSubmit() {
             const $q = useQuasar();
             try {
-                const awaiting = await Account.createAccount(this.username, this.password, this.email);
+                const awaiting = await Account.createAccount(this.username, this.password,
+                    this.email, this.$store.state.metaverse.server);
                 const result = {        // TODO: temp to replace code above
                     data: {
                         accountWaitingVerification: awaiting

diff --git a/src/components/dialogs/Login.vue b/src/components/dialogs/Login.vue
@@ -31,11 +31,13 @@
 
         <q-tab-panels v-model="tab" animated>
             <q-tab-panel name="metaverseLogin">
-                <MetaverseLogin @closeDialog="$emit('closeDialog', 'close')"></MetaverseLogin>
+                <MetaverseLogin
+                    @closeDialog="$emit('closeDialog', 'close')"></MetaverseLogin>
             </q-tab-panel>
 
             <q-tab-panel name="metaverseRegister">
-                <MetaverseRegister @register-success="onMetaverseRegister"></MetaverseRegister>
+                <MetaverseRegister
+                    @register-success="onMetaverseRegister"></MetaverseRegister>
             </q-tab-panel>
         </q-tab-panels>
     </q-card-section>
@@ -44,6 +46,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Log from "@Modules/debugging/log";
 

diff --git a/src/modules/account/index.ts b/src/modules/account/index.ts
@@ -77,7 +77,7 @@ export const Account = {
      * @param {string} pPassword Password of user to login
      * @returns 'true' if login succeeded.
      */
-    async login(pUsername: string, pPassword: string): Promise<boolean> {
+    async login(pUsername: string, pPassword: string, pMetaverseUrl?: string): Promise<boolean> {
         if (MetaverseMgr.ActiveMetaverse?.isConnected && !Account.isLoggedIn) {
             try {
                 // Log.debug(Log.types.ACCOUNT, `Login: ${pUsername}`);
@@ -86,7 +86,7 @@ export const Account = {
                 params.append("username", pUsername);
                 params.append("password", pPassword);
 
-                const loginUrl = buildUrl(OAuthTokenAPI);
+                const loginUrl = buildUrl(OAuthTokenAPI, pMetaverseUrl);
                 const resp = await axios.post(loginUrl, params);
                 if (resp.data) {
                     const maybeError = resp.data as unknown as OAuthTokenError;
@@ -162,14 +162,14 @@ export const Account = {
         }
     },
 
-    async createAccount(pUsername: string, pPassword: string, pEmail: string): Promise<boolean> {
+    async createAccount(pUsername: string, pPassword: string, pEmail: string, pMetaverseUrl?: string): Promise<boolean> {
         const req = {
             username: pUsername,
             password: pPassword,
             email: pEmail
         } as PostUsersReq;
         try {
-            const resp = await doAPIPost(PostUsersAPI, req) as PostUsersResp;
+            const resp = await doAPIPost(PostUsersAPI, req, pMetaverseUrl) as PostUsersResp;
             Account.accountName = resp.username;
             Account.id = resp.accountId;
 

diff --git a/src/modules/metaverse/metaverseOps.ts b/src/modules/metaverse/metaverseOps.ts
@@ -127,8 +127,8 @@ export async function doAPIGet(pAPIUrl: string, pMetaverseUrl?: string): Promise
     throw new Error(errorString);
 }
 
-export async function doAPIPost(pAPIUrl: string, pBody: KeyedCollection): Promise<unknown> {
-    const accessUrl = buildUrl(pAPIUrl);
+export async function doAPIPost(pAPIUrl: string, pBody: KeyedCollection, pMetaverseUrl?: string): Promise<unknown> {
+    const accessUrl = buildUrl(pAPIUrl, pMetaverseUrl);
     try {
         const resp = await axios.post(accessUrl, pBody, buildRequestConfig());
         const response = resp.data as unknown as APIResponse;

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -611,6 +611,7 @@ export const Store = createStore<IRootState>({
         },
         // Example action. Any script should be calling the Metavsere component directly
         async [Actions.SET_METAVERSE_URL](pContext: ActionContext<IRootState, IRootState>, pUrl: string): Promise<void> {
+            console.log("pUrl", pUrl);
             await MetaverseMgr.ActiveMetaverse.setMetaverseUrl(pUrl);
         }
     },