From 6137f0df2ec9fcbda8847622b1a14e65da029f13 Mon Sep 17 00:00:00 2001
From: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
Date: Mon, 6 Jun 2022 19:45:21 +0600
Subject: [PATCH] Firefox login (#2013)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
---
 .../src/components/Form.svelte                | 39 ++++++++++++++-----
 .../src/components/Join.svelte                |  9 ++++-
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/plugins/login-resources/src/components/Form.svelte b/plugins/login-resources/src/components/Form.svelte
index bbb45953f6..73fc1d81b4 100644
--- a/plugins/login-resources/src/components/Form.svelte
+++ b/plugins/login-resources/src/components/Form.svelte
@@ -41,9 +41,11 @@
   export let status: Status
   export let fields: Field[]
   export let action: Action
-  export let bottomCaption: IntlString
-  export let bottomActionLabel: IntlString
-  export let bottomActionFunc: () => void
+  export let secondaryButtonLabel: IntlString | undefined = undefined
+  export let secondaryButtonAction: (() => void) | undefined = undefined
+  export let bottomCaption: IntlString | undefined = undefined
+  export let bottomActionLabel: IntlString | undefined = undefined
+  export let bottomActionFunc: (() => void) | undefined = undefined
   export let object: any
 
   async function validate () {
@@ -125,17 +127,36 @@
         width="100%"
         loading={inAction}
         disabled={status.severity !== Severity.OK && status.severity !== Severity.ERROR}
-        on:click={() => {
+        on:click={(e) => {
+          e.preventDefault()
           performAction(action)
         }}
       />
     </div>
+    {#if secondaryButtonLabel && secondaryButtonAction}
+      <div class="form-row">
+        <Button
+          label={secondaryButtonLabel}
+          width="100%"
+          on:click={(e) => {
+            e.preventDefault()
+            secondaryButtonAction?.()
+          }}
+        />
+      </div>
+    {/if}
   </div>
-  <div class="grow-separator" />
-  <div class="footer">
-    <span><Label label={bottomCaption} /></span>
-    <a href="." on:click|preventDefault={bottomActionFunc}><Label label={bottomActionLabel} /></a>
-  </div>
+  {#if bottomCaption || (bottomActionLabel && bottomActionFunc)}
+    <div class="grow-separator" />
+    <div class="footer">
+      {#if bottomCaption}
+        <span><Label label={bottomCaption} /></span>
+      {/if}
+      {#if bottomActionLabel && bottomActionFunc}
+        <a href="." on:click|preventDefault={bottomActionFunc}><Label label={bottomActionLabel} /></a>
+      {/if}
+    </div>
+  {/if}
 </form>
 
 <style lang="scss">
diff --git a/plugins/login-resources/src/components/Join.svelte b/plugins/login-resources/src/components/Join.svelte
index 5e243d369c..7381b53c59 100644
--- a/plugins/login-resources/src/components/Join.svelte
+++ b/plugins/login-resources/src/components/Join.svelte
@@ -24,7 +24,6 @@
   import workbench from '@anticrm/workbench'
 
   const location = getCurrentLocation()
-
   let page = 'login'
 
   $: fields =
@@ -83,8 +82,12 @@
     }
   }
 
-  $: bottomCaption = page === 'login' ? login.string.DoNotHaveAnAccount : login.string.DoNotHaveAnAccount
+  $: bottomCaption = page === 'login' ? login.string.DoNotHaveAnAccount : login.string.HaveAccount
   $: bottomActionLabel = page === 'login' ? login.string.SignUp : login.string.LogIn
+  $: secondaryButtonLabel = page === 'login' ? login.string.SignUp : undefined
+  $: secondaryButtonAction = () => {
+    page = 'signUp'
+  }
 </script>
 
 <Form
@@ -93,6 +96,8 @@
   {fields}
   {object}
   {action}
+  {secondaryButtonLabel}
+  {secondaryButtonAction}
   {bottomCaption}
   {bottomActionLabel}
   bottomActionFunc={() => {