fix: Spacing on login form

fix: signup query params overridden unneccessarily closes #3516
2022-05-15 06:57:35 +01:00
parent c205ffbfe9
commit 06d966ad0c
3 changed files with 25 additions and 21 deletions
--- a/app/scenes/Login/AuthenticationProvider.tsx
+++ b/app/scenes/Login/AuthenticationProvider.tsx
@@ -0,0 +1,135 @@
+import { EmailIcon } from "outline-icons";
+import * as React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
+import styled from "styled-components";
+import AuthLogo from "~/components/AuthLogo";
+import ButtonLarge from "~/components/ButtonLarge";
+import InputLarge from "~/components/InputLarge";
+import { client } from "~/utils/ApiClient";
+
+type Props = WithTranslation & {
+  id: string;
+  name: string;
+  authUrl: string;
+  isCreate: boolean;
+  onEmailSuccess: (email: string) => void;
+};
+
+type State = {
+  showEmailSignin: boolean;
+  isSubmitting: boolean;
+  email: string;
+};
+
+class AuthenticationProvider extends React.Component<Props, State> {
+  state = {
+    showEmailSignin: false,
+    isSubmitting: false,
+    email: "",
+  };
+
+  handleChangeEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({
+      email: event.target.value,
+    });
+  };
+
+  handleSubmitEmail = async (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (this.state.showEmailSignin && this.state.email) {
+      this.setState({
+        isSubmitting: true,
+      });
+
+      try {
+        const response = await client.post(event.currentTarget.action, {
+          email: this.state.email,
+        });
+
+        if (response.redirect) {
+          window.location.href = response.redirect;
+        } else {
+          this.props.onEmailSuccess(this.state.email);
+        }
+      } finally {
+        this.setState({
+          isSubmitting: false,
+        });
+      }
+    } else {
+      this.setState({
+        showEmailSignin: true,
+      });
+    }
+  };
+
+  render() {
+    const { isCreate, id, name, authUrl, t } = this.props;
+
+    if (id === "email") {
+      if (isCreate) {
+        return null;
+      }
+
+      return (
+        <Wrapper key="email">
+          <Form
+            method="POST"
+            action="/auth/email"
+            onSubmit={this.handleSubmitEmail}
+          >
+            {this.state.showEmailSignin ? (
+              <>
+                <InputLarge
+                  type="email"
+                  name="email"
+                  placeholder="me@domain.com"
+                  value={this.state.email}
+                  onChange={this.handleChangeEmail}
+                  disabled={this.state.isSubmitting}
+                  autoFocus
+                  required
+                  short
+                />
+                <ButtonLarge type="submit" disabled={this.state.isSubmitting}>
+                  {t("Sign In")} →
+                </ButtonLarge>
+              </>
+            ) : (
+              <ButtonLarge type="submit" icon={<EmailIcon />} fullwidth>
+                {t("Continue with Email")}
+              </ButtonLarge>
+            )}
+          </Form>
+        </Wrapper>
+      );
+    }
+
+    return (
+      <Wrapper key={id}>
+        <ButtonLarge
+          onClick={() => (window.location.href = authUrl)}
+          icon={<AuthLogo providerName={id} />}
+          fullwidth
+        >
+          {t("Continue with {{ authProviderName }}", {
+            authProviderName: name,
+          })}
+        </ButtonLarge>
+      </Wrapper>
+    );
+  }
+}
+
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
+const Form = styled.form`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default withTranslation()(AuthenticationProvider);