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

fix(fe/login): refine login dialog

Browse source
This commit is contained in:
hexxa 2022-01-23 17:36:31 +08:00 • committed by Hexxa
parent 55ba21b4a5
commit b1accfdbee
2 changed files with 93 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -85,9 +85,56 @@
}
.theme-default #pane-login {
max-width: 48rem;
padding: 2rem;
}
.theme-default #pane-login #title {
font-size: 2rem;
text-align: center;
}
.theme-default #pane-login .login-container {
margin: 2rem;
}
.theme-default #pane-login .input-wrap {
width: 100%;
background-color: #eaebf6;
margin: 2rem 0 0 0;
border-radius: 0.6rem;
line-height: 4rem;
}
.theme-default #pane-login #captcha-input {
width: calc(100% - 1rem);
}
.theme-default #pane-login #captcha {
width: calc(100% - 1rem);
background-color: #eaebf6;
border: solid 1px #eaebf6;
margin: 2rem 0 0 0;
border-radius: 0.6rem;
height: 3.8rem;
}
.theme-default #pane-login input {
width: 100%;
padding: 0;
border: none;
margin: 0 1rem;
background-color: transparent;
}
.theme-default #btn-login {
background-color: #1abc9c;
color: #fff;
width: 100%;
margin-top: 2rem;
height: 4rem;
}
.theme-default #breadcrumb {
width: 100%;
}
@ -124,8 +171,8 @@
color: #34495e;
background-color: white;
border-radius: 0.8rem;
margin-bottom: 2rem;
box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);
margin: auto auto 2rem auto;
}
.container-padding {
@ -438,11 +485,6 @@
color: #7f8c8d;
}
.theme-default #btn-login {
background-color: #1abc9c;
color: #fff;
}
.theme-default .pane-title {
color: black;
font-size: 1.6rem;
@ -498,7 +540,7 @@
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
background: url("/static/img/textured_paper.png") repeat fixed center;
overflow: scroll;
z-index: 100;
}
@ -546,13 +588,6 @@
/* margin: 0.5rem 0 1rem 0; */
}
.captcha {
width: 14rem;
height: 3rem;
border: solid 1px #95a5a6;
border-radius: 0.5rem;
}
.theme-default .h1,
.theme-default .h2 {
font-size: 2rem;

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

@ -110,55 +110,66 @@ export class AuthPane extends React.Component<Props, State, {}> {
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 className="login-container">
<a
href="https://github.com/ihexxa/quickshare"
target="_blank"
className="h5"
id="title"
>
Quickshare
</a>
<div className="hr"></div>
<div className="input-wrap">
<input
name="user"
type="text"
onChange={this.changeUser}
value={this.state.user}
placeholder={this.props.msg.pkg.get("login.username")}
/>
</div>
<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>
<div className="input-wrap">
<input
name="pwd"
type="password"
onChange={this.changePwd}
value={this.state.pwd}
placeholder={this.props.msg.pkg.get("login.pwd")}
/>
</div>
<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")}
/>,
<div className="input-wrap">
<input
id="captcha-input"
type="text"
onChange={this.changeCaptcha}
value={this.state.captchaInput}
placeholder={this.props.msg.pkg.get("login.captcha")}
/>
</div>,
<img
id="captcha"
src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
className="captcha"
onClick={this.refreshCaptcha}
/>,
])}
childrenStyles={List([
{ justifyContent: "flex-start" },
{ justifyContent: "flex-end" },
])}
/>
</span>
<span className="float-input">
<button id="btn-login" onClick={this.login}>
{this.props.msg.pkg.get("login.login")}
</button>
</span>
</div>
</div>
);
}