add custom error page for manager

.scss-lint.yml

@@ -168,7 +168,7 @@ linters:
 
   Shorthand:
     enabled: true
-    allowed_shorthands: [1, 2, 3]
+    allowed_shorthands: [1, 2, 3, 4]
 
   SingleLinePerProperty:
     enabled: true

path.json

-module.exports = {"main":{"js":"/785572bundle.js"}}
+module.exports = {"main":{"js":"/142926bundle.js"}}
\ No newline at end of file

src/components/404/404.jsx

@@ -2,39 +2,262 @@ import React from 'react';
 
 import * as Utils from '../../utils/utils.jsx';
 
+let canvas = null;
+let ctx = null;
+let gradient = null;
+let isPressed = [];
+let ship = null;
+let clouds = [];
+let keys = {
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40,
+    SPACE: 32
+};
+
 export default class NotFound404 extends React.Component {
-    render() {
-        const clouds = [];
-        const totalClouds = Utils.randomRange(30, 20);
-        const screenHeight = window.innerHeight;
-        const screenWidth = window.innerWidth;
-
-        for (let i = 0; i < totalClouds; i++) {
-            const topStyle = Utils.randomRange(screenHeight, 80);
-            const sizeCloud = Utils.randomRange(1, 5);
-            const leftStyle = Utils.randomRange(screenWidth + 300, screenWidth);
-            //const scale = Utils.randomRange(1, 0.1);
-
-            clouds.push(
-                (
-                    <i
-                        key={`cloud-${i}`}
-                        style={{top: topStyle + 'px', left: leftStyle + 'px'}}
-                        className={`fa fa-cloud fa-${sizeCloud}x`}
-                    ></i>
-                )
-            );
-        }
+    constructor(props) {
+        super(props);
+
+        this.goBack = this.goBack.bind(this);
+    }
+
+    goBack(e, path) {
+        const pathName = path || '/';
+        Utils.handleLink(e, pathName);
+    }
+
+    componentDidMount() {
+        init();
+    }
 
+    render() {
+        const {title} = this.props.location.query;
+        const {message} = this.props.location.query;
+        const {linkMessage} = this.props.location.query;
+        let {link} = this.props.location.query;
         return (
-            <div className='wrapper-error'>
-                <div className='zboxPlain'>
-                    <i className='fa fa-paper-plane'></i>
-                    <i className='fa fa-paper-plane-o underPlain'></i>
+            <div className='container-error'>
+                <div className='dialog-notify'>
+                    <h2>404</h2>
+                    <span className='page-not-found'>{title || 'Página no encontrada'}</span>
+                    <span className='error-message'>{message}</span>
+                    <a
+                        className='back-link-error pointer'
+                        onClick={(e) => {
+                            this.goBack(e, link);
+                        }}
+                    >
+                        {linkMessage || 'Regresar a Manager'}
+                    </a>
                 </div>
-
-                {clouds}
+                <canvas id='canvas'></canvas>
             </div>
         );
     }
 }
+
+NotFound404.propTypes = {
+    location: React.PropTypes.object
+};
+
+class ZBoxShip {
+    constructor(x, y, size) {
+        this.x = x || (window.innerWidth / 2);
+        this.y = y || (window.innerHeight / 2);
+        this.w = 10;
+        this.h = this.w;
+        this.color = '#E2E2E2';
+        this.icon = '\uf1d8';
+        this.speed = 5;
+        this.size = size || 50;
+        this.frames = 0;
+        this._jump = 4.6;
+        this.velocity = 0;
+    }
+
+    render(ctx) {
+        this.gravity = 0.25;
+        if (!ctx) {
+            return null;
+        }
+
+        ctx.save();
+        ctx.font = this.size + 'px Fontawesome';
+        var sizeOfShip = ctx.measureText(this.icon);
+        this.w = this.h = sizeOfShip.width;
+        ctx.translate(this.x + this.w / 2, this.y + this.h / 2);
+        ctx.rotate(45 * Math.PI / 180);
+        ctx.translate(-this.x - (this.w / 2), -this.y + (this.h / 2));
+        ctx.fillStyle = '#A8A8A8';
+        ctx.fillText('\uf1d9', this.x, this.y);
+        ctx.fillStyle = this.color;
+        ctx.fillText(this.icon, this.x, this.y);
+        ctx.restore();
+        this.frames++;
+    }
+
+    setPosition(x, y) {
+        this.x += x || 0;
+        this.y += y || 0;
+    }
+
+    moveWave() {
+        const cos = Math.cos(this.y / 100) * 10;
+        this.y += cos;
+    }
+
+    jump() {
+        this.velocity = -this._jump;
+    }
+
+    applyGravity() {
+        this.velocity += this.gravity;
+        this.y += this.velocity;
+    }
+}
+
+class Cloud {
+    constructor(x, y, opacity, size) {
+        this.x = x || 0;
+        this.y = y || 0;
+        this.opacity = opacity || 1;
+        this.color = 'rgba(255, 255, 255, ' + this.opacity + ')';
+        this.w = 40;
+        this.icon = '\uf0c2';
+        this.size = size || 10;
+        this.speed = {
+            x: -0.9,
+            y: 0
+        };
+    }
+
+    render(ctx) {
+        ctx.save();
+        ctx.fillStyle = this.color;
+        ctx.font = this.size + 'px Fontawesome';
+        var sizeOfText = ctx.measureText(this.icon);
+        this.w = sizeOfText.width;
+        ctx.fillText(this.icon, this.x, this.y);
+        ctx.restore();
+    }
+
+    move() {
+        this.x += this.speed.x;
+        this.y += this.speed.y;
+    }
+
+    recycleClouds() {
+        if ((this.x + this.w) < 0) {
+            var posX = randomize(canvas.width + 250, canvas.width);
+            this.x = posX;
+        }
+    }
+
+    setSpeed(speed) {
+        this.speed.x = speed.x || this.speed.x;
+        this.speed.y = speed.y || this.speed.y;
+    }
+}
+
+function init() {
+    canvas = document.getElementById('canvas');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    ctx = canvas.getContext('2d');
+    gradient = ctx.createLinearGradient(0, 0, 0, canvas.width);
+    gradient.addColorStop(0, '#90dffe');
+    gradient.addColorStop(0.5, '#fff');
+    gradient.addColorStop(1, '#fff');
+    ship = new ZBoxShip(null, null, 55);
+    initClouds();
+
+    gameloop();
+    listeners();
+}
+
+function listeners() {
+    document.addEventListener('keydown', (e) => {
+        var key = e.keyCode || e.which;
+        isPressed[key] = true;
+    }, false);
+
+    document.addEventListener('keyup', (e) => {
+        var key = e.keyCode || e.which;
+        isPressed[key] = false;
+    }, false);
+}
+
+function gameloop() {
+    requestAnimationFrame(gameloop);
+    renderer();
+    actions();
+}
+
+function renderer() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    clouds.forEach((cloud) => {
+        cloud.render(ctx);
+    });
+    ship.render(ctx);
+}
+
+function actions() {
+    if (isPressed[keys.LEFT]) {
+        ship.setPosition(-ship.speed);
+    }
+
+    if (isPressed[keys.UP]) {
+        ship.setPosition(null, -ship.speed);
+    }
+
+    if (isPressed[keys.RIGHT]) {
+        ship.setPosition(ship.speed);
+    }
+
+    if (isPressed[keys.DOWN]) {
+        ship.setPosition(null, ship.speed);
+    }
+
+    if (isPressed[keys.SPACE]) {
+        ship.jump();
+    }
+
+    clouds.forEach((cloud) => {
+        cloud.move();
+        cloud.recycleClouds();
+    });
+}
+
+function initClouds() {
+    for (var i = 0; i < 40; i++) {
+        var posX = randomize(canvas.width, canvas.width / 2);
+        var posY = randomize(canvas.height, 0);
+        var opacity = randomize(1, 0.4, true);
+        var speedX = randomize(1.1, 0.5, true);
+        var size = randomize(100, 45);
+        var zboxCloud = new Cloud(posX, posY, opacity, size);
+        zboxCloud.setSpeed({x: -speedX});
+        clouds.push(zboxCloud);
+    }
+}
+
+function randomize(max, min, isFloat) {
+    var random = Math.random() * (max - min) + min;
+    if (!isFloat) {
+        random = Math.floor(random);
+    }
+    return random;
+}
+
+window.requestAnimationFrame = (function requestAnimationFrame() {
+    return window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        function fallback(callback) {
+            window.setTimeout(callback, 1000 / 60);
+        };
+}());

