Fix invite link (#1781)

Signed-off-by: budaeva <irina.budaeva@xored.com>

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>

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?",

plugins/login-assets/lang/ru.json

@@ -21,6 +21,7 @@
     "HaveAccount": "Уже есть учетная запись?",
     "SelectWorkspace": "Выбрать рабочее пространство",
     "Copy": "Копировать",
+    "Copied": "Скопировано",
     "Close": "Закрыть",
     "InviteDescription": "Поделитесь ссылкой чтобы пригласить других участников",
     "WantAnotherWorkspace": "Хотите создать другое рабочее пространство?",

plugins/login-assets/src/index.ts

@@ -14,9 +14,14 @@
 // limitations under the License.
 //
 
-import { addStringsLoader } from '@anticrm/platform'
+import { addStringsLoader, loadMetadata } from '@anticrm/platform'
-import { loginId } from '@anticrm/login'
+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`
+})

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"
   }
 }

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="antiPopup popup">
-  <div class="fs-title flex-center">
+  <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}
+        label={copied ? login.string.Copied : login.string.Copy}
-        size={'small'}
+        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 {

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>

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,

plugins/login/src/index.ts

@@ -39,5 +39,8 @@ export default plugin(loginId, {
   component: {
     LoginApp: '' as AnyComponent,
     InviteLink: '' as AnyComponent
+  },
+  icon: {
+    InviteWorkspace: '' as Asset
   }
 })

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}

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">
+          <div class="mr-2">
-            <Label label={setting.string.InviteWorkspace} />
+            <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">