coriolis-web/src/components/LoginPage/LoginPage.js

/* eslint-disable max-len */
/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './LoginPage.scss';
import Reflux from 'reflux';
import UserActions from '../../actions/UserActions';
import UserStore from '../../stores/UserStore';
import NotificationActions from '../../actions/NotificationActions';
import LoadingIcon from '../LoadingIcon';
import withViewport from '../withViewport.js';

const title = 'Log In';
const coriolisTextSvg = `
<svg width="232px" height="41px" viewBox="0 0 232 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Coriolis-Splash" transform="translate(-16.000000, -247.000000)" fill="#FFFFFF">
            <path d="M127.70157,247.735496 L128.526271,247.735496 C129.099368,247.735496 129.562389,248.196268 129.562389,248.764843 L129.562389,286.236896 C129.562389,286.803732 129.099368,287.264504 128.526271,287.264504 L127.70157,287.264504 C127.13022,287.264504 126.667199,286.803732 126.667199,286.236896 L126.667199,248.764843 C126.667199,248.196268 127.13022,247.735496 127.70157,247.735496 L127.70157,247.735496 Z M219.166512,278.968872 C219.685445,278.781086 220.255048,279.034945 220.471706,279.542663 C221.740208,282.512468 224.261487,285.344911 229.770561,285.344911 C234.538801,285.344911 238.173077,282.408142 238.173077,277.551781 C238.173077,266.088126 218.86948,269.306573 218.86948,256.544063 C218.86948,251.348643 222.844469,247 229.59933,247 C235.394952,247 238.510296,250.39754 239.853929,252.950042 C240.140478,253.499491 239.874896,254.172392 239.291315,254.387998 L238.746174,254.589695 C238.265681,254.767048 237.736265,254.563613 237.481166,254.121968 C236.308763,252.098049 233.902802,249.599449 229.59933,249.599449 C224.432718,249.599449 221.76467,252.760517 221.76467,256.601442 C221.76467,266.821883 241.125926,264.563232 241.125926,277.381383 C241.125926,283.256658 236.754311,287.998261 229.712901,287.998261 C222.987744,287.998261 219.564885,284.286005 217.995856,280.53028 C217.770461,279.989525 218.051768,279.372265 218.603898,279.172307 L219.166512,278.968872 Z M208.662057,247.735496 L209.486758,247.735496 C210.058108,247.735496 210.522876,248.196268 210.522876,248.764843 L210.522876,286.236896 C210.522876,286.803732 210.058108,287.264504 209.486758,287.264504 L208.662057,287.264504 C208.090707,287.264504 207.627686,286.803732 207.627686,286.236896 L207.627686,248.764843 C207.627686,248.196268 208.090707,247.735496 208.662057,247.735496 L208.662057,247.735496 Z M183.337443,247.735496 L184.163891,247.735496 C184.735241,247.735496 185.198262,248.196268 185.198262,248.764843 L185.198262,284.611154 L200.002695,284.611154 C200.575793,284.611154 201.038813,285.071925 201.038813,285.6405 L201.038813,286.236896 C201.038813,286.803732 200.575793,287.264504 200.002695,287.264504 L183.337443,287.264504 C182.766093,287.264504 182.303072,286.803732 182.303072,286.236896 L182.303072,248.764843 C182.303072,248.196268 182.766093,247.735496 183.337443,247.735496 L183.337443,247.735496 Z M155.542221,247 C166.784015,247 175.640815,255.923325 175.640815,267.5 C175.640815,279.134054 166.728103,288 155.486309,288 C144.302174,288 135.445373,279.302714 135.445373,267.5 C135.445373,255.810305 144.358086,247 155.542221,247 L155.542221,247 Z M155.542221,285.287532 C165.138107,285.287532 172.632054,277.77782 172.632054,267.5 C172.632054,257.335199 165.138107,249.712468 155.542221,249.712468 C145.890422,249.712468 138.454134,257.335199 138.454134,267.5 C138.454134,277.77782 145.890422,285.287532 155.542221,285.287532 L155.542221,285.287532 Z M96.686169,248.764843 C96.686169,248.196268 97.1491898,247.735496 97.7205399,247.735496 L105.827771,247.735496 C113.54886,247.735496 117.693333,252.704877 117.693333,258.465394 C117.693333,263.321756 114.740483,267.160941 110.312957,268.630195 L119.594339,285.746565 C119.966502,286.433376 119.466789,287.264504 118.684022,287.264504 L117.805157,287.264504 C117.422509,287.264504 117.069565,287.054114 116.891346,286.716794 L107.58725,269.195293 L99.5813591,269.195293 L99.5813591,286.235157 C99.5813591,286.803732 99.1183383,287.264504 98.5469882,287.264504 L97.7205399,287.264504 C97.1491898,287.264504 96.686169,286.803732 96.686169,286.235157 L96.686169,248.764843 Z M105.941342,266.595844 C111.277438,266.595844 114.626912,263.490416 114.626912,258.465394 C114.626912,253.777693 111.448668,250.390585 105.770112,250.390585 L99.5813591,250.390585 L99.5813591,266.595844 L105.941342,266.595844 Z M70.7010956,247 C81.9428897,247 90.7996902,255.923325 90.7996902,267.5 C90.7996902,279.134054 81.8869778,288 70.6451837,288 C59.4593015,288 50.6025009,279.302714 50.6025009,267.5 C50.6025009,255.810305 59.5169606,247 70.7010956,247 L70.7010956,247 Z M70.7010956,285.287532 C80.296982,285.287532 87.7909291,277.77782 87.7909291,267.5 C87.7909291,257.335199 80.296982,249.712468 70.7010956,249.712468 C61.0510445,249.712468 53.6130094,257.335199 53.6130094,267.5 C53.6130094,277.77782 61.0510445,285.287532 70.7010956,285.287532 L70.7010956,285.287532 Z M48.8552529,282.442918 C49.0090107,282.842833 48.9006813,283.298388 48.5739459,283.578329 C46.8651373,285.045844 42.3502483,288 35.9291116,288 C24.6296583,288 16,279.189695 16,267.5 C16,255.812044 24.8568005,247.001739 35.7578813,247.001739 C41.4574045,247.001739 45.5774155,249.263868 47.7003219,250.867006 C48.0654967,251.143469 48.1947931,251.630322 48.0288045,252.056319 L47.7911788,252.656192 C47.5448168,253.283885 46.7725332,253.508185 46.22215,253.113486 C44.2792102,251.722477 40.5995057,249.710729 35.7578813,249.710729 C26.5044554,249.710729 19.0087612,257.279559 19.0087612,267.5 C19.0087612,277.72218 26.1060829,285.287532 35.9291116,285.287532 C41.3910091,285.287532 45.1685594,282.93151 47.0555873,281.455301 C47.602476,281.029304 48.4062101,281.262299 48.6525721,281.909118 L48.8552529,282.442918 Z M242.839671,253.373032 C242.314565,253.066164 241.89767,252.651739 241.588971,252.129745 C241.280273,251.607752 241.125926,251.036731 241.125926,250.416667 C241.125926,249.796602 241.280273,249.225581 241.588971,248.703588 C241.89767,248.181595 242.314565,247.76717 242.839671,247.460301 C243.364776,247.153432 243.939201,247 244.562963,247 C245.186725,247 245.76115,247.153432 246.286255,247.460301 C246.811361,247.76717 247.228256,248.181595 247.536955,248.703588 C247.845653,249.225581 248,249.796602 248,250.416667 C248,251.036731 247.845653,251.607752 247.536955,252.129745 C247.228256,252.651739 246.811361,253.066164 246.286255,253.373032 C245.76115,253.679901 245.186725,253.833333 244.562963,253.833333 C243.939201,253.833333 243.364776,253.679901 242.839671,253.373032 Z M245.96642,252.860532 C246.392869,252.604281 246.731796,252.259454 246.98321,251.826042 C247.234624,251.392629 247.360329,250.922842 247.360329,250.416667 C247.360329,249.910491 247.234624,249.440704 246.98321,249.007292 C246.731796,248.573879 246.392869,248.229052 245.96642,247.972801 C245.53997,247.71655 245.072156,247.588426 244.562963,247.588426 C244.05377,247.588426 243.584364,247.71655 243.154733,247.972801 C242.725101,248.229052 242.384583,248.573879 242.133169,249.007292 C241.881755,249.440704 241.756049,249.910491 241.756049,250.416667 C241.756049,250.922842 241.881755,251.392629 242.133169,251.826042 C242.384583,252.259454 242.725101,252.604281 243.154733,252.860532 C243.584364,253.116784 244.05377,253.244907 244.562963,253.244907 C245.072156,253.244907 245.53997,253.116784 245.96642,252.860532 Z M243.302716,252.087037 C243.264527,252.049074 243.245432,251.998457 243.245432,251.935185 L243.245432,248.879167 C243.245432,248.815895 243.264527,248.765278 243.302716,248.727315 C243.340906,248.689352 243.391824,248.67037 243.455473,248.67037 L244.706173,248.67037 C245.107162,248.67037 245.430177,248.75895 245.675226,248.936111 C245.920276,249.113272 246.042798,249.394828 246.042798,249.780787 C246.042798,250.027548 245.982333,250.23476 245.861399,250.402431 C245.740466,250.570101 245.578163,250.695061 245.374486,250.777315 L245.995062,251.802315 C246.020521,251.840278 246.033251,251.884568 246.033251,251.935185 C246.033251,251.99213 246.015748,252.041165 245.980741,252.082292 C245.945734,252.123418 245.893224,252.143981 245.82321,252.143981 L245.574979,252.143981 C245.460411,252.143981 245.368121,252.083874 245.298107,251.963657 L244.677531,250.900694 L243.93284,250.900694 L243.93284,251.935185 C243.93284,251.998457 243.913745,252.049074 243.875556,252.087037 C243.837366,252.125 243.786448,252.143981 243.722798,252.143981 L243.455473,252.143981 C243.391824,252.143981 243.340906,252.125 243.302716,252.087037 Z M244.687078,250.283796 C245.119892,250.283796 245.336296,250.116128 245.336296,249.780787 C245.336296,249.635262 245.286969,249.515047 245.188313,249.420139 C245.089657,249.325231 244.92258,249.277778 244.687078,249.277778 L243.93284,249.277778 L243.93284,250.283796 L244.687078,250.283796 Z" id="Fill-25"></path>
        </g>
    </g>
</svg>`
const footerLogoSvg = `
<svg width="128px" height="32px" viewBox="0 0 128 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.740658967">
        <g id="02-Login-Username" transform="translate(-656.000000, -912.000000)" fill="#FFFFFF">
            <g id="cbsl-logo-NEG" transform="translate(656.000000, 912.000000)">
                <g id="CBSL_Logo_2016_1color_Horizontal_Negative">
                    <g id="Group">
                        <g transform="translate(48.654971, 4.363636)" id="Shape">
                            <g transform="translate(0.000000, 1.818182)">
                                <path d="M7.56930246,12.2365055 L8.23596912,14.2144873 C7.69539743,14.6345855 6.66835088,15.1949564 5.29883322,15.1949564 C2.36206409,15.1949564 0.271786667,13.1992182 0.271786667,10.4158364 C0.271786667,7.63245455 2.41615719,5.58416 5.28092444,5.58416 C6.66835088,5.58416 7.64130433,6.10937455 8.25387789,6.56462909 L7.5510269,8.59516727 C7.13691696,8.22762545 6.41615719,7.71981091 5.35292632,7.71981091 C3.74949053,7.71981091 2.75826152,8.92790909 2.75826152,10.3984327 C2.75826152,11.9563164 3.8755855,13.0592982 5.44320374,13.0592982 C6.39788538,13.0593055 7.15482947,12.5688909 7.56930246,12.2365055 Z"></path>
                                <polygon points="9.06418526 2.31037091 11.5506601 2.31037091 11.5506601 14.9673309 9.06418526 14.9673309"></polygon>
                                <path d="M17.496567,5.58416364 C20.379243,5.58416364 22.5777067,7.64985818 22.5777067,10.41584 C22.5777067,13.1818218 20.4516117,15.19496 17.496567,15.19496 C14.5594311,15.19496 12.4333361,13.1818218 12.4333361,10.41584 C12.4333361,7.63245818 14.6318035,5.58416364 17.496567,5.58416364 Z M17.496567,13.0593055 C18.9918166,13.0593055 20.0912318,11.9737236 20.0912318,10.41584 C20.0912318,8.8576 18.9918166,7.71981818 17.496567,7.71981818 C16.0009544,7.71981818 14.919811,8.8402 14.919811,10.41584 C14.9198147,11.97372 16.0188632,13.0593055 17.496567,13.0593055 Z"></path>
                                <path d="M23.3697385,11.0983673 L23.3697385,5.81178909 L25.8562133,5.81178909 L25.8562133,11.3785491 C25.8562133,12.3938182 26.5769731,13.0241455 27.4238316,13.0241455 C28.4508781,13.0241455 29.0992692,12.2890618 29.0992692,11.3085927 L29.0992692,5.81178909 L31.5857441,5.81178909 L31.5857441,14.9673273 L29.1533623,14.9673273 L29.1533623,13.8995018 C28.7571649,14.5298291 27.8562133,15.1949564 26.6310662,15.1949564 C23.9461277,15.1949564 23.3697385,13.0415491 23.3697385,11.0983673 Z"></path>
                                <path d="M42.1263195,14.9673309 L39.7838484,14.9673309 L39.7838484,14.0220182 C39.5316547,14.3196036 38.5948856,15.19496 36.9910868,15.19496 C34.2886026,15.19496 32.3785132,13.2166218 32.3785132,10.39844 C32.3785132,7.56214909 34.1445951,5.58416364 36.8470793,5.58416364 C38.4687906,5.58416364 39.4055598,6.45952 39.6398409,6.77450545 L39.6398409,0.0250945455 L42.1263158,0.0250945455 L42.1263158,14.9673309 L42.1263195,14.9673309 Z M37.2973736,7.71981455 C35.8562171,7.71981455 34.8832636,8.82279636 34.8832636,10.4158364 C34.8832636,12.0436764 35.8920346,13.0593018 37.2973736,13.0593018 C38.8108987,13.0593018 39.7118465,11.8686073 39.7118465,10.4158364 C39.7118465,8.70028364 38.6668912,7.71981455 37.2973736,7.71981455 Z"></path>
                                <path d="M43.5130161,0.0250945455 L45.999491,0.0250945455 L45.999491,6.77450182 C46.2337759,6.45951636 47.1705375,5.58416 48.7922489,5.58416 C51.4950999,5.58416 53.260815,7.56214182 53.260815,10.3984364 C53.260815,13.2166182 51.3507256,15.1949564 48.6482414,15.1949564 C47.0444463,15.1949564 46.1076772,14.3196 45.8554835,14.0220145 L45.8554835,14.9673273 L43.5130124,14.9673273 L43.5130124,0.0250945455 L43.5130161,0.0250945455 Z M48.3419584,13.0593055 C49.7472936,13.0593055 50.7560683,12.04368 50.7560683,10.41584 C50.7560683,8.8228 49.7831149,7.71981818 48.3419584,7.71981818 C46.9724482,7.71981818 45.9274891,8.70028727 45.9274891,10.41584 C45.9274891,11.8686073 46.8284407,13.0593055 48.3419584,13.0593055 Z"></path>
                                <path d="M57.2421764,9.10298182 C58.1972211,9.10298182 58.9358896,9.38281091 59.2783607,9.61044 L59.2783607,9.01526909 C59.2783607,8.20987273 58.6657871,7.66725818 57.5667387,7.66725818 C56.6296028,7.66725818 55.7648393,7.96484364 55.0619883,8.31498545 L54.1252192,6.66938909 C54.9720777,6.10937455 56.3953216,5.58416 57.8368412,5.58416 C60.8638877,5.58416 61.7648393,7.12464364 61.7648393,9.17293818 L61.7648393,14.9673273 L59.5667387,14.9673273 L59.4044594,14.3721564 C58.9179846,14.8799673 58.1972211,15.1949564 57.1160814,15.1949564 C55.2063588,15.1949564 53.5846475,14.0571709 53.5846475,12.1313927 C53.5846475,10.3281236 55.0440758,9.10298182 57.2421764,9.10298182 Z M57.7107425,13.3217345 C58.6478784,13.3217345 59.3324538,12.8316764 59.3324538,12.0614364 C59.3324538,11.25604 58.6478784,10.7833818 57.6928337,10.7833818 C56.737789,10.7833818 56.0711223,11.3085964 56.0711223,12.0614364 C56.0711223,12.81392 56.7739733,13.3217345 57.7107425,13.3217345 Z"></path>
                                <path d="M62.4132304,13.4968036 L63.8726587,12.2365055 C64.3408618,12.76172 64.9717071,13.2343745 66.034575,13.2343745 C66.737426,13.2343745 67.1877165,12.9367891 67.1877165,12.4115745 C67.1877165,11.0110073 62.737426,11.5536182 62.737426,8.29758182 C62.737426,6.59942909 64.2330386,5.58416 66.1606699,5.58416 C67.9446606,5.58416 68.9355228,6.49431636 69.3861801,7.212 L67.74656,8.40269455 C67.458182,8.05255273 66.9355228,7.52733818 66.0528468,7.52733818 C65.4760908,7.52733818 65.0798933,7.80752364 65.0798933,8.26242182 C65.0798933,9.71554545 69.5480964,9.01526182 69.5480964,12.2890545 C69.5480964,14.0745673 67.9625694,15.1949491 65.9267518,15.1949491 C64.0707593,15.1949564 62.917614,14.2844473 62.4132304,13.4968036 Z"></path>
                                <path d="M74.4307724,5.58416364 C77.3496327,5.58416364 79.0071616,7.47478909 79.0071616,10.4683964 C79.0071616,10.6434691 79.0071616,10.8185382 78.9892529,10.9936109 L72.3587705,10.9936109 C72.4124968,12.2187527 73.4216346,13.0941091 74.8090648,13.0941091 C76.088305,13.0941091 76.8269736,12.3590255 77.0974428,11.9737273 L78.7370629,13.1818255 C78.376683,13.8295527 77.1153516,15.1949636 74.7728805,15.1949636 C71.7458339,15.1949636 69.8182026,13.1640691 69.8182026,10.4158436 C69.8181988,7.64985818 71.7458302,5.58416364 74.4307724,5.58416364 Z M76.4848655,9.41796727 C76.4307724,8.29758545 75.6018227,7.56214182 74.4665899,7.56214182 C73.2955359,7.56214182 72.5389586,8.36753818 72.4307724,9.41796727 L76.4848655,9.41796727 Z"></path>
                            </g>
                            <g transform="translate(47.532164, 0.000000)">
                                <path d="M0.281648655,5.24786909 L0.926020117,4.69140727 C1.13252678,4.92329818 1.41103532,5.13174909 1.88033123,5.13174909 C2.19063766,5.13174909 2.38946807,5.00035636 2.38946807,4.76846909 C2.38946807,4.15021455 0.424555789,4.38991636 0.424555789,2.95206182 C0.424555789,2.20241818 1.08500959,1.75426182 1.93625076,1.75426182 C2.72389614,1.75426182 3.16139789,2.15589455 3.3602283,2.47301091 L2.63617871,2.99857818 C2.50898713,2.84410545 2.27835883,2.61221455 1.88837053,2.61221455 C1.63398363,2.61221455 1.45891181,2.73579273 1.45891181,2.93678909 C1.45891181,3.57812364 3.43186339,3.26917455 3.43186339,4.71448727 C3.43186339,5.50284 2.7315724,5.99751273 1.83281404,5.99751273 C1.0133745,5.99751273 0.504237661,5.59552727 0.281648655,5.24786909 Z"></path>
                                <path d="M5.86571228,1.75426182 C7.13873965,1.75426182 8.1091331,2.66619273 8.1091331,3.88742909 C8.1091331,5.10866545 7.17053754,5.99751273 5.86571228,5.99751273 C4.56893006,5.99751273 3.63033076,5.10866182 3.63033076,3.88742909 C3.6303345,2.65838182 4.60109474,1.75426182 5.86571228,1.75426182 Z M5.86571228,5.05468727 C6.52616608,5.05468727 7.01154433,4.57528364 7.01154433,3.88742909 C7.01154433,3.19957455 6.52616234,2.69708727 5.86571228,2.69708727 C5.20562526,2.69708727 4.72828632,3.19176 4.72828632,3.88742909 C4.72828632,4.57528364 5.21330152,5.05468727 5.86571228,5.05468727 Z"></path>
                                <polygon points="8.57806971 0.308592727 9.67602152 0.308592727 9.67602152 5.89701818 8.57806971 5.89701818"></polygon>
                                <path d="M10.3518241,4.18892 L10.3518241,1.85475636 L11.4497759,1.85475636 L11.4497759,4.31249818 C11.4497759,4.76065091 11.7681254,5.03906182 12.1420276,5.03906182 C12.5952449,5.03906182 12.8817927,4.71448727 12.8817927,4.28160364 L12.8817927,1.85475636 L13.9793815,1.85475636 L13.9793815,5.89701818 L12.9055513,5.89701818 L12.9055513,5.42542545 C12.7304795,5.70383273 12.3328187,5.99751273 11.7918802,5.99751273 C10.6065778,5.99751273 10.3518241,5.04687636 10.3518241,4.18892 Z"></path>
                                <path d="M14.7509483,1.00426182 L15.8328178,1.00426182 L15.8328178,1.85476 L16.6124239,1.85476 L16.6124239,2.72017091 L15.8328178,2.72017091 L15.8328178,4.28160727 C15.8328178,4.88458909 16.0239719,5.00817091 16.4453913,5.00817091 C16.5170302,5.00817091 16.5568674,5.00817091 16.6445885,5.00036 L16.6445885,5.91264727 C16.6445885,5.91264727 16.4771892,5.951 16.1749258,5.951 C15.1807738,5.951 14.743272,5.41016364 14.743272,4.31250545 L14.743272,2.72017455 L14.3054073,2.72017455 L14.3054073,1.85476364 L14.7509483,1.85476364 L14.7509483,1.00426182 L14.7509483,1.00426182 Z"></path>
                                <path d="M17.6782147,0.27024 C18.0444444,0.27024 18.3225862,0.533025455 18.3225862,0.88068 C18.3225862,1.22869091 18.0444444,1.49147636 17.6782147,1.49147636 C17.3203949,1.49147636 17.0418826,1.22869091 17.0418826,0.88068 C17.0418826,0.533025455 17.3203911,0.27024 17.6782147,0.27024 Z M17.13728,1.85476 L18.2352318,1.85476 L18.2352318,5.89701818 L17.13728,5.89701818 L17.13728,1.85476 Z"></path>
                                <path d="M20.9475855,1.75426182 C22.2206129,1.75426182 23.1910063,2.66619273 23.1910063,3.88742909 C23.1910063,5.10866545 22.2524108,5.99751273 20.9475855,5.99751273 C19.6508033,5.99751273 18.712204,5.10866182 18.712204,3.88742909 C18.712204,2.65838182 19.6829642,1.75426182 20.9475855,1.75426182 Z M20.9475855,5.05468727 C21.6080393,5.05468727 22.0934175,4.57528364 22.0934175,3.88742909 C22.0934175,3.19957455 21.6080356,2.69708727 20.9475855,2.69708727 C20.2874985,2.69708727 19.8101595,3.19176 19.8101595,3.88742909 C19.8101595,4.57528364 20.2951747,5.05468727 20.9475855,5.05468727 Z"></path>
                                <path d="M27.2874966,3.56285455 L27.2874966,5.89701818 L26.1899078,5.89701818 L26.1899078,3.43927636 C26.1899078,2.99076727 25.8715584,2.71271273 25.4976561,2.71271273 C25.0444388,2.71271273 24.757891,3.03728727 24.757891,3.47017091 L24.757891,5.89701818 L23.6599392,5.89701818 L23.6599392,1.85476 L24.7341361,1.85476 L24.7341361,2.32599636 C24.909208,2.04794182 25.3068688,1.75426182 25.8478073,1.75426182 C27.0331135,1.75426182 27.2874966,2.70490182 27.2874966,3.56285455 Z"></path>
                                <path d="M27.6774849,5.24786909 L28.3218564,4.69140727 C28.528363,4.92329818 28.8068716,5.13174909 29.2761675,5.13174909 C29.5864739,5.13174909 29.7853043,5.00035636 29.7853043,4.76846909 C29.7853043,4.15021455 27.820392,4.38991636 27.820392,2.95206182 C27.820392,2.20241818 28.4808458,1.75426182 29.332087,1.75426182 C30.1197324,1.75426182 30.5572342,2.15589455 30.7560646,2.47301091 L30.032015,2.99857818 C29.9048234,2.84410545 29.6741951,2.61221455 29.2842068,2.61221455 C29.0298199,2.61221455 28.8547481,2.73579273 28.8547481,2.93678909 C28.8547481,3.57812364 30.8276996,3.26917455 30.8276996,4.71448727 C30.8276996,5.50284 30.1274087,5.99751273 29.2286503,5.99751273 C28.409207,5.99751273 27.9000702,5.59552727 27.6774849,5.24786909 Z"></path>
                            </g>
                        </g>
                        <path d="M37.9161563,10.6221382 C37.5357867,10.6132364 37.1501885,10.6087091 36.7700735,10.6087091 C36.6679392,10.6087091 36.5650077,10.6116836 36.4623233,10.6123273 C36.4864,8.74915636 36.4486849,6.88328 36.3316136,5.03269455 C36.1708837,2.49229818 33.9129113,0.298494545 31.2982381,0.142334545 C29.7169815,0.0478945455 28.1149156,0 26.5364735,0 C24.9574812,0 23.355026,0.0478945455 21.7736346,0.142356364 C19.1589352,0.298516364 16.9009628,2.49232 16.7402592,5.03276 C16.7254119,5.26751273 16.7194274,5.50388364 16.7068407,5.73910182 C16.6541174,5.73599636 16.6024683,5.72838182 16.5493782,5.72685091 C16.0660772,5.713 15.576058,5.70596727 15.0929179,5.70596727 C14.6529273,5.70596727 14.2067687,5.71178182 13.7668716,5.72328 C11.747593,5.77601455 9.97111766,6.98178182 9.11336421,8.67081091 C8.60968795,8.65816 8.10584702,8.64981455 7.60577871,8.64981455 C6.80789708,8.64983636 5.99843556,8.66604 5.1998952,8.69802182 C2.48269848,8.80686545 0.17510924,11.0429709 0.0559120468,13.6826836 C-0.0163667836,15.2831818 -0.0185824561,16.9063164 0.0493323977,18.5069673 C0.161309942,21.1470145 2.4628248,23.3890691 5.17974456,23.5048582 C5.49669801,23.5183745 5.81593825,23.5268291 6.13490152,23.5353527 C6.16057637,24.5769891 6.19989333,25.6174073 6.26796538,26.6527855 C6.43367298,29.1729164 8.67873684,31.3542255 11.2725782,31.5152218 C12.9854353,31.6215564 14.7207223,31.6754655 16.4302896,31.6754655 C18.1399953,31.6754655 19.8754882,31.6215309 21.5885511,31.5152 C23.9989371,31.3655855 26.1055701,29.4706982 26.5248412,27.1811273 C26.8086494,27.24172 27.0983074,27.2836655 27.3941745,27.2960291 C28.2321216,27.3310291 29.0814465,27.3487636 29.9185478,27.3487636 C30.7557876,27.3487636 31.6051799,27.3310291 32.443127,27.2960073 C34.9112814,27.1929127 37.0338171,25.3324727 37.4889506,23.0136473 C37.6316332,23.0115382 37.7744056,23.01196 37.9161488,23.0086545 C40.7309549,22.9426691 43.0761694,20.6640836 43.144058,17.9292655 C43.1624234,17.1901418 43.1624234,16.4406291 43.1440805,15.7015491 C43.0761993,12.9667091 40.7309623,10.6880982 37.9161563,10.6221382 Z M13.7889385,6.52044 C14.2236295,6.50907636 14.6583654,6.50341818 15.0929179,6.50341818 C15.5703467,6.50341818 16.0476182,6.51025455 16.525163,6.52394909 C16.5736833,6.52534909 16.6209684,6.53227273 16.6691705,6.53524727 C16.5973745,8.22345818 16.5804688,9.91874909 16.6252426,11.6102436 C16.560756,11.6100873 16.4954012,11.6072036 16.430982,11.6072036 C15.8664047,11.6072036 15.2969806,11.6220727 14.7285633,11.6337709 C13.8679991,9.98320364 12.1274349,8.78804727 10.1652884,8.70441455 C10.1211546,8.70252727 10.0764968,8.70195273 10.0322919,8.70017455 C10.8131556,7.44111636 12.2197708,6.56141091 13.7889385,6.52044 Z M6.12188444,22.7371491 C5.81987181,22.7288909 5.51785544,22.7210582 5.21572678,22.7081855 C2.91601965,22.6101745 0.964195556,20.7087636 0.869396959,18.4741418 C0.802099649,16.8878727 0.804270409,15.3037309 0.875883041,13.71764 C0.976782222,11.4832873 2.93376749,9.58691273 5.23370292,9.49480727 C6.02472795,9.46311273 6.81530012,9.44726545 7.60577871,9.44726545 C8.44683228,9.44726545 9.28777357,9.4652 10.1293287,9.50108727 C11.6547518,9.56611636 13.0233787,10.4268909 13.8022325,11.6497927 C12.9574101,11.67656 12.1122433,11.7153345 11.272582,11.7674473 C8.67876304,11.9284909 6.43369918,14.1097782 6.26799158,16.6299091 C6.13479298,18.6555164 6.0928262,20.6979745 6.12188444,22.7371491 Z M25.7740688,26.6019382 C25.634197,28.7288909 23.7253427,30.5834945 21.5362208,30.7193927 C19.8326606,30.8251273 18.1313422,30.8780182 16.4302933,30.8780182 C14.7292444,30.8780182 13.0284763,30.8251491 11.324916,30.7194145 C9.1357717,30.5835164 7.22691743,28.7289127 7.08704561,26.6019382 C6.86939322,23.2916582 6.86939322,19.9910545 7.08706807,16.6807527 C7.22693988,14.5538 9.1357717,12.6991964 11.324916,12.5632764 C13.0284763,12.45752 14.7297048,12.4046509 16.4307724,12.4046291 C18.13184,12.4046291 19.8327055,12.45752 21.5362657,12.5632764 C23.7253876,12.6991745 25.634197,14.5537782 25.7740912,16.6806873 C25.9917923,19.9910109 25.9917661,23.2916364 25.7740688,26.6019382 Z M21.5885998,11.7674436 C20.2128917,11.68204 18.8253043,11.6400473 17.4456215,11.6230473 C17.3863897,9.44282545 17.4213839,7.26433818 17.5594742,5.08167636 C17.6955771,2.93030909 19.609731,1.07053455 21.8240037,0.938298182 C23.3960758,0.844414545 24.9663177,0.797450909 26.5362676,0.797450909 C28.1061913,0.797450909 29.6758194,0.844370909 31.247869,0.938276364 C33.4621418,1.07051273 35.3762732,2.93028727 35.5123986,5.08163273 C35.7056561,8.13645455 35.7056561,11.1829964 35.5123761,14.2377927 C35.3762732,16.38916 33.4621193,18.2489127 31.2478465,18.3811491 C29.7259864,18.4720364 28.2059752,18.5168036 26.6861249,18.5197309 C26.6604276,17.8888945 26.6344758,17.2579455 26.5931752,16.62984 C26.4274414,14.1097309 24.1823963,11.9284655 21.5885998,11.7674436 Z M36.7599046,22.2709309 C36.6610152,24.5053709 34.7076604,26.4032327 32.4078858,26.4993127 C31.5777722,26.5339818 30.7481188,26.5513382 29.9185553,26.5513382 C29.0890143,26.5513382 28.2595406,26.5340036 27.4294306,26.4993127 C27.1489123,26.4875927 26.8737834,26.4481782 26.6063083,26.3854982 C26.7522096,24.0399709 26.790632,21.6733382 26.7192253,19.3166727 C28.2387125,19.31312 29.7776805,19.2679127 31.298197,19.1770909 C33.5195958,19.0444327 35.4783401,17.43932 36.1174568,15.4021236 C36.4939191,16.0097455 36.727564,16.7029273 36.7599083,17.4338836 C36.8313151,19.0469418 36.8312926,20.6578691 36.7599046,22.2709309 Z M42.3235481,17.9100436 C42.2662325,20.2187709 40.2726288,22.1557382 37.8963724,22.2114255 C37.7918615,22.2138655 37.6873993,22.2133345 37.5829146,22.2151091 C37.6510129,20.6166327 37.6506236,18.9971818 37.5799205,17.3996364 C37.5290236,16.2498909 37.0623064,15.1763818 36.3276126,14.3212 C36.328436,14.3096145 36.3308575,14.2983164 36.3315874,14.2867091 C36.3920318,13.3312327 36.4269361,12.3711382 36.4497815,11.4099127 C36.5565305,11.4092036 36.6633244,11.4061636 36.7700697,11.4061636 C37.1455027,11.4061636 37.5208683,11.4105564 37.8963724,11.4193709 C40.2726288,11.4750364 42.266255,13.4120255 42.3235481,15.7207745 C42.3416627,16.45064 42.3416627,17.1801745 42.3235481,17.9100436 Z" id="Shape"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>`
