From 56c6288c072ad647565e41d191b763b3cfd2f891 Mon Sep 17 00:00:00 2001
From: budaeva <47611627+budaeva@users.noreply.github.com>
Date: Wed, 18 May 2022 10:25:31 +0700
Subject: [PATCH] Fix invite link (#1781)

Signed-off-by: budaeva <irina.budaeva@xored.com>
---
 plugins/login-assets/assets/icons.svg         | 26 +++++++++++
 plugins/login-assets/lang/en.json             |  1 +
 plugins/login-assets/lang/ru.json             |  1 +
 plugins/login-assets/src/index.ts             |  9 +++-
 plugins/login-resources/package.json          |  3 +-
 .../src/components/InviteLink.svelte          | 32 +++++++++++---
 .../components/icons/InviteWorkspace.svelte   | 44 +++++++++++++++++++
 plugins/login-resources/src/plugin.ts         |  1 +
 plugins/login/src/index.ts                    |  3 ++
 .../src/components/Settings.svelte            |  6 ++-
 .../src/components/AccountPopup.svelte        |  5 ++-
 11 files changed, 118 insertions(+), 13 deletions(-)
 create mode 100644 plugins/login-assets/assets/icons.svg
 create mode 100644 plugins/login-resources/src/components/icons/InviteWorkspace.svelte

diff --git a/plugins/login-assets/assets/icons.svg b/plugins/login-assets/assets/icons.svg
new file mode 100644
index 0000000000..45e4d95902
--- /dev/null
+++ b/plugins/login-assets/assets/icons.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="inviteWorkspace" viewBox="0 0 16 16">
+    <path
+      d="M10.2857 5.44444C10.2857 6.79447 9.26237 7.88889 8 7.88889C6.73764 7.88889 5.71429 6.79447 5.71429 5.44444C5.71429 4.09441 6.73764 3 8 3C9.26237 3 10.2857 4.09441 10.2857 5.44444Z"
+    />
+    <path
+      d="M3.42857 11.9603C3.42857 10.9748 3.98128 10.081 4.85831 9.7786C5.79546 9.45545 7.02325 9.11111 8 9.11111C8.97675 9.11111 10.2045 9.45545 11.1417 9.77859C12.0187 10.081 12.5714 10.9748 12.5714 11.9603V12.7778C12.5714 13.4528 12.0598 14 11.4286 14H4.57143C3.94025 14 3.42857 13.4528 3.42857 12.7778V11.9603Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.63272 4.75066C4.59249 4.97531 4.57143 5.20725 4.57143 5.44444C4.57143 6.00206 4.68782 6.5306 4.89604 7.00381C4.59565 7.53433 4.05083 7.88889 3.42857 7.88889C2.4818 7.88889 1.71429 7.06808 1.71429 6.05556C1.71429 5.04303 2.4818 4.22222 3.42857 4.22222C3.89788 4.22222 4.32315 4.42391 4.63272 4.75066Z"
+    />
+    <path
+      d="M2.28571 12.7778V11.9603C2.28571 10.8522 2.76028 9.77952 3.59669 9.11537C3.5397 9.11257 3.48361 9.11111 3.42857 9.11111C2.69601 9.11111 1.77516 9.36937 1.0723 9.61172C0.414531 9.83853 0 10.5089 0 11.248V11.8611C0 12.3674 0.383756 12.7778 0.857143 12.7778H2.28571Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3716 4.75066C11.4118 4.97531 11.4329 5.20725 11.4329 5.44444C11.4329 6.00206 11.3166 6.5306 11.1086 7.00381C11.4087 7.53433 11.953 7.88889 12.5747 7.88889C13.5205 7.88889 14.2873 7.06808 14.2873 6.05556C14.2873 5.04303 13.5205 4.22222 12.5747 4.22222C12.1058 4.22222 11.6809 4.42391 11.3716 4.75066Z"
+    />
+    <path
+      d="M13.7164 12.7778V11.9603C13.7164 10.8522 13.2423 9.77952 12.4067 9.11537C12.4636 9.11257 12.5197 9.11111 12.5747 9.11111C13.3065 9.11111 14.2265 9.36937 14.9287 9.61172C15.5859 9.83853 16 10.5089 16 11.248V11.8611C16 12.3674 15.6166 12.7778 15.1437 12.7778H13.7164Z"
+    />
+  </symbol>
+</svg>
diff --git a/plugins/login-assets/lang/en.json b/plugins/login-assets/lang/en.json
index c063166fa4..5cb068860c 100644
--- a/plugins/login-assets/lang/en.json
+++ b/plugins/login-assets/lang/en.json
@@ -21,6 +21,7 @@
     "HaveAccount": "Already have an account?",
     "SelectWorkspace": "Select workspace",
     "Copy": "Copy",
+    "Copied": "Copied",
     "Close": "Close",
     "InviteDescription": "Share this link to invite other users",
     "WantAnotherWorkspace": "Want to create another workspace?",
diff --git a/plugins/login-assets/lang/ru.json b/plugins/login-assets/lang/ru.json
index 6bf5ecdd6b..7596f1cd6e 100644
--- a/plugins/login-assets/lang/ru.json
+++ b/plugins/login-assets/lang/ru.json
@@ -21,6 +21,7 @@
     "HaveAccount": "Уже есть учетная запись?",
     "SelectWorkspace": "Выбрать рабочее пространство",
     "Copy": "Копировать",
+    "Copied": "Скопировано",
     "Close": "Закрыть",
     "InviteDescription": "Поделитесь ссылкой чтобы пригласить других участников",
     "WantAnotherWorkspace": "Хотите создать другое рабочее пространство?",
diff --git a/plugins/login-assets/src/index.ts b/plugins/login-assets/src/index.ts
index 78da3c6783..d2f68b6efc 100644
--- a/plugins/login-assets/src/index.ts
+++ b/plugins/login-assets/src/index.ts
@@ -14,9 +14,14 @@
 // limitations under the License.
 //
 
-import { addStringsLoader } from '@anticrm/platform'
-import { loginId } from '@anticrm/login'
+import { addStringsLoader, loadMetadata } from '@anticrm/platform'
+import login, { loginId } from '@anticrm/login'
 
 addStringsLoader(loginId, async (lang: string) => {
   return await import(`../lang/${lang}.json`)
 })
+
+const icons = require('../assets/icons.svg') as string // eslint-disable-line
+loadMetadata(login.icon, {
+  InviteWorkspace: `${icons}#inviteWorkspace`
+})
diff --git a/plugins/login-resources/package.json b/plugins/login-resources/package.json
index 8b0ad74115..e352e4b872 100644
--- a/plugins/login-resources/package.json
+++ b/plugins/login-resources/package.json
@@ -34,6 +34,7 @@
     "svelte": "^3.47",
     "@anticrm/login": "~0.6.1",
     "@anticrm/ui": "~0.6.0",
-    "@anticrm/workbench": "~0.6.1"
+    "@anticrm/workbench": "~0.6.1",
+    "@anticrm/core": "~0.6.16"
   }
 }
