Skip to content

Commit 0df09b8

Browse files
author
Gilyoung
committed
Modify the style of the login page
1 parent 27a4dc6 commit 0df09b8

File tree

19 files changed

+489
-141
lines changed

19 files changed

+489
-141
lines changed

‎public/index.html

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7-
<meta name="theme-color" content="#000000">
8-
<!--
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<!--
911
manifest.json provides metadata used when your web app is added to the
1012
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1113
-->
12-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14-
<!--
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16+
<!--
1517
Notice the use of %PUBLIC_URL% in the tags above.
1618
It will be replaced with the URL of the `public` folder during the build.
1719
Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +22,13 @@
2022
work correctly both with client-side routing and a non-root public URL.
2123
Learn how to configure a non-root public URL by running `npm run build`.
2224
-->
23-
<title>CodeChain Wallet</title>
24-
</head>
25+
<title>CodeChain Wallet</title>
26+
</head>
2527

26-
<body>
27-
<noscript>
28-
You need to enable JavaScript to run this app.
29-
</noscript>
30-
<div id="root"></div>
31-
<!--
28+
<body>
29+
<noscript> You need to enable JavaScript to run this app. </noscript>
30+
<div id="root"></div>
31+
<!--
3232
This HTML file is a template.
3333
If you open it directly in the browser, you will see an empty page.
3434
@@ -38,6 +38,5 @@
3838
To begin the development, run `npm start` or `yarn start`.
3939
To create a production bundle, use `npm run build` or `yarn build`.
4040
-->
41-
</body>
42-
41+
</body>
4342
</html>

‎src/components/AddressList/AddressItem/AddressItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,10 @@ class AddressItem extends React.Component<Props, State> {
8181
</p>
8282
</div>
8383
<span className="address-text mono">
84-
{walletAddress.address.slice(0, 15)}
84+
{walletAddress.address.slice(0, 12)}
8585
...
8686
{walletAddress.address.slice(
87-
walletAddress.address.length - 15,
87+
walletAddress.address.length - 12,
8888
walletAddress.address.length
8989
)}
9090
</span>

‎src/components/App/App.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
faFileDownload,
77
faPlus,
88
faPlusCircle,
9+
faTimes,
910
faTrashAlt
1011
} from "@fortawesome/free-solid-svg-icons";
1112
import * as React from "react";
@@ -34,7 +35,8 @@ library.add(
3435
faBars,
3536
faChevronLeft,
3637
faArrowAltCircleDown,
37-
faPlusCircle
38+
faPlusCircle,
39+
faTimes
3840
);
3941

