@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.70

package/es/components/organism/Login/components/LoginSelectPortal/Item/styled.js

@@ -1,34 +1,34 @@
 import styled from 'styled-components';
-export const WrapperItem = styled.div `
-  display: flex;
-
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  width: 100%;
-  height: 119px;
-  border-radius: 10px;
-  padding: 10px 10px 0 10px;
-
-  border: 1px solid #b8cfe6;
-  cursor: pointer;
-
-  img {
-    margin-bottom: 10px;
-    object-fit: contain;
-  }
-
-  &:hover {
-    background-color: #f2f9ff !important;
-  }
-
-  .antsomi-typography {
-    color: #595959 !important;
-  }
+export const WrapperItem = styled.div `
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100%;
+  height: 119px;
+  border-radius: 10px;
+  padding: 10px 10px 0 10px;
+
+  border: 1px solid #b8cfe6;
+  cursor: pointer;
+
+  img {
+    margin-bottom: 10px;
+    object-fit: contain;
+  }
+
+  &:hover {
+    background-color: #f2f9ff !important;
+  }
+
+  .antsomi-typography {
+    color: #595959 !important;
+  }
 `;
-export const BlockEnd = styled.div `
-  border-top: 1px solid #b8cfe6;
-  overflow: hidden;
-  width: 100%;
+export const BlockEnd = styled.div `
+  border-top: 1px solid #b8cfe6;
+  overflow: hidden;
+  width: 100%;
 `;

package/es/components/organism/Login/components/LoginSelectPortal/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const WrapperList = styled.div `
-  padding: 10px;
-  height: 100%;
+export const WrapperList = styled.div `
+  padding: 10px;
+  height: 100%;
 `;

package/es/components/organism/Login/components/LoginWithEmail/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const TextInfo = styled.span `
-  color: #7f7f7f;
-  font-size: ${props => (props.isMobile ? ' 13px !important' : '11px')};
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${props => (props.isMobile ? ' 13px !important' : '11px')};
 `;

package/es/components/organism/Login/components/LoginWithGG/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const TextInfo = styled.span `
-  color: #7f7f7f;
-  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
 `;

package/es/components/organism/Login/components/SetupGGAuthenticator/styled.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-export const LabelStep = styled.span `
-  color: #005eb8;
-  font-size: ${props => (props.isMobile ? '16px' : '14px')};
-  font-weight: 500;
+export const LabelStep = styled.span `
+  color: #005eb8;
+  font-size: ${props => (props.isMobile ? '16px' : '14px')};
+  font-weight: 500;
 `;
-export const Link = styled.a `
-  text-decoration: underline;
-  padding-right: 4px;
+export const Link = styled.a `
+  text-decoration: underline;
+  padding-right: 4px;
 `;

package/es/components/organism/Login/components/SignIn/SignIn.js

@@ -72,10 +72,10 @@ export const SignIn = props => {
                                 message: 'Please enter your email',
                                 pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                             },
-                        ], children: _jsx(StyleInput, { isMobile: isMobile, placeholder: "Email" }) }), _jsx(Form.Item, { name: "password", rules: [
+                        ], children: _jsx(StyleInput, { autoComplete: "username", name: "email", type: "text", isMobile: isMobile, placeholder: "Email" }) }), _jsx(Form.Item, { name: "password", rules: [
                             { required: true, message: 'Please enter your password' },
                             { min: 6, message: 'Password must be at least 6 characters long' },
-                        ], style: { marginTop: 15 }, children: _jsx(StyleInput.Password, { placeholder: "Password", iconRender: visible => visible ? (_jsx(Icon, { type: "icon-ants-eye", style: {
+                        ], style: { marginTop: 15 }, children: _jsx(StyleInput.Password, { name: "password", autoComplete: "current-password", placeholder: "Password", iconRender: visible => visible ? (_jsx(Icon, { type: "icon-ants-eye", style: {
                                     color: '#595959',
                                 } })) : (_jsx(Icon, { type: "icon-ants-invisible", style: {
                                     color: '#595959',

package/es/components/organism/Login/components/SignIn/styled.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-export const Wrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-
-  width: 100%;
-
-  ${props => (!props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px')}
+export const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+  width: 100%;
+
+  ${props => (!props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px')}
 `;

