From d1880af18d23e30bd7f3ae7dfeb6c535f977fa5a Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sat, 22 Jun 2019 13:53:41 -0700 Subject: [PATCH] New login page design --- .gitignore | 2 +- public/assets/pterodactyl.svg | 1 + .../auth/ForgotPasswordContainer.tsx | 5 +++-- .../auth/LoginCheckpointContainer.tsx | 5 +++-- .../scripts/components/auth/LoginContainer.tsx | 5 +++-- .../components/auth/LoginFormContainer.tsx | 18 ++++++++++++++++++ .../components/auth/ResetPasswordContainer.tsx | 5 +++-- .../pterodactyl/templates/auth/core.blade.php | 2 +- 8 files changed, 33 insertions(+), 10 deletions(-) create mode 100755 public/assets/pterodactyl.svg create mode 100644 resources/scripts/components/auth/LoginFormContainer.tsx diff --git a/.gitignore b/.gitignore index 99ba2aecf..3352c6ad9 100644 --- a/.gitignore +++ b/.gitignore @@ -12,7 +12,7 @@ node_modules _ide_helper.php .phpstorm.meta.php .php_cs.cache -public/assets/* +public/assets/manifest.json # For local development with docker # Remove if we ever put the Dockerfile in the repo diff --git a/public/assets/pterodactyl.svg b/public/assets/pterodactyl.svg new file mode 100755 index 000000000..f3582adf2 --- /dev/null +++ b/public/assets/pterodactyl.svg @@ -0,0 +1 @@ +Artboard 1 \ No newline at end of file diff --git a/resources/scripts/components/auth/ForgotPasswordContainer.tsx b/resources/scripts/components/auth/ForgotPasswordContainer.tsx index aa6520c0b..38741f7fc 100644 --- a/resources/scripts/components/auth/ForgotPasswordContainer.tsx +++ b/resources/scripts/components/auth/ForgotPasswordContainer.tsx @@ -4,6 +4,7 @@ import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail'; import { connect } from 'react-redux'; import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash'; import { httpErrorToHuman } from '@/api/http'; +import LoginFormContainer from '@/components/auth/LoginFormContainer'; type Props = Readonly<{ pushFlashMessage: typeof pushFlashMessage; @@ -60,7 +61,7 @@ class ForgotPasswordContainer extends React.PureComponent {

Request Password Reset

-
+ { Return to Login - +
); } diff --git a/resources/scripts/components/auth/LoginCheckpointContainer.tsx b/resources/scripts/components/auth/LoginCheckpointContainer.tsx index 1f2dd89d2..b4c3efb05 100644 --- a/resources/scripts/components/auth/LoginCheckpointContainer.tsx +++ b/resources/scripts/components/auth/LoginCheckpointContainer.tsx @@ -7,6 +7,7 @@ import MessageBox from '@/components/MessageBox'; import { Link } from 'react-router-dom'; import loginCheckpoint from '@/api/auth/loginCheckpoint'; import { httpErrorToHuman } from '@/api/http'; +import LoginFormContainer from '@/components/auth/LoginFormContainer'; type State = Readonly<{ isLoading: boolean; @@ -61,7 +62,7 @@ class LoginCheckpointContainer extends React.PureComponent -
+ This account is protected with two-factor authentication. A valid authentication token must be provided in order to continue. @@ -97,7 +98,7 @@ class LoginCheckpointContainer extends React.PureComponent - +
); } diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx index f1600ffe0..e111a0305 100644 --- a/resources/scripts/components/auth/LoginContainer.tsx +++ b/resources/scripts/components/auth/LoginContainer.tsx @@ -3,6 +3,7 @@ import { Link, RouteComponentProps } from 'react-router-dom'; import login from '@/api/auth/login'; import { httpErrorToHuman } from '@/api/http'; import NetworkErrorMessage from '@/components/NetworkErrorMessage'; +import LoginFormContainer from '@/components/auth/LoginFormContainer'; type State = Readonly<{ errorMessage?: string; @@ -61,7 +62,7 @@ export default class LoginContainer extends React.PureComponent -
+ - +
); } diff --git a/resources/scripts/components/auth/LoginFormContainer.tsx b/resources/scripts/components/auth/LoginFormContainer.tsx new file mode 100644 index 000000000..f6f0223c4 --- /dev/null +++ b/resources/scripts/components/auth/LoginFormContainer.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +export default ({ className, ...props }: React.DetailedHTMLProps, HTMLFormElement>) => ( +
+
+ +
+
+ {props.children} +
+
+); diff --git a/resources/scripts/components/auth/ResetPasswordContainer.tsx b/resources/scripts/components/auth/ResetPasswordContainer.tsx index 5e0783630..dd4664b35 100644 --- a/resources/scripts/components/auth/ResetPasswordContainer.tsx +++ b/resources/scripts/components/auth/ResetPasswordContainer.tsx @@ -7,6 +7,7 @@ import performPasswordReset from '@/api/auth/performPasswordReset'; import { httpErrorToHuman } from '@/api/http'; import { connect } from 'react-redux'; import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash'; +import LoginFormContainer from '@/components/auth/LoginFormContainer'; type State = Readonly<{ email?: string; @@ -91,7 +92,7 @@ class ResetPasswordContainer extends React.PureComponent { Reset Password -
+
@@ -136,7 +137,7 @@ class ResetPasswordContainer extends React.PureComponent { Return to Login
- +
); } diff --git a/resources/themes/pterodactyl/templates/auth/core.blade.php b/resources/themes/pterodactyl/templates/auth/core.blade.php index 6c106020b..0889bb3a6 100644 --- a/resources/themes/pterodactyl/templates/auth/core.blade.php +++ b/resources/themes/pterodactyl/templates/auth/core.blade.php @@ -3,7 +3,7 @@ ]) @section('container') -
+
@endsection