telegram issues fix (#375)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

models/telegram/src/index.ts

@@ -55,4 +55,11 @@ export function createModel (builder: Builder): void {
     icon: telegram.component.IconTelegram,
     createComponent: telegram.component.Connect
   }, telegram.integrationType.Telegram)
+
+  builder.createDoc(core.class.Space, core.space.Model, {
+    name: 'Telegram',
+    description: 'Space for all telegram messages',
+    private: false,
+    members: []
+  }, telegram.space.Telegram)
 }

packages/ui/src/index.ts

@@ -75,6 +75,7 @@ export { default as IconActivity } from './components/icons/Activity.svelte'
 export { default as IconUp } from './components/icons/Up.svelte'
 export { default as IconDown } from './components/icons/Down.svelte'
 export { default as IconEdit } from './components/icons/Edit.svelte'
+export { default as IconInfo } from './components/icons/Info.svelte'
 
 export * from './utils'
 

plugins/telegram-resources/src/components/Connect.svelte

@@ -23,17 +23,19 @@
 
   let requested = false
   let secondFactor = false
+  let connecting = false
   let phone: string = ''
   let code: string = ''
   let password: string = ''
+  let error: string | undefined = undefined
   const url = getMetadata(login.metadata.TelegramUrl)
 
   async function requestCode(): Promise<void> {
     dispatch('close', { value: phone }) //todo, remove after enable service
-    // const res = await sendRequest('/auth', { phone: phone })
-    // if (res.next === 'code') {
-    //   requested = true
-    // }
+    const res = await sendRequest('/auth', { phone: phone })
+    if (res.next === 'code') {
+      requested = true
+    }
   }
 
   async function sendPassword(): Promise<void> {
@@ -53,6 +55,7 @@
   }
 
   async function sendRequest(path: string, data: any): Promise<any> {
+    connecting = true
     const response = await fetch(url + path, {
       method: 'POST',
       headers: {
@@ -62,6 +65,10 @@
       body: serialize(data)
     })
     const res = await response.json()
+    connecting = false
+    if (res.tg_code === 'PHONE_CODE_INVALID') {
+      error = 'Invalid code'
+    }
     if (res.err != null) {
       throw new Error(res.err)
     }
@@ -75,6 +82,27 @@
     requested = false
     secondFactor = false
   }
+
+  $: label = connecting ? 'Connecting...' : (requested || secondFactor ? 'Connect' : 'Next')
+
+  $: disabled = checkDisabled(connecting, secondFactor, password, requested, error, code, phone)
+
+  function checkDisabled (connecting: boolean, secondFactor: boolean, password: string,
+    requested: boolean, error: string | undefined, code: string, phone: string): boolean {
+    if (connecting) return true
+    if (secondFactor) return password.length === 0
+    if (requested) {
+      if (error !== undefined) return true
+      return !code.match(/^\d{5}$/)
+    }
+    return !phone.match(/^\+\d{9,15}$/)
+  }
+
+  function click () {
+    if (secondFactor) return sendPassword()
+    if (requested) return sendCode()
+    return requestCode()
+  }
 </script>
 
 <div class="card">
@@ -94,24 +122,19 @@
     {#if secondFactor}
       <p><Label label={'Enter your second factor password'} /></p>
       <EditBox label={'Password'} password placeholder={'password'} bind:value={password} />
-      <div class="footer">
-        <Button label={'Connect'} primary disabled={!password.length} on:click={sendPassword} />
-        <a class="link" href={'#'} on:click={back}><Label label={'Back'} /></a>
-      </div>
     {:else if requested}
       <p><Label label={'Enter the 5-digit code you received on your Telegram account.'} /></p>
-      <PinPad length={5} bind:value={code} />
-      <div class="footer">
-        <Button label={'Connect'} primary disabled={!code.match(/^\d{5}$/)} on:click={sendCode} />
-        <a class="link" href={'#'} on:click={back}><Label label={'Back'} /></a>
-      </div>
+      <PinPad length={5} bind:value={code} bind:error={error} />
     {:else}
       <p><Label label={'Enter your Telegram phone number to connect your account.'} /></p>
       <EditBox label={'Phone number'} placeholder={'+1 555 333 7777'} bind:value={phone} />
-      <div class="footer">
-        <Button label={'Next'} primary disabled={!phone.match(/^\+\d{9,15}$/)} on:click={requestCode} />
-      </div>
     {/if}
+      <div class="footer">
+        <Button {label} primary {disabled} on:click={click} />
+        {#if requested || secondFactor}
+          <a class="link" href={'#'} on:click={back}><Label label={'Back'} /></a>
+        {/if}
+      </div>
   </div>
 </div>
 
@@ -154,7 +177,7 @@
         flex-direction: row-reverse;
         justify-content: space-between;
         align-items: center;
-        padding: 1rem 1.75rem 1.75rem;
+        padding: 1rem 0.1rem;
 
         .link {
           color: var(--theme-content-dark-color);

plugins/telegram-resources/src/components/PinPad.svelte

@@ -15,9 +15,11 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { createEventDispatcher } from 'svelte'
+  import { IconInfo } from '@anticrm/ui'
 
   export let length: number = 6
   export let value: string = ''
+  export let error: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -29,8 +31,10 @@
   for (let i = 0; i < length; i++) digits[i] = ''
 
   const onInput = (ev?: Event, n?: number): void => {
+    error = undefined
     selected = -1
     filled = 0
+    value = ''
     for (let i = 0; i < length; i++) {
       if (digits[i] && digits[i].length > 1) {
         if (i < length - 1) digits[i + 1] = digits[i].substring(1)
@@ -38,14 +42,13 @@
       }
       if (digits[i]) filled++
       if (selected < 0 && selected < length && digits[i] === '') selected = i
+      value += digits[i]
     }
     digits = digits
     if (filled === length) {
       if ((ev as InputEvent).inputType === 'insertFromPaste' && n && n < length) selected = n
       if ((ev as InputEvent).inputType === 'insertText' && selected < 0 && (n || n === 0)) selected = n + 1
       if (selected === length) selected--
-      value = ''
-      for (let i = 0; i < length; i++) value += digits[i]
       dispatch('filled', value)
     }
     if (selected !== -1 && selected < length) {
@@ -78,6 +81,7 @@
   {#each digits as digit, i}
     <input
       class="fs-title digit"
+      class:error
       type="text"
       bind:this={areas[i]}
       bind:value={digit}
@@ -89,6 +93,12 @@
     />
   {/each}
 </div>
+{#if error}
+  <div class='error-message flex-row-center'>
+    <IconInfo size={'small'}/>
+    <div>{error}</div>
+  </div>
+{/if}
 
 <style lang="scss">
   .digit {
@@ -100,9 +110,24 @@
     border-style: none;
     border-radius: 0.5rem;
 
+    &.error {
+      border: 1.2px solid var(--system-error-color);
+      background-color: #FAA9981A;
+    }
+
     &:focus {
       border: 1px solid var(--primary-button-focused-border);
       box-shadow: 0 0 0 3px var(--primary-button-outline);
     }
   }
+
+  .error-message {
+    margin-top: 0.5rem;
+    margin-left: 0.2rem;
+    color: var(--system-error-color);
+
+    div {
+      margin-left: 0.3rem;
+    }
+  }
 </style>

plugins/telegram/src/index.ts

@@ -15,7 +15,7 @@
 
 import { plugin } from '@anticrm/platform'
 import type { Plugin } from '@anticrm/platform'
-import type { Doc, Ref, Class } from '@anticrm/core'
+import type { Doc, Ref, Class, Space } from '@anticrm/core'
 import type { AnyComponent } from '@anticrm/ui'
 import type { IntegrationType } from '@anticrm/setting'
 
@@ -45,5 +45,8 @@ export default plugin(telegramId, {
   },
   class: {
     Message: '' as Ref<Class<TelegramMessage>>
+  },
+  space: {
+    Telegram: '' as Ref<Space>
   }
 })