UBER-377: Fix login (#3358)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com> Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-11-22 21:50:34 +03:00 · 2023-06-07 00:09:35 +07:00 · 2023-06-07 00:09:35 +07:00 · fc6da43c18
commit fc6da43c18
parent 537c872049
17 changed files with 220 additions and 96 deletions
--- a/common/config/rush/pnpm-lock.yaml
+++ b/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:
-    resolution: {integrity: sha512-RGXKBQhU8Jy6/mvZPk9rWS+nPrSaDdqKVgPAlKe/z28BG0Sbt0oi+ANNdYbfIgJI6E5o483HwMFm1nlLIgxoVg==, tarball: file:projects/login-resources.tgz}
+  file:projects/login-resources.tgz_6b663ee09b2196220fd64c9f6c0fe6d4:
+    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:
--- a/packages/theme/styles/_colors.scss
+++ b/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);
--- a/packages/theme/styles/button.scss
+++ b/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);
--- a/packages/ui/src/types.ts
+++ b/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'
--- a/plugins/login-resources/img/login_back.avif
+++ b/plugins/login-resources/img/login_back.avif
--- a/plugins/login-resources/img/login_back.jpg
+++ b/plugins/login-resources/img/login_back.jpg
--- a/plugins/login-resources/img/login_back.png
+++ b/plugins/login-resources/img/login_back.png
--- a/plugins/login-resources/img/login_back.webp
+++ b/plugins/login-resources/img/login_back.webp
--- a/plugins/login-resources/img/login_back_2x.avif
+++ b/plugins/login-resources/img/login_back_2x.avif
--- a/plugins/login-resources/img/login_back_2x.jpg
+++ b/plugins/login-resources/img/login_back_2x.jpg
--- a/plugins/login-resources/img/login_back_2x.png
+++ b/plugins/login-resources/img/login_back_2x.png
--- a/plugins/login-resources/img/login_back_2x.webp
+++ b/plugins/login-resources/img/login_back_2x.webp
--- a/plugins/login-resources/package.json
+++ b/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",
--- a/plugins/login-resources/src/components/Form.svelte
+++ b/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;
-    overflow: hidden;
+    // width: 100%;
+    // flex-grow: 1;
    // height: 100%;
    // padding: 5rem;

--- a/plugins/login-resources/src/components/LoginApp.svelte
+++ b/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 style:position="fixed" style:left={'28px'} style:top={'48px'} class="flex-row-center">
+  <div class="bg-image clear-mins" class:back={$deviceInfo.docWidth > 768} class:p-4={$deviceInfo.docWidth > 768}>
+    <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 class="flex-grow" />
-      <div
-        class:mt-8={$deviceInfo.docWidth < 768}
-        class:panel={$deviceInfo.docWidth > 768}
-        class:white={!$themeStore.dark}
-        class:minHeight={!$deviceInfo.isPortrait}
-        class:landscape={$deviceInfo.docWidth > 768}
-        style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
-      >
-        <div class="flex-grow" />
-        {#if page === 'login'}
-          <LoginForm {navigateUrl} />
-        {:else if page === 'signup'}
-          <SignupForm />
-        {:else if page === 'createWorkspace'}
-          <CreateWorkspaceForm />
-        {:else if page === 'password'}
-          <PasswordRequest />
-        {:else if page === 'recovery'}
-          <PasswordRestore />
-        {:else if page === 'selectWorkspace'}
-          <SelectWorkspace {navigateUrl} />
-        {:else if page === 'join'}
-          <Join />
-        {:else if page === 'confirm'}
-          <Confirmation />
-        {:else if page === 'confirmationSend'}
-          <ConfirmationSend />
-        {/if}
-      </div>
-    </Scroller>
+    <div
+      class="panel-base"
+      class:panel={$deviceInfo.docWidth > 768}
+      class:white={!$themeStore.dark}
+      class:minHeight={!$deviceInfo.isPortrait}
+      class:landscape={$deviceInfo.docWidth > 768}
+      style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
+    >
+      <Scroller padding={'1rem 0'}>
+        <div class="form-content">
+          {#if page === 'login'}
+            <LoginForm {navigateUrl} />
+          {:else if page === 'signup'}
+            <SignupForm />
+          {:else if page === 'createWorkspace'}
+            <CreateWorkspaceForm />
+          {:else if page === 'password'}
+            <PasswordRequest />
+          {:else if page === 'recovery'}
+            <PasswordRestore />
+          {:else if page === 'selectWorkspace'}
+            <SelectWorkspace {navigateUrl} />
+          {:else if page === 'join'}
+            <Join />
+          {:else if page === 'confirm'}
+            <Confirmation />
+          {:else if page === 'confirmationSend'}
+            <ConfirmationSend />
+          {/if}
+        </div>
+      </Scroller>
+    </div>
+
    <Popup />
  </div>
 </div>

 <style lang="scss">
-  .backd {
-    background-color: 'rgb(0,0,0)';
-
-    &.paneld {
-      background: linear-gradient(180deg, #232324 0%, #171719 100%);
-    }
+  .back-image {
+    position: fixed;
+    top: 32px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: left top;
  }
-  .back {
-    background-image: url('../../img/login_back.png');
-    background-image: -webkit-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
-    ); /* 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;
+  .backd {
+    position: relative;
+    background-color: var(--theme-bg-color);

-    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);
-    background: linear-gradient(180deg, #232324 0%, #171719 100%);
+    justify-content: center;
+    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 {
-      margin-right: 1.25rem;
-      width: 41.75rem;
+    &::before {
+      position: absolute;
+      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>
--- a/plugins/login-resources/src/components/LoginForm.svelte
+++ b/plugins/login-resources/src/components/LoginForm.svelte
@ -114,6 +114,6 @@
  {fields}
  {object}
  {action}
-  bottomActions={[recoveryAction, signUpAction]}
+  bottomActions={[signUpAction, recoveryAction]}
  ignoreInitialValidation
 />
--- a/plugins/login-resources/src/components/StatusControl.svelte
+++ b/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);
-    border: 1px solid var(--theme-divider-color);
+    background-color: var(--theme-button-enabled);
+    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>