UBER-377: Fix login (#3358)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
Signed-off-by: Alexander Platov <sas_lord@mail.ru>

common/config/rush/pnpm-lock.yaml

@@ -452,7 +452,7 @@ dependencies:
   '@rush-temp/lead-resources': file:projects/lead-resources.tgz_a1d864769aaf53d09b76fe134ab55e60
   '@rush-temp/login': file:projects/login.tgz
   '@rush-temp/login-assets': file:projects/login-assets.tgz_typescript@4.8.4
-  '@rush-temp/login-resources': file:projects/login-resources.tgz_a1d864769aaf53d09b76fe134ab55e60
+  '@rush-temp/login-resources': file:projects/login-resources.tgz_6b663ee09b2196220fd64c9f6c0fe6d4
   '@rush-temp/middleware': file:projects/middleware.tgz
   '@rush-temp/minio': file:projects/minio.tgz
   '@rush-temp/model': file:projects/model.tgz
@@ -16495,6 +16495,23 @@ packages:
       punycode: 2.1.1
     dev: false
 
+  /url-loader/4.1.1_file-loader@6.2.0+webpack@5.75.0:
+    resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      file-loader: '*'
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      file-loader:
+        optional: true
+    dependencies:
+      file-loader: 6.2.0_webpack@5.75.0
+      loader-utils: 2.0.4
+      mime-types: 2.1.35
+      schema-utils: 3.1.1
+      webpack: 5.75.0_c5a9b74f1e48ccd7ef01359287c5ad78
+    dev: false
+
   /url-parse/1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
     dependencies:
@@ -17160,7 +17177,7 @@ packages:
     dev: false
 
   file:projects/account.tgz_bufferutil@4.0.7:
-    resolution: {integrity: sha512-baPWYIMSu02ZqsK1UY9gUO2dsdHSRgwPr8zxLOtl0PW9uzlFiW3QBF3mccPOg5KRbn9lMu09cEv1m0IVXbJ+ug==, tarball: file:projects/account.tgz}
+    resolution: {integrity: sha512-wFsMbYAgJVzoIL3Q/RDCuQEtSG+/9n2pxt7SSMY9pcl6t3CuW5QtrjWszLGs+LKbqhmWiVVDJEK/7naWcm0J7Q==, tarball: file:projects/account.tgz}
     id: file:projects/account.tgz
     name: '@rush-temp/account'
     version: 0.0.0
@@ -18632,8 +18649,8 @@ packages:
       - typescript
     dev: false
 
-  file:projects/login-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
+  file:projects/login-resources.tgz_6b663ee09b2196220fd64c9f6c0fe6d4:
-    resolution: {integrity: sha512-RGXKBQhU8Jy6/mvZPk9rWS+nPrSaDdqKVgPAlKe/z28BG0Sbt0oi+ANNdYbfIgJI6E5o483HwMFm1nlLIgxoVg==, tarball: file:projects/login-resources.tgz}
+    resolution: {integrity: sha512-r5B2Yb5okUeMrcW08WrB4FYijiPPIwr/fO50FIv5zjEkSMjbLJFIrXKOTdiXGGmnVqlPsd0AhLCPjPQhFC3SSA==, tarball: file:projects/login-resources.tgz}
     id: file:projects/login-resources.tgz
     name: '@rush-temp/login-resources'
     version: 0.0.0
@@ -18654,9 +18671,11 @@ packages:
       svelte-loader: 3.1.4_svelte@3.55.1
       svelte-preprocess: 5.0.3_6420a3eba9d5580d9c2f627c17e61722
       typescript: 4.8.4
+      url-loader: 4.1.1_file-loader@6.2.0+webpack@5.75.0
     transitivePeerDependencies:
       - '@babel/core'
       - coffeescript
+      - file-loader
       - less
       - postcss
       - postcss-load-config
@@ -18664,6 +18683,7 @@ packages:
       - stylus
       - sugarss
       - supports-color
+      - webpack
     dev: false
 
   file:projects/login.tgz:

packages/theme/styles/_colors.scss

@@ -73,6 +73,14 @@
   --theme-button-disabled-color: rgba(255, 255, 255, .5);
   --theme-button-border: rgba(255, 255, 255, .09);
 
+  --theme-button-contrast-color: #000;
+  --theme-button-contrast-enabled: rgba(255, 255, 255, .8);
+  --theme-button-contrast-hovered: #fff;
+  --theme-button-contrast-pressed: rgba(255, 255, 255, .6);
+  --theme-button-contrast-disabled: rgba(255, 255, 255, .6);
+  --theme-button-contrast-disabled-color: rgba(0, 0, 0, .5);
+  --theme-button-contrast-border: rgba(255, 255, 255, .2);
+
   --theme-refinput-color: rgba(255, 255, 255, .03);
   --theme-refinput-divider: rgba(255, 255, 255, .07);
   --theme-refinput-border: rgba(255, 255, 255, .03);
@@ -256,6 +264,14 @@
   --theme-button-disabled-color: rgba(0, 0, 0, .5);
   --theme-button-border: rgba(0, 0, 0, .09);
 
+  --theme-button-contrast-color: #fff;
+  --theme-button-contrast-enabled: rgba(0, 0, 0, .8);
+  --theme-button-contrast-hovered: #000;
+  --theme-button-contrast-pressed: rgba(0, 0, 0, .6);
+  --theme-button-contrast-disabled: rgba(0, 0, 0, .6);
+  --theme-button-contrast-disabled-color: rgba(255, 255, 255, .5);
+  --theme-button-contrast-border: rgba(0, 0, 0, .2);
+
   --theme-refinput-color: rgba(0, 0, 0, .03);
   --theme-refinput-divider: rgba(0, 0, 0, .07);
   --theme-refinput-border: rgba(0, 0, 0, .03);

packages/theme/styles/button.scss

@@ -311,6 +311,30 @@
       background-color: var(--primary-button-disabled);
     }
   }