diff --git a/plugins/login-resources/src/components/InviteLink.svelte b/plugins/login-resources/src/components/InviteLink.svelte
index 90986547cb..6e3a4571cb 100644
--- a/plugins/login-resources/src/components/InviteLink.svelte
+++ b/plugins/login-resources/src/components/InviteLink.svelte
@@ -14,10 +14,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, getCurrentLocation, Label, locationToUrl } from '@anticrm/ui'
+  import { Timestamp } from '@anticrm/core'
+  import { Button, getCurrentLocation, Label, locationToUrl, ticker } from '@anticrm/ui'
   import { getWorkspaceHash } from '../utils'
   import { createEventDispatcher } from 'svelte'
   import login from '../plugin'
+  import InviteWorkspace from './icons/InviteWorkspace.svelte'
 
   const dispatch = createEventDispatcher()
 
@@ -30,32 +32,46 @@
     loc.query = {
       workspace: hash
     }
+    loc.fragment = undefined
+
     const link = locationToUrl(loc)
     return document.location.origin + link
   }
 
+  let copiedTime: Timestamp | undefined
+  let copied = false
+  $: {
+    if (copiedTime) {
+      if (copied && $ticker - copiedTime > 1000) {
+        copied = false
+      }
+    }
+  }
   function copy (link: string): void {
     navigator.clipboard.writeText(link)
+    copied = true
+    copiedTime = Date.now()
   }
 </script>
 
