Login: Angular to React (#18116)

* Migrating login services

* Add user signup

* Remove lodash

* Remove media query and extarct LoginServices

* Add React LoginCtrl

* Handle location with Redux and start form validation

* Fix proposal

* Add basic validation

* Fix validation

* Remove state from controller

* Extract login forms

* Fix things up

* Add change password and LoginPage

* Add React page and route to it

* Make redux connection work

* Add validation for password change

* Change pws request

* Fix feedback

* Fix feedback

* LoginPage to FC

* Move onSkip to a method

* Experimenting with animations

* Make animations work

* Add input focus

* Fix focus problem and clean animation

* Working change password request

* Add routing with window.location instead of Redux

* Fix a bit of feedback

* Move config to LoginCtrl

* Make buttons same size

* Change way of validating

* Update changePassword and remove angular controller

* Remove some console.logs

* Split onChange

* Remove className

* Fix animation, onChange and remove config.loginError code

* Add loginError appEvent

* Make flex and add previosuly removed media query

public/app/core/controllers/all.ts

@@ -1,5 +1,4 @@
 import './json_editor_ctrl';
-import './login_ctrl';
 import './invited_ctrl';
 import './signup_ctrl';
 import './reset_password_ctrl';

public/app/core/controllers/login_ctrl.ts

@@ -1,145 +0,0 @@
-import _ from 'lodash';
-import coreModule from '../core_module';
-import config from 'app/core/config';
-import { BackendSrv } from '../services/backend_srv';
-
-export class LoginCtrl {
-  /** @ngInject */
-  constructor($scope: any, backendSrv: BackendSrv, $location: any) {
-    $scope.formModel = {
-      user: '',
-      email: '',
-      password: '',
-    };
-
-    $scope.command = {};
-    $scope.result = '';
-    $scope.loggingIn = false;
-
-    $scope.oauth = config.oauth;
-    $scope.oauthEnabled = _.keys(config.oauth).length > 0;
-    $scope.ldapEnabled = config.ldapEnabled;
-    $scope.authProxyEnabled = config.authProxyEnabled;
-    $scope.samlEnabled = config.samlEnabled;
-
-    $scope.disableLoginForm = config.disableLoginForm;
-    $scope.disableUserSignUp = config.disableUserSignUp;
-    $scope.loginHint = config.loginHint;
-    $scope.passwordHint = config.passwordHint;
-
-    $scope.loginMode = true;
-    $scope.submitBtnText = 'Log in';
-
-    $scope.init = () => {
-      $scope.$watch('loginMode', $scope.loginModeChanged);
-
-      if (config.loginError) {
-        $scope.appEvent('alert-warning', ['Login Failed', config.loginError]);
-      }
-    };
-
-    $scope.submit = () => {
-      if ($scope.loginMode) {
-        $scope.login();
-      } else {
-        $scope.signUp();
-      }
-    };
-
-    $scope.changeView = () => {
-      const loginView = document.querySelector('#login-view');
-      const changePasswordView = document.querySelector('#change-password-view');
-
-      loginView.className += ' add';
-      setTimeout(() => {
-        loginView.className += ' hidden';
-      }, 250);
-      setTimeout(() => {
-        changePasswordView.classList.remove('hidden');
-      }, 251);
-      setTimeout(() => {
-        changePasswordView.classList.remove('remove');
-      }, 301);
-
-      setTimeout(() => {
-        document.getElementById('newPassword').focus();
-      }, 400);
-    };
-
-    $scope.changePassword = () => {
-      $scope.command.oldPassword = 'admin';
-
-      if ($scope.command.newPassword !== $scope.command.confirmNew) {
-        $scope.appEvent('alert-warning', ['New passwords do not match', '']);
-        return;
-      }
-
-      backendSrv.put('/api/user/password', $scope.command).then(() => {
-        $scope.toGrafana();
-      });
-    };
-
-    $scope.skip = () => {
-      $scope.toGrafana();
-    };
-
-    $scope.loginModeChanged = (newValue: boolean) => {
-      $scope.submitBtnText = newValue ? 'Log in' : 'Sign up';
-    };
-
-    $scope.signUp = () => {
-      if (!$scope.loginForm.$valid) {
-        return;
-      }
-
-      backendSrv.post('/api/user/signup', $scope.formModel).then((result: any) => {
-        if (result.status === 'SignUpCreated') {
-          $location.path('/signup').search({ email: $scope.formModel.email });
-        } else {
-          window.location.href = config.appSubUrl + '/';
-        }
-      });
-    };
-
-    $scope.login = () => {
-      delete $scope.loginError;
-
-      if (!$scope.loginForm.$valid) {
-        return;
-      }
-      $scope.loggingIn = true;
-
-      backendSrv
-        .post('/login', $scope.formModel)
-        .then((result: any) => {
-          $scope.result = result;
-
-          if ($scope.formModel.password !== 'admin' || $scope.ldapEnabled || $scope.authProxyEnabled) {
-            $scope.toGrafana();
-            return;
-          } else {
-            $scope.changeView();
-          }
-        })
-        .catch(() => {
-          $scope.loggingIn = false;
-        });
-    };
-
-    $scope.toGrafana = () => {
-      const params = $location.search();
-
-      if (params.redirect && params.redirect[0] === '/') {
-        window.location.href = config.appSubUrl + params.redirect;
-      } else if ($scope.result.redirectUrl) {
-        window.location.href = $scope.result.redirectUrl;
-      } else {
-        window.location.href = config.appSubUrl + '/';
-      }
-    };
-
-    $scope.init();
-  }
-}
-
-coreModule.controller('LoginCtrl', LoginCtrl);