4042
interface StateProps {

‎src/components/CreateAddressForm/CreateAddressForm.tsx

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ValidationInput from "../ValidationInput/ValidationInput";
55
import "./CreateAddressForm.css";
66

77
interface Props {
8-
onCancel: () => void;
8+
onCancel?: () => void;
99
onSubmit: (
1010
type: AddressType,
1111
addressName: string,
@@ -48,7 +48,6 @@ export default class CreateAddressForm extends React.Component<Props, State> {
4848
};
4949
}
5050
public render() {
51-
const { onCancel } = this.props;
5251
const {
5352
name,
5453
password,
@@ -62,6 +61,7 @@ export default class CreateAddressForm extends React.Component<Props, State> {
6261
isPasswordConfirmValid,
6362
isPasswordValid
6463
} = this.state;
64+
const { onCancel } = this.props;
6565
return (
6666
<div className="Create-address-form">
6767
<h4 className="title">Add address</h4>
@@ -169,7 +169,7 @@ export default class CreateAddressForm extends React.Component<Props, State> {
169169
<ValidationInput
170170
labelText="ADDRESS NAME"
171171
value={name}
172-
placeholder="Name"
172+
placeholder="name"
173173
onChange={this.handleNameChange}
174174
error={nameError}
175175
onBlur={this.checkNameField}
@@ -181,7 +181,7 @@ export default class CreateAddressForm extends React.Component<Props, State> {
181181
type="password"
182182
labelText="PASSPHRASE"
183183
value={password}
184-
placeholder="Password"
184+
placeholder="password"
185185
onChange={this.handlePasswordChange}
186186
error={passwordError}
187187
onBlur={this.checkPasswordField}
@@ -193,25 +193,29 @@ export default class CreateAddressForm extends React.Component<Props, State> {
193193
type="password"
194194
labelText="PASSPHRASE CONFIRM"
195195
value={passwordConfirm}
196-
placeholder="Passphrase confirm"
196+
placeholder="passphrase confirm"
197197
onChange={this.handlePasswordConfirmChange}
198198
error={passwordConfirmError}
199199
onBlur={this.checkPasswordConfirmField}
200200
isValid={isPasswordConfirmValid}
201201
/>
202202
</div>
203203
<div className="d-flex cancel-add-btn-container">
204-
<button
205-
type="button"
206-
className="btn btn-primary w-50 mr-1 square"
207-
onClick={onCancel}
208-
>
209-
Cancel
210-
</button>
204+
{onCancel && (
205+
<button
206+
type="button"
207+
onClick={onCancel}
208+
className={`btn btn-primary square w-50 mr-1`}
209+
>
210+
Cancel
211+
</button>
212+
)}
211213
<button
212214
type="button"
213215
onClick={this.handleSubmit}
214-
className="btn btn-primary reverse w-50 ml-1 square"
216+
className={`btn btn-primary reverse square ${
217+
onCancel ? "w-50 ml-1" : "w-100"
218+
}`}
215219
>
216220
Add
217221
</button>
@@ -268,6 +272,20 @@ export default class CreateAddressForm extends React.Component<Props, State> {
268272
return;
269273
}
270274

275+
this.setState({
276+
type: AddressType.Asset,
277+
name: "",
278+
password: "",
279+
passwordConfirm: "",
280+
networkId: "cc",
281+
nameError: undefined,
282+
passwordConfirmError: undefined,
283+
passwordError: undefined,
284+
isNameValid: undefined,
285+
isPasswordValid: undefined,
286+
isPasswordConfirmValid: undefined
287+
});
288+
271289
onSubmit(type, name.trim(), password, networkId);
272290
};
273291

‎src/components/CreateWalletForm/CreateWalletForm.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,17 @@
2525
}
2626

2727
.wallet-address-list-container {
28-
margin-top: 18px;
28+
flex: 1;
29+
overflow: scroll;
30+
padding-top: 12px;
31+
padding-bottom: 12px;
2932

30-
.add-address-paenl {
33+
.add-address-button {
3134
height: 80px;
3235
width: 100%;
3336
border-radius: 5px;
3437
background-color: rgba(255, 255, 255, 0.2);
3538
color: rgba(255, 255, 255, 0.4);
36-
margin-top: 12px;
3739
}
3840
}
3941
}

‎src/components/CreateWalletForm/CreateWalletForm.tsx

Lines changed: 73 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,125 @@
1+
import * as _ from "lodash";
12
import * as React from "react";
3+
import { connect } from "react-redux";
4+
import { Action } from "redux";
5+
import { ThunkDispatch } from "redux-thunk";
6+
import { WalletAddress } from "../../model/address";
7+
import { ReducerConfigure } from "../../redux";
8+
import walletActions from "../../redux/wallet/walletActions";
29
import ValidationInput from "../ValidationInput/ValidationInput";
10+
import CreatedAddressItem from "./CreatedAddressItem/CreatedAddressItem";
311
import "./CreateWalletForm.css";
412

13+
interface StateProps {
14+
creatingAddresses?: WalletAddress[] | null;
15+
walletName?: string | null;
16+
}
517
interface State {
6-
walletName: string;
718
isValidWalletName?: boolean;
819
nameError?: string | null;
920
}
21+
interface DispatchProps {
22+
removeWalletAddress: (address: string) => void;
23+
updateWalletName: (name: string) => void;
24+
}
1025

11-
export default class CreateWalletForm extends React.Component<any, State> {
26+
type Props = DispatchProps & StateProps;
27+
class CreateWalletForm extends React.Component<Props, State> {
1228
public constructor(props: any) {
1329
super(props);
1430
this.state = {
15-
walletName: "",
1631
isValidWalletName: undefined,
1732
nameError: undefined
1833
};
1934
}
2035
public render() {
21-
const { walletName, nameError, isValidWalletName } = this.state;
36+
const { nameError, isValidWalletName } = this.state;
37+
const { creatingAddresses, walletName } = this.props;
2238
return (
23-
<div className="Create-wallet-form">
39+
<div className="Create-wallet-form d-flex flex-column">
2440
<h4>Create new wallet</h4>
25-
<div className="form-group wallet-name-container">
41+
<div className="wallet-name-container">
2642
<div className="wallet-name-input">
2743
<ValidationInput
44+
className="mb-0"
2845
onChange={this.handleWalletNameChange}
29-
placeholder="Name"
46+
placeholder="name"
3047
labelText="WALLET NAME"
31-
value={walletName}
48+
value={walletName || ""}
3249
reverse={true}
3350
onBlur={this.checkWalletName}
3451
error={nameError}
3552
isValid={isValidWalletName}
3653
/>
3754
</div>
3855
</div>
56+
<span className="address-list-title">ADDRESS LIST</span>
3957
<div className="wallet-address-list-container">
40-
<span className="address-list-title">ADDRESS LIST</span>
41-
<div className="add-address-paenl d-flex align-items-center justify-content-center">
42-
<span className="font-weight-bold">ADD ADDRESS</span>
43-
</div>
58+
{(!creatingAddresses || creatingAddresses.length === 0) && (
59+
<div className="add-address-button d-flex align-items-center justify-content-center">
60+
<span className="font-weight-bold">
61+
ADD ADDRESS
62+
</span>
63+
</div>
64+
)}
65+
{_.map(creatingAddresses, address => {
66+
return (
67+
<CreatedAddressItem
68+
key={address.address}
69+
data={address}
70+
onRemove={this.handleRemoveAddress}
71+
/>
72+
);
73+
})}
4474
</div>
4575
</div>
4676
);
4777
}
4878
private handleWalletNameChange = (event: any) => {
4979
this.setState({
50-
walletName: event.target.value,
5180
nameError: undefined,
5281
isValidWalletName: undefined
5382
});
83+
this.props.updateWalletName(event.target.value);
5484
};
5585
private checkWalletName = (): boolean => {
56-
const { walletName } = this.state;
57-
if (walletName.trim().length === 0) {
86+
const { walletName } = this.props;
87+
if (!walletName || walletName.trim().length === 0) {
5888
this.setState({
5989
nameError: "Required",
6090
isValidWalletName: false
6191
});
6292
return false;
6393
}
6494
this.setState({ isValidWalletName: true });
95+
6596
return true;
6697
};
98+
private handleRemoveAddress = (address: string) => {
99+
this.props.removeWalletAddress(address);
100+
};
67101
}
102+
103+
const mapStateToProps = (state: ReducerConfigure) => {
104+
const creatingAddresses = state.walletReducer.creatingAddresses;
105+
const walletName = state.walletReducer.walletName;
106+
return {
107+
creatingAddresses,
108+
walletName
109+
};
110+
};
111+
const mapDispatchToProps = (
112+
dispatch: ThunkDispatch<ReducerConfigure, void, Action>
113+
) => ({
114+
removeWalletAddress: (address: string) => {
115+
dispatch(walletActions.removeWalletAddress(address));
116+
},
117+
updateWalletName: (name: string) => {
118+
dispatch(walletActions.updateWalletName(name));
119+
}
120+
});
121+
122+
export default connect(
123+
mapStateToProps,
124+
mapDispatchToProps
125+
)(CreateWalletForm);

0 commit comments

Comments
 (0)