From 225fe1ea56c256d7d0ee9cd96e893072876233fa Mon Sep 17 00:00:00 2001
From: Abhijay Jain <Abhijay007j@gmail.com>
Date: Wed, 5 Oct 2022 22:49:30 +0530
Subject: [PATCH] (chore): Added Auth Component for the third theme

---
 src/components/AuthComponent/AuthComponent.md |  0
 .../AuthComponent/AuthComponent.stories.js    | 31 +++++++
 src/components/AuthComponent/index.js         | 68 ++++++++++++++++
 src/components/AuthComponent/style.sass       | 81 +++++++++++++++++++
 4 files changed, 180 insertions(+)
 create mode 100644 src/components/AuthComponent/AuthComponent.md
 create mode 100644 src/components/AuthComponent/AuthComponent.stories.js
 create mode 100644 src/components/AuthComponent/index.js
 create mode 100644 src/components/AuthComponent/style.sass

diff --git a/src/components/AuthComponent/AuthComponent.md b/src/components/AuthComponent/AuthComponent.md
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/AuthComponent/AuthComponent.stories.js b/src/components/AuthComponent/AuthComponent.stories.js
new file mode 100644
index 00000000..edc6194b
--- /dev/null
+++ b/src/components/AuthComponent/AuthComponent.stories.js
@@ -0,0 +1,31 @@
+import React from "react"
+
+import { AuthComponent } from "./index"
+
+import "bootstrap/dist/css/bootstrap.css"
+import { action } from "@storybook/addon-actions"
+
+export default {
+  title: "Theme 3/AuthComponent",
+  component: AuthComponent,
+  argTypes: {
+    mainText: { control: "text" },
+    subText: { control: "text" },
+    declaration: { control: "text" },
+    image: { control: "text" },
+    handleContactSubmit: { control: "function" },
+  },
+}
+
+export const authcomponent = args => (
+  <AuthComponent
+    {...args}
+    handleContactSubmit={action("contact submit")}
+  />
+)
+
+authcomponent.args = {
+  mainText: "Let's get you started!",
+  image:
+    "https://user-images.githubusercontent.com/64387054/193190814-21d2addb-53b0-48e0-bfe6-87f464cd2783.png",
+}
diff --git a/src/components/AuthComponent/index.js b/src/components/AuthComponent/index.js
new file mode 100644
index 00000000..14cdcc38
--- /dev/null
+++ b/src/components/AuthComponent/index.js
@@ -0,0 +1,68 @@
+import React, { useState } from "react"
+import PropTypes from "prop-types"
+import "./style.sass"
+import { Row, Col, Form } from "react-bootstrap"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faGithub } from "@fortawesome/free-brands-svg-icons"
+import { faGoogle } from "@fortawesome/free-brands-svg-icons"
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
+
+export const AuthComponent = ({ mainText, image, handleContactSubmit }) => {
+  const [email, setEmail] = useState("")
+
+  const handleEmail = e => setEmail(e.target.value)
+
+  return (
+    <>
+      <div className="AuthWrapper">
+        <Row>
+          <Col
+            md={5}
+            className="AuthCompLeft"
+            style={{ backgroundImage: `url(${image})` }}
+          >
+            <h1 className="AuthBannerText">
+              Home for the next generation of builders
+            </h1>
+          </Col>
+          <Col md={7} className="AuthCompRight">
+            <h1 className="AuthMainHeading">{mainText}</h1>
+            <Form onSubmit={handleContactSubmit(email)}>
+              <Form.Group controlId="contact-form">
+                <Form.Control
+                  type="email"
+                  placeholder="Email Address"
+                  className="AuthCustomField"
+                  onChange={handleEmail}
+                  required
+                />
+              </Form.Group>
+              <button type="submit" className="AuthGitButton">
+                <FontAwesomeIcon icon={faGithub} className="authGitIcon" />
+                Continue with Github
+                <FontAwesomeIcon className="authArrowIcon" icon={faArrowRight} />
+              </button>
+              <p> or </p>
+              <button type="submit" className="AuthGoogleButton">
+                <FontAwesomeIcon icon={faGoogle}  className= "authGoogleIcon"/>
+                Continue with Google
+                <FontAwesomeIcon className="authArrowIcon" icon={faArrowRight} />
+              </button>
+              <p className="authMessage">
+                By continuing, you acknowledge that you have read, understood,
+                and agree to our terms of service and privacy policy
+              </p>
+            </Form>
+          </Col>
+        </Row>
+      </div>
+    </>
+  )
+}
+
+AuthComponent.propTypes = {
+  mainText: PropTypes.string,
+  subText: PropTypes.string,
+  image: PropTypes.string,
+  handleContactSubmit: function() {},
+}
diff --git a/src/components/AuthComponent/style.sass b/src/components/AuthComponent/style.sass
new file mode 100644
index 00000000..ad905d67
--- /dev/null
+++ b/src/components/AuthComponent/style.sass
@@ -0,0 +1,81 @@
+.AuthCompleft
+    background-position: center
+    background-repeat: no-repeat
+    background-size: cover
+    width: 100%
+
+.AuthBannerText
+    margin: 10 auto 10
+    padding: 40px
+    font-family: 'Montserrat'
+    font-style: normal
+    font-weight: 700
+    color: white
+    font-size: 4em
+    justify-content: center
+    text-align: left
+    align-items: center
+    vertical-align: middle
+
+.AuthCompRight
+    text-align: center
+    align-items: center
+    padding: 40px
+    justify-content: center
+    vertical-align: middle
+
+.AuthMainHeading
+    font-family: 'Montserrat'
+    font-style: normal
+    font-weight: 700
+    font-size: 45px
+    line-height: 78px
+    color: #000000
+
+.AuthCustomField
+    width: 370px
+    padding: 1rem
+    height: 55px
+    max-width: 365px
+    border: 2px solid grey
+    border-radius: 10px
+    margin: 10px auto 10px
+
+.AuthGitButton
+    padding: 0.8rem 2.7rem
+    color: white
+    font-size: 1.2rem
+    font-weight: 700
+    border: none
+    margin: 20px
+    background: #000000
+    border-radius: 10px
+
+.authGitIcon
+    font-size: 30px
+    margin-right: 20px
+    vertical-align: middle
+    color: rgba(255, 255, 255, 0.8)
+
+.authArrowIcon
+    margin-left: 20px
+
+.authGoogleIcon
+    font-size: 25px
+    margin-right: 20px
+    vertical-align: middle
+
+.AuthGoogleButton
+    color: black
+    margin: 20px
+    background: #14F195
+    border-radius: 10px
+    padding: 0.8rem 2.7rem
+    font-size: 1.2rem
+    font-weight: 700
+    border: none
+
+.authMessage
+    font-size: 10px
+    font-weight: 400
+    color: #828282
\ No newline at end of file