forked from community/device-mgt-core
Add new publisher app with ant design See merge request entgra/carbon-device-mgt!53feature/appm-store/pbac
Dharmakeerthi Lasantha
6 years ago
commit
05d2e3dab5
@ -0,0 +1,33 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import { version, Button } from 'antd';
|
||||
import "antd/dist/antd.css";
|
||||
import "./index.css";
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<p>Current antd version: {version}</p>
|
||||
<p>Please fork this codesandbox to reproduce your issue.</p>
|
||||
<p>请 fork 这个链接来重现你碰到的问题。</p>
|
||||
<Button type="primary">Hello</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
@ -1,131 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import AuthHandler from './api/authHandler';
|
||||
import createHistory from 'history/createBrowserHistory';
|
||||
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
|
||||
import {
|
||||
ApplicationCreate,
|
||||
ApplicationEdit,
|
||||
ApplicationListing,
|
||||
BaseLayout,
|
||||
Login,
|
||||
NotFound,
|
||||
PlatformCreate,
|
||||
PlatformListing
|
||||
} from './components';
|
||||
|
||||
|
||||
const history = createHistory({basename: '/publisher'});
|
||||
|
||||
/**
|
||||
* This component defines the layout and the routes for the app.
|
||||
* All the content will be loaded inside the Base component.
|
||||
* The base component includes the Core layout and the routers according to which the content will be displayed.
|
||||
*
|
||||
* The Router and Route components.
|
||||
* The Router and Route is used for navigation.
|
||||
* We specify the component which needs to be rendered for an URL.
|
||||
* Ex: When navigate to publisher/overview, the overview component will be rendered inside the main layout.
|
||||
*
|
||||
* HashRouter is used because the other router types need the server to serve those urls. In hashRouter, server does
|
||||
* not want to serve the URL.
|
||||
* */
|
||||
class Base extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
user: null
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
let user = AuthHandler.getUser();
|
||||
if (user) {
|
||||
if (!AuthHandler.isTokenExpired()) {
|
||||
this.setState({user: user});
|
||||
} else {
|
||||
this.setState({user: null});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.user !== null) {
|
||||
console.log(sessionStorage);
|
||||
console.log("hhhh");
|
||||
return (
|
||||
<div>
|
||||
<BaseLayout user={this.state.user}>
|
||||
<Switch>
|
||||
<Redirect exact path={"/"} to={"/assets/apps"}/>
|
||||
<Route exact path={"/assets/apps"} component={ApplicationListing}/>
|
||||
<Route exact path={"/assets/apps/create"} component={ApplicationCreate}/>
|
||||
<Route exact path={"/assets/platforms"} component={PlatformListing}/>
|
||||
<Route exact path={"/assets/platforms/create"} component={PlatformCreate}/>
|
||||
{/*<Route exact path={"/assets/apps/:app"}/>*/}
|
||||
<Route exact path={"/assets/apps/:app/edit"} component={ApplicationEdit}/>
|
||||
<Route exact path={"/assets/platforms/:platform"}/>
|
||||
<Route exact path={"/assets/platforms/:platform/edit"}/>
|
||||
<Route exact path={"/assets/reviews"}/>
|
||||
<Route exact path={"/assets/reviews/:review"}/>
|
||||
<Route component={NotFound}/>
|
||||
</Switch>
|
||||
</BaseLayout>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (<Redirect to={"/login"}/>)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This component is referred by the index.jsx to initiate the application.
|
||||
* TODO: Currently the URL shows like https://localhost:9443/publisher/#/publisher/assets/apps/create. this needs to
|
||||
* be fixed as https://localhost:9443/publisher/#/assets/apps/create
|
||||
*
|
||||
* */
|
||||
class Publisher extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
muiTheme: null,
|
||||
selectedType: null,
|
||||
selectedTheme: null
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Router basename="publisher" history={history}>
|
||||
<Switch>
|
||||
<Route path="/login" component={Login}/>
|
||||
<Route path="/logout" component={Login}/>
|
||||
<Route component={Base}/>
|
||||
</Switch>
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Publisher;
|
||||
@ -1,26 +0,0 @@
|
||||
/*
|
||||
* 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 React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
});
|
||||
@ -1,145 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
import Axios from 'axios';
|
||||
import AuthHandler from './authHandler';
|
||||
import Constants from '../common/constants';
|
||||
import Helper from './helpers/appMgtApiHelpers';
|
||||
|
||||
/**
|
||||
* Api definitions related to application management.
|
||||
* TODO: Work to be done on Application release.
|
||||
* */
|
||||
export default class ApplicationMgtApi {
|
||||
|
||||
/**
|
||||
* Api for create an application.
|
||||
* @param: applicationData: The application data object. This contains an object array of each step data from
|
||||
* application creation wizard.
|
||||
*
|
||||
* From applicationData, the proper application object will be created and send it to the api.
|
||||
* */
|
||||
static createApplication(generalInfo, platform, screenshots, release) {
|
||||
let {application, images} = Helper.buildApplication(generalInfo, platform, screenshots, release);
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
console.log(application);
|
||||
console.log(images);
|
||||
Axios.post(Constants.appManagerEndpoints.CREATE_APP, application, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload the image artifacts (banner, icon, screenshots) related to the application.
|
||||
* @param appId: The application uuid of the application which the images should be uploaded to.
|
||||
* @param images: The images object. This contains icon, banner and screenshots.
|
||||
* */
|
||||
static uploadImageArtifacts(appId, images) {
|
||||
let formData = new FormData();
|
||||
formData.append('icon', images.icon);
|
||||
formData.append('banner', images.banner);
|
||||
formData.append('screenshot', images.screenshots);
|
||||
console.log("Image", formData);
|
||||
const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
|
||||
return Axios.post(Constants.appManagerEndpoints.UPLOAD_IMAGE_ARTIFACTS + appId, formData, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Method to handle application release process.
|
||||
* */
|
||||
static releaseApplication(appId, applicationRelease, file) {
|
||||
let release = new FormData();
|
||||
release.append('applicationRelease', applicationRelease);
|
||||
release.append('binaryFile', file);
|
||||
const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
|
||||
return Axios.post(Constants.appManagerEndpoints.APP_RELEASE + appId, release, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Promote the current life cycle state of the application.
|
||||
* @param appId: The uuid of the application which the state should be updated.
|
||||
* @param nextState: The next lifecycle state that the application can be updated to.
|
||||
*
|
||||
* URL Pattern : /application/1.0/
|
||||
* */
|
||||
static updateLifeCycleState(appId, nextState) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.put(Constants.appManagerEndpoints.GET_ALL_APPS + appId + "/lifecycle?state=" + nextState, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the next possible state, which the application can be promoted to.
|
||||
* @param appId: The application uuid.
|
||||
*/
|
||||
static getNextLifeCycleState(appId) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS + appId + "/lifecycle", {headers: headers});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Edit created application.
|
||||
* @param applicationData: The modified application data.
|
||||
* */
|
||||
static editApplication(applicationData) {
|
||||
let app = Helper.buildApplication(applicationData).application;
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.put(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers});
|
||||
}
|
||||
|
||||
static getApplicationArtifacts(appId, artifactName) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("image/png");
|
||||
return Axios.get(Constants.appManagerEndpoints.GET_IMAGE_ARTIFACTS + appId + "?name=" + artifactName,
|
||||
{headers: headers});
|
||||
}
|
||||
|
||||
static editApplicationArtifacts(appId, images) {
|
||||
let formData = new FormData();
|
||||
formData.append('icon', images.icon);
|
||||
formData.append('banner', images.banner);
|
||||
formData.append('screenshot', images.screenshots);
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.put(Constants.appManagerEndpoints.UPLOAD_IMAGE_ARTIFACTS + appId, formData, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all the created applications for the user.
|
||||
* @return Object: The response object from the axios post.
|
||||
* */
|
||||
static getApplications() {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get specific application.
|
||||
* @param appId: The application Id.
|
||||
* */
|
||||
static getApplication(appId) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS + appId, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete specified application.
|
||||
* @param appId: The id of the application which is to be deleted.
|
||||
* */
|
||||
static deleteApplication(appId) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.delete(Constants.appManagerEndpoints.GET_ALL_APPS + appId, {headers: headers});
|
||||
}
|
||||
}
|
||||
@ -1,150 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
import Axios from 'axios';
|
||||
import User from './data/user';
|
||||
import Utils from './data/utils';
|
||||
import Constants from "../common/constants";
|
||||
|
||||
/**
|
||||
* Handles all tasks related to Authentication and Authorization.
|
||||
* Generate access tokens, verify the user has necessary permissions etc.
|
||||
* */
|
||||
class AuthHandler {
|
||||
|
||||
/**
|
||||
* Sends a request to the auth handler endpoint (auth/application-mgt/v1.0/auth/login) and generate token pair.
|
||||
* @param userName: The user name of the user.
|
||||
* @param password: The user password.
|
||||
* @return Object: The response object from the axios post.
|
||||
* */
|
||||
static login(userName, password) {
|
||||
const headers = {"Content-type": "application/json"};
|
||||
let login_promise =
|
||||
Axios.post(Constants.userConstants.LOGIN_URL,null, {headers: headers});
|
||||
|
||||
login_promise.then(response => {
|
||||
console.log(response);
|
||||
const userName = response.data.userName;
|
||||
const validityPeriod = response.data.expires_in; // In seconds
|
||||
const WSO2_IOT_TOKEN = response.data.access_token;
|
||||
const refreshToken = response.data.refresh_token;
|
||||
const clientId = response.data.application_info[0].consumerKey;
|
||||
const clientSecret = response.data.application_info[0].consumerSecret;
|
||||
|
||||
const user = new User(userName, clientId, clientSecret, validityPeriod);
|
||||
console.log(user);
|
||||
user.setAuthToken(WSO2_IOT_TOKEN, validityPeriod);
|
||||
let expiresIn = Date.now() + (validityPeriod * 1000);
|
||||
localStorage.setItem("expiresIn", expiresIn);
|
||||
AuthHandler.setUser(user);
|
||||
}
|
||||
);
|
||||
return login_promise;
|
||||
};
|
||||
|
||||
/**
|
||||
* Persists the user object in browser's local storage.
|
||||
* @param user: The user object.
|
||||
* */
|
||||
static setUser(user) {
|
||||
if (!user instanceof User) {
|
||||
throw "Invalid user object";
|
||||
}
|
||||
user.created = Date.now();
|
||||
localStorage.setItem(Constants.userConstants.WSO2_USER, JSON.stringify(user.toJson()));
|
||||
/* TODO: IMHO it's better to get this key (`wso2_user`) from configs */
|
||||
}
|
||||
|
||||
static unauthorizedErrorHandler(error_response) {
|
||||
if (error_response.status !== 401) { /* Skip unrelated response code to handle in unauthorizedErrorHandler*/
|
||||
throw error_response;
|
||||
/* re throwing the error since we don't handle it here and propagate to downstream error handlers in catch chain*/
|
||||
}
|
||||
let message = "The session has expired" + ".<br/> You will be redirect to the login page ...";
|
||||
if (true) {
|
||||
alert(message);
|
||||
} else {
|
||||
throw error_response;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the logged in user.
|
||||
* @return User: The logged in user object.
|
||||
* */
|
||||
static getUser() {
|
||||
const userData = localStorage.getItem(Constants.userConstants.WSO2_USER);
|
||||
const partialToken = Utils.getCookie(Constants.userConstants.PARTIAL_TOKEN);
|
||||
|
||||
if (!(userData && partialToken)) {
|
||||
return null;
|
||||
}
|
||||
return User.fromJson(JSON.parse(userData));
|
||||
}
|
||||
|
||||
isLoggedIn() {
|
||||
|
||||
}
|
||||
|
||||
static logout() {
|
||||
const user = AuthHandler.getUser();
|
||||
const clientId = user.getClientId();
|
||||
const clientSecret = user.getClientSecret();
|
||||
const token = user.getAuthToken();
|
||||
const headers = {"Content-type": "application/json"};
|
||||
|
||||
let login_promise = Axios.post(Constants.userConstants.LOGOUT_URL+"?token=" + token + "&clientId=" + clientId
|
||||
+ "&clientSecret=" + clientSecret,
|
||||
null, {headers: headers});
|
||||
login_promise.then(
|
||||
(response) => {
|
||||
Utils.delete_cookie(Constants.userConstants.PARTIAL_TOKEN);
|
||||
localStorage.removeItem(Constants.userConstants.WSO2_USER);
|
||||
window.location = "/";
|
||||
}
|
||||
).catch(
|
||||
(err) => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether the access token is expired.
|
||||
* @return boolean: True if expired. False otherwise.
|
||||
* */
|
||||
static isTokenExpired() {
|
||||
const expiresIn = localStorage.getItem("expiresIn");
|
||||
return (expiresIn < Date.now());
|
||||
}
|
||||
|
||||
static createAuthenticationHeaders(contentType) {
|
||||
if (AuthHandler.getUser().getAuthToken()) {
|
||||
return {
|
||||
"Authorization": "Bearer " + AuthHandler.getUser().getAuthToken(),
|
||||
"Content-Type": contentType,
|
||||
};
|
||||
}
|
||||
return "User not found";
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default AuthHandler;
|
||||
@ -1,118 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
import Utils from './utils'
|
||||
import Constants from '../../common/constants';
|
||||
/**
|
||||
* Represent an user logged in to the application, There will be allays one user per session and
|
||||
* this user details will be persist in browser localstorage.
|
||||
*/
|
||||
export default class User {
|
||||
constructor(name, clientId, clientSecret, validityPeriod) {
|
||||
if (User._instance) {
|
||||
return User._instance;
|
||||
}
|
||||
|
||||
this._userName = name;
|
||||
this._clientId = clientId;
|
||||
this._clientSecret = clientSecret;
|
||||
this._expires = validityPeriod;
|
||||
User._instance = this;
|
||||
}
|
||||
|
||||
/**
|
||||
* OAuth scopes which are available for use by this user
|
||||
* @returns {Array} : An array of scopes
|
||||
*/
|
||||
get scopes() {
|
||||
return this._scopes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set OAuth scopes available to be used by this user
|
||||
* @param {Array} newScopes : An array of scopes
|
||||
*/
|
||||
set scopes(newScopes) {
|
||||
Object.assign(this.scopes, newScopes);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the JS accessible access token fragment from cookie storage.
|
||||
* @returns {String|null}
|
||||
*/
|
||||
getAuthToken() {
|
||||
return Utils.getCookie(Constants.userConstants.PARTIAL_TOKEN);
|
||||
}
|
||||
|
||||
getClientId() {
|
||||
return this._clientId;
|
||||
}
|
||||
|
||||
getClientSecret() {
|
||||
return this._clientSecret;
|
||||
}
|
||||
|
||||
/**
|
||||
* Store the JavaScript accessible access token segment in cookie storage
|
||||
* @param {String} newToken : Part of the access token which needs when accessing REST API
|
||||
* @param {Number} validityPeriod : Validity period of the cookie in seconds
|
||||
*/
|
||||
setAuthToken(newToken, validityPeriod) {
|
||||
Utils.delete_cookie(Constants.userConstants.PARTIAL_TOKEN);
|
||||
Utils.setCookie(Constants.userConstants.PARTIAL_TOKEN, newToken, validityPeriod);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the user name of logged in user.
|
||||
* @return String: User name
|
||||
* */
|
||||
getUserName() {
|
||||
return this._userName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Provide user data in JSON structure.
|
||||
* @returns {JSON} : JSON representation of the user object
|
||||
*/
|
||||
toJson() {
|
||||
return {
|
||||
name: this._userName,
|
||||
clientId: this._clientId,
|
||||
clientSecret: this._clientSecret,
|
||||
expires: this._expires
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* User utility method to create an user from JSON object.
|
||||
* @param {JSON} userJson : Need to provide user information in JSON structure to create an user object
|
||||
* @returns {User} : An instance of User(this) class.
|
||||
*/
|
||||
static fromJson(userJson) {
|
||||
const _user = new User(userJson.name);
|
||||
_user._clientId = userJson.clientId;
|
||||
_user._clientSecret = userJson.clientSecret;
|
||||
_user._expires = userJson.expires;
|
||||
|
||||
console.log(_user);
|
||||
return _user;
|
||||
}
|
||||
}
|
||||
|
||||
User._instance = null; // A private class variable to preserve the single instance of a swaggerClient
|
||||
@ -1,92 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Utility class for Publisher application
|
||||
*/
|
||||
class PublisherUtils {
|
||||
|
||||
/**
|
||||
* TODO: Remove this method one the initial phase is done, This is used to continue the API class until the login page is create
|
||||
* @returns {promise}
|
||||
*/
|
||||
// static autoLogin() {
|
||||
// let auth = new AuthManager();
|
||||
// return auth.authenticateUser('admin', 'admin');
|
||||
// }
|
||||
|
||||
/**
|
||||
* Get JavaScript accessible cookies saved in browser, by giving the cooke name.
|
||||
* @param {String} name : Name of the cookie which need to be retrived
|
||||
* @returns {String|null} : If found a cookie with given name , return its value,Else null value is returned
|
||||
*/
|
||||
static getCookie(name) {
|
||||
let pairs = document.cookie.split(";");
|
||||
let cookie = null;
|
||||
for (let pair of pairs) {
|
||||
pair = pair.split("=");
|
||||
let cookie_name = pair[0].trim();
|
||||
let value = encodeURIComponent(pair[1]);
|
||||
if (cookie_name === name) {
|
||||
cookie = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return cookie;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a browser cookie given its name
|
||||
* @param {String} name : Name of the cookie which need to be deleted
|
||||
*/
|
||||
static delete_cookie(name) {
|
||||
document.cookie = name + '=; Path=' + "/" + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a cookie with given name and value assigned to it. Cookies can be only set to the same origin,
|
||||
* which the script is running
|
||||
* @param {String} name : Name of the cookie which need to be set
|
||||
* @param {String} value : Value of the cookie, expect it to be URLEncoded
|
||||
* @param {number} validityPeriod : (Optional) Validity period of the cookie in seconds
|
||||
* @param {String} path : Path which needs to set the given cookie
|
||||
* @param {boolean} secured : secured parameter is set
|
||||
*/
|
||||
static setCookie(name, value, validityPeriod, path = "/", secured = true) {
|
||||
let expires = "";
|
||||
const securedDirective = secured ? "; Secure" : "";
|
||||
if (validityPeriod) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + validityPeriod * 1000);
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
|
||||
document.cookie = name + "=" + value + expires + "; path=" + path + securedDirective + validityPeriod
|
||||
}
|
||||
|
||||
/**
|
||||
* Given an object returns whether the object is empty or not
|
||||
* @param {Object} object : Any JSON object
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static isEmptyObject(object) {
|
||||
return Object.keys(object).length === 0 && object.constructor === Object
|
||||
}
|
||||
}
|
||||
|
||||
export default PublisherUtils;
|
||||
@ -1,84 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Helper methods for app publisher.
|
||||
* */
|
||||
export default class Helper {
|
||||
|
||||
/**
|
||||
* Generate application object from form data passed.
|
||||
* @param generalInfo: Application data from the application creation form.
|
||||
* @param platform
|
||||
* @param screenshots
|
||||
* @param release
|
||||
* @return {Object, Object}: The application object and the set of images related to the application.
|
||||
* */
|
||||
static buildApplication(generalInfo, platform, screenshots, release) {
|
||||
|
||||
let images = screenshots;
|
||||
let application = Object.assign({}, generalInfo, platform);
|
||||
for (let prop in application) {
|
||||
if (prop === 'tags') {
|
||||
application[prop] = Helper.stringifyTags(generalInfo[prop]);
|
||||
}
|
||||
}
|
||||
console.log(application);
|
||||
return {application, images};
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a String array from tags array.
|
||||
* */
|
||||
static stringifyTags(tags) {
|
||||
let tmpTags = [];
|
||||
for (let tag in tags) {
|
||||
console.log(tag);
|
||||
tmpTags.push(tags[tag].value);
|
||||
}
|
||||
|
||||
return tmpTags;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates Platform data object.
|
||||
* @param general: Platform general information.
|
||||
* @param config: Platform configurations.
|
||||
* @param properties: Platform properties.
|
||||
*
|
||||
* @return {{platform: *, icon}} data object and the icon image.
|
||||
* */
|
||||
static buildPlatform(general, config, properties) {
|
||||
let platform = Object.assign({}, general, config, properties);
|
||||
|
||||
let icon = platform.icon[0];
|
||||
delete platform.icon;
|
||||
|
||||
platform.tags = Helper.stringifyTags(platform.tags);
|
||||
|
||||
let tempData = {
|
||||
"platform": platform,
|
||||
"icon": icon
|
||||
};
|
||||
|
||||
return tempData;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
import Axios from 'axios';
|
||||
import AuthHandler from './authHandler';
|
||||
import Constants from '../common/constants';
|
||||
import Helper from './helpers/appMgtApiHelpers';
|
||||
|
||||
/**
|
||||
* Api definitions for Platform management.
|
||||
* */
|
||||
export default class PlatformMgtApi{
|
||||
/**
|
||||
* Create a new Platform
|
||||
* @param general: Platform general information.
|
||||
* @param config: Platform configurations.
|
||||
* @param prop: Platform properties.
|
||||
* */
|
||||
static createPlatform(general, config, prop) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
|
||||
let platform = Helper.buildPlatform(general, config, prop);
|
||||
|
||||
let platformData = new FormData();
|
||||
platformData.append("platform", platform.platform);
|
||||
platformData.append("icon", platform.icon);
|
||||
|
||||
return Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available platforms
|
||||
* */
|
||||
static getPlatforms() {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.platformManagerEndpoints.GET_ENABLED_PLATFORMS, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the user specified platform
|
||||
* @param platformId: The identifier of the platform
|
||||
* */
|
||||
static getPlatform(platformId) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete specified platform
|
||||
* @param platformId: The id of the platform which is to be deleted.
|
||||
* */
|
||||
static deletePlatform(platformId) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.delete(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
|
||||
}
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
/*
|
||||
* 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 axios from 'axios';
|
||||
import Constants from './constants';
|
||||
|
||||
|
||||
class Configuration {
|
||||
|
||||
constructor() {
|
||||
this.serverConfig = {};
|
||||
this.hostConstants = {
|
||||
baseURL: window.location.origin,
|
||||
appContext: window.location.pathname.split("/")[1]
|
||||
};
|
||||
}
|
||||
|
||||
loadConfiguration() {
|
||||
var Config = require('Config');
|
||||
console.log(Config);
|
||||
let thisObject = this;
|
||||
console.log(thisObject);
|
||||
axios.get(thisObject.hostConstants.baseURL + '/' + thisObject.hostConstants.appContext + "/config.json").
|
||||
then(function (response) {
|
||||
console.log('server config was read successfully! ');
|
||||
console.log(thisObject);
|
||||
thisObject.serverConfig = response.data.config;
|
||||
Constants.load();
|
||||
callback();
|
||||
}).catch(function (error) {
|
||||
console.log('unable to load the config file!' + error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default (new Configuration());
|
||||
@ -1,70 +0,0 @@
|
||||
/*
|
||||
* 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 Configuration from './configuration';
|
||||
|
||||
'use strict';
|
||||
|
||||
class Constants {
|
||||
|
||||
constructor() {
|
||||
this.scopes = 'perm:application:get perm:application:create perm:application:update perm:application-mgt:login' +
|
||||
' perm:application:delete perm:platform:add perm:platform:remove perm:roles:view perm:devices:view';
|
||||
this.appManagerEndpoints = {};
|
||||
this.platformManagerEndpoints = {};
|
||||
this.userConstants = {};
|
||||
this.defaultLocale = "en";
|
||||
|
||||
}
|
||||
|
||||
load() {
|
||||
let applicationApiContext = '/api/application-mgt/v1.0/applications/1.0.0/';
|
||||
let platformApiContext = '/api/application-mgt/v1.0/platforms/1.0.0';
|
||||
|
||||
let apiBaseUrl = 'https://' + Configuration.serverConfig.hostname + ':' + Configuration.serverConfig.apiPort;
|
||||
let httpBaseUrl = 'https://' + Configuration.serverConfig.hostname + ':' + Configuration.serverConfig.httpsPort;
|
||||
|
||||
this.appManagerEndpoints = {
|
||||
GET_ALL_APPS: apiBaseUrl + applicationApiContext,
|
||||
CREATE_APP: apiBaseUrl + applicationApiContext,
|
||||
UPLOAD_IMAGE_ARTIFACTS: apiBaseUrl + applicationApiContext + 'upload-image-artifacts/', //+appId
|
||||
GET_IMAGE_ARTIFACTS: apiBaseUrl + applicationApiContext + 'image-artifacts/',
|
||||
APP_RELEASE: apiBaseUrl + applicationApiContext + "release/", //+uuid
|
||||
GET_APP_RELEASE_ARTIFACTS: apiBaseUrl + applicationApiContext + "/release-artifacts/", //+AppId/version
|
||||
GET_NEXT_LIFECYCLE_STATE: apiBaseUrl + applicationApiContext //+ [uuid]/lifecycle
|
||||
};
|
||||
|
||||
this.platformManagerEndpoints = {
|
||||
CREATE_PLATFORM: apiBaseUrl + platformApiContext,
|
||||
GET_ENABLED_PLATFORMS: apiBaseUrl + platformApiContext + '?status=ENABLED',
|
||||
GET_PLATFORM: apiBaseUrl + platformApiContext, //+platformId
|
||||
GET_PLATFORMS: apiBaseUrl + platformApiContext,
|
||||
UPDATE_STATUS: apiBaseUrl + platformApiContext + "update-status/", // + platformId + ?status=
|
||||
EDIT_PLATFORM: apiBaseUrl + platformApiContext //+platformId
|
||||
};
|
||||
|
||||
this.userConstants = {
|
||||
LOGIN_URL: httpBaseUrl + '/login',
|
||||
LOGOUT_URL: httpBaseUrl + '/auth/application-mgt/v1.0/auth/logout',
|
||||
REFRESH_TOKEN_URL: "",
|
||||
WSO2_USER: 'wso2_user',
|
||||
PARTIAL_TOKEN: 'WSO2_IOT_TOKEN'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default(new Constants);
|
||||
@ -1,38 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* This Utility class will contain basic methods for form validation.
|
||||
* */
|
||||
export const validateURL = (value) => {
|
||||
|
||||
};
|
||||
|
||||
export const validateNull = (value) => {
|
||||
return !value;
|
||||
};
|
||||
|
||||
export const validateEmpty = (array) => {
|
||||
return array.length > 0;
|
||||
};
|
||||
|
||||
export const validateEmptyObject = (object) => {
|
||||
return Object.keys(object).length > 0;
|
||||
};
|
||||
@ -1,194 +0,0 @@
|
||||
/*
|
||||
* 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 {withRouter} from 'react-router-dom';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
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:
|
||||
* App bar
|
||||
* Left Navigation
|
||||
* Middle content.
|
||||
* */
|
||||
class BaseLayout extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.logout = this.logout.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
this.onClickPlatforms = this.onClickPlatforms.bind(this);
|
||||
this.onClickApplications = this.onClickApplications.bind(this);
|
||||
this.state = {
|
||||
notifications: 0,
|
||||
user: '',
|
||||
openModal: false,
|
||||
currentPage: "",
|
||||
logo: {}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({user: this.props.user});
|
||||
}
|
||||
|
||||
handleApplicationClick() {
|
||||
this.handleHistory('/assets/apps');
|
||||
}
|
||||
|
||||
handleApplicationCreateClick(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.setState({openModal: true});
|
||||
}
|
||||
|
||||
/**
|
||||
* The method to update the history.
|
||||
* to: The URL to route.
|
||||
* */
|
||||
handleHistory(to) {
|
||||
this.props.history.push(to);
|
||||
}
|
||||
|
||||
logout(event, index, value) {
|
||||
AuthHandler.logout();
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.setState({openModal: false});
|
||||
}
|
||||
|
||||
onClickPlatforms() {
|
||||
window.location.href = "../../../../../assets/platforms";
|
||||
this.setState({currentPage: "Platforms"})
|
||||
}
|
||||
|
||||
onClickApplications() {
|
||||
window.location.href = "../../../../../assets/apps";
|
||||
}
|
||||
|
||||
getCurrentPageTitle() {
|
||||
let href = window.location.href;
|
||||
|
||||
if (href.indexOf("apps") !== -1) {
|
||||
return "Applications";
|
||||
} else if (href.indexOf("platforms") !== -1) {
|
||||
return "Platforms";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const userName = this.state.user._userName[0];
|
||||
return (
|
||||
<div>
|
||||
<div className="header-content">
|
||||
<div className="header">
|
||||
<Row>
|
||||
<Col md="6">
|
||||
<span id="header-text">
|
||||
<Logo className="header-image" image_name="logo.png"/>
|
||||
IoT <FormattedMessage id="App.Publisher" defaultMessage="Application Publisher"/>
|
||||
</span>
|
||||
</Col>
|
||||
<Col>
|
||||
<div className="header-button-container">
|
||||
<Button id="header-button">
|
||||
<i className="fw fw-notification btn-header"></i></Button>
|
||||
<span className="header-user-name">
|
||||
{userName.charAt(0).toUpperCase() + userName.slice(1)}
|
||||
</span>
|
||||
<Button id="header-button">
|
||||
<i className="fw fw-user btn-header"></i></Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<div className="search-box">
|
||||
<i className="fw fw-search"></i>
|
||||
<Input
|
||||
id="search"
|
||||
name="search"
|
||||
placeholder={'Search for Applications'}
|
||||
onChange={(event) => console.log(event.target.value)} //TODO: Remove this
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<Container>
|
||||
<div id="add-btn-container">
|
||||
<FloatingButton
|
||||
className="add-btn small"
|
||||
onClick={this.handleApplicationCreateClick.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<Container className="application-container">
|
||||
<div id="app-main-content">
|
||||
<Row id="sub-title-container">
|
||||
<Col>
|
||||
<div id="sub-title">
|
||||
{/*TODO: Add the current page title*/}
|
||||
{this.getCurrentPageTitle()}
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<div className="platform-link-placeholder">
|
||||
{this.getCurrentPageTitle() === "Applications" ?
|
||||
<Button className="custom-flat grey" onClick={this.onClickPlatforms}>
|
||||
<i className="fw fw-settings"></i>
|
||||
<FormattedMessage id="Platforms" defaultMessage="Platforms"/>
|
||||
</Button> : this.getCurrentPageTitle() === "" ? <div/> :
|
||||
<Button className="custom-flat grey" onClick={this.onClickApplications}>
|
||||
<i className="fw fw-application"></i>
|
||||
<FormattedMessage id="Applications" defaultMessage="Applications"/>
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
{this.props.children}
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Container>
|
||||
<ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BaseLayout.propTypes = {
|
||||
children: PropTypes.element
|
||||
};
|
||||
|
||||
export default withRouter(BaseLayout);
|
||||
@ -1,284 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import {Button, Col, Row} from 'reactstrap';
|
||||
import Drawer from '../UIComponents/Drawer/Drawer';
|
||||
import ApplicationView from './View/ApplicationView';
|
||||
import ApplicationMgtApi from "../../api/applicationMgtApi";
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
*
|
||||
* Application creation is handled through a Wizard. (We use Material UI Stepper.)
|
||||
*
|
||||
* In each step, data will be set to the state separately.
|
||||
* When the wizard is completed, data will be arranged and sent to the api.
|
||||
* */
|
||||
class ApplicationListing extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.searchApplications = this.searchApplications.bind(this);
|
||||
this.onRowClick = this.onRowClick.bind(this);
|
||||
this.sortData = this.sortData.bind(this);
|
||||
this.compare = this.compare.bind(this);
|
||||
this.onAppEditClick = this.onAppEditClick.bind(this);
|
||||
this.getSelectedApplication = this.getSelectedApplication.bind(this);
|
||||
this.state = {
|
||||
searchedApplications: [],
|
||||
applications: [],
|
||||
asc: true,
|
||||
open: false,
|
||||
application: {},
|
||||
drawer: {},
|
||||
appListStyle: {},
|
||||
//TODO: Remove this declaration.
|
||||
image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"},
|
||||
{
|
||||
id: "2",
|
||||
src: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
applications = [
|
||||
{
|
||||
id: "3242342ffww3423",
|
||||
applicationName: "Facebook",
|
||||
platform: "android",
|
||||
category: "Business",
|
||||
status: "Published"
|
||||
},
|
||||
{
|
||||
icon: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png",
|
||||
id: "324234233423423",
|
||||
applicationName: "Twitter",
|
||||
platform: "android",
|
||||
category: "Business",
|
||||
status: "Created"
|
||||
},
|
||||
{
|
||||
icon: "https://www.greenfoot.org/images/logos/macos.png",
|
||||
id: "3242d3423423423",
|
||||
applicationName: "Massenger",
|
||||
platform: "android",
|
||||
category: "Business",
|
||||
status: "In Review"
|
||||
},
|
||||
];
|
||||
|
||||
headers = [
|
||||
{
|
||||
data_id: "image",
|
||||
data_type: "image",
|
||||
sortable: false,
|
||||
label: ""
|
||||
},
|
||||
{
|
||||
data_id: "applicationName",
|
||||
data_type: "string",
|
||||
sortable: true,
|
||||
locale: "Application.name",
|
||||
label: "Application Name",
|
||||
sort: this.sortData
|
||||
},
|
||||
{
|
||||
data_id: "platform",
|
||||
data_type: "image_array",
|
||||
sortable: false,
|
||||
locale: "Platform",
|
||||
label: "Platform"
|
||||
},
|
||||
{
|
||||
data_id: "category",
|
||||
data_type: "string",
|
||||
sortable: false,
|
||||
locale: "Category",
|
||||
label: "Category"
|
||||
},
|
||||
{
|
||||
data_id: "status",
|
||||
data_type: "string",
|
||||
sortable: false,
|
||||
locale: "Status",
|
||||
label: "Status"
|
||||
},
|
||||
{
|
||||
data_id: "edit",
|
||||
data_type: "button",
|
||||
sortable: false,
|
||||
label: ""
|
||||
}
|
||||
];
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
let getApps = ApplicationMgtApi.getApplications();
|
||||
getApps.then(response => {
|
||||
console.log(response);
|
||||
this.setState({searchedApplications: response.data.applications});
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the search action.
|
||||
* When typing in the search bar, this method will be invoked.
|
||||
* @param event: The event triggered from typing in the search box.
|
||||
* @param searchText: The text that typed in the search box.
|
||||
* */
|
||||
searchApplications(event, searchText) {
|
||||
let searchedData;
|
||||
if (searchText) {
|
||||
searchedData = this.state.applications.filter((dataItem) => {
|
||||
return dataItem.applicationName.includes(searchText);
|
||||
});
|
||||
} else {
|
||||
searchedData = this.state.applications;
|
||||
}
|
||||
|
||||
//TODO: Remove the console log.
|
||||
this.setState({searchedApplications: searchedData}, console.log("Searched data ", this.state.searchedApplications));
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles sort data function and toggles the asc state.
|
||||
* asc: true : sort in ascending order.
|
||||
* */
|
||||
sortData() {
|
||||
console.log(this.state);
|
||||
let isAsc = this.state.asc;
|
||||
let sortedData = isAsc ? this.state.searchedApplications.sort(this.compare) : this.data.reverse();
|
||||
this.setState({searchedApplications: sortedData, asc: !isAsc});
|
||||
}
|
||||
|
||||
compare(a, b) {
|
||||
if (a.applicationName < b.applicationName)
|
||||
return -1;
|
||||
if (a.applicationName > b.applicationName)
|
||||
return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
onRowClick(uuid) {
|
||||
let selectedApp = this.getSelectedApplication(uuid);
|
||||
let style = {
|
||||
width: '35%'
|
||||
};
|
||||
|
||||
let appListStyle = {
|
||||
marginRight: '35%',
|
||||
};
|
||||
|
||||
this.setState({drawer: style, appListStyle: appListStyle, application: selectedApp[0]});
|
||||
}
|
||||
|
||||
onAppEditClick(uuid) {
|
||||
this.props.history.push("apps/" + uuid + "/edit");
|
||||
}
|
||||
|
||||
closeDrawer() {
|
||||
let style = {
|
||||
width: '0',
|
||||
marginLeft: '0'
|
||||
};
|
||||
|
||||
let appListStyle = {
|
||||
marginRight: '0',
|
||||
};
|
||||
this.setState({drawer: style, appListStyle: appListStyle});
|
||||
}
|
||||
|
||||
getSelectedApplication(uuid) {
|
||||
return this.state.searchedApplications.filter(application => {
|
||||
return application.uuid === uuid;
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
//TODO: Move this to a data table component.
|
||||
console.log(this.state.appListStyle);
|
||||
return (
|
||||
<div className="publisher-card application-list" style={this.state.appListStyle}>
|
||||
<Row className="app-list-table-header">
|
||||
{this.headers.map(header => {
|
||||
if (header.data_id === "applicationName") {
|
||||
return (
|
||||
<Col key={Math.random()} xs="4">{header.label}</Col>)
|
||||
} else if (header.data_id === "image") {
|
||||
return (<Col key={Math.random()} xs="1">{header.label}</Col>)
|
||||
} else if (header.data_id === "edit") {
|
||||
return <Col key={Math.random()} xs="1"></Col>
|
||||
}
|
||||
return (<Col key={Math.random()}>{header.label}</Col>)
|
||||
})}
|
||||
</Row>
|
||||
<hr/>
|
||||
{this.state.searchedApplications.map(application => {
|
||||
return (
|
||||
<Row key={application.uuid} className="app-table-row" onClick={() => {
|
||||
this.onRowClick(application.uuid)
|
||||
}}>
|
||||
<Col key={Math.random()} xs="1">
|
||||
<img
|
||||
className="app-list-icon"
|
||||
src={application.icon}
|
||||
/>
|
||||
</Col>
|
||||
<Col
|
||||
key={Math.random()}
|
||||
xs="4"
|
||||
className="data-table-row-cell"
|
||||
>
|
||||
<strong>{application.name}</strong>
|
||||
</Col>
|
||||
<Col key={Math.random()} className="data-table-row-cell">{application.platform.name}</Col>
|
||||
<Col key={Math.random()} className="data-table-row-cell">{application.category.name}</Col>
|
||||
<Col
|
||||
key={Math.random()}
|
||||
className="data-table-row-cell"
|
||||
>
|
||||
{application.currentLifecycle.lifecycleState.name}
|
||||
</Col>
|
||||
<Col
|
||||
xs="1"
|
||||
key={Math.random()}
|
||||
>
|
||||
<Button className="custom-flat grey rounded"
|
||||
onClick={() => this.onAppEditClick(application.uuid)}>
|
||||
<i className="fw fw-edit"></i>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
})}
|
||||
<Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
|
||||
<ApplicationView application={this.state.application}/>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ApplicationListing.propTypes = {};
|
||||
|
||||
export default withRouter(ApplicationListing);
|
||||
@ -1,273 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import AuthHandler from "../../../api/authHandler";
|
||||
import {Step1, Step2, Step3, Step4} from './CreateSteps';
|
||||
import ApplicationMgtApi from '../../../api/applicationMgtApi';
|
||||
import {Modal, ModalHeader} from 'reactstrap';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import Stepper from "../../UIComponents/StepprHeader/Stepper";
|
||||
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
*
|
||||
* Application creation is handled through a Wizard. (We use Material UI Stepper.)
|
||||
*
|
||||
* In each step, data will be set to the state separately.
|
||||
* When the wizard is completed, data will be arranged and sent to the api.
|
||||
* */
|
||||
class ApplicationCreate extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.scriptId = "application-create";
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.removeStepData = this.removeStepData.bind(this);
|
||||
this.onSubmit = this.onSubmit.bind(this);
|
||||
this.handleCancel = this.handleCancel.bind(this);
|
||||
this.handleYes = this.handleYes.bind(this);
|
||||
this.handleNo = this.handleNo.bind(this);
|
||||
this.onPrevClick = this.onPrevClick.bind(this);
|
||||
this.onNextClick = this.onNextClick.bind(this);
|
||||
this.onClose = this.onClose.bind(this);
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
stepData: [],
|
||||
isDialogOpen: false,
|
||||
generalInfo: {},
|
||||
platform: {},
|
||||
screenshots: {},
|
||||
release: {}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props, nextprops) {
|
||||
this.setState({open: props.open})
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({open: this.props.open});
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the form and closes the modal.
|
||||
* */
|
||||
onClose() {
|
||||
this.setState({stepIndex: 0, generalInfo: {}, platform: {}, screenshots: {}, release: {}}, this.props.close());
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles next button click event.
|
||||
* */
|
||||
onNextClick() {
|
||||
console.log(this.state.stepIndex); //TODO: Remove this
|
||||
const {stepIndex} = this.state;
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
finished: stepIndex >= 2,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles form submit.
|
||||
* */
|
||||
onSubmit() {
|
||||
let {generalInfo, platform, screenshots, release} = this.state;
|
||||
let applicationCreationPromise = ApplicationMgtApi.createApplication(generalInfo, platform, screenshots, release);
|
||||
applicationCreationPromise.then(response => {
|
||||
this.handleYes();
|
||||
}
|
||||
).catch(
|
||||
function (err) {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles cancel button click event.
|
||||
* This will show a confirmation dialog to cancel the application creation process.
|
||||
* */
|
||||
handleCancel() {
|
||||
this.setState({isDialogOpen: true});
|
||||
};
|
||||
|
||||
/**
|
||||
* Handled [ < Prev ] button click.
|
||||
* This clears the data in the current step and returns to the previous step.
|
||||
* */
|
||||
onPrevClick() {
|
||||
console.log(this.state.stepIndex);
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({stepIndex: stepIndex - 1, finished: false});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Saves form data in each step in to the state.
|
||||
* @param step: The step number of the step data.
|
||||
* @param data: The form data of the step.
|
||||
* */
|
||||
setStepData(step, data) {
|
||||
console.log(step, data, this.state); //TODO: Remove this
|
||||
switch (step) {
|
||||
case "generalInfo": {
|
||||
this.setState({generalInfo: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "platform": {
|
||||
this.setState({platform: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "screenshots": {
|
||||
this.setState({screenshots: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "release": {
|
||||
this.setState({release: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Defines the application creation stepper.
|
||||
* */
|
||||
getStepperHeaders() {
|
||||
return [
|
||||
{index: 1, text: <FormattedMessage id="General.Info" defaultMessage="General.Info"/>},
|
||||
{index: 2, text: <FormattedMessage id="Select.Platform" defaultMessage="Select.Platform"/>},
|
||||
{index: 3, text: <FormattedMessage id="Screenshots" defaultMessage="Screenshots"/>},
|
||||
{index: 4, text: <FormattedMessage id="Release" defaultMessage="Release"/>, optional: true}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the last data point
|
||||
* */
|
||||
removeStepData() {
|
||||
let tempData = this.state.stepData;
|
||||
tempData.pop();
|
||||
this.setState({stepData: tempData, stepIndex: 0});
|
||||
};
|
||||
|
||||
/* ----------------- Deprecated ----------------- */
|
||||
/**
|
||||
* Handles the Yes button in app creation cancellation dialog.
|
||||
* Clears all the form data and reset the wizard.
|
||||
* */
|
||||
handleYes() {
|
||||
this.setState({finished: false, stepIndex: 0, stepData: [], isDialogOpen: false});
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles No button in app creation cancellation dialog.
|
||||
* Returns to the same step.
|
||||
* */
|
||||
handleNo() {
|
||||
this.setState({isDialogOpen: false});
|
||||
};
|
||||
|
||||
/* ---------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Defines all the Steps in the stepper. (Wizard)
|
||||
*
|
||||
* Extension Point: If any extra steps needed, follow the instructions below.
|
||||
* 1. Create the required form ./Forms directory.
|
||||
* 2. Add defined case statements.
|
||||
* 3. Define the Step in render function.
|
||||
*
|
||||
* */
|
||||
getStepContent(stepIndex) {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return (
|
||||
<Step1
|
||||
defaultData={this.state.generalInfo}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<Step2
|
||||
defaultData={this.state.platform}
|
||||
handlePrev={this.onPrevClick}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<Step3
|
||||
defaultData={this.state.screenshots}
|
||||
handlePrev={this.onPrevClick}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 3: {
|
||||
return (
|
||||
<Step4
|
||||
defaultData={this.state.release}
|
||||
handlePrev={this.onPrevClick}
|
||||
onSubmit={this.onSubmit}
|
||||
close={this.onClose}
|
||||
/>
|
||||
)
|
||||
}
|
||||
default:
|
||||
return <div/>;
|
||||
}
|
||||
}
|
||||
|
||||
setStepHeader(stepIndex) {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const {finished, stepIndex} = this.state;
|
||||
|
||||
return (
|
||||
<div id="create-application-modal">
|
||||
<Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal"
|
||||
backdrop={'static'}>
|
||||
<ModalHeader toggle={this.toggle} className="app-create-modal-header">
|
||||
<FormattedMessage id="Create.Application" defaultMessage="Create Application"/>
|
||||
</ModalHeader>
|
||||
<div className="container app-create-modal-content">
|
||||
<Stepper
|
||||
activeStep={stepIndex + 1}
|
||||
previousStep={stepIndex}
|
||||
stepContent={this.getStepperHeaders()}
|
||||
/>
|
||||
{this.getStepContent(stepIndex)}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
ApplicationCreate.propTypes = {};
|
||||
|
||||
export default withRouter(ApplicationCreate);
|
||||
@ -1,366 +0,0 @@
|
||||
/*
|
||||
* 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 {FormattedMessage} from 'react-intl';
|
||||
import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from 'reactstrap';
|
||||
import * as validator from '../../../../common/validator';
|
||||
import Chip from "../../../UIComponents/Chip/Chip";
|
||||
|
||||
/**
|
||||
* The Second step of application create wizard.
|
||||
* This contains following components.
|
||||
* * App Title
|
||||
* * Short Description
|
||||
* * Application Description
|
||||
* * Application Visibility
|
||||
* * Application Tags : {Used Material UI Chip component}
|
||||
* * Application Category.
|
||||
* * Platform Specific properties.
|
||||
*
|
||||
* Parent Component: Create
|
||||
* Props:
|
||||
* * onNextClick : {type: function, Invokes onNextClick function in Parent.}
|
||||
* * onPrevClick : {type: function, Invokes onPrevClick function in Parent}
|
||||
* * setData : {type: function, Invokes setStepData function in Parent}
|
||||
* * removeData : {type: Invokes removeStepData function in Parent}
|
||||
* */
|
||||
class Step1 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onTextFieldChange = this.onTextFieldChange.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onVisibilityChange = this.onVisibilityChange.bind(this);
|
||||
this.onVisibilityItemSelect = this.onVisibilityItemSelect.bind(this);
|
||||
this.handleRequestDelete = this.handleRequestDelete.bind(this);
|
||||
this.validate = this.validate.bind(this);
|
||||
this.state = {
|
||||
tags: [],
|
||||
name: "",
|
||||
errors: {},
|
||||
defValue: "",
|
||||
category: {},
|
||||
visibility: {type: "PUBLIC", allowedList: []},
|
||||
description: "",
|
||||
shortDescription: ""
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const defaultVals = this.props.defaultData;
|
||||
|
||||
if (defaultVals) {
|
||||
this.setState(defaultVals);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a tag on Enter key press and set it to the state.
|
||||
* Clears the tags text field.
|
||||
* Chip gets two parameters: Key and value.
|
||||
* */
|
||||
addTags(event) {
|
||||
let tags = this.state.tags;
|
||||
if (event.charCode === 13) {
|
||||
event.preventDefault();
|
||||
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
|
||||
this.setState({tags, defValue: ""}, console.log(tags));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the value for tag.
|
||||
* */
|
||||
handleTagChange(event) {
|
||||
let defaultValue = this.state.defValue;
|
||||
defaultValue = event.target.value;
|
||||
this.setState({defValue: defaultValue})
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
* */
|
||||
handleRequestDelete(key) {
|
||||
let chipData = this.state.tags;
|
||||
const chipToDelete = chipData.map((chip) => chip.key).indexOf(key);
|
||||
chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: chipData});
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates an object with the current step data and persist in the parent.
|
||||
* */
|
||||
setStepData() {
|
||||
const {name, description, tags, visibility, shortDescription} = this.state;
|
||||
let stepData = {
|
||||
name: name,
|
||||
description: description,
|
||||
tags: tags,
|
||||
visibility: visibility,
|
||||
shortDescription: shortDescription,
|
||||
category: {id: 1, name: "business"}
|
||||
};
|
||||
|
||||
let {errorCount, errors} = this.validate();
|
||||
|
||||
if (errorCount !== 0) {
|
||||
this.setState({errors: errors});
|
||||
} else {
|
||||
this.props.setStepData("generalInfo", stepData);
|
||||
}
|
||||
};
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the form fields.
|
||||
* */
|
||||
validate() {
|
||||
const {name, description, tags, shortDescription} = this.state;
|
||||
let errorCount = 0;
|
||||
let errors = {};
|
||||
if (validator.validateNull(name)) {
|
||||
errorCount++;
|
||||
errors.name = "Application Title is Required!";
|
||||
}
|
||||
|
||||
if (validator.validateNull(description)) {
|
||||
errorCount++;
|
||||
errors.description = "Description is Required!"
|
||||
}
|
||||
|
||||
if (validator.validateNull(shortDescription)) {
|
||||
errorCount++;
|
||||
errors.shortDescription = "Short Description is Required!"
|
||||
}
|
||||
|
||||
if (!validator.validateEmpty(tags)) {
|
||||
errorCount++;
|
||||
errors.tags = "You need to enter at least one tag!"
|
||||
}
|
||||
return {errorCount, errors};
|
||||
}
|
||||
|
||||
/**
|
||||
* Set text field values to state.
|
||||
* */
|
||||
onTextFieldChange(event) {
|
||||
let field = event.target.name;
|
||||
switch (field) {
|
||||
case "appName": {
|
||||
this.setState({name: event.target.value});
|
||||
break;
|
||||
}
|
||||
case "appDescription": {
|
||||
this.setState({description: event.target.value});
|
||||
break;
|
||||
}
|
||||
case "appShortDescription": {
|
||||
this.setState({shortDescription: event.target.value});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onVisibilityChange(event) {
|
||||
console.log(event.target.value);
|
||||
this.setState({visibility: event.target.value});
|
||||
}
|
||||
|
||||
onVisibilityItemSelect(event) {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const {visibility} = this.state;
|
||||
|
||||
let visibilityItem = () => {
|
||||
switch (visibility) {
|
||||
case("public"): {
|
||||
return <div/>
|
||||
}
|
||||
case("roles"): {
|
||||
return <FormGroup>
|
||||
<Input
|
||||
type="select"
|
||||
name="visibility-item"
|
||||
id="app-visibility-item"
|
||||
onChange={this.onVisibilityItemSelect}
|
||||
>
|
||||
<option id="app-visibility-default" disabled selected>Select the Roles.</option>
|
||||
<option><Input type="checkbox"/>Role1</option>
|
||||
<option>Role2</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
}
|
||||
case ("groups"): {
|
||||
return <FormGroup>
|
||||
<Input
|
||||
type="select"
|
||||
name="visibility-item"
|
||||
id="app-visibility-item"
|
||||
onChange={this.onVisibilityItemSelect}
|
||||
>
|
||||
<option id="app-visibility-default" disabled selected>Select the Groups.</option>
|
||||
<option>Group1</option>
|
||||
<option>Group2</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
}
|
||||
default: {
|
||||
return <div/>
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ModalBody id="modal-body-content">
|
||||
<FormGroup>
|
||||
<Label for="app-title">
|
||||
<FormattedMessage id='Title' defaultMessage='Title'/>*
|
||||
</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
name="appName"
|
||||
id="app-title"
|
||||
value={this.state.name}
|
||||
onChange={this.onTextFieldChange}
|
||||
/>
|
||||
<FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-short-description">
|
||||
<FormattedMessage id="ShortDescription" defaultMessage="ShortDescription"/>*
|
||||
</Label>
|
||||
<Input
|
||||
required
|
||||
type="textarea"
|
||||
name="appShortDescription"
|
||||
id="app-short-description"
|
||||
value={this.state.shortDescription}
|
||||
onChange={this.onTextFieldChange}
|
||||
/>
|
||||
<FormFeedback id="form-error">{this.state.errors.shortDescription}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-description">
|
||||
<FormattedMessage id='Description' defaultMessage='Description'/>*
|
||||
</Label>
|
||||
<Input
|
||||
required
|
||||
type="textarea"
|
||||
name="appDescription"
|
||||
id="app-description"
|
||||
value={this.state.description}
|
||||
onChange={this.onTextFieldChange}
|
||||
/>
|
||||
<FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-category">
|
||||
<FormattedMessage id='Category' defaultMessage='Category'/>
|
||||
</Label>
|
||||
<Input
|
||||
type="select"
|
||||
name="category"
|
||||
id="app-category"
|
||||
>
|
||||
<option key={0} value={{id: 0, name: "business"}}>Business</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-visibility">
|
||||
<FormattedMessage id='Visibility' defaultMessage='Visibility'/>
|
||||
</Label>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<Input
|
||||
type="select"
|
||||
name="visibility"
|
||||
id="app-visibility"
|
||||
onChange={this.onVisibilityChange}
|
||||
>
|
||||
<option id="app-visibility-default" disabled selected>Select the App Visibility
|
||||
Option.
|
||||
</option>
|
||||
<option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/>
|
||||
</option>
|
||||
<option key={2}><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
|
||||
<option key={3}><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
{visibilityItem()}
|
||||
</Form>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='Tags'/>*</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
value={this.state.defValue}
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
onChange={this.handleTagChange.bind(this)}
|
||||
onKeyPress={this.addTags.bind(this)}
|
||||
/>
|
||||
|
||||
<div id="batch-content">
|
||||
{this.state.tags.map(tag => {
|
||||
return (
|
||||
<Chip
|
||||
key={tag.key}
|
||||
content={tag}
|
||||
onDelete={this.handleRequestDelete}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter className="custom-footer row">
|
||||
<div className="footer-main-btn col">
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-flat primary-flat" onClick={this.setStepData}>
|
||||
<FormattedMessage id="Continue" defaultMessage="Continue"/>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Step1.prototypes = {
|
||||
handleNext: PropTypes.func,
|
||||
handlePrev: PropTypes.func,
|
||||
setData: PropTypes.func
|
||||
};
|
||||
|
||||
export default Step1;
|
||||
@ -1,204 +0,0 @@
|
||||
/*
|
||||
* 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 AuthHandler from "../../../../api/authHandler";
|
||||
import PlatformMgtApi from "../../../../api/platformMgtApi";
|
||||
import {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from 'reactstrap';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import * as validator from '../../../../common/validator';
|
||||
|
||||
/**
|
||||
* The first step of the application creation wizard.
|
||||
* This contains following components:
|
||||
* * Application Title
|
||||
* * Store Type
|
||||
* * Application Platform
|
||||
*
|
||||
* Parent Component: Create
|
||||
* Props:
|
||||
* 1. onNextClick: {type: function, Invokes onNextClick function of parent component}
|
||||
* 2. setData : {type: function, Sets current form data to the state of the parent component}
|
||||
* 3. removeData: {type: function, Invokes the removeStepData function click of parent}
|
||||
* */
|
||||
class Step2 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.setPlatforms = this.setPlatforms.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.validate = this.validate.bind(this);
|
||||
this.platforms = [];
|
||||
this.state = {
|
||||
errors: {},
|
||||
store: 1,
|
||||
platformSelectedIndex: 0,
|
||||
platform: {},
|
||||
platforms: []
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const {defaultData} = this.props;
|
||||
|
||||
if (defaultData) {
|
||||
this.setState(defaultData);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
//Get the list of available platforms and set to the state.
|
||||
PlatformMgtApi.getPlatforms().then(response => {
|
||||
this.setPlatforms(response.data);
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the platforms from the response data and populate the state.
|
||||
* @param platforms: The array returned as the response.
|
||||
* */
|
||||
setPlatforms(platforms) {
|
||||
let tmpPlatforms = [];
|
||||
for (let index in platforms) {
|
||||
let platform = {};
|
||||
platform = platforms[index];
|
||||
tmpPlatforms.push(platform);
|
||||
}
|
||||
this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0})
|
||||
}
|
||||
|
||||
/**
|
||||
* Persist the current form data to the state.
|
||||
* */
|
||||
setStepData() {
|
||||
const {store, platform} = this.state;
|
||||
let data = {
|
||||
store: store,
|
||||
platform: platform[0]
|
||||
};
|
||||
|
||||
const {errorCount, errors} = this.validate();
|
||||
|
||||
if (errorCount > 0) {
|
||||
this.setState({errors: errors})
|
||||
} else {
|
||||
this.props.setStepData("platform", data);
|
||||
}
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
validate() {
|
||||
const {store, platform} = this.state;
|
||||
let errors = {};
|
||||
let errorCount = 0;
|
||||
if (!validator.validateEmptyObject(platform)) {
|
||||
errorCount++;
|
||||
errors.platform = "You must select an application platform!"
|
||||
}
|
||||
return {errorCount, errors};
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers when changing the Platform selection.
|
||||
* */
|
||||
onChangePlatform(event) {
|
||||
let id = event.target.value;
|
||||
let selectedPlatform = this.state.platforms.filter((platform) => {
|
||||
return platform.identifier === id;
|
||||
});
|
||||
this.setState({platform: selectedPlatform});
|
||||
};
|
||||
|
||||
/**
|
||||
* Triggers when changing the Store selection.
|
||||
* */
|
||||
onChangeStore(event) {
|
||||
this.setState({store: event.target.value});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ModalBody id="modal-body-content">
|
||||
<FormGroup>
|
||||
<Label for="store">Store Type</Label>
|
||||
<Input type="select" name="store" className="input-custom"
|
||||
onChange={this.onChangeStore.bind(this)}>
|
||||
<option>Enterprise</option>
|
||||
<option>Public</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="store"><FormattedMessage id='Platform' defaultMessage='Platform'/></Label>
|
||||
<Input
|
||||
required
|
||||
type="select"
|
||||
name="store"
|
||||
onChange={this.onChangePlatform.bind(this)}
|
||||
>
|
||||
<option id="app-visibility-default" disabled selected>Select the Application Platform
|
||||
</option>
|
||||
{this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
|
||||
return (
|
||||
<option value={platform.identifier} key={platform.identifier}>
|
||||
{platform.name}
|
||||
</option>
|
||||
)
|
||||
}) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
|
||||
</Input>
|
||||
<FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter className="custom-footer row">
|
||||
<div className="footer-back-btn col">
|
||||
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="footer-main-btn col">
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-flat primary-flat" onClick={this.setStepData}>
|
||||
<FormattedMessage id="Continue" defaultMessage="Continue"/>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Step2.propTypes = {
|
||||
handleNext: PropTypes.func,
|
||||
setData: PropTypes.func,
|
||||
removeData: PropTypes.func
|
||||
};
|
||||
|
||||
export default Step2;
|
||||
@ -1,256 +0,0 @@
|
||||
/*
|
||||
* 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 Dropzone from 'react-dropzone';
|
||||
import React, {Component} from 'react';
|
||||
import * as validator from '../../../../common/validator';
|
||||
import {Button, FormFeedback, FormGroup, Label, ModalBody, ModalFooter} from 'reactstrap';
|
||||
import AppImage from "../../../UIComponents/AppImage/AppImage";
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
/**
|
||||
* The Third step of application create wizard.
|
||||
* This contains following components.
|
||||
* * Screenshots
|
||||
* * Banner
|
||||
* * Icon
|
||||
*
|
||||
* Parent Component: Create
|
||||
* Props:
|
||||
* * onNextClick : {type: function, Invokes onNextClick function in Parent.}
|
||||
* * onPrevClick : {type: function, Invokes onPrevClick function in Parent}
|
||||
* * setData : {type: function, Invokes setStepData function in Parent}
|
||||
* * removeData : {type: Invokes removeStepData function in Parent}
|
||||
* */
|
||||
class Step3 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.validate = this.validate.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.state = {
|
||||
icon: [],
|
||||
errors: {},
|
||||
banner: [],
|
||||
screenshots: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const {defaultData} = this.props;
|
||||
|
||||
this.setState(defaultData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an object with the current step data and persist in the parent.
|
||||
* */
|
||||
setStepData() {
|
||||
|
||||
const {icon, banner, screenshots} = this.state;
|
||||
|
||||
let stepData = {
|
||||
icon: icon,
|
||||
banner: banner,
|
||||
screenshots: screenshots
|
||||
};
|
||||
|
||||
const {errorCount, errors} = this.validate();
|
||||
|
||||
if (errorCount > 0) {
|
||||
this.setState({errors: errors})
|
||||
} else {
|
||||
this.props.setStepData("screenshots", stepData);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
validate() {
|
||||
const {icon, banner, screenshots} = this.state;
|
||||
let errors = {}, errorCount = 0;
|
||||
|
||||
if (!validator.validateEmpty(icon)) {
|
||||
errorCount++;
|
||||
errors.icon = "You must upload an icon image!"
|
||||
}
|
||||
|
||||
if (!validator.validateEmpty(banner)) {
|
||||
errorCount++;
|
||||
errors.banner = "You must upload a banner image!"
|
||||
}
|
||||
|
||||
if (!validator.validateEmpty(screenshots)) {
|
||||
errorCount++;
|
||||
errors.screenshots = "You must upload at least one screenshot image!"
|
||||
}
|
||||
|
||||
return {errorCount, errors};
|
||||
}
|
||||
|
||||
/**
|
||||
* Removed user uploaded banner.
|
||||
* */
|
||||
removeBanner(event, d) {
|
||||
console.log(event, d); //TODO: Remove this
|
||||
this.setState({banner: []});
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes uploaded icon.
|
||||
* */
|
||||
removeIcon(event) {
|
||||
this.setState({icon: []});
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes selected screenshot.
|
||||
* */
|
||||
removeScreenshot(event) {
|
||||
console.log(event.target) //TODO: Remove this.
|
||||
};
|
||||
|
||||
//TODO: Remove inline css.
|
||||
render() {
|
||||
return (
|
||||
<div className="createStep2Content">
|
||||
<ModalBody id="modal-body-content">
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label for="app-screenshots">
|
||||
<FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
|
||||
</Label>
|
||||
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
|
||||
<div id="screenshot-container">
|
||||
{this.state.screenshots.map((tile) => (
|
||||
<div id="app-image-screenshot">
|
||||
<AppImage image={tile[0].preview}/>
|
||||
</div>
|
||||
))}
|
||||
{this.state.screenshots.length < 3 ?
|
||||
<Dropzone
|
||||
className="application-create-screenshot-dropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(screenshots, rejected) => {
|
||||
let tmpScreenshots = this.state.screenshots;
|
||||
tmpScreenshots.push(screenshots);
|
||||
this.setState({
|
||||
screenshots: tmpScreenshots
|
||||
});
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-add"></i>
|
||||
</Dropzone> : <div/>}
|
||||
</div>
|
||||
<FormFeedback id="form-error">{this.state.errors.screenshots}</FormFeedback>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div style={{display: 'flex'}}>
|
||||
<div style={{float: 'left', marginRight: '15px'}}>
|
||||
<FormGroup>
|
||||
<Label for="app-icon">
|
||||
<FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
|
||||
</Label>
|
||||
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
|
||||
<div id="app-icon-container">
|
||||
{this.state.icon.map((tile) => (
|
||||
<div id="app-image-icon">
|
||||
<AppImage image={tile.preview}/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{this.state.icon.length === 0 ?
|
||||
<Dropzone
|
||||
className="application-create-icon-dropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(icon, rejected) => {
|
||||
this.setState({icon, rejected});
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-add"></i>
|
||||
</Dropzone> : <div/>}
|
||||
</div>
|
||||
<FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div style={{marginLeft: '15px'}}>
|
||||
<FormGroup>
|
||||
<Label for="app-banner">
|
||||
<FormattedMessage id='Icon' defaultMessage='Icon'/>*
|
||||
</Label>
|
||||
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
|
||||
<div id="app-banner-container">
|
||||
{this.state.banner.map((tile) => (
|
||||
<div id="app-image-banner">
|
||||
<AppImage image={tile.preview}/>
|
||||
</div>
|
||||
))}
|
||||
{this.state.banner.length === 0 ?
|
||||
<Dropzone
|
||||
className="application-create-banner-dropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(banner, rejected) => {
|
||||
this.setState({banner, rejected});
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-add"></i>
|
||||
</Dropzone> : <div/>
|
||||
}
|
||||
</div>
|
||||
<FormFeedback id="form-error">{this.state.errors.banner}</FormFeedback>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter className="custom-footer row">
|
||||
<div className="footer-back-btn col">
|
||||
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="footer-main-btn col">
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-flat primary-flat" onClick={this.setStepData}>
|
||||
<FormattedMessage id="Continue" defaultMessage="Continue"/>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Step3.prototypes = {
|
||||
handleNext: PropTypes.func,
|
||||
handlePrev: PropTypes.func,
|
||||
setData: PropTypes.func,
|
||||
removeData: PropTypes.func
|
||||
};
|
||||
|
||||
export default Step3;
|
||||
@ -1,181 +0,0 @@
|
||||
/*
|
||||
* 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 {Button, Collapse, FormGroup, FormText, Input, Label, ModalBody, ModalFooter} from 'reactstrap';
|
||||
import Switch from '../../../UIComponents/Switch/Switch'
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
/**
|
||||
* The Third step of application create wizard. {Application Release Step}
|
||||
* This step is not compulsory.
|
||||
*
|
||||
* When click finish, user will prompt to confirm the application creation.
|
||||
* User can go ahead and create the app or cancel.
|
||||
*
|
||||
* This contains following components:
|
||||
* * Toggle to select application release. Un-hides the Application Release form.
|
||||
*
|
||||
* Application Release Form.
|
||||
* * Release Channel
|
||||
* * Application Version
|
||||
* * Upload component for application.
|
||||
*
|
||||
* Parent Component: Create
|
||||
* Props:
|
||||
* * handleFinish : {type: function, Invokes onNextClick function in Parent.}
|
||||
* * onPrevClick : {type: function, Invokes onPrevClick function in Parent}
|
||||
* * setData : {type: function, Invokes setStepData function in Parent}
|
||||
* * removeData : {type: Invokes removeStepData function in Parent}
|
||||
* */
|
||||
class Step4 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.handleToggle = this.handleToggle.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.handleFinish = this.handleFinish.bind(this);
|
||||
this.onSubmit = this.onSubmit.bind(this);
|
||||
this.state = {
|
||||
showForm: false,
|
||||
releaseChannel: 1,
|
||||
errors: {}
|
||||
};
|
||||
this.scriptId = "application-create-step3";
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles finish button click.
|
||||
* This invokes onNextClick function in parent component.
|
||||
* */
|
||||
handleFinish() {
|
||||
this.props.handleFinish();
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.props.onSubmit();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles release application selection.
|
||||
* */
|
||||
handleToggle() {
|
||||
let hide = this.state.showForm;
|
||||
this.setState({showForm: !hide});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="applicationCreateStepMiddle">
|
||||
<ModalBody id="modal-body-content">
|
||||
<FormGroup>
|
||||
<div id="app-release-switch-content">
|
||||
<div id="app-release-switch-label">
|
||||
<Label for="app-release-switch">
|
||||
<strong>
|
||||
<FormattedMessage id="Add.Release" defaultMessage="Add.Release"/>
|
||||
</strong>
|
||||
</Label>
|
||||
</div>
|
||||
<div id="app-release-switch-switch">
|
||||
<Switch
|
||||
id="app-release-switch"
|
||||
onChange={this.handleToggle.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<br/>
|
||||
<div>
|
||||
<FormText color="muted">
|
||||
<i><FormattedMessage id="Info" defaultMessage="Info"/> </i>
|
||||
Enabling this will create a release for the current Application.
|
||||
To upload the Application, please visit to the Release management section of
|
||||
Application Edit View.
|
||||
</FormText>
|
||||
</div>
|
||||
{/*If toggle is true, the release form will be shown.*/}
|
||||
<Collapse isOpen={this.state.showForm}>
|
||||
<FormGroup>
|
||||
<Label for="release-channel">
|
||||
<FormattedMessage id="Release.Channel" defaultMessage="Release.Channel"/>
|
||||
</Label>
|
||||
<Input
|
||||
type="select"
|
||||
id="release-channel"
|
||||
style={{
|
||||
width: '200px',
|
||||
border: 'none',
|
||||
borderRadius: '0',
|
||||
borderBottom: 'solid 1px #BDBDBD'
|
||||
}}>
|
||||
<option>GA</option>
|
||||
<option>Alpha</option>
|
||||
<option>Beta</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="version">
|
||||
<FormattedMessage id="Version" defaultMessage="Version"/>*
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
id="version input-custom"
|
||||
placeholder="v1.0"
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
</Collapse>
|
||||
</ModalBody>
|
||||
<ModalFooter className="custom-footer row">
|
||||
<div className="footer-back-btn col">
|
||||
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="footer-main-btn col">
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-flat primary-flat" onClick={this.onSubmit}>
|
||||
<FormattedMessage id="Finish" defaultMessage="Finish"/>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Step4.propTypes = {
|
||||
handleFinish: PropTypes.func,
|
||||
handlePrev: PropTypes.func,
|
||||
setData: PropTypes.func,
|
||||
onSubmit: PropTypes.func
|
||||
};
|
||||
|
||||
export default Step4;
|
||||
@ -1,24 +0,0 @@
|
||||
/*
|
||||
* 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 Step1 from './Step1';
|
||||
import Step2 from './Step2';
|
||||
import Step3 from './Step3';
|
||||
import Step4 from './Step4';
|
||||
|
||||
export {Step1, Step2, Step3, Step4};
|
||||
@ -1,140 +0,0 @@
|
||||
/*
|
||||
* 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 {Col, Row} from "reactstrap";
|
||||
import React, {Component} from 'react';
|
||||
import GeneralInfo from "../GenenralInfo/GeneralInfo";
|
||||
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import ApplicationMgtApi from "../../../../api/applicationMgtApi";
|
||||
|
||||
class ApplicationEdit extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.getTabContent = this.getTabContent.bind(this);
|
||||
this.state = {
|
||||
application: {},
|
||||
general: "active",
|
||||
release: "",
|
||||
pkgmgt: "",
|
||||
activeTab: 1
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
let appId = window.location.pathname.split("/")[4];
|
||||
let response = ApplicationMgtApi.getApplication(appId);
|
||||
|
||||
response.then(res => {
|
||||
let data = res.data.applications;
|
||||
let application = data.filter(app => {
|
||||
return app.uuid === appId;
|
||||
});
|
||||
|
||||
this.setState({application: application[0]});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
handleTabClick(event) {
|
||||
event.stopPropagation();
|
||||
const key = event.target.value;
|
||||
|
||||
switch (key) {
|
||||
case "1": {
|
||||
this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""});
|
||||
break;
|
||||
}
|
||||
case "2": {
|
||||
this.setState({activeTab: 2, general: "", release: "active", pkgmgt: ""});
|
||||
break;
|
||||
}
|
||||
case "3": {
|
||||
this.setState({activeTab: 3, general: "", release: "", pkgmgt: "active"});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
return "No Content";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getTabContent(tab) {
|
||||
switch (tab) {
|
||||
case 1: {
|
||||
{
|
||||
console.log(this.state.application)
|
||||
}
|
||||
return <GeneralInfo application={this.state.application}/>
|
||||
}
|
||||
case 2: {
|
||||
return <ReleaseManager/>
|
||||
}
|
||||
case 3: {
|
||||
return ("Step3")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleOnBackClick() {
|
||||
window.location.href = "../../../../../../../assets/apps"
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="publisher-card">
|
||||
<Row id="application-edit-header">
|
||||
<Col xs="3">
|
||||
<a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}>
|
||||
<i className="fw fw-left-arrow"></i>
|
||||
</a>
|
||||
</Col>
|
||||
<Col>
|
||||
{this.state.application.name}
|
||||
</Col>
|
||||
</Row>
|
||||
<hr/>
|
||||
<Row id="application-edit-main-container">
|
||||
<Col xs="3">
|
||||
<div className="tab">
|
||||
<button className={this.state.general} value={1} onClick={this.handleTabClick.bind(this)}>
|
||||
<FormattedMessage id="General" defaultMessage="General"/>
|
||||
</button>
|
||||
<button className={this.state.release} value={2} onClick={this.handleTabClick.bind(this)}>
|
||||
<FormattedMessage id="App.Releases" defaultMessage="Application Releases"/>
|
||||
</button>
|
||||
<button className={this.state.pkgmgt} value={3} onClick={this.handleTabClick.bind(this)}>
|
||||
<FormattedMessage id="Package.Manager" defaultMessage="Package Manager"/>
|
||||
</button>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs="9">
|
||||
{/* Application edit content */}
|
||||
<div id="application-edit-content">
|
||||
{this.getTabContent(this.state.activeTab)}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ApplicationEdit;
|
||||
@ -1,288 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Button, FormGroup, Input, Label, Row} from 'reactstrap';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import Chip from "../../../UIComponents/Chip/Chip";
|
||||
|
||||
class GeneralInfo extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onTextFieldChange = this.onTextFieldChange.bind(this);
|
||||
this.addTags = this.addTags.bind(this);
|
||||
this.handleRequestDelete = this.handleRequestDelete.bind(this);
|
||||
this.handleTagChange = this.handleTagChange.bind(this);
|
||||
this.state = {
|
||||
defValue: "",
|
||||
title: "",
|
||||
description: "",
|
||||
shortDescription: "",
|
||||
tags: [],
|
||||
screenshots: [],
|
||||
icon: [],
|
||||
banner: []
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set text field values to state.
|
||||
* */
|
||||
onTextFieldChange(event) {
|
||||
let field = event.target.name;
|
||||
console.log(event.target.value);
|
||||
switch (field) {
|
||||
case "appName": {
|
||||
this.setState({name: event.target.value});
|
||||
break;
|
||||
}
|
||||
case "appDescription": {
|
||||
this.setState({description: event.target.value});
|
||||
break;
|
||||
}
|
||||
case "appShortDescription": {
|
||||
this.setState({shortDescription: event.target.value});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a tag on Enter key press and set it to the state.
|
||||
* Clears the tags text field.
|
||||
* Chip gets two parameters: Key and value.
|
||||
* */
|
||||
addTags(event) {
|
||||
let tags = this.state.tags;
|
||||
if (event.charCode === 13) {
|
||||
event.preventDefault();
|
||||
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
|
||||
this.setState({tags, defValue: ""}, console.log(tags));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the value for tag.
|
||||
* */
|
||||
handleTagChange(event) {
|
||||
let defaultValue = this.state.defValue;
|
||||
defaultValue = event.target.value;
|
||||
this.setState({defValue: defaultValue})
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
* */
|
||||
handleRequestDelete(key) {
|
||||
let chipData = this.state.tags;
|
||||
const chipToDelete = chipData.map((chip) => chip.key).indexOf(key);
|
||||
chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: chipData});
|
||||
};
|
||||
|
||||
|
||||
//TODO: Remove Console logs.
|
||||
render() {
|
||||
return (
|
||||
<div className="app-edit-general-info">
|
||||
<Row>
|
||||
<form>
|
||||
<FormGroup>
|
||||
<Label for="app-title">
|
||||
<FormattedMessage id="Title" defaultMessage="Title"/>*
|
||||
</Label>
|
||||
<Input required type="text" name="appName" id="app-title"
|
||||
onChange={this.onTextFieldChange}/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-short-description">
|
||||
<FormattedMessage id="shortDescription" defaultMessage="shortDescription"/>*
|
||||
</Label>
|
||||
<Input
|
||||
required
|
||||
type="textarea"
|
||||
name="appShortDescription"
|
||||
id="app-short-description"
|
||||
onChange={this.onTextFieldChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-title">
|
||||
<FormattedMessage id="Description" defaultMessage="Description"/>*
|
||||
</Label>
|
||||
<Input
|
||||
required
|
||||
type="textarea"
|
||||
name="appDescription"
|
||||
id="app-description"
|
||||
onChange={this.onTextFieldChange}/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-category">
|
||||
<FormattedMessage id="Category" defaultMessage="Category"/>
|
||||
</Label>
|
||||
<Input type="select" name="category" id="app-category">
|
||||
<option>Business</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-visibility">
|
||||
<FormattedMessage id="Visibility" defaultMessage="Visibility"/>
|
||||
</Label>
|
||||
<Input type="select" name="visibility" id="app-visibility">
|
||||
<option><FormattedMessage id="Devices" defaultMessage="Devices"/></option>
|
||||
<option><FormattedMessage id="Roles" defaultMessage="Roles"/></option>
|
||||
<option><FormattedMessage id="Groups" defaultMessage="Groups"/></option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-tags">
|
||||
<FormattedMessage id="Tags" defaultMessage="Tags"/>*
|
||||
</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
value={this.state.defValue}
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
onChange={this.handleTagChange.bind(this)}
|
||||
onKeyPress={this.addTags.bind(this)}
|
||||
/>
|
||||
<div id="batch-content">
|
||||
{this.state.tags.map(tag => {
|
||||
return (
|
||||
<Chip
|
||||
key={tag.key}
|
||||
content={tag}
|
||||
onDelete={this.handleRequestDelete}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</FormGroup>
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label for="app-screenshots">
|
||||
<FormattedMessage id="Screenshots" defaultMessage="Screenshots"/>*
|
||||
</Label>
|
||||
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
|
||||
<div id="screenshot-container">
|
||||
{this.state.screenshots.map((tile) => (
|
||||
<button id="img-btn-screenshot"
|
||||
style={{height: '210px', width: '410px'}}
|
||||
onMouseEnter={() => {
|
||||
console.log("Mouse Entered")
|
||||
}}>
|
||||
{console.log(tile[0].preview)}
|
||||
<img style={{height: '200px', width: '400px'}}
|
||||
src={tile[0].preview}/>
|
||||
</button>
|
||||
))}
|
||||
{this.state.screenshots.length < 3 ?
|
||||
<Dropzone
|
||||
className="application-create-screenshot-dropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(screenshots, rejected) => {
|
||||
let tmpScreenshots = this.state.screenshots;
|
||||
tmpScreenshots.push(screenshots);
|
||||
console.log(screenshots);
|
||||
this.setState({
|
||||
screenshots: tmpScreenshots
|
||||
});
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-add"></i>
|
||||
</Dropzone> : <div/>}
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div style={{display: 'flex'}}>
|
||||
<div style={{float: 'left', marginRight: '15px'}}>
|
||||
<FormGroup>
|
||||
<Label for="app-icon">
|
||||
<FormattedMessage id="Icon" defaultMessage="Icon"/>*
|
||||
</Label>
|
||||
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
|
||||
<div id="app-icon-container">
|
||||
{this.state.icon.map((tile) => (
|
||||
<button onMouseEnter={() => {
|
||||
console.log("Mouse Entered")
|
||||
}}>
|
||||
<img style={{height: '200px', width: '200px'}}
|
||||
src={tile.preview}/>
|
||||
</button>
|
||||
))}
|
||||
{this.state.icon.length === 0 ?
|
||||
<Dropzone
|
||||
className="application-create-icon-dropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(icon, rejected) => {
|
||||
this.setState({icon, rejected});
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-add"></i>
|
||||
</Dropzone> : <div/>}
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div style={{marginLeft: '15px'}}>
|
||||
<FormGroup>
|
||||
<Label for="app-banner">
|
||||
<FormattedMessage id="Banner" defaultMessage="Banner"/>*
|
||||
</Label>
|
||||
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
|
||||
<div id="app-banner-container">
|
||||
{this.state.banner.map((tile) => (
|
||||
<button onMouseEnter={() => {
|
||||
console.log("Mouse Entered")
|
||||
}}>
|
||||
<img style={{height: '200px', width: '400px'}}
|
||||
src={tile.preview}/>
|
||||
</button>
|
||||
))}
|
||||
{this.state.banner.length === 0 ?
|
||||
<Dropzone
|
||||
className="application-create-banner-dropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(banner, rejected) => {
|
||||
this.setState({banner, rejected});
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-add"></i>
|
||||
</Dropzone> : <div/>
|
||||
}
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div className="save-info">
|
||||
<Button className="custom-flat danger-flat">Cancel</Button>
|
||||
<Button className="custom-raised primary">Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default GeneralInfo;
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
|
||||
class PackageManager extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="package-mgt-content">
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default PackageManager;
|
||||
@ -1,177 +0,0 @@
|
||||
/*
|
||||
* 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 {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap";
|
||||
import UploadPackage from "./UploadPackage";
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
class CreateRelease extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onTestMethodChange = this.onTestMethodChange.bind(this);
|
||||
this.showUploadArtifacts = this.showUploadArtifacts.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.onBackToRelease = this.onBackToRelease.bind(this);
|
||||
this.state = {
|
||||
open: true,
|
||||
hiddenMain: false
|
||||
}
|
||||
}
|
||||
|
||||
onTestMethodChange(event) {
|
||||
let type = event.target.value;
|
||||
if (type !== 'open') {
|
||||
this.setState({open: false})
|
||||
} else {
|
||||
this.setState({open: true})
|
||||
}
|
||||
}
|
||||
|
||||
showUploadArtifacts() {
|
||||
this.setState({hiddenMain: true})
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handleBack();
|
||||
}
|
||||
|
||||
onBackToRelease() {
|
||||
this.setState({hiddenMain: false});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {channel} = this.props;
|
||||
console.log(channel);
|
||||
return (
|
||||
<div>
|
||||
|
||||
{this.state.hiddenMain ?
|
||||
<div>
|
||||
<UploadPackage
|
||||
backToRelease={this.onBackToRelease}
|
||||
selectedChannel={channel}
|
||||
/>
|
||||
</div> :
|
||||
|
||||
<div>
|
||||
<Row>
|
||||
<div className="release-header">
|
||||
<a onClick={this.onBackClick}>{"<-"}</a>
|
||||
<span id="create-release-header">
|
||||
<strong>{channel} <FormattedMessage id="Release" defaultMessage="Release"/></strong>
|
||||
</span>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="release-create">
|
||||
<div>
|
||||
<span>
|
||||
<strong><FormattedMessage id="Create.Release" defaultMessage="Create Release"/></strong>
|
||||
</span>
|
||||
<p>
|
||||
{channel === 'Production' ? "" :
|
||||
"You could create " + channel + " release for your application and let " +
|
||||
"the test users to test the application for it's stability."}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Button id="create-release-btn" onClick={this.showUploadArtifacts}>Create
|
||||
a {channel}
|
||||
Release</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Row>
|
||||
{channel !== 'Production' ?
|
||||
<Row>
|
||||
<div>
|
||||
<span>
|
||||
<strong>Manage Test Method</strong>
|
||||
</span>
|
||||
<p>
|
||||
This section allows you to change the test method and the users who would be
|
||||
able to test your application.
|
||||
</p>
|
||||
<div>
|
||||
<form>
|
||||
<FormGroup>
|
||||
<Label for="test-method">Test Method*</Label>
|
||||
<Input
|
||||
required
|
||||
type="select"
|
||||
name="testMethod"
|
||||
id="test-method"
|
||||
onChange={this.onTestMethodChange}
|
||||
>
|
||||
<option value="open">Open {channel}</option>
|
||||
<option value="closed">Closed {channel}</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
{!this.state.open ? (
|
||||
<FormGroup>
|
||||
<Label for="user-list">Users List*</Label>
|
||||
<Input
|
||||
required
|
||||
name="userList"
|
||||
id="user-list"
|
||||
type="text"
|
||||
/>
|
||||
<FormText color="muted">
|
||||
Provide a comma separated list of email
|
||||
addresses.
|
||||
</FormText>
|
||||
</FormGroup>
|
||||
) : <div/>}
|
||||
<FormGroup>
|
||||
<Label for="app-title">Feedback Method*</Label>
|
||||
<Input
|
||||
required
|
||||
name="appName"
|
||||
id="app-title"
|
||||
/>
|
||||
<FormText color="muted">
|
||||
Provide an Email address or a URL for your users to provide
|
||||
feedback on the application.
|
||||
</FormText>
|
||||
</FormGroup>
|
||||
<div>
|
||||
<Button className="form-btn">
|
||||
<FormattedMessage id="Save" defaultMessage="Save"/>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Row> :
|
||||
<div/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CreateRelease.propTypes = {
|
||||
channel: PropTypes.string,
|
||||
handleBack: PropTypes.func
|
||||
};
|
||||
|
||||
export default CreateRelease;
|
||||
@ -1,105 +0,0 @@
|
||||
/*
|
||||
* 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 {Button, Col, FormGroup, Input, Label, Row} from "reactstrap";
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
class UploadPackage extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.handleBack = this.handleBack.bind(this)
|
||||
}
|
||||
|
||||
handleBack() {
|
||||
this.props.onBackToRelease();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {selectedChannel} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<div className="release-header">
|
||||
<a onClick={this.handleBack}>{"<-"}</a>
|
||||
<span id="create-release-header">
|
||||
<strong>
|
||||
<FormattedMessage id="New.Release.For"
|
||||
defaultMessage="New Release For"/> {selectedChannel}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="release-header">
|
||||
<span id="create-release-header">
|
||||
<strong>
|
||||
<FormattedMessage id="Upload.Package.File" defaultMessage="Upload Package File"/>
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs="3">
|
||||
<Button>
|
||||
<FormattedMessage id="Upload" defaultMessage="Upload"/>
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs="3">
|
||||
<Button>
|
||||
<FormattedMessage id="Select.from.package.library"
|
||||
defaultMessage="Select from package library"/>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="release-detail-content">
|
||||
<form>
|
||||
<FormGroup>
|
||||
<Label>
|
||||
<FormattedMessage id="Release.Name" defaultMessage="Release Name"/> *
|
||||
</Label>
|
||||
<Input required type="text"/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>
|
||||
<FormattedMessage id="Release.Notes" defaultMessage="Release Notes"/> *
|
||||
</Label>
|
||||
<Input required type="textarea"/>
|
||||
</FormGroup>
|
||||
<div className="form-btn">
|
||||
<Button>
|
||||
<FormattedMessage id="Send.for.Review" defaultMessage="Send for Review"/>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
UploadPackage.protoTypes = {
|
||||
backToRelease: PropTypes.func,
|
||||
channel: PropTypes.string
|
||||
};
|
||||
|
||||
export default UploadPackage;
|
||||
@ -1,125 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Button, Col, Row} from "reactstrap";
|
||||
import CreateRelease from "../Create/CreateRelease";
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
class ReleaseManager extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
|
||||
this.onCreateRelease = this.onCreateRelease.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.state = {
|
||||
createRelease: false,
|
||||
onGoing: ""
|
||||
}
|
||||
}
|
||||
|
||||
onCreateRelease(event) {
|
||||
event.preventDefault();
|
||||
this.setState({createRelease: true, onGoing: event.target.value})
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.setState({createRelease: false});
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds a generic message saying there are no current release in the specified release channel.
|
||||
* */
|
||||
getNoReleaseContent(release) {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col sm="12" md={{size: 8, offset: 4}}>
|
||||
<p>You have no on-going {release} Releases!</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12" md={{size: 8, offset: 5}}>
|
||||
<Button
|
||||
className="button-add"
|
||||
id={release.toLowerCase()}
|
||||
value={release}
|
||||
onClick={this.onCreateRelease}
|
||||
>
|
||||
Create a Release
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.state.createRelease ?
|
||||
<CreateRelease
|
||||
channel={this.state.onGoing}
|
||||
handleBack={this.onBackClick}
|
||||
/> :
|
||||
<div id="release-mgt-content">
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="production">
|
||||
<FormattedMessage id="Production.Releases" defaultMessage="Production Releases"/>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Production")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="beta">
|
||||
<FormattedMessage id="Beta.Releases" defaultMessage="Beta Releases"/>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Beta")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="alpha">
|
||||
<FormattedMessage id="Alpha.Releases" defaultMessage="Alpha Releases"/>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Alpha")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ReleaseManager;
|
||||
@ -1,155 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import {Col, Row} from "reactstrap";
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
/**
|
||||
* Application view component.
|
||||
* Shows the details of the application.
|
||||
* */
|
||||
class ApplicationView extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
application: {}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props, nextProps) {
|
||||
this.setState({application: props.application});
|
||||
console.log(props.application, nextProps)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
//TODO: Download image artifacts.
|
||||
}
|
||||
|
||||
handleEdit() {
|
||||
this.props.history.push("/assets/apps/edit/" + this.state.application.uuid);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.application.length === 0) {
|
||||
return <div/>
|
||||
} else {
|
||||
const app = this.state.application;
|
||||
console.log(app);
|
||||
return (
|
||||
<div id="application-view-content">
|
||||
<div id="application-view-row">
|
||||
<Row>
|
||||
<Col>
|
||||
<div id="app-icon">
|
||||
{/*TODO: Remove this*/}
|
||||
<img
|
||||
className="app-view-image"
|
||||
src={app.icon}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<Row>
|
||||
<p className="app-view-field">{app.name}</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<span className="app-updated-date app-view-text">
|
||||
<FormattedMessage id="Last.Updated"
|
||||
defaultMessage="Last.Updated"/> {app.modifiedAt}</span>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div id="application-view-row">
|
||||
<Row>
|
||||
<Col>
|
||||
<span className="app-install-count app-view-text">
|
||||
2k <FormattedMessage id="Installs" defaultMessage="Installs"/>
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<i className="fw fw-star"></i>
|
||||
<i className="fw fw-star"></i>
|
||||
<i className="fw fw-star"></i>
|
||||
<i className="fw fw-star"></i>
|
||||
</Col>
|
||||
<Col>
|
||||
<p className="app-view-text">
|
||||
<a href="#">
|
||||
<FormattedMessage id="View.In.Store" defaultMessage="View.In.Store"/>
|
||||
</a>
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<hr/>
|
||||
<div id="application-view-row">
|
||||
<Row>
|
||||
<Col>
|
||||
<p className="app-view-field">
|
||||
<FormattedMessage id="Description" defaultMessage="Description"/>:
|
||||
</p>
|
||||
</Col>
|
||||
<Col>
|
||||
<p className="app-view-text">{app.description}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<p className="app-view-field">
|
||||
<FormattedMessage id="Tags" defaultMessage="Tags"/>:
|
||||
</p>
|
||||
</Col>
|
||||
<Col>
|
||||
<p className="app-view-text">[list of tags...]</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<p className="app-view-field">
|
||||
<FormattedMessage id="Release" defaultMessage="Release"/>:
|
||||
</p>
|
||||
</Col>
|
||||
<Col>
|
||||
<p className="app-view-text">Production</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<p className="app-view-field">
|
||||
<FormattedMessage id="Version" defaultMessage="Version"/>:
|
||||
</p>
|
||||
</Col>
|
||||
<Col>
|
||||
<p className="app-view-text">v1.0</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(ApplicationView);
|
||||
@ -1,53 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Col, Row} from "reactstrap";
|
||||
|
||||
/**
|
||||
* Error page.
|
||||
* */
|
||||
class Error extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="error-page">
|
||||
<Row>
|
||||
<Col>
|
||||
<div className="error-code">
|
||||
<p>404</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<div className="error-text">
|
||||
<p>The page you are looking for doesn't exist or error occurred.</p>
|
||||
<p>Please click <a href="/publisher">here</a> to go to App publisher home page.</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Error;
|
||||
@ -1,195 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
import Switch from "../../../UIComponents/Switch/Switch";
|
||||
import Chip from "../../../UIComponents/Chip/Chip";
|
||||
|
||||
/**
|
||||
* Enable : switch
|
||||
* Share between tenants: switch
|
||||
* Tags: input
|
||||
* */
|
||||
class Configure extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.state = {
|
||||
defValue: "",
|
||||
tags: [],
|
||||
enabled: false,
|
||||
shared: false,
|
||||
defaultTenantMapping: true,
|
||||
errors: {}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a tag on Enter key press and set it to the state.
|
||||
* Clears the tags text field.
|
||||
* Chip gets two parameters: Key and value.
|
||||
* */
|
||||
addTags(event) {
|
||||
let tags = this.state.tags;
|
||||
if (event.charCode === 13) {
|
||||
event.preventDefault();
|
||||
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
|
||||
this.setState({tags, defValue: ""}, console.log(tags));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the value for tag.
|
||||
* */
|
||||
handleTagChange(event) {
|
||||
let defaultValue = this.state.defValue;
|
||||
defaultValue = event.target.value;
|
||||
this.setState({defValue: defaultValue})
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
* */
|
||||
handleRequestDelete(key) {
|
||||
let chipData = this.state.tags;
|
||||
const chipToDelete = chipData.map((chip) => chip.key).indexOf(key);
|
||||
chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: chipData});
|
||||
};
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
setStepData() {
|
||||
const {shared, enabled, tags, defaultTenantMapping} = this.state;
|
||||
|
||||
let config = {
|
||||
shared: shared,
|
||||
enabled: enabled,
|
||||
defaultTenantMapping: defaultTenantMapping,
|
||||
tags: tags
|
||||
};
|
||||
|
||||
this.props.setStepData("configure", config);
|
||||
}
|
||||
|
||||
onEnabledChanged() {
|
||||
let enabled = this.state.enabled;
|
||||
this.setState({enabled: !enabled});
|
||||
}
|
||||
|
||||
onAllTenantsChanged() {
|
||||
let allTenants = this.state.allTenants;
|
||||
this.setState({allTenants: !allTenants});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<div id="app-release-switch-content">
|
||||
<div id="app-release-switch-label">
|
||||
<Label for="app-release-switch">
|
||||
<FormattedMessage id="Platform.Enable" defaultMessage="Platform.Enable"/>
|
||||
</Label>
|
||||
</div>
|
||||
<div id="app-release-switch">
|
||||
<Switch
|
||||
name="enabled"
|
||||
id="app-release-switch"
|
||||
onChange={this.onEnabledChanged.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<br/>
|
||||
<FormGroup>
|
||||
<div id="app-release-switch-content">
|
||||
<div id="app-release-switch-label">
|
||||
<Label for="app-release-switch">
|
||||
<FormattedMessage id="Share.with.Tenants" defaultMessage="Share.with.Tenants"/>
|
||||
</Label>
|
||||
</div>
|
||||
<div id="app-release-switch">
|
||||
<Switch
|
||||
name="share"
|
||||
id="app-release-switch"
|
||||
onChange={this.onAllTenantsChanged.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<br/>
|
||||
<FormGroup>
|
||||
<Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='Tags'/>*</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
value={this.state.defValue}
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
onChange={this.handleTagChange.bind(this)}
|
||||
onKeyPress={this.addTags.bind(this)}
|
||||
/>
|
||||
<div id="batch-content">
|
||||
{this.state.tags.map(tag => {
|
||||
return (
|
||||
<Chip
|
||||
key={tag.key}
|
||||
content={tag}
|
||||
onDelete={this.handleRequestDelete.bind(this)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter className="custom-footer row">
|
||||
<div className="footer-back-btn col">
|
||||
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="footer-main-btn col">
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-flat primary-flat" onClick={this.setStepData}>
|
||||
<FormattedMessage id="Next" defaultMessage="Next"/>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Configure;
|
||||
@ -1,185 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
import * as validator from '../../../../common/validator';
|
||||
import Dropzone from "react-dropzone";
|
||||
|
||||
/**
|
||||
* Name
|
||||
* Description
|
||||
* Identifier
|
||||
* Icon
|
||||
* */
|
||||
class General extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onTextFieldChange = this.onTextFieldChange.bind(this);
|
||||
this.onNextClick = this.onNextClick.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.state = {
|
||||
name: "",
|
||||
description: "",
|
||||
identifier: "",
|
||||
errors: {},
|
||||
icon: []
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onNextClick() {
|
||||
const {name, description, identifier, icon} = this.state;
|
||||
|
||||
let general = {
|
||||
name: name,
|
||||
description: description,
|
||||
identifier: identifier,
|
||||
icon: icon
|
||||
};
|
||||
|
||||
let {errorCount, errors} = this.validate();
|
||||
|
||||
if (errorCount !== 0) {
|
||||
this.setState({errors: errors});
|
||||
} else {
|
||||
this.props.setStepData("general", general);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onTextFieldChange(event) {
|
||||
let field = event.target.name;
|
||||
let value = event.target.value;
|
||||
|
||||
switch (field) {
|
||||
case("platformName") : {
|
||||
this.setState({name: value});
|
||||
break;
|
||||
}
|
||||
case("platformDescription") : {
|
||||
this.setState({description: value});
|
||||
break;
|
||||
}
|
||||
case("platformId") : {
|
||||
this.setState({identifier: value});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
validate() {
|
||||
const {name, identifier, description} = this.state;
|
||||
let errorCount = 0;
|
||||
let errors = {};
|
||||
|
||||
if (validator.validateNull(name)) {
|
||||
errorCount++;
|
||||
errors.name = "Platform Name is Required!"
|
||||
}
|
||||
|
||||
if (validator.validateNull(identifier)) {
|
||||
errorCount++;
|
||||
errors.identifier = "Platform Identifier is Required!"
|
||||
}
|
||||
|
||||
if (validator.validateNull(description)) {
|
||||
errorCount++;
|
||||
errors.description = "Platform Desciption is Required!"
|
||||
}
|
||||
return {errorCount, errors};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<Label for="platform-name">
|
||||
<FormattedMessage id="Name" defaultMessage="Name"/>*
|
||||
</Label>
|
||||
<Input required type="text" name="platformName" id="platform-name"
|
||||
onChange={this.onTextFieldChange}/>
|
||||
<FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="platform-description">
|
||||
<FormattedMessage id="Description" defaultMessage="Description"/>*
|
||||
</Label>
|
||||
<Input required type="textarea" name="platformDescription" id="platform-description"
|
||||
onChange={this.onTextFieldChange}/>
|
||||
<FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="platform-id">
|
||||
<FormattedMessage id="Identifier" defaultMessage="Identifier"/>*
|
||||
</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
name="platformId"
|
||||
id="platform-id"
|
||||
onChange={this.onTextFieldChange}/>
|
||||
<FormFeedback id="form-error">{this.state.errors.identifier}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-icon">
|
||||
<FormattedMessage id='Icon' defaultMessage='Icon'/>
|
||||
</Label>
|
||||
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
|
||||
<div id="app-icon-container">
|
||||
{this.state.icon.map((tile) => (
|
||||
<div id="app-image-icon">
|
||||
<img src={tile.preview} height={200} width={200}/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{this.state.icon.length === 0 ?
|
||||
<Dropzone
|
||||
className="application-create-icon-dropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(icon, rejected) => {
|
||||
this.setState({icon, rejected});
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-add"></i>
|
||||
</Dropzone> : <div/>}
|
||||
</div>
|
||||
<FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-raised primary" onClick={this.onNextClick}>
|
||||
<FormattedMessage id="Next" defaultMessage="Next"/>
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default General;
|
||||
@ -1,168 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Button, Col, FormGroup, Input, Label, ModalBody, ModalFooter, Row} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
|
||||
/**
|
||||
* key : value
|
||||
* */
|
||||
class Properties extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.submitForm = this.submitForm.bind(this);
|
||||
this.onAddPropertyClick = this.onAddPropertyClick.bind(this);
|
||||
this.onKeyFieldChange = this.onKeyFieldChange.bind(this);
|
||||
this.onValueFieldChange = this.onValueFieldChange.bind(this);
|
||||
this.onPropertyDelete = this.onPropertyDelete.bind(this);
|
||||
this.state = {
|
||||
key: "",
|
||||
value: "",
|
||||
properties: []
|
||||
}
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
submitForm() {
|
||||
let platformProps = {
|
||||
"properties": this.state.properties
|
||||
};
|
||||
this.props.onSubmit(platformProps);
|
||||
}
|
||||
|
||||
onAddPropertyClick() {
|
||||
let {key, value, properties} = this.state;
|
||||
let property = {
|
||||
name: key,
|
||||
defaultValue: value,
|
||||
optional: false
|
||||
};
|
||||
|
||||
properties.push(property);
|
||||
|
||||
this.setState({property: properties, key: "", value: ""})
|
||||
}
|
||||
|
||||
onKeyFieldChange(event) {
|
||||
this.setState({key: event.target.value});
|
||||
}
|
||||
|
||||
onValueFieldChange(event) {
|
||||
this.setState({value: event.target.value});
|
||||
}
|
||||
|
||||
onPropertyDelete(key) {
|
||||
let properties = this.state.properties;
|
||||
const propertyToDelete = properties.map((property) => property.name).indexOf(key);
|
||||
properties.splice(propertyToDelete, 1);
|
||||
this.setState({properties: properties});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<Label for="platform-properties">
|
||||
<FormattedMessage id="Platform.Properties" defaultMessage="Platform.Properties"/></Label>
|
||||
<Row>
|
||||
<Col>
|
||||
<Input
|
||||
placeholder="Key"
|
||||
type="text"
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
value={this.state.key}
|
||||
onChange={this.onKeyFieldChange}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Input
|
||||
placeholder="value"
|
||||
type="text"
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
value={this.state.value}
|
||||
onChange={this.onValueFieldChange}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button className="custom-flat circle-btn-add" onClick={this.onAddPropertyClick}>
|
||||
<i className="fw fw-add"></i>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="platform-property-container">
|
||||
{this.state.properties.map(
|
||||
property => {
|
||||
return (
|
||||
<Row key={property.name} className="platform-property-row">
|
||||
<Col key={property.name}>
|
||||
{property.name}
|
||||
</Col>
|
||||
<Col>
|
||||
{property.defaultValue}
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
className="custom-flat circle-btn-clear"
|
||||
onClick={() => {
|
||||
this.onPropertyDelete(property.name)
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-error"></i>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter className="custom-footer row">
|
||||
<div className="footer-back-btn col">
|
||||
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="footer-main-btn col">
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-flat primary-flat" onClick={this.submitForm}>
|
||||
<FormattedMessage id="Create" defaultMessage="Create"/>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Properties;
|
||||
@ -1,23 +0,0 @@
|
||||
/*
|
||||
* 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 Configure from './Configure';
|
||||
import General from './General';
|
||||
import Properties from './Properties';
|
||||
|
||||
export {Configure, General, Properties}
|
||||
@ -1,210 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Modal, ModalHeader} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
import Stepper from "../../UIComponents/StepprHeader/Stepper";
|
||||
import PlatformMgtApi from "../../../api/platformMgtApi";
|
||||
import AuthHandler from "../../../api/authHandler";
|
||||
import {General, Configure, Properties} from "./CreateSteps";
|
||||
|
||||
/**
|
||||
* Platform view component.
|
||||
* */
|
||||
class PlatformCreate extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onClose = this.onClose.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.onSubmit = this.onSubmit.bind(this);
|
||||
this.onPrevClick = this.onPrevClick.bind(this);
|
||||
this.onNextClick = this.onNextClick.bind(this);
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
stepData: [],
|
||||
general: {},
|
||||
configure: {},
|
||||
platformProps: {},
|
||||
open: false
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props, nextprops) {
|
||||
this.setState({open: props.open})
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({open: this.props.open});
|
||||
}
|
||||
|
||||
onClose() {
|
||||
this.setState({open: false, stepIndex: 0, general: {}, configure: {}, platformProps: {}})
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles next button click event.
|
||||
* */
|
||||
onNextClick() {
|
||||
// console.log(this.state); //TODO: Remove this
|
||||
const {stepIndex} = this.state;
|
||||
|
||||
if (stepIndex + 1 > 2) {
|
||||
this.onSubmit();
|
||||
} else {
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
finished: stepIndex + 1 > 1
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles form submit.
|
||||
* platform.identifier = this.state.identifier;
|
||||
platform.name = this.state.name;
|
||||
platform.description = this.state.description;
|
||||
platform.tags = this.state.tags;
|
||||
platform.properties = this.state.platformProperties;
|
||||
platform.icon = this.state.icon;
|
||||
platform.enabled = this.state.enabled;
|
||||
platform.allTenants = this.state.allTenants;
|
||||
platform.defaultTenantMapping = true;
|
||||
|
||||
*
|
||||
*
|
||||
* */
|
||||
onSubmit(platformProps) {
|
||||
let {general, configure} = this.state;
|
||||
let platformCreatePromise = PlatformMgtApi.createPlatform(general, configure, platformProps);
|
||||
platformCreatePromise.then(response => {
|
||||
console.log(response.data)
|
||||
}
|
||||
).catch(
|
||||
function (err) {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Saves form data in each step in to the state.
|
||||
* @param step: The step number of the step data.
|
||||
* @param data: The form data of the step.
|
||||
* */
|
||||
setStepData(step, data) {
|
||||
switch (step) {
|
||||
case "general": {
|
||||
this.setState({general: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "configure": {
|
||||
this.setState({configure: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "platformProps": {
|
||||
this.setState({platformProps: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handled [ < Prev ] button click.
|
||||
* This clears the data in the current step and returns to the previous step.
|
||||
* */
|
||||
onPrevClick() {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({stepIndex: stepIndex - 1, finished: false});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Defines all the Steps in the stepper. (Wizard)
|
||||
*
|
||||
* Extension Point: If any extra steps needed, follow the instructions below.
|
||||
* 1. Create the required form ./Forms directory.
|
||||
* 2. Add defined case statements.
|
||||
* 3. Define the Step in render function.
|
||||
*
|
||||
* */
|
||||
getStepContent(stepIndex) {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return (
|
||||
<General
|
||||
defaultData={this.state.general}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<Configure
|
||||
defaultData={this.state.configure}
|
||||
handlePrev={this.onPrevClick}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<Properties
|
||||
defaultData={this.state.properties}
|
||||
handlePrev={this.onPrevClick}
|
||||
onSubmit={this.onSubmit}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <div/>;
|
||||
}
|
||||
}
|
||||
|
||||
getStepperHeaders() {
|
||||
return (
|
||||
[{index: 1, text: "General"},
|
||||
{index: 2, text: "Configure"},
|
||||
{index: 3, text: "Properties"},
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {stepIndex} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal" backdrop={'static'}>
|
||||
<ModalHeader className="app-create-modal-header">
|
||||
<FormattedMessage id="Create.Platform" defaultMessage="Create.Platform"/>
|
||||
</ModalHeader>
|
||||
<Stepper
|
||||
activeStep={stepIndex + 1}
|
||||
previousStep={stepIndex}
|
||||
stepContent={this.getStepperHeaders()}
|
||||
/>
|
||||
{this.getStepContent(stepIndex)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlatformCreate;
|
||||
@ -1,126 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Button, Col, Collapse, Row} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
|
||||
/**
|
||||
* Platform component.
|
||||
* In Platform listing, this component will be displayed as cards.
|
||||
* */
|
||||
class Platform extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.unFold = this.unFold.bind(this);
|
||||
this.state = {
|
||||
isOpen: false
|
||||
}
|
||||
}
|
||||
|
||||
unFold() {
|
||||
let isOpen = this.state.isOpen;
|
||||
this.setState({isOpen: !isOpen})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {platform} = this.props;
|
||||
return (
|
||||
<div className="platform-content">
|
||||
<Row>
|
||||
<Col>
|
||||
<div className="platform-text-container">
|
||||
<p className="app-view-field">{platform.name}</p>
|
||||
<p className="app-view-text">{platform.enabled ? "Active" : "Disabled"}</p>
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<div className="platform-icon-container">
|
||||
<p className="platform-icon-letter">{platform.name.charAt(0)}</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="platform-content-footer">
|
||||
{platform.enabled ?
|
||||
<Button className="custom-flat danger-flat">
|
||||
<FormattedMessage id="Disable" defaultMessage="Disable"/>
|
||||
</Button> :
|
||||
<Button className="custom-flat primary-flat">
|
||||
<FormattedMessage id="Activate" defaultMessage="Activate"/>
|
||||
</Button>}
|
||||
<Button className="custom-flat primary-flat">
|
||||
<FormattedMessage id="Share.With.Tenants" defaultMessage="Share.With.Tenants"/>
|
||||
</Button>
|
||||
<Button className="custom-flat grey circle-button" onClick={this.unFold}>
|
||||
{this.state.isOpen ? <i className="fw fw-up"></i> : <i className="fw fw-down"></i>}
|
||||
</Button>
|
||||
</div>
|
||||
</Row>
|
||||
<div className="platform-content-more-outer">
|
||||
<Row>
|
||||
<Col>
|
||||
<Collapse isOpen={this.state.isOpen}>
|
||||
<div className="platform-content-more">
|
||||
<Row>
|
||||
<Col>
|
||||
<p className="app-view-field">
|
||||
<FormattedMessage id="Description" defaultMessage="Description"/>
|
||||
</p>
|
||||
</Col>
|
||||
<Col><p className="app-view-text">{platform.description}</p></Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<p className="app-view-field">
|
||||
<FormattedMessage id="File.Based" defaultMessage="File.Based"/>
|
||||
</p>
|
||||
</Col>
|
||||
<Col>
|
||||
<p className="app-view-text">{platform.fileBased ?
|
||||
<FormattedMessage id="Yes" defaultMessage="Yes"/>
|
||||
: <FormattedMessage id="No" defaultMessage="No"/>}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col><p className="app-view-field">
|
||||
<FormattedMessage id="Tags" defaultMessage="Tags"/>
|
||||
</p></Col>
|
||||
<Col>
|
||||
<p className="app-view-text">
|
||||
{platform.tags.length > 0 ?
|
||||
platform.tags :
|
||||
<FormattedMessage
|
||||
id="No.Platform.Tags"
|
||||
defaultMessage="No.Platform.Tags"/>
|
||||
}
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Collapse>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Platform;
|
||||
@ -1,76 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Button, Row} from "reactstrap";
|
||||
import Platform from "./Platform";
|
||||
import PlatformMgtApi from "../../api/platformMgtApi";
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import PlatformCreate from "./Create/PlatformCreate";
|
||||
|
||||
/**
|
||||
* Platform view component.
|
||||
* */
|
||||
class PlatformListing extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onPlatformCreateClick = this.onPlatformCreateClick.bind(this);
|
||||
this.state = {
|
||||
platforms: [],
|
||||
openModal: false
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
PlatformMgtApi.getPlatforms().then(response => {
|
||||
this.setState({platforms: response.data});
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
})
|
||||
}
|
||||
|
||||
onPlatformCreateClick() {
|
||||
this.setState({openModal: true});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="publisher-card">
|
||||
<Row>
|
||||
<div className="create-platform">
|
||||
<Button className="custom-flat grey" onClick={this.onPlatformCreateClick}>
|
||||
<i className="fw fw-add"></i>Create Platform
|
||||
</Button>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div id="platform-list">
|
||||
{this.state.platforms.map(platform => {
|
||||
return (
|
||||
<Platform key={platform.identifier} platform={platform}/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Row>
|
||||
<PlatformCreate open={this.state.openModal}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlatformListing;
|
||||
@ -1,23 +0,0 @@
|
||||
/*
|
||||
* 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 PlatformCreate from './Create/PlatformCreate';
|
||||
import Platform from './Platform';
|
||||
import PlatformListing from './PlatformListing';
|
||||
|
||||
export {PlatformListing, PlatformCreate, Platform};
|
||||
@ -1,38 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
|
||||
/**
|
||||
* Review Listing.
|
||||
* */
|
||||
class ReviewListing extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Reviews List
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ReviewListing;
|
||||
@ -1,38 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
|
||||
/**
|
||||
* Review details view.
|
||||
* */
|
||||
class ReviewView extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Review
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ReviewView;
|
||||
@ -1,63 +0,0 @@
|
||||
/*
|
||||
* 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 './appImage.css';
|
||||
|
||||
/**
|
||||
* Component for holding uploaded image.
|
||||
* This component has the feature to remove selected image from the array.
|
||||
* */
|
||||
class AppImage extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.removeImage = this.removeImage.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers the parent method to remove the selected image.
|
||||
* @param event: The click event of the component.
|
||||
* */
|
||||
removeImage(event) {
|
||||
event.preventDefault();
|
||||
this.props.onRemove(event.target.id);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {image, imageId} = this.props;
|
||||
return (
|
||||
<div className="image-container" style={this.props.imageStyles}>
|
||||
<img src={image} style={{width: '100%'}} className="image" id={imageId}/>
|
||||
<div className="btn-content">
|
||||
<i className="close-btn" id={imageId} onClick={this.removeImage}>X</i>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
AppImage.propTypes = {
|
||||
image: PropTypes.string,
|
||||
imageId: PropTypes.string,
|
||||
onRemove: PropTypes.func,
|
||||
imageStyles: PropTypes.object
|
||||
};
|
||||
|
||||
export default AppImage;
|
||||
@ -1,65 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.image {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
transition: .5s ease;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
transition: .5s ease;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: rgba(243, 243, 243, 0.43);
|
||||
border-radius: 50%;
|
||||
border: solid 1px #ffffff;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
.image-container:hover .image {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.image-container:hover .btn-content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
/*
|
||||
* 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 './chip.css';
|
||||
|
||||
class Chip extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onDeleteClick = this.onDeleteClick.bind(this);
|
||||
}
|
||||
|
||||
onDeleteClick() {
|
||||
this.props.onDelete(this.props.content.key);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="chip">
|
||||
<div className="chip-content">
|
||||
<div className="chip-text">{this.props.content.value}</div>
|
||||
<div className="chip-close-btn" onClick={this.onDeleteClick}>
|
||||
<i className="fw fw-error"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Chip.propTypes = {
|
||||
onDelete: PropTypes.func,
|
||||
content: PropTypes.object
|
||||
};
|
||||
|
||||
export default Chip;
|
||||
@ -1,71 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Chip component with the material design specs.
|
||||
* Chip with a close button.
|
||||
* (-12px-{text (Roboto-Regular 13px)}-4px-{close button}-4px-)
|
||||
*/
|
||||
.chip {
|
||||
margin-right: 5px;
|
||||
height: 32px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 16px;
|
||||
border: 10px;
|
||||
}
|
||||
|
||||
.chip-content {
|
||||
display: flex;
|
||||
margin: 4px 4px 4px 12px;
|
||||
}
|
||||
|
||||
.chip-text {
|
||||
height: 24px;
|
||||
font-family: "Roboto-Regular";
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
line-height: 20px;
|
||||
padding-top: 4px;
|
||||
margin-right: 4px;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chip-close-btn {
|
||||
font-size: 16px !important;
|
||||
align-content: center;
|
||||
padding-left: 4px;
|
||||
padding-top: 1px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
user-select: none;
|
||||
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip-close-btn i {
|
||||
color: #a9a9a9;
|
||||
color: rgba(0, 0, 0, 0.258824);
|
||||
fill: rgba(0, 0, 0, 0.258824);
|
||||
}
|
||||
|
||||
.chip-close-btn i:hover {
|
||||
color: #959595;
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
|
||||
/**
|
||||
* The Custom Table Component.
|
||||
* This component wraps the material-ui Table component and add some extra functionalities.
|
||||
* 1. Table header click. (For sorting)
|
||||
* 2. Table row click.
|
||||
*
|
||||
* The main sort function is defined in the component where the data table is created and passed to the
|
||||
* DataTable component via props.
|
||||
*
|
||||
* Following are the DataTable proptypes.
|
||||
* 1. Headers: Table headers. This is an array of Json Objects.
|
||||
* An Header Object contains the properties of each header. Currently following properties
|
||||
* are supported.
|
||||
* * sortable: boolean : whether the table column is sortable or not.
|
||||
* * sort: func : If sortable, the sort function.
|
||||
* * sort: func : If sortable, the sort function.
|
||||
* * sort: func : If sortable, the sort function.
|
||||
* * label: String: The Table header string.
|
||||
* * id: String: Unique id for header.
|
||||
*
|
||||
* 2. Data: The list of data that needs to be displayed in the table.
|
||||
* This is also a json array of data objects.
|
||||
* The Json object should contain key: value pair where the key is the header id.
|
||||
*
|
||||
* */
|
||||
class DataTable extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
data: [],
|
||||
headers: [],
|
||||
};
|
||||
this.scriptId = "data-table"
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="data-table">
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
DataTable.prototypes = {};
|
||||
|
||||
export default DataTable;
|
||||
@ -1,76 +0,0 @@
|
||||
/*
|
||||
* 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 Theme from '../../../theme';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import {TableHeaderColumn} from 'material-ui/Table';
|
||||
import {Col, Row} from "reactstrap";
|
||||
|
||||
/**
|
||||
* Data Table header component.
|
||||
* This component creates the header elements of the table.
|
||||
* */
|
||||
class DataTableHeader extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.tableHeaderClick = this.tableHeaderClick.bind(this);
|
||||
this.scriptId = "data-table";
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
/**
|
||||
*Loading the theme files based on the the user-preference.
|
||||
*/
|
||||
Theme.insertThemingScripts(this.scriptId);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Theme.removeThemingScripts(this.scriptId);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* The onClick function of the table header.
|
||||
* Invokes the function passed in the header object.
|
||||
* */
|
||||
tableHeaderClick() {
|
||||
this.props.header.sort();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row className="data-table-header">
|
||||
{this.props.headers.map(header => {
|
||||
|
||||
let headerStyle = header.size;
|
||||
|
||||
return <Col className={headerStyle}>{header.label}</Col>
|
||||
})}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DataTableHeader.prototypes = {
|
||||
headers: PropTypes.array
|
||||
};
|
||||
|
||||
export default DataTableHeader;
|
||||
@ -1,87 +0,0 @@
|
||||
/*
|
||||
* 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 Theme from '../../../theme';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Create from 'material-ui/svg-icons/content/create'
|
||||
import {TableRow, TableRowColumn} from 'material-ui/Table';
|
||||
import Avatar from 'material-ui/Avatar';
|
||||
import {Row} from "reactstrap";
|
||||
|
||||
|
||||
/**
|
||||
* Data table row component.
|
||||
* This component created a row in the data table according to the props.
|
||||
* */
|
||||
class DataTableRow extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
dataItem: {}
|
||||
};
|
||||
this.scriptId = "data-table";
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({dataItem: this.props.dataItem});
|
||||
|
||||
/**
|
||||
*Loading the theme files based on the the user-preference.
|
||||
*/
|
||||
Theme.insertThemingScripts(this.scriptId);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Theme.removeThemingScripts(this.scriptId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers the click event on the data table row.
|
||||
* */
|
||||
handleClick(event) {
|
||||
event.stopPropagation();
|
||||
this.props.handleClick(this.state.dataItem.id);
|
||||
}
|
||||
|
||||
handleBtnClick(event) {
|
||||
event.stopPropagation();
|
||||
console.log(event.target['id'])
|
||||
this.props.onAppEditClick(event.target['id']);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {dataItem} = this.state;
|
||||
|
||||
//height: 62px
|
||||
return (
|
||||
<Row className="data-table-row">
|
||||
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DataTableRow.propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
data: PropTypes.object
|
||||
};
|
||||
|
||||
export default DataTableRow;
|
||||
@ -1,75 +0,0 @@
|
||||
/*
|
||||
* 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 Theme from '../../../theme';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import {TableHeaderColumn} from 'material-ui/Table';
|
||||
import {Col, Row} from "reactstrap";
|
||||
|
||||
/**
|
||||
* Data Table header component.
|
||||
* This component creates the header elements of the table.
|
||||
* */
|
||||
class HeaderCell extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.tableHeaderClick = this.tableHeaderClick.bind(this);
|
||||
this.scriptId = "data-table";
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
/**
|
||||
*Loading the theme files based on the the user-preference.
|
||||
*/
|
||||
Theme.insertThemingScripts(this.scriptId);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Theme.removeThemingScripts(this.scriptId);
|
||||
}
|
||||
|
||||
/**
|
||||
* The onClick function of the table header.
|
||||
* Invokes the function passed in the header object.
|
||||
* */
|
||||
tableHeaderClick() {
|
||||
this.props.header.sort();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row className="data-table-header">
|
||||
{this.props.headers.map(header => {
|
||||
|
||||
let headerStyle = header.size;
|
||||
|
||||
return <Col className={headerStyle}>{header.label}</Col>
|
||||
})}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DataTableHeader.prototypes = {
|
||||
headers: PropTypes.array
|
||||
};
|
||||
|
||||
export default HeaderCell;
|
||||
@ -1,59 +0,0 @@
|
||||
/*
|
||||
* 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 './drawer.css';
|
||||
import {Row} from "reactstrap";
|
||||
|
||||
/**
|
||||
* Custom React component for Application View.
|
||||
* */
|
||||
class Drawer extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.closeDrawer = this.closeDrawer.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes the drawer.
|
||||
* */
|
||||
closeDrawer() {
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div id="app-view" className="app-view-drawer" style={this.props.style}>
|
||||
<a onClick={this.closeDrawer} className="drawer-close-btn"><i className="fw fw-uncheck"></i></a>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Drawer.propTypes = {
|
||||
style: PropTypes.object,
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func
|
||||
};
|
||||
|
||||
export default Drawer;
|
||||
@ -1,71 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.app-view-drawer {
|
||||
height: 100%; /* 100% Full-height */
|
||||
width: 0; /* 0 width - change this with JavaScript */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Stay on top */
|
||||
top: 8%;
|
||||
right: 0%;
|
||||
background-color: #ffffff;
|
||||
overflow-x: hidden; /* Disable horizontal scroll */
|
||||
padding: 60px 0px 0 5px; /* Place content 60px from the top */
|
||||
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
.drawer-close-btn {
|
||||
padding: 8px 8px 8px 32px;
|
||||
text-decoration: none;
|
||||
color: #818181;
|
||||
display: block;
|
||||
transition: 0.3s
|
||||
}
|
||||
|
||||
/* Position and style the close button (top right corner) */
|
||||
.app-view-drawer .closebtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
font-size: 36px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.drawer-close-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.drawer-close-btn:hover {
|
||||
cursor: pointer;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
|
||||
#main {
|
||||
transition: margin-left .5s;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
/*
|
||||
* 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 './floatingButton.css';
|
||||
|
||||
/**
|
||||
* Floating Action button.
|
||||
* */
|
||||
class FloatingButton extends Component {
|
||||
|
||||
handleClick(event) {
|
||||
this.props.onClick(event);
|
||||
}
|
||||
|
||||
render() {
|
||||
let classes = 'btn-circle ' + this.props.className;
|
||||
return (
|
||||
<div className={classes} onClick={this.handleClick.bind(this)}>
|
||||
<div className={classes + " btn-shade"}>
|
||||
<i className="fw fw-add"></i>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FloatingButton.propTypes = {
|
||||
classNames: PropTypes.string,
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
export default FloatingButton;
|
||||
@ -1,54 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Material design based Floating button.
|
||||
*/
|
||||
.btn-circle {
|
||||
color: white;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px
|
||||
}
|
||||
|
||||
.btn-circle:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-shade:focus {
|
||||
background-color: rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
.btn-circle i {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
font-size: 18px;
|
||||
padding: 3px;
|
||||
margin-top: 16px
|
||||
}
|
||||
|
||||
.small {
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
/*
|
||||
* 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 './imageUploader.css';
|
||||
import Dropzone from "react-dropzone";
|
||||
import {Row} from "reactstrap";
|
||||
|
||||
|
||||
class ImageUploader extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.setImages = this.setImages.bind(this);
|
||||
this.state = {
|
||||
images: []
|
||||
}
|
||||
}
|
||||
|
||||
setImages(images) {
|
||||
this.props.setImages(images);
|
||||
}
|
||||
|
||||
render() {
|
||||
let {images, height, width, accepted, multiple, maxAmount} = this.props;
|
||||
return (
|
||||
<div id="screenshot-container">
|
||||
<Row>
|
||||
{images.map((tile) => (
|
||||
<input type="image" src={tile[0].preview} onClick=""/>
|
||||
)
|
||||
)}
|
||||
</Row>
|
||||
|
||||
{this.state.screenshots.length < maxAmount ?
|
||||
<Dropzone
|
||||
className="add-image"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(accepted, rejected) => {
|
||||
this.setImages(accepted);
|
||||
}}
|
||||
>
|
||||
<p className="add-image-symbol">+</p>
|
||||
</Dropzone> : <div/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ImageUploader.prototypes = {
|
||||
height: PropTypes.string,
|
||||
width: PropTypes.string,
|
||||
accepted: PropTypes.array,
|
||||
multiple: PropTypes.bool,
|
||||
maxAmount: PropTypes.number,
|
||||
setImages: PropTypes.func
|
||||
};
|
||||
|
||||
|
||||
export default ImageUploader;
|
||||
@ -1,18 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
/*
|
||||
* 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 = "/publisher/public/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;
|
||||
@ -1,46 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Col, Row} from "reactstrap";
|
||||
import './notification.css';
|
||||
|
||||
class NotificationItem extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col>
|
||||
<div className="notification-app-icon small">
|
||||
<img/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<p>Your application, Facebook has been published.</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NotificationItem;
|
||||
@ -1,71 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import {Col, Row} from "reactstrap";
|
||||
import './notification.css';
|
||||
|
||||
class NotificationView extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="notification-view-content">
|
||||
<div>
|
||||
<Row id="notification-content">
|
||||
<Col xs="3">
|
||||
<div className="notification-app-icon medium">
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs="9">
|
||||
<Row>
|
||||
<span><strong>Application Name</strong></span>
|
||||
</Row>
|
||||
<Row>
|
||||
<span>Version 1.0</span>
|
||||
</Row>
|
||||
<Row>
|
||||
<p id="app-reject-msg">Your Application was rejected</p>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr/>
|
||||
<Row id="notification-content">
|
||||
<Col xs="12">
|
||||
<p>Following validations were detected in your review submission.
|
||||
Please attend to them and re-submit</p>
|
||||
<ul>
|
||||
<li>sdjjfsdfsdfkjs shdfjhlkds hflkhfdslkd </li>
|
||||
<li>sdfkds jfdsljfklsdfjksdjlksdjdlkf</li>
|
||||
<li>sfksdf slkjskd jfjds lkfjdsfdsfdslkf sjf lkdsf</li>
|
||||
<li>skfjslkdjfsdjfjksldjf sdkl jflkds jfkslfjs</li>
|
||||
<li>ksdf jks;kshflk hlkjhds lkjhdsklhsd lkf</li>
|
||||
<li> jsdljflksd jfklsdfskljfkjshf;ks ldj</li>
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NotificationView;
|
||||
@ -1,49 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.notification-app-icon {
|
||||
border-radius: 50%;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
.small {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#notification-view-content {
|
||||
width: 50%;
|
||||
border: solid 1px black;
|
||||
margin: 0 auto;
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
#notification-content {
|
||||
margin: 20px 10px 20px 10px;
|
||||
}
|
||||
|
||||
#app-reject-msg {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #888888;
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
/*
|
||||
* 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 './stepper.css';
|
||||
import {FormattedMessage} from "react-intl";
|
||||
|
||||
class Step extends Component {
|
||||
|
||||
render() {
|
||||
const {index, text, active, passed, finalStep, optional} = this.props;
|
||||
|
||||
let activeStep = active ? "stepper-active-index" : "stepper-inactive-index";
|
||||
let activeStepText = active ? " stepper-active-step-text" : "";
|
||||
let stepPassed = index === passed || index < passed ? " stepper-passed-index" : "";
|
||||
let stepPassedText = index === passed || index < passed ? " stepper-passed-step-text" : "";
|
||||
|
||||
let indexClassNames = "step-index " + activeStep + stepPassed;
|
||||
let indexTextClassNames = "step-text " + activeStepText + stepPassedText;
|
||||
|
||||
let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index;
|
||||
|
||||
return (
|
||||
<div className="step col">
|
||||
<div className="step-content">
|
||||
<div className={indexClassNames}>
|
||||
<span>
|
||||
{stepIndexContent}
|
||||
</span>
|
||||
</div>
|
||||
<div className={indexTextClassNames}>
|
||||
<div>
|
||||
{text}
|
||||
</div>
|
||||
{optional ?
|
||||
<div className="stepper-optional-text">
|
||||
(<FormattedMessage id="Optional" defaultMessage="Optional"/>)
|
||||
</div> : <div/>}
|
||||
</div>
|
||||
{!finalStep ? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Step.propTypes = {
|
||||
index: PropTypes.number,
|
||||
text: PropTypes.node,
|
||||
active: PropTypes.bool,
|
||||
passed: PropTypes.number,
|
||||
finalStep: PropTypes.bool,
|
||||
optional: PropTypes.bool
|
||||
}
|
||||
|
||||
export default Step;
|
||||
@ -1,52 +0,0 @@
|
||||
/*
|
||||
* 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 './stepper.css';
|
||||
import Step from "./Step";
|
||||
|
||||
class Stepper extends Component {
|
||||
|
||||
render() {
|
||||
const {stepContent, activeStep, previousStep} = this.props;
|
||||
return (
|
||||
<div className="stepper-header row">
|
||||
{stepContent.map(content => {
|
||||
return (
|
||||
<Step
|
||||
passed={previousStep}
|
||||
text={content.text}
|
||||
index={content.index}
|
||||
optional={content.optional}
|
||||
active={activeStep === content.index}
|
||||
finalStep={content.index === stepContent.length}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Stepper.propTypes = {
|
||||
stepContent: PropTypes.array,
|
||||
activeStep: PropTypes.number
|
||||
};
|
||||
|
||||
export default Stepper;
|
||||
@ -1,95 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.stepper-header {
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
height: 72px;
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
box-shadow: 1px 0px 1px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: table-cell;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
display: flex;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.step-index {
|
||||
padding-top: 3px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
font-size: 12px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.stepper-inactive-index {
|
||||
background-color: rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
.stepper-active-index {
|
||||
background-color: #0a6eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stepper-passed-index {
|
||||
background-color: #0a6eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
/*padding-top: 3px;*/
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inactive-text {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.stepper-active-step-text {
|
||||
font-family: Roboto-Medium;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.stepper-passed-step-text {
|
||||
font-family: Roboto-Medium;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
.stepper-next-arrow {
|
||||
padding-top: 3px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.stepper-optional-text {
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.39)
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
/*
|
||||
* 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 React, {Component} from 'react';
|
||||
import './switch.css';
|
||||
|
||||
class Switch extends Component {
|
||||
|
||||
render() {
|
||||
const {height, width} = this.props;
|
||||
return (
|
||||
<label className="switch">
|
||||
<input type="checkbox" onChange={this.props.onChange}/>
|
||||
<span className="slider round"></span>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Switch;
|
||||
@ -1,78 +0,0 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 14px;
|
||||
margin: 0 0 0 10px !important;
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {display:none;}
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #a0a0a0;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -3px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: rgba(33, 150, 243, 0.51);
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(20px);
|
||||
-ms-transform: translateX(20px);
|
||||
transform: translateX(20px);
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
@ -1,196 +0,0 @@
|
||||
/*
|
||||
* 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 qs from 'qs';
|
||||
import React, {Component} from 'react';
|
||||
import {Redirect, Switch} from 'react-router-dom';
|
||||
import AuthHandler from '../../../api/authHandler';
|
||||
import {Button, Col, Form, FormGroup, Input, Label, Row} from 'reactstrap';
|
||||
import Logo from "../../UIComponents/Logo/Logo";
|
||||
|
||||
/**
|
||||
* The Login Component.
|
||||
*
|
||||
* This component contains the Login form and methods to handle field change events.
|
||||
* The user name and password will be set to the state and sent to the api.
|
||||
*
|
||||
* If the user is already logged in, it will redirect to the last point where the user was.
|
||||
* */
|
||||
class Login extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
isLoggedIn: false,
|
||||
referrer: "/",
|
||||
userName: "",
|
||||
password: "",
|
||||
rememberMe: true,
|
||||
errors: {},
|
||||
loginError: ""
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let queryString = this.props.location.search;
|
||||
console.log(queryString);
|
||||
queryString = queryString.replace(/^\?/, '');
|
||||
/* With QS version up we can directly use {ignoreQueryPrefix: true} option */
|
||||
let params = qs.parse(queryString);
|
||||
if (params.referrer) {
|
||||
this.setState({referrer: params.referrer});
|
||||
}
|
||||
}
|
||||
|
||||
handleLogin(event) {
|
||||
event.preventDefault();
|
||||
this.validateForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the username field change event.
|
||||
* */
|
||||
onUserNameChange(event, value) {
|
||||
console.log(event.target.value);
|
||||
this.setState(
|
||||
{
|
||||
userName: event.target.value
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the password field change event.
|
||||
* */
|
||||
onPasswordChange(event, value) {
|
||||
this.setState(
|
||||
{
|
||||
password: event.target.value
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the remember me check.
|
||||
* */
|
||||
handleRememberMe() {
|
||||
this.setState(
|
||||
{
|
||||
rememberMe: !this.state.rememberMe
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the login form.
|
||||
* */
|
||||
validateForm() {
|
||||
let errors = {};
|
||||
let validationFailed = true;
|
||||
if (!this.state.password) {
|
||||
errors["passwordError"] = "Password is Required";
|
||||
validationFailed = true;
|
||||
} else {
|
||||
validationFailed = false;
|
||||
}
|
||||
|
||||
if (!this.state.userName) {
|
||||
errors["userNameError"] = "User Name is Required";
|
||||
validationFailed = true;
|
||||
} else {
|
||||
validationFailed = false;
|
||||
}
|
||||
|
||||
if (validationFailed) {
|
||||
this.setState({errors: errors}, console.log(errors));
|
||||
} else {
|
||||
let loginPromis = AuthHandler.login(this.state.userName, this.state.password);
|
||||
loginPromis.then(response => {
|
||||
console.log(AuthHandler.getUser());
|
||||
this.setState({isLoggedIn: AuthHandler.getUser()});
|
||||
}).catch(
|
||||
err => {
|
||||
console.log(err);
|
||||
this.setState({loginError: err});
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
if (!this.state.isLoggedIn) {
|
||||
return (
|
||||
<div id="login-container">
|
||||
{/*TODO: Style the components.*/}
|
||||
<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 (
|
||||
<Switch>
|
||||
<Redirect to={this.state.referrer}/>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Login;
|
||||
@ -1,31 +0,0 @@
|
||||
/*
|
||||
* 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 Login from './User/Login/Login';
|
||||
import NotFound from './Error/NotFound';
|
||||
import BaseLayout from './AppPublisherBase/BaseLayout';
|
||||
import {PlatformCreate, PlatformListing} from './Platform';
|
||||
import ApplicationCreate from './Application/Create/ApplicationCreate';
|
||||
import ApplicationListing from './Application/ApplicationListing';
|
||||
import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout';
|
||||
|
||||
/**
|
||||
* Contains all UI components related to Application, Login and Platform
|
||||
*/
|
||||
|
||||
export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PlatformCreate, ApplicationEdit};
|
||||
@ -1,11 +0,0 @@
|
||||
body {
|
||||
font-family:"Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
line-height:24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
//todo remove, this is for REDUX
|
||||
const initialState = {
|
||||
articles: []
|
||||
};
|
||||
const rootReducer = (state = initialState, action) => state;
|
||||
export default rootReducer;
|
||||
@ -1,5 +0,0 @@
|
||||
//todo remove, this is for REDUX
|
||||
import { createStore } from "redux";
|
||||
import rootReducer from "../reducers/index";
|
||||
const store = createStore(rootReducer);
|
||||
export default store;
|
||||
@ -1,110 +0,0 @@
|
||||
/*
|
||||
* 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 axios from 'axios';
|
||||
|
||||
/**
|
||||
* This class will read through the configuration file and saves the theme names for the usage in other files.
|
||||
* User can define the themes in the config.json. The themes will be loaded based on the user preference.
|
||||
*/
|
||||
class Theme {
|
||||
constructor() {
|
||||
this.defaultThemeType = "default";
|
||||
this.currentThemeType = this.defaultThemeType;
|
||||
this.currentTheme = "lightBaseTheme";
|
||||
this.themeFolder = "themes";
|
||||
this.styleSheetType = "text/css";
|
||||
this.styleSheetRel = "stylesheet";
|
||||
this.selectedTheme = this.defaultThemeType;
|
||||
|
||||
//TODO Need to get the app context properly when the server is ready
|
||||
this.baseURL = window.location.origin;
|
||||
this.appContext = window.location.pathname.split("/")[1];
|
||||
this.loadThemeConfigs = this.loadThemeConfigs.bind(this);
|
||||
this.loadThemeFiles = this.loadThemeFiles.bind(this);
|
||||
this.insertThemingScripts = this.insertThemingScripts.bind(this);
|
||||
this.removeThemingScripts = this.removeThemingScripts.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* To load the theme related configurations from the configuration file.
|
||||
* @returns the http response.
|
||||
*/
|
||||
loadThemeConfigs () {
|
||||
let httpClient = axios.create({
|
||||
baseURL: this.baseURL + "/" + this.appContext + "/config/config.json",
|
||||
timeout: 2000
|
||||
});
|
||||
httpClient.defaults.headers.post['Content-Type'] = 'application/json';
|
||||
return httpClient.get();
|
||||
}
|
||||
|
||||
/**
|
||||
* To load the particular theme file from the path.
|
||||
* @param path Path to load the theme files
|
||||
* @returns Http response from the particular file.
|
||||
*/
|
||||
loadThemeFiles (path) {
|
||||
let httpClient = axios.create({
|
||||
baseURL: this.baseURL + "/" + this.appContext + path,
|
||||
timeout: 2000
|
||||
});
|
||||
return httpClient.get();
|
||||
}
|
||||
|
||||
/**
|
||||
* To insert the css files to the document.
|
||||
* @param scriptId ID of the script that need to be inserted
|
||||
*/
|
||||
insertThemingScripts(scriptId) {
|
||||
const script = scriptId + ".css";
|
||||
let themePath = "/" + this.themeFolder + "/" + this.selectedTheme + "/" + script;
|
||||
let themeFile = this.loadThemeFiles(themePath);
|
||||
let head = document.getElementsByTagName("head")[0];
|
||||
let link = document.createElement("link");
|
||||
link.type = this.styleSheetType;
|
||||
link.href = this.baseURL + "/" + this.appContext + themePath;
|
||||
link.id = scriptId;
|
||||
link.rel = this.styleSheetRel;
|
||||
this.removeThemingScripts(scriptId);
|
||||
|
||||
themeFile.then(function () {
|
||||
head.appendChild(link);
|
||||
}).catch(error => {
|
||||
// If there is no customized css file, load the default one.
|
||||
themePath = "/" + this.themeFolder + "/" + this.defaultThemeType + "/" + script;
|
||||
link.href = this.baseURL + "/" + this.appContext + themePath;
|
||||
head.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* To remove the css scripts that are inserted before.
|
||||
* @param scriptId Id of the script that need to be removed
|
||||
*/
|
||||
removeThemingScripts(scriptId) {
|
||||
let styleSheet = document.getElementById(scriptId);
|
||||
if (styleSheet !== null) {
|
||||
styleSheet.disabled = true;
|
||||
styleSheet.parentNode.removeChild(styleSheet);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default (new Theme);
|
||||
@ -0,0 +1,3 @@
|
||||
.App {
|
||||
padding: 20px;
|
||||
}
|
||||
@ -1,61 +1 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
~ 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.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="/publisher/" />
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
<title>Entgra IoT App Publisher</title>
|
||||
|
||||
<link rel="manifest" href="/publisher/public/conf/manifest.json">
|
||||
<link rel="shortcut icon" href="/publisher/public/images/favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="/publisher/public/css/font-wso2.css">
|
||||
<link rel="stylesheet" type="text/css" href="/publisher/public/themes/default/default-theme.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="react-root">
|
||||
<div class="ajax-load-container">
|
||||
<img src="/publisher/public/images/logo.png" />
|
||||
<div class="loading-text">Initilizing...</div>
|
||||
<div class="ajax-load">
|
||||
<div class="l l1"></div>
|
||||
<div class="l l2"></div>
|
||||
<div class="l l3"></div>
|
||||
<div class="l l4"></div>
|
||||
<div class="l l5"></div>
|
||||
<div class="l l6"></div>
|
||||
<div class="l l7"></div>
|
||||
<div class="l l8"></div>
|
||||
<div class="l l9"></div>
|
||||
<div class="l l10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<div id="root"></div>
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||
serviceWorker.unregister();
|
||||
@ -1,78 +0,0 @@
|
||||
/*
|
||||
* 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 React from 'react';
|
||||
// import Publisher from './src/app/App';
|
||||
// import ReactDOM from 'react-dom';
|
||||
// import 'bootstrap/dist/css/bootstrap.css';
|
||||
// import registerServiceWorker from './src/registerServiceWorker';
|
||||
// import {addLocaleData, defineMessages, IntlProvider} from 'react-intl';
|
||||
// import Axios from 'axios';
|
||||
// import Constants from './src/app/common/constants';
|
||||
import Configuration from './app/common/configuration';
|
||||
//
|
||||
// function loadPublisher() {
|
||||
// const possibleLocale = navigator.language.split("-")[0];
|
||||
// let loadLocaleFile = Axios.create({
|
||||
// baseURL: Configuration.hostConstants.baseURL + "/" + Configuration.hostConstants.appContext + "/locales/"
|
||||
// + possibleLocale + ".json"
|
||||
// }).get();
|
||||
// console.log(Configuration.hostConstants.baseURL + "/" + Configuration.hostConstants.appContext + "/locales/"
|
||||
// + possibleLocale + ".json");
|
||||
//
|
||||
//
|
||||
//
|
||||
// /**
|
||||
// * This is the base js file of the app. All the content will be rendered in the root element.
|
||||
// * */
|
||||
// loadLocaleFile.then(response => {
|
||||
// const messages = defineMessages(response.data);
|
||||
// addLocaleData(require('react-intl/locale-data/' + possibleLocale));
|
||||
// ReactDOM.render(<IntlProvider locale={possibleLocale}
|
||||
// messages={messages}><Publisher/></IntlProvider>, document.getElementById('root'));
|
||||
// registerServiceWorker();
|
||||
// }).catch(error => {
|
||||
// addLocaleData(require('react-intl/locale-data/en'));
|
||||
// let defaultLocale = Axios.create({
|
||||
// baseURL: Configuration.hostConstants.baseURL + "/" + Configuration.hostConstants.appContext + "/locales"
|
||||
// + Constants.defaultLocale + ".json"
|
||||
// }).get();
|
||||
// defaultLocale.then(response => {
|
||||
// const messages = defineMessages(response.data);
|
||||
// ReactDOM.render(<IntlProvider locale={possibleLocale}
|
||||
// messages={messages}><Publisher/></IntlProvider>, document.getElementById('root'));
|
||||
// registerServiceWorker();
|
||||
// }).catch(error => {
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
Configuration.loadConfiguration();
|
||||
|
||||
import 'typeface-roboto';
|
||||
|
||||
import ReactDOM from 'react-dom';
|
||||
import React from 'react';
|
||||
import Publisher from './app/App.jsx';
|
||||
import './app/index.css';
|
||||
|
||||
ReactDOM.render(
|
||||
<Publisher />,
|
||||
document.getElementById('react-root'),
|
||||
);
|
||||
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in new issue