fix(dialog_login): clean up login dialog and fix style issues
This commit is contained in:
hexxa
Hexxa
parent
56c3fac58b
commit
6034c56fe8
4 changed files with 75 additions and 93 deletions
|
|
@ -82,15 +82,15 @@ export class Layers extends React.Component<Props, State, {}> {
|
|||
</div>
|
||||
|
||||
<div id="login-layer" className={`layer ${loginPaneClass}`}>
|
||||
<div id="root-container">
|
||||
<AuthPane
|
||||
login={this.props.login}
|
||||
ui={this.props.ui}
|
||||
update={this.props.update}
|
||||
msg={this.props.msg}
|
||||
enabled={!hideLogin}
|
||||
/>
|
||||
</div>
|
||||
{/* <div id="root-container"> */}
|
||||
<AuthPane
|
||||
login={this.props.login}
|
||||
ui={this.props.ui}
|
||||
update={this.props.update}
|
||||
msg={this.props.msg}
|
||||
enabled={!hideLogin}
|
||||
/>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
|
||||
<div id="settings-layer" className={`layer ${showSettings}`}>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
|
|||
if (this.props.enabled) {
|
||||
this.hotkeyHandler.handle(ev);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
changeUser = (ev: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({ user: ev.target.value });
|
||||
|
|
@ -129,52 +129,47 @@ export class AuthPane extends React.Component<Props, State, {}> {
|
|||
|
||||
render() {
|
||||
const row3 = this.props.ui.captchaEnabled ? (
|
||||
<Flexbox
|
||||
children={List([
|
||||
<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>,
|
||||
<div>
|
||||
<div id="captcha-input" className="float-l">
|
||||
<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 ${this.state.captchaLoaded ? "" : "hidden"}`}
|
||||
onClick={this.refreshCaptcha}
|
||||
onLoad={() => this.setState({ captchaLoaded: true })}
|
||||
/>,
|
||||
])}
|
||||
childrenStyles={List([
|
||||
{ justifyContent: "flex-start" },
|
||||
{ justifyContent: "flex-end" },
|
||||
])}
|
||||
/>
|
||||
<img
|
||||
id="captcha"
|
||||
src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
|
||||
className={`captcha float-l ${
|
||||
this.state.captchaLoaded ? "" : "hidden"
|
||||
}`}
|
||||
onClick={this.refreshCaptcha}
|
||||
onLoad={() => this.setState({ captchaLoaded: true })}
|
||||
/>
|
||||
<div className="fix"></div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
id="pane-login"
|
||||
className="container"
|
||||
style={{ display: this.props.login.authed ? "none" : "block" }}
|
||||
style={{ display: this.props.login.authed ? "none" : "" }}
|
||||
>
|
||||
<div className="login-container">
|
||||
<a
|
||||
href="https://github.com/ihexxa/quickshare"
|
||||
target="_blank"
|
||||
className="h5"
|
||||
id="title"
|
||||
>
|
||||
{this.props.ui.clientCfg.siteName}
|
||||
</a>
|
||||
<div className="padding-t-l padding-b-l margin-l-l margin-r-l">
|
||||
<a
|
||||
href="https://github.com/ihexxa/quickshare"
|
||||
target="_blank"
|
||||
className="h5 margin-t-m"
|
||||
id="title"
|
||||
>
|
||||
{this.props.ui.clientCfg.siteName}
|
||||
</a>
|
||||
|
||||
<div className="hr"></div>
|
||||
<div className="hr"></div>
|
||||
|
||||
<div className="input-wrap">
|
||||
<input
|
||||
name="user"
|
||||
type="text"
|
||||
|
|
@ -182,9 +177,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
|
|||
value={this.state.user}
|
||||
placeholder={this.props.msg.pkg.get("login.username")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-wrap">
|
||||
<input
|
||||
name="pwd"
|
||||
type="password"
|
||||
|
|
@ -192,13 +185,13 @@ export class AuthPane extends React.Component<Props, State, {}> {
|
|||
value={this.state.pwd}
|
||||
placeholder={this.props.msg.pkg.get("login.pwd")}
|
||||
/>
|
||||
|
||||
{row3}
|
||||
|
||||
<button id="btn-login" onClick={this.login} className="margin-b-l">
|
||||
{this.props.msg.pkg.get("login.login")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{row3}
|
||||
|
||||
<button id="btn-login" onClick={this.login}>
|
||||
{this.props.msg.pkg.get("login.login")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -178,8 +178,8 @@
|
|||
}
|
||||
|
||||
.theme-dark #pane-login {
|
||||
max-width: 48rem;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.theme-dark #pane-login #title {
|
||||
|
|
@ -188,26 +188,19 @@
|
|||
}
|
||||
|
||||
.theme-dark #pane-login .login-container {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.theme-dark #pane-login .input-wrap {
|
||||
width: 100%;
|
||||
background-color: #eaebf6;
|
||||
margin: 2rem 0 0 0;
|
||||
background-color: white;
|
||||
margin: 4rem 1rem auto 1rem;
|
||||
border-radius: 0.6rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
.theme-dark #pane-login #captcha-input {
|
||||
width: calc(100% - 1rem);
|
||||
width: calc(50% - 1rem);
|
||||
}
|
||||
|
||||
.theme-dark #pane-login #captcha {
|
||||
width: calc(100% - 1rem);
|
||||
width: calc(50% - 1rem);
|
||||
background-color: #eaebf6;
|
||||
border: solid 1px #eaebf6;
|
||||
margin: 2rem 0 0 0;
|
||||
margin: 0 0 0 2rem;
|
||||
border-radius: 0.6rem;
|
||||
height: 3.8rem;
|
||||
}
|
||||
|
|
@ -216,11 +209,12 @@
|
|||
.theme-dark #pane-login input:hover,
|
||||
.theme-dark #pane-login input:focus,
|
||||
.theme-dark #pane-login input:active {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
width: calc(100% - 1.6rem);
|
||||
background-color: #eaebf6;
|
||||
border-radius: 0.6rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
margin: auto auto 2rem auto;
|
||||
border: none;
|
||||
margin: 0 1rem;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -229,7 +223,6 @@
|
|||
background-color: #1abc9c;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
|
|
@ -242,7 +235,7 @@
|
|||
max-width: 100rem;
|
||||
width: 96%;
|
||||
text-align: left;
|
||||
margin: 3rem auto 8rem auto;
|
||||
margin: 3rem auto auto auto;
|
||||
}
|
||||
|
||||
.theme-dark .tabs button {
|
||||
|
|
|
|||
|
|
@ -177,7 +177,8 @@
|
|||
|
||||
.theme-default #pane-login {
|
||||
max-width: 48rem;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.theme-default #pane-login #title {
|
||||
|
|
@ -186,26 +187,19 @@
|
|||
}
|
||||
|
||||
.theme-default #pane-login .login-container {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.theme-default #pane-login .input-wrap {
|
||||
width: 100%;
|
||||
background-color: #eaebf6;
|
||||
margin: 2rem 0 0 0;
|
||||
background-color: white;
|
||||
margin: 4rem 1rem auto 1rem;
|
||||
border-radius: 0.6rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
.theme-default #pane-login #captcha-input {
|
||||
width: calc(100% - 1rem);
|
||||
width: calc(50% - 1rem);
|
||||
}
|
||||
|
||||
.theme-default #pane-login #captcha {
|
||||
width: calc(100% - 1rem);
|
||||
width: calc(50% - 1rem);
|
||||
background-color: #eaebf6;
|
||||
border: solid 1px #eaebf6;
|
||||
margin: 2rem 0 0 0;
|
||||
margin: 0 0 0 2rem;
|
||||
border-radius: 0.6rem;
|
||||
height: 3.8rem;
|
||||
}
|
||||
|
|
@ -214,20 +208,22 @@
|
|||
.theme-default #pane-login input:hover,
|
||||
.theme-default #pane-login input:focus,
|
||||
.theme-default #pane-login input:active {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
width: calc(100% - 1.6rem);
|
||||
background-color: #eaebf6;
|
||||
border-radius: 0.6rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
margin: auto auto 2rem auto;
|
||||
border: none;
|
||||
margin: 0 1rem;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
height: 2.6rem;
|
||||
}
|
||||
|
||||
|
||||
.theme-default #btn-login {
|
||||
background-color: #1abc9c;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
|
|
@ -240,7 +236,7 @@
|
|||
max-width: 100rem;
|
||||
width: 96%;
|
||||
text-align: left;
|
||||
margin: 3rem auto 8rem auto;
|
||||
margin: 3rem auto auto auto;
|
||||
}
|
||||
|
||||
.theme-default .tabs button {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue