made some design changes

This commit is contained in:
Nicola Brunner 2020-04-17 11:29:40 +02:00
parent 1239559f45
commit b3abffa5b7
5 changed files with 135 additions and 225 deletions

View file

@ -4,10 +4,21 @@ import { connect } from "react-redux";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
const DeleteModal = (props) => ( const DeleteModal = (props) => (
<Modal trigger={<Button color="red">Remove</Button>} closeIcon> <Modal
trigger={
<Button icon labelPosition="left" inverted color="red">
<Icon name="trash alternate" />
Delete device
</Button>
}
closeIcon
>
<Header icon="archive" content="Are you sure ?" /> <Header icon="archive" content="Are you sure ?" />
<Modal.Actions> <Modal.Actions>
<Button color="red"> <Button
color="red"
// onClick={this.closeModal}
>
<Icon name="remove" /> No <Icon name="remove" /> No
</Button> </Button>
<Button onClick={() => props.removeDevice()} color="green"> <Button onClick={() => props.removeDevice()} color="green">
@ -38,17 +49,28 @@ const SettingsForm = (props) => {
// {this.props.device.name} // {this.props.device.name}
/> />
</Form.Field> </Form.Field>
<Form.Field> <Form.Field>
<DeleteModal removeDevice={() => props.removeDevice(values)} /> <DeleteModal removeDevice={() => props.removeDevice(values)} />
</Form.Field> </Form.Field>
//{" "}
<Modal.Actions>
<Button
color="red"
// onClick={this.closeModal}
>
<Icon name="remove" />
Discard changes
</Button>
<Button <Button
onClick={() => props.saveFunction(values)} onClick={() => props.saveFunction(values)}
color="blue" color="green"
type="submit" type="submit"
> >
Save <Icon name="checkmark" />
Save changes
</Button> </Button>
//{" "}
</Modal.Actions>
</Form> </Form>
); );
}; };

View file

@ -1,79 +1,43 @@
import React, { Component } from "react"; import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar"; import HomeNavbar from "./../components/HomeNavbar";
import { Image, Divider, Message, Grid } from "semantic-ui-react"; import {
Image,
class Paragraph extends Component { Divider,
state = { visible: true }; Message,
Grid,
handleDismiss = () => { Button,
this.setState({ visible: false }); Icon,
Header,
setTimeout(() => { Container,
this.setState({ visible: true }); } from "semantic-ui-react";
}, 2000);
};
export default class ConfirmForgotPasswrod extends Component {
render() { render() {
if (this.state.visible) {
return (
<Message
onDismiss={this.handleDismiss}
header="Link has been sent!"
content="An e-mail has been sent your address, please follow the
instruction to create a new password"
/>
);
}
return ( return (
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Link has been sent!
</Header>
<Container textAlign="center">
<p> <p>
<br /> An E-mail has been sent to your address, please follow the
<i>The message will return in 2s</i> instructions to create a new password. If you don't find the
<br /> E-mail please check also the spam folder.
<br />
</p> </p>
); </Container>
}
}
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column> </Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid> </Grid>
</React.Fragment>
); );
export default class ConfirmForgotPasswrod extends React.Component {
render() {
return <MessageReg />;
} }
} }

View file

@ -1,79 +1,43 @@
import React, { Component } from "react"; import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar"; import HomeNavbar from "./../components/HomeNavbar";
import { Image, Divider, Message, Grid } from "semantic-ui-react"; import {
Image,
class Paragraph extends Component { Divider,
state = { visible: true }; Message,
Grid,
handleDismiss = () => { Button,
this.setState({ visible: false }); Icon,
Header,
setTimeout(() => { Container,
this.setState({ visible: true }); } from "semantic-ui-react";
}, 2000);
};
export default class ConfirmRegistration extends Component {
render() { render() {
if (this.state.visible) {
return (
<Message
onDismiss={this.handleDismiss}
header="Congratulation!"
content="An e-mail has been sent your address, please confirm
your registration by following the enclosed link"
/>
);
}
return ( return (
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Congratulation!
</Header>
<Container textAlign="center">
<p> <p>
<br /> An E-mail has been sent to your address, confirm your
<i>The message will return in 2s</i> registration by following the enclosed link. If you don't find
<br /> the E-mail please check also the spam folder.
<br />
</p> </p>
); </Container>
}
}
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column> </Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid> </Grid>
</React.Fragment>
); );
export default class ConfirmRegistration extends React.Component {
render() {
return <MessageReg />;
} }
} }

View file

@ -1,79 +1,39 @@
import React, { Component } from "react"; import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar"; import HomeNavbar from "./../components/HomeNavbar";
import { Image, Divider, Message, Grid } from "semantic-ui-react"; import {
Image,
class Paragraph extends Component { Divider,
state = { visible: true }; Message,
Grid,
handleDismiss = () => { Button,
this.setState({ visible: false }); Icon,
Header,
setTimeout(() => { Container,
this.setState({ visible: true }); } from "semantic-ui-react";
}, 2000);
};
render() {
if (this.state.visible) {
return (
<Message onDismiss={this.handleDismiss}>
<Message.Header>
Congratulation<ins>s</ins>!
</Message.Header>
Your password has been successfully reset
</Message>
);
}
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
);
}
}
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid>
);
export default class ConfirmResetPassword extends Component { export default class ConfirmResetPassword extends Component {
render() { render() {
return <MessageReg />; return (
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Congratulation!
</Header>
<Container textAlign="center">
<p>Your password has been successfully reset.</p>
</Container>
</Grid.Column>
</Grid>
</React.Fragment>
);
} }
} }

View file

@ -77,7 +77,7 @@ export default class ForgotPass extends Component {
<Form.Input <Form.Input
icon="address card outline" icon="address card outline"
iconPosition="left" iconPosition="left"
placeholder="Username or E-mail" placeholder="Enter your E-mail"
name="user" name="user"
type="text" type="text"
onChange={this.onChangeHandler} onChange={this.onChangeHandler}