-<div class="popup">
-  <div class="fs-title flex-center">
+<div class="antiPopup popup">
+  <div class="flex-between fs-title">
     <Label label={login.string.InviteDescription} />
+    <InviteWorkspace size="large" />
   </div>
   {#await getLink() then link}
-    <div class="link">{link}</div>
+    <div class="over-underline link" on:click={() => copy(link)}>{link}</div>
     <div class="buttons flex">
       <Button
-        label={login.string.Copy}
-        size={'small'}
+        label={copied ? login.string.Copied : login.string.Copy}
+        size={'medium'}
         on:click={() => {
           copy(link)
         }}
       />
       <Button
         label={login.string.Close}
-        size={'small'}
+        size={'medium'}
         kind={'primary'}
         on:click={() => {
           dispatch('close')
@@ -74,11 +90,13 @@
     background-color: var(--theme-button-bg-hovered);
     border: 1px solid var(--theme-button-border-enabled);
     border-radius: 0.75rem;
+    min-width: 30rem;
     filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
 
     .link {
       margin-top: 2rem;
       margin-bottom: 2rem;
+      overflow-wrap: break-word;
     }
 
     .buttons {
diff --git a/plugins/login-resources/src/components/icons/InviteWorkspace.svelte b/plugins/login-resources/src/components/icons/InviteWorkspace.svelte
new file mode 100644
index 0000000000..b0c9f14578
--- /dev/null
+++ b/plugins/login-resources/src/components/icons/InviteWorkspace.svelte
@@ -0,0 +1,44 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.2857 5.44444C10.2857 6.79447 9.26237 7.88889 8 7.88889C6.73764 7.88889 5.71429 6.79447 5.71429 5.44444C5.71429 4.09441 6.73764 3 8 3C9.26237 3 10.2857 4.09441 10.2857 5.44444Z"
+  />
+  <path
+    d="M3.42857 11.9603C3.42857 10.9748 3.98128 10.081 4.85831 9.7786C5.79546 9.45545 7.02325 9.11111 8 9.11111C8.97675 9.11111 10.2045 9.45545 11.1417 9.77859C12.0187 10.081 12.5714 10.9748 12.5714 11.9603V12.7778C12.5714 13.4528 12.0598 14 11.4286 14H4.57143C3.94025 14 3.42857 13.4528 3.42857 12.7778V11.9603Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.63272 4.75066C4.59249 4.97531 4.57143 5.20725 4.57143 5.44444C4.57143 6.00206 4.68782 6.5306 4.89604 7.00381C4.59565 7.53433 4.05083 7.88889 3.42857 7.88889C2.4818 7.88889 1.71429 7.06808 1.71429 6.05556C1.71429 5.04303 2.4818 4.22222 3.42857 4.22222C3.89788 4.22222 4.32315 4.42391 4.63272 4.75066Z"
+  />
+  <path
+    d="M2.28571 12.7778V11.9603C2.28571 10.8522 2.76028 9.77952 3.59669 9.11537C3.5397 9.11257 3.48361 9.11111 3.42857 9.11111C2.69601 9.11111 1.77516 9.36937 1.0723 9.61172C0.414531 9.83853 0 10.5089 0 11.248V11.8611C0 12.3674 0.383756 12.7778 0.857143 12.7778H2.28571Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.3716 4.75066C11.4118 4.97531 11.4329 5.20725 11.4329 5.44444C11.4329 6.00206 11.3166 6.5306 11.1086 7.00381C11.4087 7.53433 11.953 7.88889 12.5747 7.88889C13.5205 7.88889 14.2873 7.06808 14.2873 6.05556C14.2873 5.04303 13.5205 4.22222 12.5747 4.22222C12.1058 4.22222 11.6809 4.42391 11.3716 4.75066Z"
+  />
+  <path
+    d="M13.7164 12.7778V11.9603C13.7164 10.8522 13.2423 9.77952 12.4067 9.11537C12.4636 9.11257 12.5197 9.11111 12.5747 9.11111C13.3065 9.11111 14.2265 9.36937 14.9287 9.61172C15.5859 9.83853 16 10.5089 16 11.248V11.8611C16 12.3674 15.6166 12.7778 15.1437 12.7778H13.7164Z"
+  />
+</svg>
diff --git a/plugins/login-resources/src/plugin.ts b/plugins/login-resources/src/plugin.ts
index 8c01b96c56..c34a6664d1 100644
--- a/plugins/login-resources/src/plugin.ts
+++ b/plugins/login-resources/src/plugin.ts
@@ -42,6 +42,7 @@ export default mergeIds(loginId, login, {
     SelectWorkspace: '' as IntlString,
     DoNotHaveAnAccount: '' as IntlString,
     Copy: '' as IntlString,
+    Copied: '' as IntlString,
     Close: '' as IntlString,
     InviteDescription: '' as IntlString,
     WantAnotherWorkspace: '' as IntlString,
diff --git a/plugins/login/src/index.ts b/plugins/login/src/index.ts
index 17c0a23022..7ff6fdf682 100644
--- a/plugins/login/src/index.ts
+++ b/plugins/login/src/index.ts
@@ -39,5 +39,8 @@ export default plugin(loginId, {
   component: {
     LoginApp: '' as AnyComponent,
     InviteLink: '' as AnyComponent
+  },
+  icon: {
+    InviteWorkspace: '' as Asset
   }
 })
diff --git a/plugins/setting-resources/src/components/Settings.svelte b/plugins/setting-resources/src/components/Settings.svelte
index 307d22e4d1..3243cf588e 100644
--- a/plugins/setting-resources/src/components/Settings.svelte
+++ b/plugins/setting-resources/src/components/Settings.svelte
@@ -75,7 +75,11 @@
     {/each}
     <div class="signout">
       <CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut} />
-      <CategoryElement label={setting.string.InviteWorkspace} on:click={inviteWorkspace} />
+      <CategoryElement
+        icon={login.icon.InviteWorkspace}
+        label={setting.string.InviteWorkspace}
+        on:click={inviteWorkspace}
+      />
       <CategoryElement
         icon={setting.icon.SelectWorkspace}
         label={setting.string.SelectWorkspace}
diff --git a/plugins/workbench-resources/src/components/AccountPopup.svelte b/plugins/workbench-resources/src/components/AccountPopup.svelte
index 699a4a3848..2223e16945 100644
--- a/plugins/workbench-resources/src/components/AccountPopup.svelte
+++ b/plugins/workbench-resources/src/components/AccountPopup.svelte
@@ -121,9 +121,10 @@
           <Label label={setting.string.SelectWorkspace} />
         </button>
         <button class="menu-item" on:click={inviteWorkspace}>
-          <div class="ml-6">
-            <Label label={setting.string.InviteWorkspace} />
+          <div class="mr-2">
+            <Icon icon={login.icon.InviteWorkspace} size={'small'} />
           </div>
+          <Label label={setting.string.InviteWorkspace} />
         </button>
         <button class="menu-item" on:click={signOut}>
           <div class="mr-2">