const origin = "http://10.7.1.44/federation"
const loginButtons = [
  {
    name: "Google",
    id: "google",
    url: `http://coriolis.samfira.com:5000/v3/auth/OS-FEDERATION/websso/openid?origin=${origin}`
  }
]

class LoginPage extends Reflux.Component {

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props)
    this.store = UserStore
    this.state = {
      username: "",
      password: ""
    }
  }

  componentWillMount() {
    super.componentWillMount.call(this)
    this.context.onSetTitle(title);
  }

  login(e) {
    e.preventDefault();

    if (this.state.username.length == 0 || this.state.password.length == 0) {
      NotificationActions.notify("Please fill in all fields")
    } else {
      UserActions.login({
        name: this.state.username,
        password: this.state.password
      })
    }
  }

  handleChangeUsername(e) {
    this.setState({ username: e.target.value })
  }

  handleChangePassword(e) {
    this.setState({ password: e.target.value })
  }

  render() {
    let loginButtonsTemplate = loginButtons.map(btn => (
      <div className="form-group" key={"loginbtn_" + btn.id}>
        <a className={s.loginBtn + " " + btn.id} href={btn.url}>
          <span className={s.icon}></span> Sign in with {btn.name}
        </a>
      </div>
    ))

    return (
      <div className={s.root}>
        <div className={s.container + " " + (loginButtons.length <= 2 ? s.oneColumn : "")}>
          <div className={s.logo}>
            <div className={s.large}>
              <LoadingIcon width={224} height={200} animate={this.state.loadingState} padding={16} text=""/>
              <div className={s.coriolisText} dangerouslySetInnerHTML={{ __html: coriolisTextSvg }}></div>
            </div>
            <div className={s.small}>
              <div className={"logo coriolis-white"}></div>
            </div>
          </div>
          <div className={s.loginContainer}>
            <div className={s.loginSocialButtons}>
              {loginButtonsTemplate}
            </div>
            <div className={s.loginSeparator}>
              <div className={s.line}></div>
              <span className={s.text}>or sign in with username</span>
              <div className={s.line}></div>
            </div>
            <div className={s.loginUsername}>
              <form onSubmit={(e) => this.login(e)}>
                <div className="form-group">
                  <label>Username</label>
                  <input
                    type="text"
                    placeholder="Username"
                    onChange={(e) => this.handleChangeUsername(e)}
                    value={this.state.username}
                  />
                </div>
                <div className="form-group">
                  <label>Password</label>
                  <input
                    type="password"
                    placeholder="Password"
                    onChange={(e) => this.handleChangePassword(e)}
                    value={this.state.password}
                  />
                </div>
                <div className="form-group">
                  <button onClick={(e) => this.login(e)}>Login</button>
                </div>
                <div className="form-group">
                  <a href="/forgot-password" className={s.forgotPassText}>Forgot your Password?</a>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div className={s.footerLogo}>
          <div className={s.text}>Coriolis® is a service offered by</div>
          <div className={s.coriolisLogo} dangerouslySetInnerHTML={{ __html: footerLogoSvg }}></div>
        </div>
      </div>
    );
  }

}

export default withViewport(withStyles(LoginPage, s));