mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Added logo component, material design button styles. Replaced logo in main page.
This commit is contained in:
Menaka Jayawardena
parent
da51c4b270
commit
3c83cd9b80
@ -1,6 +1,7 @@
|
||||
{
|
||||
"Title" : "Title",
|
||||
"Description" : "Description",
|
||||
"ShortDescription" : "Short Description",
|
||||
"Category" : "Category",
|
||||
"Visibility" : "Visibility",
|
||||
"Devices" : "Devices",
|
||||
|
||||
@ -32,11 +32,90 @@
|
||||
src: local("Roboto-Regular"), url("../../fonts/Roboto-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/*Colors*/
|
||||
.primary {
|
||||
color: white;
|
||||
background-color: #2196f3 !important;
|
||||
}
|
||||
|
||||
.primary-flat {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: white;
|
||||
background-color: #e91e63 !important;
|
||||
}
|
||||
|
||||
.danger-flat {
|
||||
color: #e91e63 !important;
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #b3b3b3 !important;
|
||||
}
|
||||
|
||||
/* ==================================================================== */
|
||||
/* Custom button styles based on material design specs. */
|
||||
|
||||
.custom-raised {
|
||||
font-family: Roboto-Medium;
|
||||
text-transform: uppercase !important;
|
||||
font-size: 14px !important;
|
||||
padding-left: 16px !important;
|
||||
border-radius: 2px !important;
|
||||
padding-right: 16px !important;
|
||||
height: 36px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.custom-raised:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
|
||||
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
|
||||
background-color: #1976D2 !important;
|
||||
}
|
||||
|
||||
.custom-raised:focus {
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
background-color: #1976D2 !important;
|
||||
}
|
||||
|
||||
.custom-flat {
|
||||
font-family: Roboto-Medium;
|
||||
height: 36px !important;
|
||||
border-radius: 2px !important;
|
||||
margin-left: 8px !important;
|
||||
margin-right: 8px !important;
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
background-color: transparent !important;
|
||||
text-transform: uppercase;
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.custom-flat:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.custom-flat:focus {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.40) !important;
|
||||
}
|
||||
|
||||
/* ==================================================================== */
|
||||
|
||||
/* Body Styling */
|
||||
body {
|
||||
width: 100%;
|
||||
font-family: "Roboto-Regular" !important;
|
||||
background-color: #dfdfdf !important;
|
||||
background-color: #e8e8e8 !important;
|
||||
}
|
||||
|
||||
.app-manager-title {
|
||||
@ -67,26 +146,47 @@ body {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#login-btn {
|
||||
border-radius: 0;
|
||||
background-color: navy;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
.login-btn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#login-container {
|
||||
.login-header {
|
||||
background-color: #3f50b5;
|
||||
color: white;
|
||||
height: 128px;
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 20px;
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
#login-card {
|
||||
width: 20%;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
margin: 10% auto;
|
||||
padding: 10px;
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 14px;
|
||||
border-radius: 0;
|
||||
background-color: #ffffff;
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
.login-header-title {
|
||||
font-family: Roboto-Medium;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-header-logo {
|
||||
height: 70px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin: 0 !important;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
/* Base layout container */
|
||||
#container {
|
||||
background-color: #ededed;
|
||||
@ -207,8 +307,7 @@ body {
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgb(255, 103, 5);
|
||||
background-color: #E64A19;
|
||||
}
|
||||
|
||||
#app-main-content {
|
||||
@ -383,18 +482,6 @@ body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#secondary-button {
|
||||
color: #979797;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#secondary-button:hover {
|
||||
background-color: #d8d8d8;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.step-index {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@ -678,7 +765,7 @@ div.tab button.active {
|
||||
}
|
||||
|
||||
.platform-content {
|
||||
width: 350px;
|
||||
width: 500px;
|
||||
margin: 10px;
|
||||
padding: 24px;
|
||||
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
@ -698,11 +785,12 @@ div.tab button.active {
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #3f50b5;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
|
||||
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
.platform-content:hover {
|
||||
background-color: #f2f2f2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-table-row-cell {
|
||||
|
||||
@ -25,6 +25,7 @@ import {Button, Col, Container, Input, Row,} from 'reactstrap';
|
||||
import ApplicationCreate from '../Application/Create/ApplicationCreate';
|
||||
import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import Logo from "../UIComponents/Logo/Logo";
|
||||
|
||||
/**
|
||||
* Base Layout:
|
||||
@ -49,14 +50,7 @@ class BaseLayout extends Component {
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
Axios.get("/images/logo.png", {responseType: 'arraybuffer'}).then(
|
||||
response => {
|
||||
let image = "data:image/jpeg;base64," + new Buffer(response.data, 'binary').toString('base64');
|
||||
this.setState({logo: image});
|
||||
}
|
||||
).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
handleApplicationClick() {
|
||||
@ -98,7 +92,7 @@ class BaseLayout extends Component {
|
||||
|
||||
<div id="header">
|
||||
<span id="header-text">
|
||||
<img className="header-image" src={this.state.logo}/>
|
||||
<Logo className="header-image" image_name="logo.png"/>
|
||||
IoT <FormattedMessage id="App.Publisher" defaultMessage="Application Publisher"/>
|
||||
</span>
|
||||
<div id="header-btn-container">
|
||||
@ -136,7 +130,7 @@ class BaseLayout extends Component {
|
||||
</Col>
|
||||
<Col>
|
||||
<div className="platform-link-placeholder">
|
||||
<Button id="secondary-button" onClick={this.onClickPlatforms}>
|
||||
<Button className="custom-flat grey" onClick={this.onClickPlatforms}>
|
||||
<i className="fw fw-settings"></i> Platforms</Button>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import Axios from 'axios';
|
||||
|
||||
const imageLocation = "/images/";
|
||||
|
||||
class Logo extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
image: ""
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
let url = imageLocation + this.props.image_name;
|
||||
Axios.get(url, {responseType: 'arraybuffer'}).then(
|
||||
response => {
|
||||
let image = "data:image/jpeg;base64," + new Buffer(response.data, 'binary').toString('base64');
|
||||
this.setState({image: image});
|
||||
}
|
||||
).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<img className={this.props.className} src={this.state.image} />
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Logo.prototypes = {
|
||||
className: PropTypes.string,
|
||||
image_name: PropTypes.string
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
@ -20,7 +20,8 @@ import qs from 'qs';
|
||||
import React, {Component} from 'react';
|
||||
import {Redirect, Switch} from 'react-router-dom';
|
||||
import AuthHandler from '../../../api/authHandler';
|
||||
import {Button, Card, CardBlock, CardTitle, Form, FormGroup, Input, Label} from 'reactstrap';
|
||||
import {Button, Col, Form, FormGroup, Input, Label, Row} from 'reactstrap';
|
||||
import Logo from "../../UIComponents/Logo/Logo";
|
||||
|
||||
/**
|
||||
* The Login Component.
|
||||
@ -39,7 +40,8 @@ class Login extends Component {
|
||||
userName: "",
|
||||
password: "",
|
||||
rememberMe: true,
|
||||
errors: {}
|
||||
errors: {},
|
||||
loginError: ""
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,7 +122,12 @@ class Login extends Component {
|
||||
loginPromis.then(response => {
|
||||
console.log(AuthHandler.getUser());
|
||||
this.setState({isLoggedIn: AuthHandler.getUser()});
|
||||
})
|
||||
}).catch(
|
||||
err => {
|
||||
console.log(err);
|
||||
this.setState({loginError: err});
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -130,38 +137,51 @@ class Login extends Component {
|
||||
return (
|
||||
<div id="login-container">
|
||||
{/*TODO: Style the components.*/}
|
||||
<Card id="login-card">
|
||||
<CardBlock>
|
||||
<CardTitle>
|
||||
WSO2 IoT APP Publisher
|
||||
</CardTitle>
|
||||
<hr/>
|
||||
<Form onSubmit={this.handleLogin.bind(this)}>
|
||||
<FormGroup>
|
||||
<Label for="userName">User Name:</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="userName"
|
||||
id="userName"
|
||||
placeholder="User Name"
|
||||
onChange={this.onUserNameChange.bind(this)}/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="password">Password:</Label>
|
||||
<Input
|
||||
valid={false}
|
||||
type="password"
|
||||
name="text"
|
||||
id="password"
|
||||
placeholder="Password"
|
||||
onChange={this.onPasswordChange.bind(this)}/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Button type="submit" id="login-btn">Login</Button>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</CardBlock>
|
||||
</Card>
|
||||
<div id="login-card">
|
||||
<div id="login-card-content">
|
||||
<Row className="login-header">
|
||||
<Col>
|
||||
<Logo className="login-header-logo" image_name="logo.png"/>
|
||||
</Col>
|
||||
<Col>
|
||||
<p className="login-header-title">IoT APP Publisher</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="login-form">
|
||||
<Col>
|
||||
<Form onSubmit={this.handleLogin.bind(this)}>
|
||||
<FormGroup>
|
||||
<Label for="userName">User Name:</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="userName"
|
||||
id="userName"
|
||||
placeholder="User Name"
|
||||
onChange={this.onUserNameChange.bind(this)}/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="password">Password:</Label>
|
||||
<Input
|
||||
valid={false}
|
||||
type="password"
|
||||
name="text"
|
||||
id="password"
|
||||
placeholder="Password"
|
||||
onChange={this.onPasswordChange.bind(this)}/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Button
|
||||
type="submit"
|
||||
className="custom-raised login-btn primary"
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
} else {
|
||||
return (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user