llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-15 11:03:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add custom css style for signup page and enhance css edit (#2880)

Browse Source 
* feat: add custom css style for signup page and enhance css edit in signintable

* feat: change cssStyle to customCss

* feat: auto hide <style> label, fix display problem on providers, remove auto add providers in signup page

* fix: fix indent in signin items customCss and fix providers display in signup items

* fix: fix login replace logical
This commit is contained in:
DacongDA
2024-04-21 11:56:18 +08:00
committed by GitHub
parent d51af3378e
commit 90d502ab2b
51 changed files with 424 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/auth/LoginPage.js
View File

@ -532,7 +532,7 @@ class LoginPage extends React.Component {
if (signinItem.name === "Logo") {
return (
<div className="login-logo-box">
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
{
Setting.renderHelmet(application)
}
@ -544,7 +544,7 @@ class LoginPage extends React.Component {
} else if (signinItem.name === "Back button") {
return (
<div>
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
{
this.renderBackButton()
}
@ -562,24 +562,25 @@ class LoginPage extends React.Component {
return (
<div className="login-languages">
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
<LanguageSelect languages={application.organizationObj.languages} />
</div>
);
} else if (signinItem.name === "Signin methods") {
return (
<div>
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
{this.renderMethodChoiceBox()}
</div>
)
;
} else if (signinItem.name === "Username") {
return (
<div className="login-username">
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div>
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
<Form.Item
name="username"
className="login-username"
rules={[
{
required: true,
@ -637,6 +638,7 @@ class LoginPage extends React.Component {
<Input
id="input"
className="login-username-input"
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder={this.getPlaceholder()}
onChange={e => {
@ -651,14 +653,14 @@ class LoginPage extends React.Component {
} else if (signinItem.name === "Password") {
return (
<div>
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
{this.renderPasswordOrCodeInput()}
</div>
);
} else if (signinItem.name === "Forgot password?") {
return (
<div>
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
<div className="login-forget-password">
<Form.Item name="autoSignin" valuePropName="checked" noStyle>
<Checkbox style={{float: "left"}}>
@ -676,7 +678,7 @@ class LoginPage extends React.Component {
} else if (signinItem.name === "Login button") {
return (
<Form.Item className="login-button-box">
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
<Button
type="primary"
htmlType="submit"
@ -720,7 +722,7 @@ class LoginPage extends React.Component {
return (
<div>
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
<Form.Item>
{
application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
@ -740,7 +742,7 @@ class LoginPage extends React.Component {
} else if (signinItem.name === "Signup link") {
return (
<div style={{width: "100%"}} className="login-signup-link">
<div dangerouslySetInnerHTML={{__html: signinItem.label}} />
<div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
{this.renderFooter(application)}
</div>
);
@ -1025,12 +1027,14 @@ class LoginPage extends React.Component {
if (this.state.loginMethod === "password" || this.state.loginMethod === "ldap") {
return (
<Col span={24}>
<div className="login-password">
<div>
<Form.Item
name="password"
className="login-password"
rules={[{required: true, message: i18next.t("login:Please input your password!")}]}
>
<Input.Password
className="login-password-input"
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder={i18next.t("general:Password")}