package/es/components/organism/Login/components/VerifyAccount/styled.js

@@ -1,17 +1,17 @@
 import { Form } from 'antd';
 import styled from 'styled-components';
-export const WrapperForm = styled(Form) `
-  .antsomi-form-item-row {
-    flex-direction: column;
-  }
-
-  .antsomi-form-item .antsomi-form-item-label > label::after {
-    content: '' !important;
-  }
+export const WrapperForm = styled(Form) `
+  .antsomi-form-item-row {
+    flex-direction: column;
+  }
+
+  .antsomi-form-item .antsomi-form-item-label > label::after {
+    content: '' !important;
+  }
 `;
-export const LabelRequire = styled.span `
-  color: #595959;
-  .icon {
-    color: red;
-  }
+export const LabelRequire = styled.span `
+  color: #595959;
+  .icon {
+    color: red;
+  }
 `;

package/es/components/organism/Login/components/WidgetLayout/styled.js

@@ -1,22 +1,22 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const Title = styled.div `
-  font-size: ${props => (props.isMobile ? '20px' : '18px')};
-  font-weight: 700;
-  color: #005eb8;
-  text-align: center;
+export const Title = styled.div `
+  font-size: ${props => (props.isMobile ? '20px' : '18px')};
+  font-weight: 700;
+  color: #005eb8;
+  text-align: center;
 `;
-export const WidgetLayoutMain = styled(Flex) `
-  position: relative;
-
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-
-  .sticky-footer {
-    margin-top: 50px;
-    bottom: 0px;
-    width: 100%;
-    z-index: 100;
-  }
+export const WidgetLayoutMain = styled(Flex) `
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .sticky-footer {
+    margin-top: 50px;
+    bottom: 0px;
+    width: 100%;
+    z-index: 100;
+  }
 `;

package/es/components/organism/Login/styled.js

@@ -1,129 +1,129 @@
 import { Button, Flex, Form, Input } from 'antd';
 import styled from 'styled-components';
-export const LoginMain = styled(Flex) `
-  background: #eaf1fb;
-
-  height: 100vh;
-  max-height: 100vh;
-
-  width: 100%;
-
-  overflow: hidden;
+export const LoginMain = styled(Flex) `
+  background: #eaf1fb;
+
+  height: 100vh;
+  max-height: 100vh;
+
+  width: 100%;
+
+  overflow: hidden;
 `;
-export const LoginBannerZone = styled.div `
-  display: flex;
-  flex: 2;
-  z-index: 1;
-
-  min-width: calc(100vw - 404px);
-  max-width: calc(100vw - 300px);
+export const LoginBannerZone = styled.div `
+  display: flex;
+  flex: 2;
+  z-index: 1;
+
+  min-width: calc(100vw - 404px);
+  max-width: calc(100vw - 300px);
 `;
-export const WrapperLogin = styled(Flex) `
-  height: 100%;
-  overflow-y: auto;
-  background-color: white;
-  z-index: 5;
-
-  width: ${props => (props.isMobile ? '100%' : '')};
-  min-width: ${props => (props.isMobile ? '100%' : '300px')};
-  max-width: ${props => (props.isMobile ? '100%' : '404px')};
-
-  ${props => (!props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : '')}
+export const WrapperLogin = styled(Flex) `
+  height: 100%;
+  overflow-y: auto;
+  background-color: white;
+  z-index: 5;
+
+  width: ${props => (props.isMobile ? '100%' : '')};
+  min-width: ${props => (props.isMobile ? '100%' : '300px')};
+  max-width: ${props => (props.isMobile ? '100%' : '404px')};
+
+  ${props => (!props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : '')}
 `;
-export const WrapperImage = styled.img `
-  width: 180px;
-  height: 40px;
-  object-fit: contain;
+export const WrapperImage = styled.img `
+  width: 180px;
+  height: 40px;
+  object-fit: contain;
 `;
