From e1df253b22730e6a13c737335372a0b4db3c404c Mon Sep 17 00:00:00 2001
From: Alexey Kostenko <kostenko.20101994@mail.ru>
Date: Tue, 23 Mar 2021 18:29:29 +0300
Subject: [PATCH] Web: People/Components: Added login settings buttons to edit
 profile page, social button - style fix

---
 .../asc-web-components/social-button/index.js |  5 +-
 .../social-button/styled-social-button.js     |  6 +-
 packages/asc-web-components/themes/base.js    |  7 +-
 .../Client/public/images/share.google.svg     |  6 ++
 .../Client/public/images/share.linkedin.svg   |  4 +
 .../Section/Body/updateUserForm.js            | 90 +++++++++++++++++++
 6 files changed, 111 insertions(+), 7 deletions(-)
 create mode 100644 products/ASC.People/Client/public/images/share.google.svg
 create mode 100644 products/ASC.People/Client/public/images/share.linkedin.svg

diff --git a/packages/asc-web-components/social-button/index.js b/packages/asc-web-components/social-button/index.js
index 6c90f923e9..05e9ba9a2d 100644
--- a/packages/asc-web-components/social-button/index.js
+++ b/packages/asc-web-components/social-button/index.js
@@ -13,7 +13,7 @@ class SocialButton extends React.Component {
   }
 
   render() {
-    const { label, iconName } = this.props;
+    const { label, iconName, iconOptions } = this.props;
     return (
       <StyledSocialButton {...this.props}>
         <ReactSVG src={iconName} />
@@ -42,6 +42,8 @@ SocialButton.propTypes = {
   id: PropTypes.string,
   /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  onClick: PropTypes.func,
+  iconOptions: PropTypes.object,
 };
 
 SocialButton.defaultProps = {
@@ -49,6 +51,7 @@ SocialButton.defaultProps = {
   iconName: "SocialButtonGoogleIcon",
   tabIndex: -1,
   isDisabled: false,
+  iconOptions: {},
 };
 
 export default SocialButton;
diff --git a/packages/asc-web-components/social-button/styled-social-button.js b/packages/asc-web-components/social-button/styled-social-button.js
index 7b17c22285..be27782345 100644
--- a/packages/asc-web-components/social-button/styled-social-button.js
+++ b/packages/asc-web-components/social-button/styled-social-button.js
@@ -1,3 +1,4 @@
+import React from "react";
 import styled, { css } from "styled-components";
 import Base from "../themes/base";
 import PropTypes from "prop-types";
@@ -20,7 +21,8 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
 }))`
   font-family: ${(props) => props.theme.fontFamily};
   border: none;
-  display: inline-block;
+  display: flex;
+  align-items: center;
 
   font-weight: ${(props) => props.theme.socialButton.fontWeight};
   text-decoration: ${(props) => props.theme.socialButton.textDecoration};
@@ -76,7 +78,7 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
         `};
 
   .social_button_text {
-    position: absolute;
+    position: relative;
 
     width: ${(props) => props.theme.socialButton.text.width};
     height: ${(props) => props.theme.socialButton.text.height};
diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js
index 94348077a8..c847bcab18 100644
--- a/packages/asc-web-components/themes/base.js
+++ b/packages/asc-web-components/themes/base.js
@@ -213,10 +213,8 @@ const Base = {
   socialButton: {
     fontWeight: "600",
     textDecoration: "none",
-    margin: "20px 0 0 20px",
     padding: "0",
     borderRadius: "2px",
-    width: "201px",
     height: "40px",
     textAlign: "left",
     stroke: " none",
@@ -238,14 +236,15 @@ const Base = {
     text: {
       width: "142px",
       height: "16px",
-      margin: "12px 9px 12px 10px",
-      fontWeight: "500",
+      margin: "0 11px",
+      fontWeight: "600",
       fontSize: "14px",
       lineHeight: "16px",
       letterSpacing: "0.21875px",
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
+      color: "#757575",
     },
 
     svg: {
diff --git a/products/ASC.People/Client/public/images/share.google.svg b/products/ASC.People/Client/public/images/share.google.svg
new file mode 100644
index 0000000000..8a07d68b28
--- /dev/null
+++ b/products/ASC.People/Client/public/images/share.google.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.64 9.20419C17.64 8.56601 17.5827 7.95237 17.4764 7.36328H9V10.8446H13.8436C13.635 11.9696 13.0009 12.9228 12.0477 13.561V15.8192H14.9564C16.6582 14.2524 17.64 11.9451 17.64 9.20419Z" fill="#4285F4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 18.0009C11.43 18.0009 13.4673 17.195 14.9564 15.8205L12.0477 13.5623C11.2418 14.1023 10.2109 14.4214 9 14.4214C6.65591 14.4214 4.67182 12.8382 3.96409 10.7109H0.957275V13.0428C2.43818 15.9841 5.48182 18.0009 9 18.0009Z" fill="#34A853"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96409 10.7088C3.78409 10.1688 3.68182 9.59203 3.68182 8.99885C3.68182 8.40567 3.78409 7.82885 3.96409 7.28885V4.95703H0.957273C0.347727 6.17203 0 7.54658 0 8.99885C0 10.4511 0.347727 11.8257 0.957273 13.0407L3.96409 10.7088Z" fill="#FBBC05"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.57955C10.3214 3.57955 11.5077 4.03364 12.4405 4.92545L15.0218 2.34409C13.4632 0.891818 11.4259 0 9 0C5.48182 0 2.43818 2.01682 0.957275 4.95818L3.96409 7.29C4.67182 5.16273 6.65591 3.57955 9 3.57955Z" fill="#EA4335"/>
+</svg>
diff --git a/products/ASC.People/Client/public/images/share.linkedin.svg b/products/ASC.People/Client/public/images/share.linkedin.svg
new file mode 100644
index 0000000000..65c1ed4211
--- /dev/null
+++ b/products/ASC.People/Client/public/images/share.linkedin.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75036 8.05344C9.74586 8.06301 9.73967 8.07201 9.73292 8.08044H9.75036V8.05344Z" fill="#1276B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 0C1.00736 0 0 1.00736 0 2.25V15.75C0 16.9926 1.00736 18 2.25 18H15.75C16.9926 18 18 16.9926 18 15.75V2.25C18 1.00736 16.9926 0 15.75 0H2.25ZM2.89855 6.91044H5.5828V14.9846H2.89855V6.91044ZM4.25755 3.01794C5.17611 3.01794 5.74142 3.62094 5.7583 4.41407C5.7583 5.18751 5.17611 5.80851 4.24011 5.80851H4.22267C3.32211 5.80851 2.73992 5.18751 2.73992 4.41407C2.73992 3.62094 3.34011 3.01794 4.25755 3.01794ZM12.1697 6.72144C13.9354 6.72144 15.26 7.87513 15.26 10.3546L15.2595 14.9846H12.5758V10.6646C12.5758 9.57782 12.1882 8.83869 11.2157 8.83869C10.4754 8.83869 10.0333 9.34044 9.83867 9.82082C9.7678 9.99463 9.75036 10.2314 9.75036 10.4756V14.9846H7.06723C7.06723 14.9846 7.10155 7.66757 7.06723 6.91044H9.75036V8.05344C10.1087 7.50388 10.746 6.72144 12.1697 6.72144Z" fill="#1276B3"/>
+</svg>
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
index e565dddcaa..cd74e433fa 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
@@ -6,6 +6,7 @@ import Button from "@appserver/components/button";
 import Textarea from "@appserver/components/textarea";
 import Text from "@appserver/components/text";
 import AvatarEditor from "@appserver/components/avatar-editor";
+import SocialButton from "@appserver/components/social-button";
 import Link from "@appserver/components/link";
 import { isTablet } from "@appserver/components/utils/device";
 
@@ -51,6 +52,9 @@ import config from "../../../../../package.json";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
 
+const facebookIconOptions = { isfill: true, color: "#4469B0" };
+const twitterIconOptions = { isfill: true, color: "#2AA3EF" };
+
 const dialogsDataset = {
   changeEmail: "changeEmail",
   changePassword: "changePassword",
@@ -69,6 +73,13 @@ const Th = styled.th`
 
 const Td = styled.td``;
 
+const StyledWrapper = styled.div`
+  align-items: center;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 16px 22px;
+`;
+
 class UpdateUserForm extends React.Component {
   constructor(props) {
     super(props);
@@ -533,6 +544,19 @@ class UpdateUserForm extends React.Component {
     this.setIsEdit();
   }
 
+  onClickGoogleConnect = () => {
+    console.log("Connect to Google");
+  };
+  onClickFacebookConnect = () => {
+    console.log("Connect to Facebook");
+  };
+  onClickTwitterConnect = () => {
+    console.log("Connect to Twitter");
+  };
+  onClickLinkedInConnect = () => {
+    console.log("Connect to LinkedIn");
+  };
+
   render() {
     const {
       isLoading,
@@ -826,6 +850,72 @@ class UpdateUserForm extends React.Component {
             />
           </MainFieldsContainer>
         </MainContainer>
+        <InfoFieldContainer headerText={t("LoginSettings")}>
+          <StyledWrapper>
+            <SocialButton
+              iconName={"images/share.google.svg"}
+              label={t("SignInWithGoogle")}
+              className="socialButton"
+            />
+
+            <Link
+              type="action"
+              color="A3A9AE"
+              onClick={this.onClickGoogleConnect}
+              isHovered={true}
+            >
+              {t("Connect")}
+            </Link>
+            <div>
+              <SocialButton
+                iconName={"images/share.facebook.react.svg"}
+                label={t("SignInWithFacebook")}
+                className="socialButton"
+                iconOptions={facebookIconOptions}
+              />
+            </div>
+
+            <Link
+              type="action"
+              color="A3A9AE"
+              onClick={this.onClickFacebookConnect}
+              isHovered={true}
+            >
+              {t("Connect")}
+            </Link>
+            <div>
+              <SocialButton
+                iconName={"images/share.twitter.react.svg"}
+                label={t("SignInWithTwitter")}
+                className="socialButton"
+                iconOptions={twitterIconOptions}
+              />
+            </div>
+            <Link
+              type="action"
+              color="A3A9AE"
+              onClick={this.onClickTwitterConnect}
+              isHovered={true}
+            >
+              {t("Connect")}
+            </Link>
+            <div>
+              <SocialButton
+                iconName={"images/share.linkedin.svg"}
+                label={t("SignInWithLinkedIn")}
+                className="socialButton"
+              />
+            </div>
+            <Link
+              type="action"
+              color="A3A9AE"
+              onClick={this.onClickLinkedInConnect}
+              isHovered={true}
+            >
+              {t("Connect")}
+            </Link>
+          </StyledWrapper>
+        </InfoFieldContainer>
         <InfoFieldContainer headerText={t("Comments")}>
           <Textarea
             placeholder={t("WriteComment")}