llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-09-10 12:50:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve login page style (#1119)

Browse Source 
Signed-off-by: magicwind <2814461814@qq.com>

Signed-off-by: magicwind <2814461814@qq.com>
This commit is contained in:
leoshine
2022-09-12 00:01:18 +08:00
committed by GitHub
parent b6cdc46023
commit ed959bd8c7
5 changed files with 110 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/ApplicationEditPage.js
View File

@@ -39,7 +39,7 @@ require("codemirror/mode/css/css");
const {Option} = Select; const {Option} = Select;
const templete = { const template = {
padding: "30px", padding: "30px",
border: "2px solid #ffffff", border: "2px solid #ffffff",
borderRadius: "7px", borderRadius: "7px",
@@ -157,7 +157,7 @@ class ApplicationEditPage extends React.Component {
} }
renderApplication() { renderApplication() {
const preview = JSON.stringify(templete, null, 2); const preview = JSON.stringify(template, null, 2);
return ( return (
<Card size="small" title={ <Card size="small" title={
<div> <div>
@@ -562,10 +562,10 @@ class ApplicationEditPage extends React.Component {
</Col> </Col>
</Row> </Row>
<Row style={{marginTop: "20px"}} > <Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}> <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:Preview")}: {i18next.t("general:Preview")}:
</Col> </Col>
<Col span={23} > <Col span={22} >
<a target="_blank" rel="noreferrer" href={this.state.application.formBackgroundUrl}> <a target="_blank" rel="noreferrer" href={this.state.application.formBackgroundUrl}>
<img src={this.state.application.formBackgroundUrl} alt={this.state.application.formBackgroundUrl} height={90} style={{marginBottom: "20px"}} /> <img src={this.state.application.formBackgroundUrl} alt={this.state.application.formBackgroundUrl} height={90} style={{marginBottom: "20px"}} />
</a> </a>

1
web/src/ApplicationListPage.js
View File

@@ -53,6 +53,7 @@ class ApplicationListPage extends BaseListPage {
redirectUris: ["http://localhost:9000/callback"], redirectUris: ["http://localhost:9000/callback"],
tokenFormat: "JWT", tokenFormat: "JWT",
expireInHours: 24 * 7, expireInHours: 24 * 7,
formOffset: 8,
}; };
} }

8
web/src/Setting.js
View File

@@ -921,6 +921,14 @@ export function scrollToDiv(divId) {
} }
} }
export function inIframe() {
try {
return window !== window.parent;
} catch (e) {
return true;
}
}
export function getSyncerTableColumns(syncer) { export function getSyncerTableColumns(syncer) {
switch (syncer.type) { switch (syncer.type) {
case "Keycloak": case "Keycloak":

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

@@ -349,49 +349,54 @@ class LoginPage extends React.Component {
> >
</Form.Item> </Form.Item>
{this.renderMethodChoiceBox()} {this.renderMethodChoiceBox()}
<Form.Item <Row style={{minHeight: 130, alignItems: "center"}}>
name="username" <Col span={24}>
rules={[ <Form.Item
{ name="username"
required: true, rules={[
message: i18next.t("login:Please input your username, Email or phone!"), {
}, required: true,
{ message: i18next.t("login:Please input your username, Email or phone!"),
validator: (_, value) => { },
if (this.state.isCodeSignin) { {
if (this.state.email !== "" && !Setting.isValidEmail(this.state.username) && !Setting.isValidPhone(this.state.username)) { validator: (_, value) => {
this.setState({validEmailOrPhone: false}); if (this.state.isCodeSignin) {
return Promise.reject(i18next.t("login:The input is not valid Email or Phone!")); if (this.state.email !== "" && !Setting.isValidEmail(this.state.username) && !Setting.isValidPhone(this.state.username)) {
} this.setState({validEmailOrPhone: false});
return Promise.reject(i18next.t("login:The input is not valid Email or Phone!"));
}
if (Setting.isValidPhone(this.state.username)) { if (Setting.isValidPhone(this.state.username)) {
this.setState({validPhone: true}); this.setState({validPhone: true});
} }
if (Setting.isValidEmail(this.state.username)) { if (Setting.isValidEmail(this.state.username)) {
this.setState({validEmail: true}); this.setState({validEmail: true});
} }
} }
this.setState({validEmailOrPhone: true}); this.setState({validEmailOrPhone: true});
return Promise.resolve(); return Promise.resolve();
}, },
}, },
]} ]}
> >
<Input <Input
prefix={<UserOutlined className="site-form-item-icon" />} id = "input"
placeholder={this.state.isCodeSignin ? i18next.t("login:Email or phone") : i18next.t("login:username, Email or phone")} prefix={<UserOutlined className="site-form-item-icon" />}
disabled={!application.enablePassword} placeholder={this.state.isCodeSignin ? i18next.t("login:Email or phone") : i18next.t("login:username, Email or phone")}
onChange={e => { disabled={!application.enablePassword}
this.setState({ onChange={e => {
username: e.target.value, this.setState({
}); username: e.target.value,
}} });
/> }}
</Form.Item> />
{ </Form.Item>
this.renderPasswordOrCodeInput() </Col>
} {
this.renderPasswordOrCodeInput()
}
</Row>
<Form.Item> <Form.Item>
<Form.Item name="autoSignin" valuePropName="checked" noStyle> <Form.Item name="autoSignin" valuePropName="checked" noStyle>
<Checkbox style={{float: "left"}} disabled={!application.enablePassword}> <Checkbox style={{float: "left"}} disabled={!application.enablePassword}>
@@ -633,28 +638,32 @@ class LoginPage extends React.Component {
const application = this.getApplicationObj(); const application = this.getApplicationObj();
if (this.state.loginMethod === "password") { if (this.state.loginMethod === "password") {
return this.state.isCodeSignin ? ( return this.state.isCodeSignin ? (
<Form.Item <Col span={24}>
name="code" <Form.Item
rules={[{required: true, message: i18next.t("login:Please input your code!")}]} name="code"
> rules={[{required: true, message: i18next.t("login:Please input your code!")}]}
<CountDownInput >
disabled={this.state.username?.length === 0 || !this.state.validEmailOrPhone} <CountDownInput
onButtonClickArgs={[this.state.username, this.state.validEmail ? "email" : "phone", Setting.getApplicationName(application)]} disabled={this.state.username?.length === 0 || !this.state.validEmailOrPhone}
application={application} onButtonClickArgs={[this.state.username, this.state.validEmail ? "email" : "phone", Setting.getApplicationName(application)]}
/> application={application}
</Form.Item> />
</Form.Item>
</Col>
) : ( ) : (
<Form.Item <Col span={24}>
name="password" <Form.Item
rules={[{required: true, message: i18next.t("login:Please input your password!")}]} name="password"
> rules={[{required: true, message: i18next.t("login:Please input your password!")}]}
<Input >
prefix={<LockOutlined className="site-form-item-icon" />} <Input
type="password" prefix={<LockOutlined className="site-form-item-icon" />}
placeholder={i18next.t("login:Password")} type="password"
disabled={!application.enablePassword} placeholder={i18next.t("login:Password")}
/> disabled={!application.enablePassword}
</Form.Item> />
</Form.Item>
</Col>
); );
} }
} }
@@ -695,29 +704,32 @@ class LoginPage extends React.Component {
); );
} }
const formStyle = Setting.parseObject(application.formCss); const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
return ( return (
<div className="loginBackground" style={{backgroundImage: `url(${application.formBackgroundUrl})`}}> <div className="loginBackground" style={{backgroundImage: Setting.inIframe() ? null : `url(${application.formBackgroundUrl})`}}>
<CustomGithubCorner />
<Row> <Row>
<Col span={8} offset={application.formOffset === 0 ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}> <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
<div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}> <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
{ <div>
Setting.renderHelmet(application) {
} Setting.renderHelmet(application)
<CustomGithubCorner /> }
{ {
Setting.renderLogo(application) Setting.renderLogo(application)
} }
{/* {*/} {/* {*/}
{/* this.state.clientId !== null ? "Redirect" : null*/} {/* this.state.clientId !== null ? "Redirect" : null*/}
{/* }*/} {/* }*/}
{ {
this.renderSignedInBox() this.renderSignedInBox()
} }
{ {
this.renderForm(application) this.renderForm(application)
} }
</div>
</div> </div>
</Col> </Col>
</Row> </Row>

8
web/src/auth/SignupPage.js
View File

@@ -614,15 +614,15 @@ class SignupPage extends React.Component {
); );
} }
const formStyle = Setting.parseObject(application.formCss); const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
return ( return (
<div className="loginBackground" style={{backgroundImage: `url(${application.formBackgroundUrl})`}}> <div className="loginBackground" style={{backgroundImage: Setting.inIframe() ? null : `url(${application.formBackgroundUrl})`}}>
<CustomGithubCorner /> <CustomGithubCorner />
&nbsp; &nbsp;
<Row> <Row>
<Col span={8} offset={application.formOffset === 0 ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} > <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} >
<div style={{marginTop: "10px", marginBottom: "30px", textAlign: "center", ...formStyle}}> <div style={{marginBottom: "10px", textAlign: "center", ...formStyle}}>
{ {
Setting.renderHelmet(application) Setting.renderHelmet(application)
} }