llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-23 10:45:47 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 110 additions and 89 deletions
Show Stats 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 templete = {
const template = {
padding: "30px",
border: "2px solid #ffffff",
borderRadius: "7px",
@ -157,7 +157,7 @@ class ApplicationEditPage extends React.Component {
}
renderApplication() {
const preview = JSON.stringify(templete, null, 2);
const preview = JSON.stringify(template, null, 2);
return (
<Card size="small" title={
<div>
@ -562,10 +562,10 @@ class ApplicationEditPage extends React.Component {
</Col>
</Row>
<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")}:
</Col>
<Col span={23} >
<Col span={22} >
<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"}} />
</a>

1
web/src/ApplicationListPage.js
View File

@ -53,6 +53,7 @@ class ApplicationListPage extends BaseListPage {
redirectUris: ["http://localhost:9000/callback"],
tokenFormat: "JWT",
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) {
switch (syncer.type) {
case "Keycloak":

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

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