Skip to content

Commit 6034c56

Browse files
ihexxaihexxa
committed
fix(dialog_login): clean up login dialog and fix style issues
1 parent 56c3fac commit 6034c56

File tree

4 files changed

+77
-95
lines changed

4 files changed

+77
-95
lines changed

‎src/client/web/src/components/layers.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,15 @@ export class Layers extends React.Component<Props, State, {}> {
8282
</div>
8383

8484
<div id="login-layer" className={`layer ${loginPaneClass}`}>
85-
<div id="root-container">
86-
<AuthPane
87-
login={this.props.login}
88-
ui={this.props.ui}
89-
update={this.props.update}
90-
msg={this.props.msg}
91-
enabled={!hideLogin}
92-
/>
93-
</div>
85+
{/* <div id="root-container"> */}
86+
<AuthPane
87+
login={this.props.login}
88+
ui={this.props.ui}
89+
update={this.props.update}
90+
msg={this.props.msg}
91+
enabled={!hideLogin}
92+
/>
93+
{/* </div> */}
9494
</div>
9595

9696
<div id="settings-layer" className={`layer ${showSettings}`}>

‎src/client/web/src/components/pane_login.tsx

+40-47
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
6969
if (this.props.enabled) {
7070
this.hotkeyHandler.handle(ev);
7171
}
72-
}
72+
};
7373

7474
changeUser = (ev: React.ChangeEvent<HTMLInputElement>) => {
7575
this.setState({ user: ev.target.value });
@@ -129,76 +129,69 @@ export class AuthPane extends React.Component<Props, State, {}> {
129129

130130
render() {
131131
const row3 = this.props.ui.captchaEnabled ? (
132-
<Flexbox
133-
children={List([
134-
<div className="input-wrap">
135-
<input
136-
id="captcha-input"
137-
type="text"
138-
onChange={this.changeCaptcha}
139-
value={this.state.captchaInput}
140-
placeholder={this.props.msg.pkg.get("login.captcha")}
141-
/>
142-
</div>,
143-
144-
<img
145-
id="captcha"
146-
src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
147-
className={`captcha ${this.state.captchaLoaded ? "" : "hidden"}`}
148-
onClick={this.refreshCaptcha}
149-
onLoad={() => this.setState({ captchaLoaded: true })}
150-
/>,
151-
])}
152-
childrenStyles={List([
153-
{ justifyContent: "flex-start" },
154-
{ justifyContent: "flex-end" },
155-
])}
156-
/>
132+
<div>
133+
<div id="captcha-input" className="float-l">
134+
<input
135+
type="text"
136+
onChange={this.changeCaptcha}
137+
value={this.state.captchaInput}
138+
placeholder={this.props.msg.pkg.get("login.captcha")}
139+
/>
140+
</div>
141+
142+
<img
143+
id="captcha"
144+
src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
145+
className={`captcha float-l ${
146+
this.state.captchaLoaded ? "" : "hidden"
147+
}`}
148+
onClick={this.refreshCaptcha}
149+
onLoad={() => this.setState({ captchaLoaded: true })}
150+
/>
151+
<div className="fix"></div>
152+
</div>
157153
) : null;
158154

159155
return (
160156
<div
161157
id="pane-login"
162-
className="container"
163-
style={{ display: this.props.login.authed ? "none" : "block" }}
158+
style={{ display: this.props.login.authed ? "none" : "" }}
164159
>
165160
<div className="login-container">
166-
<a
167-
href="https://github.com/ihexxa/quickshare"
168-
target="_blank"
169-
className="h5"
170-
id="title"
171-
>
172-
{this.props.ui.clientCfg.siteName}
173-
</a>
174-
175-
<div className="hr"></div>
176-
177-
<div className="input-wrap">
161+
<div className="padding-t-l padding-b-l margin-l-l margin-r-l">
162+
<a
163+
href="https://github.com/ihexxa/quickshare"
164+
target="_blank"
165+
className="h5 margin-t-m"
166+
id="title"
167+
>
168+
{this.props.ui.clientCfg.siteName}
169+
</a>
170+
171+
<div className="hr"></div>
172+
178173
<input
179174
name="user"
180175
type="text"
181176
onChange={this.changeUser}
182177
value={this.state.user}
183178
placeholder={this.props.msg.pkg.get("login.username")}
184179
/>
185-
</div>
186180

187-
<div className="input-wrap">
188181
<input
189182
name="pwd"
190183
type="password"
191184
onChange={this.changePwd}
192185
value={this.state.pwd}
193186
placeholder={this.props.msg.pkg.get("login.pwd")}
194187
/>
195-
</div>
196188

197-
{row3}
189+
{row3}
198190

199-
<button id="btn-login" onClick={this.login}>
200-
{this.props.msg.pkg.get("login.login")}
201-
</button>
191+
<button id="btn-login" onClick={this.login} className="margin-b-l">
192+
{this.props.msg.pkg.get("login.login")}
193+
</button>
194+
</div>
202195
</div>
203196
</div>
204197
);

‎static/public/css/dark.css

+13-20
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,8 @@
178178
}
179179

180180
.theme-dark #pane-login {
181-
max-width: 48rem;
182-
padding: 2rem;
181+
width: 100%;
182+
margin: auto;
183183
}
184184

185185
.theme-dark #pane-login #title {
@@ -188,26 +188,19 @@
188188
}
189189