+  &.contrast {
+    padding: .75rem 1rem;
+    font-weight: 500;
+    color: var(--theme-button-contrast-color);
+    background-color: var(--theme-button-contrast-enabled);
+    border-color: var(--theme-button-contrast-border);
+
+    .btn-icon {
+      color: var(--theme-button-contrast-color);
+    }
+    &:hover {
+      background-color: var(--theme-button-contrast-hovered);
+    }
+    &:active {
+      background-color: var(--theme-button-contrast-pressed);
+    }
+    &:focus {
+      background-color: var(--theme-button-contrast-hovered);
+    }
+    &:disabled {
+      color: var(--theme-button-contrast-disabled-color);
+      background-color: var(--theme-button-contrast-disabled);
+    }
+  }
 
   &.notSelected {
     color: var(--theme-dark-color);

packages/ui/src/types.ts

@@ -125,6 +125,7 @@ export type ButtonKind =
   | 'dangerous'
   | 'list'
   | 'list-header'
+  | 'contrast'
 export type ButtonSize = 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
 export type ButtonShape =
   | 'rectangle'

plugins/login-resources/package.json

@@ -28,7 +28,8 @@
     "eslint": "^8.26.0",
     "prettier": "^2.7.1",
     "svelte-check": "3.2.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "url-loader": "~4.1.1"
   },
   "dependencies": {
     "@hcengineering/platform": "^0.6.9",

plugins/login-resources/src/components/Form.svelte

@@ -109,7 +109,7 @@
   }
 </script>
 
-<form class="container" style:padding={$deviceInfo.docWidth <= 480 ? '1.25rem' : '5rem'}>
+<form class="container" style:padding={$deviceInfo.docWidth <= 480 ? '.25rem 1.25rem' : '4rem 5rem'}>
   <div class="grow-separator" />
   <div class="title"><Label label={caption} /></div>
   <div class="status">
@@ -135,7 +135,7 @@
       <div class="form-row send">
         <Button
           label={action.i18n}
-          kind={'primary'}
+          kind={'contrast'}
           shape={'round2'}
           size={'x-large'}
           width="100%"
