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

fix(settings): clean up pane

Browse source
This commit is contained in:
hexxa 2021-09-27 14:30:59 +08:00 • committed by Hexxa
parent 9f7ae450de
commit 8caa713990
2 changed files with 64 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/static/css/reset.css
View file

@ -97,6 +97,10 @@ input:focus {
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
} }
::placeholder {
color: #95a5a6;
}
button { button {
cursor: pointer; cursor: pointer;
border: none; border: none;

102
src/client/web/src/components/pane_settings.tsx
View file

@ -1,9 +1,11 @@
import * as React from "react"; import * as React from "react";
import { ICoreState, MsgProps } from "./core_state"; import { ICoreState, MsgProps } from "./core_state";
import { AuthPane, LoginProps } from "./pane_login"; import { LoginProps } from "./pane_login";
import { Flexbox } from "./layout/flexbox";
import { updater } from "./state_updater"; import { updater } from "./state_updater";
import { alertMsg } from "../common/env"; import { alertMsg } from "../common/env";
import { List } from "immutable";
export interface Props { export interface Props {
login: LoginProps; login: LoginProps;
msg: MsgProps; msg: MsgProps;
@ -38,15 +40,19 @@ export class PaneSettings extends React.Component<Props, State, {}> {
}; };
} }
setPwd = () => { setPwd = async (): Promise<any> => {
if (this.state.newPwd1 !== this.state.newPwd2) { if (this.state.newPwd1 !== this.state.newPwd2) {
alertMsg(this.props.msg.pkg.get("settings.pwd.notSame")); alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
} else if (this.state.newPwd1 == "") { } else if (
this.state.oldPwd == "" ||
this.state.newPwd1 == "" ||
this.state.newPwd2 == ""
) {
alertMsg(this.props.msg.pkg.get("settings.pwd.empty")); alertMsg(this.props.msg.pkg.get("settings.pwd.empty"));
} else if (this.state.oldPwd == this.state.newPwd1) { } else if (this.state.oldPwd == this.state.newPwd1) {
alertMsg(this.props.msg.pkg.get("settings.pwd.notChanged")); alertMsg(this.props.msg.pkg.get("settings.pwd.notChanged"));
} else { } else {
updater() return updater()
.setPwd(this.state.oldPwd, this.state.newPwd1) .setPwd(this.state.oldPwd, this.state.newPwd1)
.then((ok: boolean) => { .then((ok: boolean) => {
if (ok) { if (ok) {
@ -73,78 +79,90 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div className="container"> <div className="container">
<div className="padding-l"> <div className="padding-l">
<div> <div>
<div className="flex-list-container"> <Flexbox
<div className="flex-list-item-l"> children={List([
<h5 className="black-font"> <h5 className="black-font">
{this.props.msg.pkg.get("settings.pwd.update")} {this.props.msg.pkg.get("settings.pwd.update")}
</h5> </h5>,
</div>
<div className="flex-list-item-r">
<button onClick={this.setPwd}> <button onClick={this.setPwd}>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
</button> </button>,
</div> ])}
</div> childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div> <span className="inline-block margin-r-m margin-b-m">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("settings.pwd.old")}
</div>
<input <input
name="old_pwd" name="old_pwd"
type="password" type="password"
onChange={this.changeOldPwd} onChange={this.changeOldPwd}
value={this.state.oldPwd} value={this.state.oldPwd}
className="black0-font margin-t-m margin-b-m" className="black0-font margin-t-m"
placeholder={this.props.msg.pkg.get("settings.pwd.old")} placeholder={this.props.msg.pkg.get("settings.pwd.old")}
/> />
</div> </span>
<div>
<span className="inline-block margin-r-m margin-b-m">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("settings.pwd.new1")}
</div>
<input <input
name="new_pwd1" name="new_pwd1"
type="password" type="password"
onChange={this.changeNewPwd1} onChange={this.changeNewPwd1}
value={this.state.newPwd1} value={this.state.newPwd1}
className="black0-font margin-t-m margin-b-m margin-r-m" className="black0-font margin-t-m"
placeholder={this.props.msg.pkg.get("settings.pwd.new1")} placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
/> />
</span>
<span className="inline-block margin-r-m margin-b-m">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("settings.pwd.new2")}
</div>
<input <input
name="new_pwd2" name="new_pwd2"
type="password" type="password"
onChange={this.changeNewPwd2} onChange={this.changeNewPwd2}
value={this.state.newPwd2} value={this.state.newPwd2}
className="black0-font margin-t-m margin-b-m" className="black0-font margin-t-m"
placeholder={this.props.msg.pkg.get("settings.pwd.new2")} placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/> />
</div> </span>
</div> </div>
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr white0-bg margin-t-m margin-b-m"></div>
<div className="margin-b-m"> <div className="margin-b-m">
<div className="flex-list-container"> <Flexbox
<div className="flex-list-item-l"> children={List([
<h5 className="black-font"> <h5 className="black-font">
{this.props.msg.pkg.get("settings.chooseLan")} {this.props.msg.pkg.get("settings.chooseLan")}
</h5> </h5>,
</div> <span>
<div className="flex-list-item-r"> <button
<button onClick={() => {
onClick={() => { this.setLan("en_US");
this.setLan("en_US"); }}
}} className="margin-r-m"
className="margin-r-m" >
> {this.props.msg.pkg.get("enUS")}
{this.props.msg.pkg.get("enUS")} </button>
</button> <button
<button onClick={() => {
onClick={() => { this.setLan("zh_CN");
this.setLan("zh_CN"); }}
}} >
> {this.props.msg.pkg.get("zhCN")}
{this.props.msg.pkg.get("zhCN")} </button>
</button> </span>,
</div> ])}
</div> childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div> </div>
</div> </div>
</div> </div>
); );