doesnm/quickshare
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(pane_login): unify styles

Browse source
This commit is contained in:
hexxa 2021-11-20 17:02:03 +08:00 • committed by Hexxa
parent 59ca0d5c51
commit e80608823e
5 changed files with 105 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

8
public/static/css/style.css
View file

@ -4,12 +4,12 @@ body button {
background-color: #ecf0f6;
}
body input {
/* body input {
font-size: 1.2rem;
color: #697384;
background-color: #ecf0f6;
border: solid 1px #95a5a6;
}
} */
#bg {
position: fixed;
@ -649,12 +649,12 @@ div.hr {
font-size: 1.4rem;
}
.captcha {
/* .captcha {
width: 14rem;
height: 3rem;
border: solid 1px #95a5a6;
border-radius: 0.5rem;
}
} */
.user {
font-weight: bold;

39
public/static/css/white.css
View file

@ -57,6 +57,10 @@
text-transform: capitalize;
}
.theme-default #pane-login {
padding: 2rem;
}
.theme-default .op-bar {
background: rgba(255, 255, 255, 1);
box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
@ -71,10 +75,45 @@
z-index: 9;
}
.theme-default .float-input {
display: inline-block;
margin: auto 1rem 1rem auto;
}
.theme-default .float-input:last-child {
margin: auto 1rem auto auto;
}
.theme-default .float-input .label {
font-size: 1.2rem;
line-height: 1.8rem;
color: #7f8c8d;
}
.theme-default #btn-login {
background-color: #1abc9c;
color: #fff;
}
.theme-default #tail {
color: #34495e;
}
.theme-default input {
font-size: 1.2rem;
color: #34495e;
background-color: #ecf0f6;
border: solid 1px #95a5a6;
margin: 1rem 0;
}
.captcha {
width: 14rem;
height: 3rem;
border: solid 1px #95a5a6;
border-radius: 0.5rem;
}
.theme-default .h1,
.theme-default .h2 {
font-size: 2rem;

126
src/client/web/src/components/pane_login.tsx
View file

@ -70,7 +70,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
return updater().initAll(params);
} else {
this.setState({ user: "", pwd: "", captchaInput: "" });
alertMsg("Failed to login.");
alertMsg(this.props.msg.pkg.get("op.fail"));
return updater().getCaptchaID();
}
})
@ -94,74 +94,64 @@ export class AuthPane extends React.Component<Props, State, {}> {
render() {
return (
<span>
<div
className="container"
style={{ display: this.props.login.authed ? "none" : "block" }}
>
<div className="padding-l">
<span className="inline-block margin-r-m margin-b-m">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("login.username")}
</div>
<input
name="user"
type="text"
onChange={this.changeUser}
value={this.state.user}
className="black0-font margin-t-m margin-b-m margin-r-m"
placeholder={this.props.msg.pkg.get("login.username")}
/>
</span>
<span className="inline-block margin-r-m margin-b-m">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("login.pwd")}
</div>
<input
name="pwd"
type="password"
onChange={this.changePwd}
value={this.state.pwd}
className="black0-font margin-t-m margin-b-m"
placeholder={this.props.msg.pkg.get("login.pwd")}
/>
</span>
<span className="inline-block margin-r-m margin-b-m">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("login.captcha")}
</div>
<Flexbox
children={List([
<input
name="captcha"
type="text"
onChange={this.changeCaptcha}
value={this.state.captchaInput}
className="black0-font margin-t-m margin-b-m margin-r-m"
placeholder={this.props.msg.pkg.get("login.captcha")}
/>,
<img
src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
className="captcha"
onClick={this.refreshCaptcha}
/>,
])}
/>
</span>
<span className="inline-block margin-r-m margin-b-m">
<button
onClick={this.login}
className="green0-bg white-font margin-t-m margin-b-m"
>
{this.props.msg.pkg.get("login.login")}
</button>
</span>
<div
id="pane-login"
className="container"
style={{ display: this.props.login.authed ? "none" : "block" }}
>
<span className="float-input">
<div className="label">
{this.props.msg.pkg.get("login.username")}
</div>
</div>
</span>
<input
name="user"
type="text"
onChange={this.changeUser}
value={this.state.user}
placeholder={this.props.msg.pkg.get("login.username")}
/>
</span>
<span className="float-input">
<div className="label">{this.props.msg.pkg.get("login.pwd")}</div>
<input
name="pwd"
type="password"
onChange={this.changePwd}
value={this.state.pwd}
placeholder={this.props.msg.pkg.get("login.pwd")}
/>
</span>
<span className="float-input">
<div className="label">{this.props.msg.pkg.get("login.captcha")}</div>
<Flexbox
children={List([
<input
name="captcha"
type="text"
onChange={this.changeCaptcha}
value={this.state.captchaInput}
placeholder={this.props.msg.pkg.get("login.captcha")}
/>,
<img
src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
className="captcha"
onClick={this.refreshCaptcha}
/>,
])}
/>
</span>
<span className="float-input">
<button
id="btn-login"
onClick={this.login}
>
{this.props.msg.pkg.get("login.login")}
</button>
</span>
</div>
);
}
}

4
src/client/web/src/i18n/en_US.ts
View file

@ -97,10 +97,12 @@ export const msgs: Map<string, string> = Map({
reset: "Reset",
"bg.url.alert": "Image URL is too short or too long",
"bg.pos.alert": "Position only supports: top, bottom, left, right, center",
"bg.repeat.alert": "Repeat only supports: repeat-x, repeat-y, repeat, space, round, no-repeat",
"bg.repeat.alert":
"Repeat only supports: repeat-x, repeat-y, repeat, space, round, no-repeat",
"bg.align.alert": "Align only supports: scroll, fixed, local",
"prefer.theme": "Theme",
"prefer.theme.url": "Theme URL",
"settings.customLan": "Customized Language Pack",
"settings.lanPackURL": "Language Pack URL",
"op.fail": "Operation Failed",
});

1
src/client/web/src/i18n/zh_CN.ts
View file

@ -103,4 +103,5 @@ export const msgs: Map<string, string> = Map({
"prefer.theme.url": "主题链接",
"settings.customLan": "自定义语言包",
"settings.lanPackURL": "语言包链接",
"op.fail": "操作失败",
});