@@ -176,11 +176,12 @@
 
 <style lang="scss">
   .container {
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    flex-grow: 1;
+    // width: 100%;
-    overflow: hidden;
+    // flex-grow: 1;
     // height: 100%;
     // padding: 5rem;
 

plugins/login-resources/src/components/LoginApp.svelte

@@ -32,6 +32,15 @@
   import LoginIcon from './icons/LoginIcon.svelte'
   import workbench from '@hcengineering/workbench'
 
+  import loginBack from '../../img/login_back.png'
+  import loginBack2x from '../../img/login_back_2x.png'
+
+  import loginBackAvif from '../../img/login_back.avif'
+  import loginBack2xAvif from '../../img/login_back_2x.avif'
+
+  import loginBackWebp from '../../img/login_back.webp'
+  import loginBack2xWebp from '../../img/login_back_2x.webp'
+
   export let page: string = 'login'
 
   let navigateUrl: string | undefined
@@ -51,110 +60,162 @@
 </script>
 
 <div class="theme-dark w-full h-full backd" class:paneld={$deviceInfo.docWidth <= 768} class:white={!$themeStore.dark}>
-  <div class:back={$deviceInfo.docWidth > 768} class="w-full h-full">
+  <div class="bg-image clear-mins" class:back={$deviceInfo.docWidth > 768} class:p-4={$deviceInfo.docWidth > 768}>
-    <div style:position="fixed" style:left={'28px'} style:top={'48px'} class="flex-row-center">
+    <picture>
+      <source srcset={`${loginBackAvif}, ${loginBack2xAvif} 2x`} type="image/avif" />
+      <source srcset={`${loginBackWebp}, ${loginBack2xWebp} 2x`} type="image/webp" />
+
+      <img
+        class="back-image"
+        src={loginBack}
+        style:display={$deviceInfo.docWidth <= 768 ? 'none' : 'block'}
+        srcset={`${loginBack} 1x, ${loginBack2x} 2x`}
+        alt=""
+      />
+    </picture>
+
+    <div
+      style:position="fixed"
+      style:left={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.75rem'}
+      style:top={'3rem'}
+      class="flex-row-center"
+    >
       <LoginIcon /><span class="fs-title">{getMetadata(workbench.metadata.PlatformTitle)}</span>
     </div>
 
-    <Scroller padding={'1.25rem'} contentDirection={$deviceInfo.docWidth <= 768 ? 'vertical-reverse' : 'horizontal'}>
+    <div
-      <div class="flex-grow" />
+      class="panel-base"
-      <div
+      class:panel={$deviceInfo.docWidth > 768}
-        class:mt-8={$deviceInfo.docWidth < 768}
+      class:white={!$themeStore.dark}
-        class:panel={$deviceInfo.docWidth > 768}
+      class:minHeight={!$deviceInfo.isPortrait}
-        class:white={!$themeStore.dark}
+      class:landscape={$deviceInfo.docWidth > 768}
-        class:minHeight={!$deviceInfo.isPortrait}
+      style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
-        class:landscape={$deviceInfo.docWidth > 768}
+    >
-        style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
+      <Scroller padding={'1rem 0'}>
-      >
+        <div class="form-content">
-        <div class="flex-grow" />
+          {#if page === 'login'}
-        {#if page === 'login'}
+            <LoginForm {navigateUrl} />
-          <LoginForm {navigateUrl} />
+          {:else if page === 'signup'}
-        {:else if page === 'signup'}
+            <SignupForm />
-          <SignupForm />
+          {:else if page === 'createWorkspace'}
-        {:else if page === 'createWorkspace'}
+            <CreateWorkspaceForm />
-          <CreateWorkspaceForm />
+          {:else if page === 'password'}
-        {:else if page === 'password'}
+            <PasswordRequest />
-          <PasswordRequest />
+          {:else if page === 'recovery'}
-        {:else if page === 'recovery'}
+            <PasswordRestore />
-          <PasswordRestore />
+          {:else if page === 'selectWorkspace'}
-        {:else if page === 'selectWorkspace'}
+            <SelectWorkspace {navigateUrl} />
-          <SelectWorkspace {navigateUrl} />
+          {:else if page === 'join'}
-        {:else if page === 'join'}
+            <Join />
-          <Join />
+          {:else if page === 'confirm'}
-        {:else if page === 'confirm'}
+            <Confirmation />
-          <Confirmation />
+          {:else if page === 'confirmationSend'}
-        {:else if page === 'confirmationSend'}
+            <ConfirmationSend />
-          <ConfirmationSend />
+          {/if}
-        {/if}
+        </div>
-      </div>
+      </Scroller>
-    </Scroller>
+    </div>
+
     <Popup />
   </div>
 </div>
 
 <style lang="scss">
-  .backd {
+  .back-image {
-    background-color: 'rgb(0,0,0)';
+    position: fixed;
-
+    top: 32px;
-    &.paneld {
+    left: 0;
-      background: linear-gradient(180deg, #232324 0%, #171719 100%);
+    width: 100%;
-    }
+    height: 100%;
+    object-fit: cover;
+    object-position: left top;
   }
-  .back {
+  .backd {
-    background-image: url('../../img/login_back.png');
+    position: relative;
-    background-image: -webkit-image-set(
+    background-color: var(--theme-bg-color);
-      '../../img/login_back.avif' 1x,
-      '../../img/login_back_2x.avif' 2x,
-      '../../img/login_back.png' 1x,
-      '../../img/login_back_2x.png' 2x,
-      '../../img/login_back.webp' 1x,
-      '../../img/login_back_2x.webp' 2x,
-      '../../img/login_back.jpg' 1x,
-      '../../img/login_back_2x.jpg' 2x
-    ); /* Temporary fallback for Chrome and Safari browsers until they support 'image-set()' better */
-    background-image: image-set(
-      '../../img/login_back.avif' 1x,
-      '../../img/login_back_2x.avif' 2x,
-      '../../img/login_back.png' 1x,
-      '../../img/login_back_2x.png' 2x,
-      '../../img/login_back.webp' 1x,
-      '../../img/login_back_2x.webp' 2x,
-      '../../img/login_back.jpg' 1x,
-      '../../img/login_back_2x.jpg' 2x
-    );
-    background-size: cover;
-    background-position-y: center;
 
-    background-repeat: no-repeat;
+    .bg-image {
+      display: flex;
+      flex-direction: row-reverse;
+      width: 100%;
+      height: 100%;
+    }
+    &.paneld {
+      background: rgba(45, 50, 160, 0.5);
+
+      .panel-base {
+        padding-top: 4rem;
+        padding-bottom: 1rem;
+        width: 100%;
+      }
+    }
   }
 
   .panel {
     position: relative;
     display: flex;
     flex-direction: column;
-    height: calc(100% - 5rem);
+    justify-content: center;
-    background: linear-gradient(180deg, #232324 0%, #171719 100%);
+    width: 50%;
+    height: 100%;
+    min-width: 35rem;
+    max-width: 41rem;
+    background: rgba(45, 50, 160, 0.5);
+    mix-blend-mode: normal;
+    box-shadow: -30px 1.52px 173.87px #121437;
+    backdrop-filter: blur(157.855px);
+    border-radius: 1rem !important;
 
-    &.white {
-      background: radial-gradient(94.31% 94.31% at 6.36% 5.69%, #484a4f 0%, #505257 100%);
-    }
-    border-radius: 7.5658px !important;
-    box-shadow: 30px 11.52px 193.87px rgba(0, 0, 0, 0.7);
-
-    &.minHeight {
-      min-height: 40rem;
-    }
-
-    &::before,
     &::after {
-      content: '';
+      overflow: hidden;
       position: absolute;
-      border-radius: 50%;
+      content: '';
+      inset: 0;
+      background: radial-gradient(161.92% 96.11% at 11.33% 3.89%, #313d9a 0%, #202669 100%);
+      border-radius: 1rem;
       z-index: -1;
     }
-    &.landscape {
+    &::before {
-      margin-right: 1.25rem;
+      position: absolute;
-      width: 41.75rem;
+      content: '';
+      inset: 0;
+      padding: 1px;
+      background: conic-gradient(
+          rgba(255, 255, 255, 0.18) 10%,
+          rgba(126, 120, 165, 0.5),
+          rgba(191, 216, 253, 0.5),
+          rgba(246, 247, 249, 0.32),
+          rgba(219, 229, 242, 0.34) 60%,
+          rgba(163, 203, 255, 0.24) 90%
+        )
+        border-box;
+      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      border-radius: 1rem;
+      transform: rotate(180deg);
+      transition: opacity 0.15s var(--timing-main);
+      opacity: 0.7;
+      // z-index: -1;
     }
   }
+  .backd.paneld::after,
+  .panel::after {
+    overflow: hidden;
+    position: absolute;
+    content: '';
+    inset: 0;
+    background: radial-gradient(161.92% 96.11% at 11.33% 3.89%, #313d9a 0%, #202669 100%);
+    z-index: -1;
+  }
+  .panel::after {
+    border-radius: 1rem;
+  }
+  .form-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-grow: 1;
+    height: max-content;
+  }
 </style>

plugins/login-resources/src/components/LoginForm.svelte

@@ -114,6 +114,6 @@
   {fields}
   {object}
   {action}
-  bottomActions={[recoveryAction, signUpAction]}
+  bottomActions={[signUpAction, recoveryAction]}
   ignoreInitialValidation
 />

plugins/login-resources/src/components/StatusControl.svelte

@@ -30,15 +30,15 @@
 <style lang="scss">
   .container {
     padding: 0.75rem 1rem;
-    background-color: var(--theme-comp-header-color);
+    background-color: var(--theme-button-enabled);
-    border: 1px solid var(--theme-divider-color);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
   }
 
   .error {
     color: var(--system-error-color);
     fill: var(--system-error-color);
-    background-color: var(--theme-comp-header-color);
+    background-color: var(--theme-button-enabled);
     border-color: var(--system-error-60-color);
   }
 </style>