Fix password bugs (#2235)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

plugins/setting-resources/src/components/Password.svelte

@@ -17,12 +17,15 @@
   import presentation from '@anticrm/presentation'
   import { Button, EditBox, Icon, Label } from '@anticrm/ui'
   import { changePassword } from '@anticrm/login-resources'
+  import Error from './icons/Error.svelte'
+  import plugin from '../plugin'
 
   let oldPassword: string = ''
   let password: string = ''
   let password2: string = ''
   let label = presentation.string.Save
   let saved = false
+  let error = false
 
   $: disabled =
     password.length === 0 || oldPassword.length === 0 || oldPassword === password || password !== password2 || saved
@@ -37,8 +40,16 @@
       console.log(e)
       label = presentation.string.Save
       saved = false
+      error = true
     }
   }
+
+  function updateSaved (p1: string, p2: string, p3: string): void {
+    saved = false
+    label = presentation.string.Save
+    error = false
+  }
+  $: updateSaved(oldPassword, password, password2)
 </script>
 
 <div class="antiComponent">
@@ -48,6 +59,12 @@
   </div>
   <div class="flex-row-stretch flex-grow p-10">
     <div class="flex-grow flex-col">
+      {#if error}
+        <div class="flex-row-center gap-2">
+          <Icon icon={Error} size={'medium'} />
+          <Label label={plugin.string.FailedToSave} />
+        </div>
+      {/if}
       <div class="flex-grow flex-col">
         <div>
           <EditBox

plugins/setting-resources/src/components/Settings.svelte

@@ -32,6 +32,7 @@
   import { EmployeeAccount } from '@anticrm/contact'
   import { setMetadata } from '@anticrm/platform'
 
+  export let visibileNav = true
   let category: SettingsCategory | undefined
   let categoryId: string = ''
 
@@ -86,44 +87,54 @@
 </script>
 
 <div class="flex h-full">
-  <div class="antiPanel-navigator filled indent">
-    <div class="antiNav-header">
-      <span class="fs-title overflow-label">
-        <Label label={setting.string.Settings} />
-      </span>
+  {#if visibileNav}
+    <div class="antiPanel-navigator filled indent">
+      <div class="antiNav-header">
+        <span class="fs-title overflow-label">
+          <Label label={setting.string.Settings} />
+        </span>
+      </div>
+      {#each categories as category, i}
+        {#if i > 0 && categories[i - 1].group !== category.group}
+          <div class="antiNav-divider short line" />
+        {/if}
+        <CategoryElement
+          icon={category.icon}
+          label={category.label}
+          selected={category.name === categoryId}
+          expandable={category._id === setting.ids.Setting}
+          on:click={() => {
+            selectCategory(category.name)
+          }}
+        />
+      {/each}
+      <div class="signout">
+        <CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut} />
+        <CategoryElement
+          icon={login.icon.InviteWorkspace}
+          label={setting.string.InviteWorkspace}
+          on:click={inviteWorkspace}
+        />
+        <CategoryElement
+          icon={setting.icon.SelectWorkspace}
+          label={setting.string.SelectWorkspace}
+          on:click={selectWorkspace}
+        />
+      </div>
     </div>
-    {#each categories as category, i}
-      {#if i > 0 && categories[i - 1].group !== category.group}
-        <div class="antiNav-divider short line" />
-      {/if}
-      <CategoryElement
-        icon={category.icon}
-        label={category.label}
-        selected={category.name === categoryId}
-        expandable={category._id === setting.ids.Setting}
-        on:click={() => {
-          selectCategory(category.name)
-        }}
-      />
-    {/each}
-    <div class="signout">
-      <CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut} />
-      <CategoryElement
-        icon={login.icon.InviteWorkspace}
-        label={setting.string.InviteWorkspace}
-        on:click={inviteWorkspace}
-      />
-      <CategoryElement
-        icon={setting.icon.SelectWorkspace}
-        label={setting.string.SelectWorkspace}
-        on:click={selectWorkspace}
-      />
-    </div>
-  </div>
+  {/if}
 
   <div class="antiPanel-component border-left filled">
     {#if category}
-      <Component is={category.component} />
+      <Component
+        is={category.component}
+        props={{
+          visibileNav,
+          onFirstCategory: () => {
+            selectCategory(categories[0].name)
+          }
+        }}
+      />
     {/if}
   </div>
 </div>

plugins/setting-resources/src/components/WorkspaceSettings.svelte

@@ -17,7 +17,7 @@
   import { AccountRole, getCurrentAccount } from '@anticrm/core'
   import { createQuery } from '@anticrm/presentation'
   import setting, { SettingsCategory } from '@anticrm/setting'
-  import { Component, getCurrentLocation, Label, location, navigate } from '@anticrm/ui'
+  import ui, { Button, Component, getCurrentLocation, IconBack, Label, location, navigate } from '@anticrm/ui'
   import { onDestroy } from 'svelte'
   import CategoryElement from './CategoryElement.svelte'
 
@@ -27,6 +27,9 @@
   let categories: SettingsCategory[] = []
   const account = getCurrentAccount() as EmployeeAccount
 
+  export let visibileNav = true
+  export let onFirstCategory: () => void
+
   const settingsQuery = createQuery()
   settingsQuery.query(
     setting.class.WorkspaceSettingCategory,
@@ -58,23 +61,34 @@
 </script>
 
 <div class="flex h-full">
-  <div class="antiPanel-navigator filled indent">
-    <div class="antiNav-header">
-      <span class="fs-title overflow-label">
-        <Label label={setting.string.WorkspaceSetting} />
-      </span>
+  {#if visibileNav}
+    <div class="antiPanel-navigator filled indent">
+      <div class="antiNav-header">
+        <div class="flex-row-center gap-2">
+          <Button
+            kind={'link'}
+            icon={IconBack}
+            label={ui.string.Back}
+            on:click={() => onFirstCategory()}
+            size={'small'}
+          />
+          <span class="fs-title overflow-label">
+            <Label label={setting.string.WorkspaceSetting} />
+          </span>
+        </div>
+      </div>
+      {#each categories as category}
+        <CategoryElement
+          icon={category.icon}
+          label={category.label}
+          selected={category.name === categoryId}
+          on:click={() => {
+            selectCategory(category.name)
+          }}
+        />
+      {/each}
     </div>
-    {#each categories as category}
-      <CategoryElement
-        icon={category.icon}
-        label={category.label}
-        selected={category.name === categoryId}
-        on:click={() => {
-          selectCategory(category.name)
-        }}
-      />
-    {/each}
-  </div>
+  {/if}
 
   <div class="antiPanel-component border-left filled">
     {#if category}

plugins/setting-resources/src/components/icons/Error.svelte

@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="10" cy="10" r="7.275" stroke="#EE7A7A" stroke-width="1.2" />
+  <path
+    d="M9.51371 11.6902L9.51636 11.7875H9.61367H10.4137H10.511L10.5136 11.6902L10.6886 5.27772L10.6914 5.17499H10.5887H9.43867H9.33591L9.33871 5.27772L9.51371 11.6902ZM10.0012 14.375C10.4929 14.375 10.9012 13.9812 10.9012 13.475C10.9012 12.9687 10.4929 12.575 10.0012 12.575C9.50947 12.575 9.10117 12.9687 9.10117 13.475C9.10117 13.9812 9.50947 14.375 10.0012 14.375Z"
+    fill="#EE7A7A"
+    stroke="#EE7A7A"
+    stroke-width="0.2"
+  />
+</svg>