feat: show custom message if set

Author: raheeliftikhar5

client/packages/lowcoder-dev-utils/buildVars.js

@@ -37,7 +37,7 @@ export const buildVars = [
   },
   {
     name: "LOWCODER_CUSTOM_AUTH_WELCOME_TEXT",
-    defaultValue: "This is custom welcome message",
+    defaultValue: "",
   },
   {
     name: "REACT_APP_ENV",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1960,6 +1960,7 @@ export const en = {
     resetSuccess: "Reset succeeded",
     resetSuccessDesc: "Password reset succeeded. The new password is: {password}",
     copyPassword: "Copy password",
+    poweredByLowcoder: "Powered by Lowcoder.cloud"
   },
   preLoad: {
     jsLibraryHelpText:

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1934,6 +1934,7 @@ userAuth: {
     resetSuccess: "重置成功",
     resetSuccessDesc: "密码重置成功.新密码为:{password}",
     copyPassword: "复制密码",
+    poweredByLowcoder: "供电 Lowcoder.cloud"
 },
 preLoad: {
     jsLibraryHelpText: "通过URL链接向当前应用程序添加JavaScript库.lodash、day.js、uuid、numbro内置于系统中,可立即使用.JavaScript库在应用程序初始化之前加载,这可能会影响应用程序的性能.",

client/packages/lowcoder/src/pages/userAuth/authComponents.tsx

@@ -32,7 +32,7 @@ const AuthCard = styled.div`
   }
 `;
 
-const AuthCardTitle = styled.div<{ type?: string }>`
+const AuthCardHeading = styled.div<{ type?: string }>`
   font-weight: 600;
   font-size: 28px;
   color: #222222;
@@ -51,6 +51,12 @@ const AuthCardTitle = styled.div<{ type?: string }>`
   }
 `;
 
+const AuthCardSubHeading = styled.div`
+  font-size: 14px;
+  color: #222222;
+  line-height: 14px;
+`
+
 const AuthBottom = styled.div`
   display: flex;
   align-items: center;
@@ -116,10 +122,24 @@ const StyledConfirmButton = styled(TacoButton)`
   transition: unset;
 `;
 
-export const AuthContainer = (props: { children: any; title?: string; type?: string }) => {
+export const AuthContainer = (props: {
+  children: any;
+  heading?: string;
+  subHeading?: string;
+  type?: string
+}) => {
   return (
     <AuthCardContainer>
-      <AuthCardTitle type={props.type}>{props.title || ""}</AuthCardTitle>
+      <AuthCardHeading
+        type={props.type}
+      >
+        {props.heading || ""}
+      </AuthCardHeading>
+      { props.subHeading && (
+        <AuthCardSubHeading>
+          {props.subHeading}
+        </AuthCardSubHeading>
+      )}
       <AuthCard>{props.children}</AuthCard>
     </AuthCardContainer>
   );

client/packages/lowcoder/src/pages/userAuth/formLogin.tsx

@@ -6,7 +6,7 @@ import {
   LoginCardTitle,
   StyledRouteLink,
 } from "pages/userAuth/authComponents";
-import React, { useContext, useMemo, useState } from "react";
+import React, { useContext, useState } from "react";
 import styled from "styled-components";
 import UserApi from "api/userApi";
 import { useRedirectUrl } from "util/hooks";
@@ -17,7 +17,6 @@ import { AuthContext, useAuthSubmit } from "pages/userAuth/authUtils";
 import { ThirdPartyAuth } from "pages/userAuth/thirdParty/thirdPartyAuth";
 import { AUTH_REGISTER_URL, ORG_AUTH_REGISTER_URL } from "constants/routesURL";
 import { useLocation, useParams } from "react-router-dom";
-import { Divider } from "antd";
 
 const AccountLoginWrapper = styled(FormWrapperMobile)`
   display: flex;
@@ -39,13 +38,6 @@ export default function FormLogin(props: FormLoginProps) {
   const location = useLocation();
   const orgId = useParams<any>().orgId;
 
-  // const organizationId = useMemo(() => {
-  //   if(inviteInfo?.invitedOrganizationId) {
-  //     return inviteInfo?.invitedOrganizationId;
-  //   }
-  //   return orgId;
-  // }, [ inviteInfo, orgId ])
-
   const { onSubmit, loading } = useAuthSubmit(
     () =>
       UserApi.formLogin({
@@ -84,14 +76,11 @@ export default function FormLogin(props: FormLoginProps) {
         </ConfirmButton>
 
         {props.organizationId && (
-          <>
-            <Divider />
-            <ThirdPartyAuth
-              invitationId={invitationId}
-              invitedOrganizationId={props.organizationId}
-              authGoal="login"
-            />
-          </>
+          <ThirdPartyAuth
+            invitationId={invitationId}
+            invitedOrganizationId={props.organizationId}
+            authGoal="login"
+          />
         )}
       </AccountLoginWrapper>
       <AuthBottomView>

client/packages/lowcoder/src/pages/userAuth/login.tsx

@@ -64,7 +64,7 @@ const thirdPartyLoginLabel = (name: string) => trans("userAuth.signInLabel", { n
 export const ThirdPartyBindCard = () => {
   const { systemConfig } = useContext(AuthContext);
   return (
-    <AuthContainer title={trans("userAuth.bindAccount")}>
+    <AuthContainer heading={trans("userAuth.bindAccount")}>
       <ThirdAuthWrapper>
         <ThirdPartyAuth
           authGoal="bind"
@@ -131,12 +131,19 @@ function Login() {
     loginCardView = thirdPartyLoginView;
   }
 
-  const loginTitle = organizationId && LOWCODER_CUSTOM_AUTH_WELCOME_TEXT !== ""
+  const loginHeading = organizationId && LOWCODER_CUSTOM_AUTH_WELCOME_TEXT !== ""
     ? LOWCODER_CUSTOM_AUTH_WELCOME_TEXT
     : getLoginTitle(inviteInfo?.createUserName, systemConfig?.branding?.brandName)
 
+  const loginSubHeading = organizationId && LOWCODER_CUSTOM_AUTH_WELCOME_TEXT !== ""
+    ? trans("userAuth.poweredByLowcoder")
+    : ''
+
   return (
-    <AuthContainer title={loginTitle} >
+    <AuthContainer
+      heading={loginHeading}
+      subHeading={loginSubHeading}
+    >
       {loginCardView}
     </AuthContainer>
   );

client/packages/lowcoder/src/pages/userAuth/register.tsx

@@ -18,7 +18,6 @@ import { useLocation } from "react-router-dom";
 import { UserConnectionSource } from "@lowcoder-ee/constants/userConstants";
 import { trans } from "i18n";
 import { AuthContext, checkPassWithMsg, useAuthSubmit } from "pages/userAuth/authUtils";
-import { Divider } from "antd";
 import { ThirdPartyAuth } from "pages/userAuth/thirdParty/thirdPartyAuth";
 import { useParams } from "react-router-dom";
 
@@ -72,12 +71,20 @@ function UserRegister() {
     return null;
   }
 
-  const registerTitle = organizationId && LOWCODER_CUSTOM_AUTH_WELCOME_TEXT !== ""
+  const registerHeading = organizationId && LOWCODER_CUSTOM_AUTH_WELCOME_TEXT !== ""
     ? LOWCODER_CUSTOM_AUTH_WELCOME_TEXT
     : trans("userAuth.register")
 
+  const registerSubHeading = organizationId && LOWCODER_CUSTOM_AUTH_WELCOME_TEXT !== ""
+    ? trans("userAuth.poweredByLowcoder")
+    : ''
+
   return (
-    <AuthContainer title={registerTitle} type="large">
+    <AuthContainer
+      heading={registerHeading}
+      subHeading={registerSubHeading}
+      type="large"
+    >
       <RegisterContent>
         <LoginCardTitle>{trans("userAuth.registerByEmail")}</LoginCardTitle>
         <StyledFormInput
@@ -104,15 +111,12 @@ function UserRegister() {
           {trans("userAuth.register")}
         </ConfirmButton>
         <TermsAndPrivacyInfo onCheckChange={(e) => setSubmitBtnDisable(!e.target.checked)} />
-        {Boolean(invitationId) && (
-          <>
-            <Divider />
-            <ThirdPartyAuth
-              invitationId={invitationId}
-              invitedOrganizationId={organizationId}
-              authGoal="register"
-            />
-          </>
+        {organizationId && (
+          <ThirdPartyAuth
+            invitationId={invitationId}
+            invitedOrganizationId={organizationId}
+            authGoal="register"
+          />
         )}
       </RegisterContent>
       <StyledRouteLinkLogin to={{

client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx

@@ -15,6 +15,7 @@ import { messageInstance } from "lowcoder-design";
 import styled from "styled-components";
 import { trans } from "i18n";
 import { geneAuthStateAndSaveParam, getAuthUrl, getRedirectUrl } from "pages/userAuth/authUtils";
+import { Divider } from "antd";
 
 const ThirdPartyLoginButtonWrapper = styled.div`
   button{
@@ -128,6 +129,7 @@ export function ThirdPartyAuth(props: {
   });
   return (
     <ThirdPartyLoginButtonWrapper>
+      { Boolean(socialLoginButtons.length) && <Divider /> }
       {socialLoginButtons}
     </ThirdPartyLoginButtonWrapper>
   );