@authing/react-ui-components 2.4.54-alpha.0 → 2.4.55-alpha.2

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/BindTotpForm/styles.less

@@ -1,454 +0,0 @@
-@PSC-mobile-phone: ~'only screen and (max-width: 600px)';
-
-.mfaWrapper {
-  position: relative;
-  .mfaTitle {
-    color: #333333;
-    margin-bottom: 0;
-    font-family: PingFang-SC-Heavy;
-  }
-  .mainContent {
-    text-align: center;
-  }
-  .stepContent {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin-top: 70px;
-    margin-bottom: 60px;
-  }
-  .subtitle {
-    color: #333;
-    margin-bottom: 12px;
-    font-size: 16px;
-  }
-  .desc {
-    color: #666;
-    margin-bottom: 20px;
-    font-size: 14px;
-  }
-  .qrcode {
-    width: 187px;
-    height: 187px;
-  }
-  .secretParagraph {
-    border: 1px solid #ddd;
-    border-radius: 2px;
-    padding: 12px 0;
-  }
-  .saftyCodeInput {
-    margin-top: 97px;
-  }
-  .saftyCodeTip {
-    color: #999;
-    font-size: 14px;
-    margin-top: 14px;
-  }
-  .btnItem {
-    width: 100px;
-    &:not(:first-of-type) {
-      margin-left: 16px;
-    }
-  }
-}
-
-.appDownload {
-  padding-top: 20px;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .item {
-    width: 370px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .logo {
-    width: 54px;
-    height: 54px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .title {
-    font-size: 16px;
-    font-weight: 500;
-    color: #293350;
-    line-height: 22px;
-    margin-top: 12px;
-  }
-
-  .subtitle {
-    font-size: 14px;
-    font-weight: 400;
-    color: #9fabcb;
-    line-height: 20px;
-    margin-top: 8px;
-    margin-bottom: 0;
-  }
-
-  .QRCode {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    margin-top: 32px;
-    .QRCodeItem {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .image {
-      width: 141px;
-      height: 141px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .QRCodeText {
-      font-size: 14px;
-      font-weight: 500;
-      color: #515b78;
-      line-height: 20px;
-      margin-top: 3px;
-    }
-  }
-}
-
-.ScanQrcode {
-  .secretInput {
-    width: 100%;
-    border-radius: 4px;
-    border: 1px solid #e7e7e7;
-
-    padding: 9px 16px;
-
-    font-size: 14px;
-    font-weight: 400;
-    color: #515b78;
-    line-height: 20px;
-
-    display: flex;
-
-    align-items: center;
-
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .iconBox {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #eff2f6;
-    border-radius: 4px;
-    margin-right: 8px;
-
-    svg {
-      font-size: 12px;
-      color: #515b78;
-    }
-  }
-
-  :global {
-    .ant-typography {
-      margin: 0 0 0 8px;
-    }
-  }
-}
-
-.subtitle {
-  font-size: 14px;
-  font-weight: 400;
-  color: #9fabcb;
-  line-height: 20px;
-  margin-top: 8px;
-  margin-bottom: 0;
-}
-
-.desc {
-  color: #666;
-  margin-bottom: 20px;
-  font-size: 14px;
-}
-.qrcode {
-  width: 187px;
-  height: 187px;
-}
-
-.saftyCodeInput {
-  margin-top: 97px;
-}
-.saftyCodeTip {
-  color: #999;
-  font-size: 14px;
-  margin-top: 14px;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  margin-bottom: 5%;
-
-  .btnItem {
-    font-size: 14px;
-    font-weight: 400;
-    color: #e63333;
-    line-height: 24px;
-  }
-}
-
-.ScanQrcode {
-  padding-top: 20px;
-  .secretInput {
-    width: 100%;
-    border-radius: 4px;
-    border: 1px solid #e7e7e7;
-
-    padding: 9px 16px;
-
-    font-size: 14px;
-    font-weight: 400;
-    color: #515b78;
-    line-height: 20px;
-
-    display: flex;
-
-    align-items: center;
-
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .iconBox {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #eff2f6;
-    border-radius: 4px;
-    margin-right: 8px;
-
-    svg {
-      font-size: 12px;
-      color: #515b78;
-    }
-  }
-
-  :global {
-    .ant-typography {
-      margin: 0 0 0 8px;
-    }
-  }
-}
-
-.appDownload {
-  justify-content: unset;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 0;
-
-  .item:last-child {
-    margin-top: 60px;
-  }
-}
-
-.authing-guard-bindTotp-medias {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  .authing-guard-bindTotp-item-medias {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: 24px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .bindTotp-item-header-medias {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      font-size: 16px;
-      font-weight: 500;
-      color: #293350;
-      line-height: 19px;
-
-      img {
-        width: 60px;
-        height: 60px;
-        user-select: none;
-        margin-right: 8px;
-      }
-    }
-
-    .btnItem {
-      width: unset;
-      height: 28px;
-      background: #396aff;
-      border-radius: 4px;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-.stepContent {
-  margin-top: 10px !important;
-
-  h4 {
-    display: none;
-  }
-}
-
-.appDownload {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .item {
-    width: 370px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .logo {
-    width: 54px;
-    height: 54px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .title {
-    font-size: 16px;
-    font-weight: 500;
-    color: #293350;
-    line-height: 22px;
-    margin-top: 12px;
-  }
-
-  .subtitle {
-    font-size: 14px;
-    font-weight: 400;
-    color: #9fabcb;
-    line-height: 20px;
-    margin-top: 8px;
-    margin-bottom: 0;
-  }
-
-  .QRCode {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    margin-top: 32px;
-    .QRCodeItem {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .image {
-      width: 141px;
-      height: 141px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .QRCodeText {
-      font-size: 14px;
-      font-weight: 500;
-      color: #515b78;
-      line-height: 20px;
-      margin-top: 3px;
-    }
-  }
-}
-
-@media @PSC-mobile-phone {
-  .mediaAppDownload {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    .mediaAppDownloadItem {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      margin-bottom: 24px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .itemHeader {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        font-size: 16px;
-        font-weight: 500;
-        color: #293350;
-        line-height: 19px;
-
-        img {
-          width: 60px;
-          height: 60px;
-          user-select: none;
-          margin-right: 8px;
-        }
-      }
-
-      .btnItem {
-        width: unset;
-        height: 28px;
-        background: #396aff;
-        border-radius: 4px;
-        font-size: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-
-  .stepContent {
-    margin-top: 10px !important;
-
-    h4 {
-      display: none;
-    }
-  }
-}

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/MobileSteps/index.tsx

@@ -1,49 +0,0 @@
-import React, { ReactNode } from 'react'
-import { FC } from 'react'
-import './style.less'
-
-export interface MobileStepProps {
-  title: string
-}
-
-export interface MobileStepsProps {
-  current: number
-  data: ReactNode[]
-}
-
-const MobileSteps: FC<MobileStepsProps> = ({ current, data }) => {
-  return (
-    <div className="mobileSteps">
-      <div>
-        <span
-          style={{
-            color: '#396AFF',
-            fontSize: 28,
-          }}
-        >
-          {current + 1}
-        </span>
-        <span
-          style={{
-            color: '#9FABCB',
-            fontSize: 18,
-          }}
-        >
-          {' '}
-          / {data.length}
-        </span>
-      </div>
-      <div
-        style={{
-          fontSize: 14,
-          color: '#293350',
-          marginTop: 16,
-        }}
-      >
-        {data[current]}
-      </div>
-    </div>
-  )
-}
-
-export { MobileSteps }

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/MobileSteps/style.less

@@ -1,10 +0,0 @@
-.mobileSteps {
-  background-color: #fff;
-  .title {
-    font-size: 14px;
-    font-weight: 500;
-    color: #293350;
-    line-height: 20px;
-    margin-top: 16px;
-  }
-}