-export const Label = styled.span `
-  color: #005eb8;
-  text-align: center;
-  font-weight: 500;
-
-  :hover {
-    cursor: pointer;
-  }
-
-  @media (max-width: 768px) {
-    color: #000000;
-  }
+export const Label = styled.span `
+  color: #005eb8;
+  text-align: center;
+  font-weight: 500;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  @media (max-width: 768px) {
+    color: #000000;
+  }
 `;
 export const Image = styled.img ``;
-export const WrapperContent = styled.span `
-  font-size: 14px;
-  color: #595959;
-
-  &.validate {
-    text-align: center;
-  }
-
-  &.forgot-password {
-  }
-
-  &.verify_account {
-    text-align: center;
-    color: #595959;
-    font-size: 14px;
-  }
+export const WrapperContent = styled.span `
+  font-size: 14px;
+  color: #595959;
+
+  &.validate {
+    text-align: center;
+  }
+
+  &.forgot-password {
+  }
+
+  &.verify_account {
+    text-align: center;
+    color: #595959;
+    font-size: 14px;
+  }
 `;
-export const AvatarImage = styled.img `
-  border-radius: 50%;
-  width: 80px;
-  height: 80px;
+export const AvatarImage = styled.img `
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
 `;
-export const StyledForm = styled(Form) `
-  input {
-    height: ${props => (props.isMobile ? ' 44px' : '36px')};
-    font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
-
-    &::placeholder {
-      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
-    }
-  }
-
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  input:-webkit-autofill:active {
-    -webkit-background-clip: text;
-    transition: background-color 200s ease-in-out 0s;
-  }
-
-  .antsomi-input-password-icon {
-    font-size: ${(props) => (props.isMobile ? ' 24px' : '14px')};
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  .antsomi-input-affix-wrapper {
-    padding: 0 10px !important;
-    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
-
-    &::placeholder {
-      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
-    }
-  }
-
-  .antsomi-form-item-explain-error {
-    font-size: 11px !important;
-  }
+export const StyledForm = styled(Form) `
+  input {
+    height: ${props => (props.isMobile ? ' 44px' : '36px')};
+    font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-background-clip: text;
+    transition: background-color 200s ease-in-out 0s;
+  }
+
+  .antsomi-input-password-icon {
+    font-size: ${(props) => (props.isMobile ? ' 24px' : '14px')};
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .antsomi-input-affix-wrapper {
+    padding: 0 10px !important;
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
+  }
+
+  .antsomi-form-item-explain-error {
+    font-size: 11px !important;
+  }
 `;
-export const StyleInput = styled(Input) `
-  height: ${props => (props.isMobile ? ' 44px !important' : '36px !important')};
-  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
-
-  &::placeholder {
-    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
-  }
+export const StyleInput = styled(Input) `
+  height: ${props => (props.isMobile ? ' 44px !important' : '36px !important')};
+  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
+
+  &::placeholder {
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  }
 `;
-export const StyleButton = styled(Button) `
-  height: ${props => (props.isMobile ? ' 44px !important' : '40px !important')};
-  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
+export const StyleButton = styled(Button) `
+  height: ${props => (props.isMobile ? ' 44px !important' : '40px !important')};
+  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
 `;
-export const Text = styled.div `
-  color: ${props => (props.color ? props.color : ' #000000')};
-  font-size: ${props => (props.isMobile ? ' 14px !important' : '12px')};
-  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+export const Text = styled.div `
+  color: ${props => (props.color ? props.color : ' #000000')};
+  font-size: ${props => (props.isMobile ? ' 14px !important' : '12px')};
+  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
 `;

package/es/components/organism/Login/types/index.d.ts

@@ -19,6 +19,8 @@ export interface LoginData {
     G2FA: number;
     status: boolean;
     errorCode: string;
+    /** The networkId (portalId) of the network the user logged into */
+    networkId?: number | string;
     [key: string]: any;
 }
 export interface Account {

package/es/components/organism/Menu/styled.js

@@ -1,10 +1,10 @@
 // Components
 import styled from 'styled-components';
 import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
-export const ExpandIcon = styled(Icon) `
-  cursor: pointer;
-  position: absolute;
-  right: 10px;
-  transition: all 200ms;
-  transform: rotate(${props => (props.$isOpen ? 180 : 0)}deg);
+export const ExpandIcon = styled(Icon) `
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  transition: all 200ms;
+  transform: rotate(${props => (props.$isOpen ? 180 : 0)}deg);
 `;