Web: Login: add more login panel

web/ASC.Web.Login/src/sub-components/more-login.js

@@ -0,0 +1,73 @@
+import React from "react";
+import ModalDialog from "@appserver/components/modal-dialog";
+import Text from "@appserver/components/text";
+import Button from "@appserver/components/button";
+import ModalDialogContainer from "./modal-dialog-container";
+import { providersData } from "@appserver/common/constants";
+import styled from "styled-components";
+import { ReactSVG } from "react-svg";
+import { getProviderTranslation } from "@appserver/common/utils";
+
+const ProviderRow = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  justify-content: flex-start;
+  align-items: center;
+  align-content: center;
+  padding-top: 12px;
+
+  .provider-icon {
+    height: 18px;
+    width: 18px;
+  }
+
+  .provider-name {
+    padding-left: 12px;
+    line-height: 16px;
+  }
+
+  .signin-button {
+    margin-left: auto;
+  }
+`;
+
+const MoreLoginModal = (props) => {
+  const { t, visible, onClose, providers } = props;
+
+  return (
+    <ModalDialogContainer
+      displayType="aside"
+      asideBodyPadding="16px 0 0 0"
+      visible={visible}
+      onClose={onClose}
+    >
+      <ModalDialog.Header>{t("Authorization")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        {providers.map((item, index) => {
+          if (!providersData[item.provider]) return;
+
+          const { icon, label } = providersData[item.provider];
+
+          return (
+            <ProviderRow key={`ProviderItem${index}`}>
+              <ReactSVG src={icon} className="provider-icon" />
+              <Text fontSize="14px" fontWeight="600" className="provider-name">
+                {getProviderTranslation(label, t)}
+              </Text>
+              <Button
+                label={t("LoginButton")}
+                className="signin-button"
+                size="medium"
+              />
+            </ProviderRow>
+          );
+        })}
+      </ModalDialog.Body>
+    </ModalDialogContainer>
+  );
+};
+
+export default MoreLoginModal;