Merge branch '530-add-option-to-get-a-different-link-from-the-get-link-view-when-logged-in' into 'dev'

Implement "get different link" functionality

See merge request keanuapp/keanuapp-weblite!244

src/assets/css/getlink.scss

@@ -79,4 +79,11 @@
     height: 17px;
     object-fit: contain;
   }
+
+  .getlink-buttons {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-top: -20px;
+  }
 }

src/assets/css/main.scss

@@ -105,7 +105,7 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
 .v-btn.text-button {
     font-family: 'Inter', sans-serif;
     font-weight: 700;
-    font-size: 11 * $chat-text-size;
+    font-size: 11 * $chat-text-size !important;
     border: none;
     height: $chat-standard-padding;
     margin-top: $chat-standard-padding-xs;

src/assets/translations/en.json

@@ -196,6 +196,7 @@
     "ready_to_share": "It’s ready to share! A new direct room will open each time someone opens the link.",
     "scan_title": "Scan this code to start a direct chat",
     "continue": "Continue",
+    "different_link": "Get a different link",
     "qr_image_copied": "Image copied to clipboard"
   },
   "profile": {

src/components/GetLink.vue

@@ -11,14 +11,14 @@
 
           <div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div>
 
-          <v-text-field v-show="showPasswordField" solo v-model="user.password"
+          <v-text-field v-show="showPasswordFields" solo v-model="user.password"
             :append-icon="showPassword1 ? 'visibility' : 'visibility_off'" :hint="$t('global.password_hint')"
             :rules="[(v) => v ? !!v.match(passwordValidation) || $t('global.password_hint') : true]"
             :label="$t('getlink.password')" counter="20" maxlength="20" :type="showPassword1 ? 'text' : 'password'"
             @click:append="showPassword1 = !showPassword1" ref="password" :error="passErrorMessage != null"
             :error-messages="passErrorMessage" required v-on:keydown="hasError = false"
             v-on:keyup.enter="onPasswordEntered" v-on:blur="onPasswordEntered" />
-          <v-text-field v-show="showPasswordConfirmField" solo v-model="passwordConfirm"
+          <v-text-field v-show="showPasswordFields" solo v-model="passwordConfirm"
             :append-icon="showPassword2 ? 'visibility' : 'visibility_off'"
             :rules="[(v) => v === user.password || $t('global.password_didnot_match')]"
             :label="$t('getlink.password_repeat')" counter="20" maxlength="20"
@@ -57,8 +57,10 @@
         <v-img v-if="shareSupported" class="clickable getlink-share" src="@/assets/icons/ic_share.svg"
           @click="shareLink" />
       </copy-link>
-      <v-btn color="black" depressed @click.stop="goHome" class="outlined-button">{{ $t("getlink.continue") }}</v-btn>
-
+      <div class="getlink-buttons">
+        <v-btn color="black" depressed @click.stop="goHome" class="outlined-button">{{ $t("getlink.continue") }}</v-btn>
+        <v-btn color="black" depressed text block @click.stop="getDifferentLink" class="text-button">{{ $t("getlink.different_link") }}</v-btn>
+      </div>
     </div>
     <div :class="{ 'toast-at-bottom': true, 'visible': showQRCopiedToast }">{{ $t("getlink.qr_image_copied") }}</div>
   </div>
@@ -78,25 +80,7 @@ export default {
   mixins: [rememberMeMixin, logoMixin],
   components: { InteractiveAuth, CopyLink },
   data() {
-    return {
-      user: new User(this.$config.defaultServer, "", ""),
-      isValid: false,
-      loading: false,
-      message: "",
-      userErrorMessage: null,
-      passErrorMessage: null,
-      hasError: false,
-      currentLoginServer: "",
-      loadingLoginFlows: false,
-      loginFlows: null,
-      showPasswordField: false,
-      showPasswordConfirmField: false,
-      passwordConfirm: "",
-      showPassword1: false,
-      showPassword2: false,
-      passwordValidation: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{12,20}$/,
-      showQRCopiedToast: false
-    };
+    return this.defaultData();
   },
   computed: {
     loggedIn() {
@@ -129,9 +113,37 @@ export default {
     }
   },
   methods: {
+    defaultData() {
+return {
+      user: new User(this.$config.defaultServer, "", ""),
+      isValid: false,
+      loading: false,
+      message: "",
+      userErrorMessage: null,
+      passErrorMessage: null,
+      hasError: false,
+      currentLoginServer: "",
+      loadingLoginFlows: false,
+      loginFlows: null,
+      showPasswordFields: true,
+      passwordConfirm: "",
+      showPassword1: false,
+      showPassword2: false,
+      passwordValidation: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{12,20}$/,
+      showQRCopiedToast: false
+    };
+    },
     goHome() {
       this.$navigation.push({ name: "Home" }, -1);
     },
+    getDifferentLink() {
+      this.$store.dispatch("logout");
+      this.$nextTick(() => {
+        // Reset
+        const obj = this.defaultData();
+        Object.keys(obj).forEach(k => this[k] = obj[k]);
+      })
+    },
     handleLogin() {
       if (this.user.user_id && this.user.password) {
         // Reset errors
@@ -178,7 +190,6 @@ export default {
     },
     onPasswordEntered() {
       if (this.validPassword(this.user.password)) {
-        this.showPasswordConfirmField = true;
         this.$nextTick(() => {
           this.$refs.passwordConfirm.focus();
         });
@@ -190,8 +201,7 @@ export default {
       const server = user.home_server || this.$config.defaultServer;
       if (server !== this.currentLoginServer) {
 
-        this.showPasswordField = false;
-        this.showPasswordConfirmField = false;
+        this.showPasswordFields = false;
 
         this.currentLoginServer = server;
         this.loadingLoginFlows = true;
@@ -207,8 +217,8 @@ export default {
           } else {
             this.message = "";
             this.hasError = false;
-            this.showPasswordField = this.loginFlows.some(f => f.type == "m.login.password");
-            if (this.showPasswordField) {
+            this.showPasswordFields = this.loginFlows.some(f => f.type == "m.login.password");
+            if (this.showPasswordFields) {
               this.$nextTick(() => {
                 this.$refs.password.focus();
               });