190190
.theme-dark #pane-login .login-container {
191-
margin: 2rem;
192-
}
193-
194-
.theme-dark #pane-login .input-wrap {
195-
width: 100%;
196-
background-color: #eaebf6;
197-
margin: 2rem 0 0 0;
191+
background-color: white;
192+
margin: 4rem 1rem auto 1rem;
198193
border-radius: 0.6rem;
199-
line-height: 4rem;
200194
}
201195

202196
.theme-dark #pane-login #captcha-input {
203-
width: calc(100% - 1rem);
197+
width: calc(50% - 1rem);
204198
}
205199

206200
.theme-dark #pane-login #captcha {
207-
width: calc(100% - 1rem);
201+
width: calc(50% - 1rem);
208202
background-color: #eaebf6;
209-
border: solid 1px #eaebf6;
210-
margin: 2rem 0 0 0;
203+
margin: 0 0 0 2rem;
211204
border-radius: 0.6rem;
212205
height: 3.8rem;
213206
}
@@ -216,11 +209,12 @@
216209
.theme-dark #pane-login input:hover,
217210
.theme-dark #pane-login input:focus,
218211
.theme-dark #pane-login input:active {
219-
width: 100%;
220-
padding: 0;
212+
width: calc(100% - 1.6rem);
213+
background-color: #eaebf6;
214+
border-radius: 0.6rem;
215+
padding: 0.6rem 0.8rem;
216+
margin: auto auto 2rem auto;
221217
border: none;
222-
margin: 0 1rem;
223-
background-color: transparent;
224218
outline: none;
225219
box-shadow: none;
226220
}
@@ -229,7 +223,6 @@
229223
background-color: #1abc9c;
230224
color: #fff;
231225
width: 100%;
232-
margin-top: 2rem;
233226
height: 4rem;
234227
}
235228

@@ -242,7 +235,7 @@
242235
max-width: 100rem;
243236
width: 96%;
244237
text-align: left;
245-
margin: 3rem auto 8rem auto;
238+
margin: 3rem auto auto auto;
246239
}
247240

248241
.theme-dark .tabs button {

‎static/public/css/white.css

+15-19
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,8 @@
177177

178178
.theme-default #pane-login {
179179
max-width: 48rem;
180-
padding: 2rem;
180+
width: 100%;
181+
margin: auto;
181182
}
182183

183184
.theme-default #pane-login #title {
@@ -186,26 +187,19 @@
186187
}
187188

188189
.theme-default #pane-login .login-container {
189-
margin: 2rem;
190-
}
191-
192-
.theme-default #pane-login .input-wrap {
193-
width: 100%;
194-
background-color: #eaebf6;
195-
margin: 2rem 0 0 0;
190+
background-color: white;
191+
margin: 4rem 1rem auto 1rem;
196192
border-radius: 0.6rem;
197-
line-height: 4rem;
198193
}
199194

200195
.theme-default #pane-login #captcha-input {
201-
width: calc(100% - 1rem);
196+
width: calc(50% - 1rem);
202197
}
203198

204199
.theme-default #pane-login #captcha {
205-
width: calc(100% - 1rem);
200+
width: calc(50% - 1rem);
206201
background-color: #eaebf6;
207-
border: solid 1px #eaebf6;
208-
margin: 2rem 0 0 0;
202+
margin: 0 0 0 2rem;
209203
border-radius: 0.6rem;
210204
height: 3.8rem;
211205
}
@@ -214,20 +208,22 @@
214208
.theme-default #pane-login input:hover,
215209
.theme-default #pane-login input:focus,
216210
.theme-default #pane-login input:active {
217-
width: 100%;
218-
padding: 0;
211+
width: calc(100% - 1.6rem);
212+
background-color: #eaebf6;
213+
border-radius: 0.6rem;
214+
padding: 0.6rem 0.8rem;
215+
margin: auto auto 2rem auto;
219216
border: none;
220-
margin: 0 1rem;
221-
background-color: transparent;
222217
outline: none;
223218
box-shadow: none;
219+
height: 2.6rem;
224220
}
225221

222+
226223
.theme-default #btn-login {
227224
background-color: #1abc9c;
228225
color: #fff;
229226
width: 100%;
230-
margin-top: 2rem;
231227
height: 4rem;
232228
}
233229

@@ -240,7 +236,7 @@
240236
max-width: 100rem;
241237
width: 96%;
242238
text-align: left;
243-
margin: 3rem auto 8rem auto;
239+
margin: 3rem auto auto auto;
244240
}
245241

246242
.theme-default .tabs button {

0 commit comments

Comments
 (0)