src/components/domain/domain_admin_dns.jsx

@@ -88,10 +88,10 @@ export default class DNSZoneForm extends React.Component {
         const records = this.defaultRows;
         const zoneDNS = this.zoneDNS;
         const domain = this.props.domain;
+        const template = window.manager_config.dns.template;
         const request = {
-            name: this.props.domain.name,
-            kind: 'Master',
-            nameservers: []
+            name: domain.name,
+            template
         };
 
         if (this.newRows.length > 0) {

src/components/domain/multiform/dns_form.jsx

@@ -55,10 +55,11 @@ export default class DNSZoneForm extends React.Component {
     }
 
     addDNSRequest() {
+        const domain = this.props.state.domain;
+        const template = window.manager_config.dns.template;
         const request = {
-            name: this.props.state.domain.name,
-            kind: 'Master',
-            nameservers: []
+            name: domain.name,
+            template
         };
 
         const records = this.defaultRows;

src/config/config.json

@@ -20,7 +20,37 @@
     "dns": {
         "url": "http://zimbra.zboxapp.dev:9081/powerdns_proxy",
         "token": "otto",
-        "inmutable": ["mx", "soa", "ns", "spf"]
+        "inmutable": ["mx", "soa", "ns", "spf"],
+        "template": {
+            "zone_data": {
+                "kind": "Master",
+                "nameservers": ["ns.zboxapp.com", "ns2.zboxapp.com"],
+                "soa_edit": "DEFAULT",
+                "soa_edit_api": "DEFAULT",
+                "masters": []
+            },
+            "zone_records":
+            [
+                {
+                    "name": "{{=zone.name}}", "type": "SOA", "content": "ns.zboxapp.com. dns.zboxapp.com. 0 10800 3600 604800 3600", "disabled": false, "ttl": 900, "priority": 0
+                },
+                {
+                    "name": "{{=zone.name}}", "type": "NS", "content": "ns.zboxapp.com.", "disabled": false, "ttl": 900, "priority": 0
+                },
+                {
+                    "name": "{{=zone.name}}", "type": "NS", "content": "ns2.zboxapp.com.", "disabled": false, "ttl": 900, "priority": 0
+                },
+                {
+                    "name": "{{=zone.name}}", "type": "MX", "content": "5 mailcleaner.zboxapp.com.", "disabled": false, "ttl": 900, "priority": 5
+                },
+                {
+                    "name": "{{=zone.name}}", "type": "TXT", "content": "\"v=spf1 include:_spf.zboxapp.com -all\"", "disabled": false, "ttl": 900, "priority": 0
+                },
+                {
+                    "name": "mail.{{=zone.name}}", "type": "CNAME", "content": "mail.zboxapp.com.", "disabled": false, "ttl": 900, "priority": 0
+                }
+            ]
+        }
     },
     "maxAttachmentLimit": {
         "max": 52428800,

src/index.jsx

@@ -24,6 +24,8 @@ import DistributionLists from './components/distribution/distribution_lists.jsx'
 import EditDistributionList from './components/distribution/edit_distribution_lists.jsx';
 import SearchView from './components/search/search.jsx';
 import SalesForm from './components/sales/sales.jsx';
+import TemplateError from './components/404/404.jsx';
+
 import * as Client from './utils/client.jsx';
 import * as Utils from './utils/utils.jsx';
 import Constants from './utils/constants.jsx';
@@ -120,7 +122,7 @@ function renderRootComponent() {
                 >
                     <Route
                         path='error'
-                        component={ErrorPage}
+                        component={TemplateError || ErrorPage}
                     />
                     <Route
                         component={LoggedIn}

src/sass/components/_tabs.scss

@@ -126,13 +126,15 @@
 
 .tabs-right > .nav-tabs > li > a:hover,
 .tabs-right > .nav-tabs > li > a:focus {
-  border-color: $border-color-tabs-state $border-color-tabs-state $border-color-tabs-state $table-children-border-bottom-color;
+  border-color: $border-color-tabs-state;
+  border-left-color: $table-children-border-bottom-color;
 }
 
 .tabs-right > .nav-tabs .active > a,
 .tabs-right > .nav-tabs .active > a:hover,
 .tabs-right > .nav-tabs .active > a:focus {
-  border-color: $border-color $border-color $border-color transparent;
+  border-color: $border-color;
+  border-left-color: transparent;
   z-index: 1;
 }
 

src/sass/components/_various.scss

@@ -1800,4 +1800,61 @@ label {
   }
 }
 
+// Error Page
+
+.container-error {
+  overflow: hidden;
+
+  .dialog-notify {
+    background: rgba(198, 198, 198, .3);
+    box-shadow: 0 5px 20px -1px black;
+    color: #fff;
+    position: absolute;
+    top:0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    max-width: 500px;
+    height: 300px;
+    text-align: center;
+
+    h2 {
+      display: inline-block;
+      font-size: 16rem;
+      margin: 0;
+      padding: 0;
+      line-height: 15rem;
+      text-shadow: 0px 2px 4px black, 4px 4px 4px black;
+    }
+
+    .page-not-found {
+      display: block;
+      margin: 35px auto 5px;
+      font-size: 2rem;
+      text-shadow: 0 2px 2px black, 2px 2px 2px black;
+    }
+
+    .back-link-error {
+      position: absolute;
+      bottom: 0%;
+      width: 100%;
+      color: #FFF;
+      background: #FFF;
+      display: block;
+      text-decoration: none;
+      text-transform: uppercase;
+      padding: 5px 0;
+      text-shadow: 0px 0px 4px black, 0px 0px 6px black;
+      font-size: 20px;
+    }
+
+    .error-message {
+      color: #000;
+    }
+  }
+}
+
+// Error Page
+
 // scss-lint:enable all

src/utils/client.jsx

@@ -90,6 +90,25 @@ export function getClientConfig(success, error) {
     });
 }
 
+export function clearCacheZimbra(flushData, success, error) {
+    // flushData parameter example would be like this {type: 'domain', allServers: 1, entry: 'zboxapp.dev'}
+    initZimbra().then(
+        (zimbra) => {
+            zimbra.flushCache(flushData, (err, cleared) => {
+                if (err) {
+                    return error(err);
+                }
+
+                return success(cleared);
+            });
+        },
+        (err) => {
+            const e = handleError('clearCacheZimbra', err);
+            return error(e);
+        }
+    );
+}
+
 export function getMe(success, error) {
     initZimbra().then(
         (zimbra) => {

webpack.config.js

@@ -103,6 +103,9 @@ var config = {
             'node_modules',
             path.resolve(__dirname)
         ]
+    },
+    node: {
+        fs: 'empty'
     }
 };