Skip to content

Commit 37a642f

Browse files
rpichiolirpichioli
authored
Merge pull request #25 from rpichioli/improvements
Some fixes in forms after full refactor and starting in singup form
2 parents 2206666 + cb8c376 commit 37a642f

File tree

5 files changed

+81
-20
lines changed

5 files changed

+81
-20
lines changed

‎client/src/components/Band/Album/AlbumCard.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@ class AlbumCard extends React.Component {
1818
<div className="description">{album.description}</div>
1919
</div>
2020
<div className="extra content">
21-
<NavLink to={`/band/${band.id}/album/${album.id}`} className="ui basic button blue mini">
22-
<i className="icon edit"></i> Edit
23-
</NavLink>
24-
<div className="ui basic button red mini right floated disabled">
25-
<i className="icon trash"></i> Delete
21+
<div class="ui vertical buttons fluid">
22+
<NavLink to={`/band/${band.id}/album/${album.id}`} className="ui button labeled icon blue">
23+
<i className="icon edit"></i> Edit
24+
</NavLink>
25+
<div className="ui button labeled icon red disabled">
26+
<i className="icon trash"></i> Remove
27+
</div>
2628
</div>
2729
{/* onClick={() => deleteGame(album._id)} */}
2830
</div>

‎client/src/components/Band/Album/AlbumList.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,18 @@ import AlbumCard from './AlbumCard';
99
class AlbumsList extends React.Component {
1010

1111
render() {
12-
const albumCards = (
13-
<div className="ui five cards">
14-
{
15-
!!this.props.band.albums && this.props.band.albums.map((album) => {
16-
return (<AlbumCard key={this.props.band.id} band={this.props.band} album={album} />);
17-
})
18-
}
19-
</div>
20-
);
12+
let albumCards = "";
13+
if (!!this.props.band && !!this.props.band.albums) {
14+
albumCards = (
15+
<div className="ui three cards">
16+
{
17+
!!this.props.band.albums && this.props.band.albums.map((album) => {
18+
return (<AlbumCard key={this.props.band.id} band={this.props.band} album={album} />);
19+
})
20+
}
21+
</div>
22+
);
23+
}
2124

2225
const emptyMessage = (
2326
<div className="ui info message">There is no albums registered yet.</div>

‎client/src/components/Band/BandForm.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class BandForm extends React.Component {
4141

4242
componentWillReceiveProps = (nextProps) => {
4343
this.setState({
44-
//id: nextProps.band.id,
44+
id: nextProps.band.id,
4545
title: nextProps.band.title,
4646
year: nextProps.band.year,
4747
description: nextProps.band.description

‎client/src/components/User/SignUp.js‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import classnames from 'classnames';
23

34
class SignUp extends React.Component {
45
state = {
@@ -17,10 +18,61 @@ class SignUp extends React.Component {
1718
}
1819

1920
render() {
21+
// id int(11) AI PK
22+
// name varchar(150)
23+
// email varchar(300)
24+
// username varchar(100)
25+
// password text
26+
// status enum('A','C')
2027
return (
2128
<div>
2229
<h1>Sign Up</h1>
23-
<p>Coming soon..</p>
30+
<form className={classnames('ui','form', { loading: this.state.loading })} onSubmit={this.handleSubmit}>
31+
32+
<h4 className="ui dividing header">Register here to access our restrict area and private content</h4>
33+
34+
{!!this.state.errors.global && <div className="ui negative message"><p>{this.state.errors.global}</p></div>}
35+
36+
<div className={classnames("field", { error: !!this.state.errors.name })}>
37+
<label htmlFor="name">Name</label>
38+
<input
39+
id="name" name="name" type="text" className="ui input" placeholder="Your complete name"
40+
value={this.state.name} onChange={this.handleChange}
41+
/>
42+
<span>{this.state.errors.name}</span>
43+
</div>
44+
45+
<div className={classnames("field", { error: !!this.state.errors.email })}>
46+
<label htmlFor="email">E-mail</label>
47+
<input
48+
id="email" name="email" type="text" className="ui input" placeholder="Your personal main e-mail"
49+
value={this.state.email} onChange={this.handleChange}
50+
/>
51+
<span>{this.state.errors.email}</span>
52+
</div>
53+
54+
<div className={classnames("field", { error: !!this.state.errors.username })}>
55+
<label htmlFor="username">Username</label>
56+
<input
57+
id="username" name="username" type="text" className="ui input" placeholder="Your username"
58+
value={this.state.username} onChange={this.handleChange}
59+
/>
60+
<span>{this.state.errors.username}</span>
61+
</div>
62+
63+
<div className={classnames("field", { error: !!this.state.errors.password })}>
64+
<label htmlFor="password">Password</label>
65+
<input
66+
id="password" name="password" type="password" className="ui input"
67+
value={this.state.password} onChange={this.handleChange}
68+
/>
69+
<span>{this.state.errors.password}</span>
70+
</div>
71+
72+
<div className="field">
73+
<button type="submit" className="ui primary button">Save and Log In</button>
74+
</div>
75+
</form>
2476
</div>
2577
);
2678
}

‎client/src/style/index.css‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1+
body {
2+
height: auto;
3+
}
4+
15
.main {
2-
margin-top: 6em;
6+
margin-top: 4em;
37
}
48

5-
.masthead.segment {
6-
/* min-height: 400px; */
9+
/* .masthead.segment {
10+
/* min-height: 400px;
711
padding: 3em 0em;
812
margin-top: -3em !important;
9-
}
13+
} */
1014
/* .masthead .logo.item img {
1115
margin-right: 1em;
1216
}

0 commit comments

Comments
 (0)