forked from community/device-mgt-core
jayasanka
6 years ago
parent
d4090e03c9
commit
f010304eba
@ -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);
|
|
||||||
@ -1,61 +1 @@
|
|||||||
<!DOCTYPE html>
|
<div id="root"></div>
|
||||||
<!--
|
|
||||||
~ 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>
|
|
||||||
@ -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'),
|
|
||||||
);
|
|
||||||
|
|
||||||
@ -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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// In production, we register a service worker to serve assets from local cache.
|
|
||||||
|
|
||||||
// This lets the app load faster on subsequent visits in production, and gives
|
|
||||||
// it offline capabilities. However, it also means that developers (and users)
|
|
||||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
|
||||||
// cached resources are updated in the background.
|
|
||||||
|
|
||||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
|
||||||
// This link also includes instructions on opting out of this behavior.
|
|
||||||
|
|
||||||
const isLocalhost = Boolean(
|
|
||||||
window.location.hostname === 'localhost' ||
|
|
||||||
// [::1] is the IPv6 localhost address.
|
|
||||||
window.location.hostname === '[::1]' ||
|
|
||||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
|
||||||
window.location.hostname.match(
|
|
||||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function register() {
|
|
||||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
|
||||||
// The URL constructor is available in all browsers that support SW.
|
|
||||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
|
||||||
if (publicUrl.origin !== window.location.origin) {
|
|
||||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
|
||||||
// from what our page is served on. This might happen if a CDN is used to
|
|
||||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
|
||||||
const swUrl = `${process.env.PUBLIC_URL}/publisher/service-worker.js`;
|
|
||||||
|
|
||||||
if (!isLocalhost) {
|
|
||||||
// Is not local host. Just register service worker
|
|
||||||
registerValidSW(swUrl);
|
|
||||||
} else {
|
|
||||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
|
||||||
checkValidServiceWorker(swUrl);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function registerValidSW(swUrl) {
|
|
||||||
navigator.serviceWorker
|
|
||||||
.register(swUrl)
|
|
||||||
.then(registration => {
|
|
||||||
registration.onupdatefound = () => {
|
|
||||||
const installingWorker = registration.installing;
|
|
||||||
installingWorker.onstatechange = () => {
|
|
||||||
if (installingWorker.state === 'installed') {
|
|
||||||
if (navigator.serviceWorker.controller) {
|
|
||||||
// At this point, the old content will have been purged and
|
|
||||||
// the fresh content will have been added to the cache.
|
|
||||||
// It's the perfect time to display a "New content is
|
|
||||||
// available; please refresh." message in your web app.
|
|
||||||
console.log('New content is available; please refresh.');
|
|
||||||
} else {
|
|
||||||
// At this point, everything has been precached.
|
|
||||||
// It's the perfect time to display a
|
|
||||||
// "Content is cached for offline use." message.
|
|
||||||
console.log('Content is cached for offline use.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Error during service worker registration:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkValidServiceWorker(swUrl) {
|
|
||||||
// Check if the service worker can be found. If it can't reload the page.
|
|
||||||
fetch(swUrl)
|
|
||||||
.then(response => {
|
|
||||||
// Ensure service worker exists, and that we really are getting a JS file.
|
|
||||||
if (
|
|
||||||
response.status === 404 ||
|
|
||||||
response.headers.get('content-type').indexOf('javascript') === -1
|
|
||||||
) {
|
|
||||||
// No service worker found. Probably a different app. Reload the page.
|
|
||||||
navigator.serviceWorker.ready.then(registration => {
|
|
||||||
registration.unregister().then(() => {
|
|
||||||
window.location.reload();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Service worker found. Proceed as normal.
|
|
||||||
registerValidSW(swUrl);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
console.log(
|
|
||||||
'No internet connection found. App is running in offline mode.'
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function unregister() {
|
|
||||||
if ('serviceWorker' in navigator) {
|
|
||||||
navigator.serviceWorker.ready.then(registration => {
|
|
||||||
registration.unregister();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue