Update auth ui appearance (#156)

Author: tar-g

packages/devextreme-cli/templates/react/application/src/App.js

@@ -6,32 +6,33 @@ import LoadPanel from 'devextreme-react/load-panel';
 import { NavigationProvider } from './contexts/navigation';
 import { AuthProvider, useAuth } from './contexts/auth';
 import { useScreenSize } from './utils/media-query';
-import AuthenticatedApp from './AuthenticatedApp';
-import PublicApp from './PublicApp';
+import Content from './Content';
+import NotAuthenticatedContent from './NotAuthenticatedContent';
 
 function App() {
   const { user, loading } = useAuth();
-  const screenSize = useScreenSize();
 
   if (loading) {
-    return <LoadPanel visible={true} />
+    return <LoadPanel visible={true} />;
   }
 
-  return (
-    <div className={`app ${screenSize}`}>
-      {
-        user ? <AuthenticatedApp /> : <PublicApp />
-      }
-    </div>
-  );
+  if (user) {
+    return <Content />;
+  }
+
+  return <NotAuthenticatedContent />;
 }
 
 export default function () {
+  const screenSize = useScreenSize();
+
   return (
     <Router>
       <AuthProvider>
         <NavigationProvider>
-          <App />
+          <div className={`app ${screenSize}`}>
+            <App />
+          </div>
         </NavigationProvider>
       </AuthProvider>
     </Router>

…eact/application/src/AuthenticatedApp.js …mplates/react/application/src/Content.jspackages/devextreme-cli/templates/react/application/src/AuthenticatedApp.js renamed to packages/devextreme-cli/templates/react/application/src/Content.js packages/devextreme-cli/templates/react/application/src/AuthenticatedApp.js renamed to packages/devextreme-cli/templates/react/application/src/Content.js

@@ -18,8 +18,8 @@ export default function () {
       </Route>
       <Route exact path='/reset-password' >
         <SingleCard
-          title="Password reset"
-          description="Enter your email address and we will send you a password reset link"
+          title="Password Reset"
+          description="Please enter the email address that you used to register, and we will send you an email with a link to reset your password."
         >
           <ResetPasswordForm />
         </SingleCard>

…lates/react/application/src/PublicApp.js …plication/src/NotAuthenticatedContent.jspackages/devextreme-cli/templates/react/application/src/PublicApp.js renamed to packages/devextreme-cli/templates/react/application/src/NotAuthenticatedContent.js packages/devextreme-cli/templates/react/application/src/PublicApp.js renamed to packages/devextreme-cli/templates/react/application/src/NotAuthenticatedContent.js

@@ -97,4 +97,4 @@ export default function (props) {
 
 const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
 const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
-const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Re-type Your Password', mode: 'password' };
+const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

packages/devextreme-cli/templates/react/application/src/components/create-account-form/create-account-form.js

@@ -2,12 +2,13 @@
 
 .create-account-form {
   .policy-info {
-    color: rgba(0, 0, 0, 0.54);
+    margin: 10px 0;
+    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
     font-size: 14px;
     font-style: normal;
 
     a {
-      color: rgba(0, 0, 0, 0.54);
+      color: rgba($base-text-color, alpha($base-text-color) * 0.7);
     }
   }
 

packages/devextreme-cli/templates/react/application/src/components/create-account-form/create-account-form.scss

@@ -67,7 +67,7 @@ export default function (props) {
               {
                 loading
                   ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
-                  : 'Sign in'
+                  : 'Sign In'
               }
             </span>
           </ButtonOptions>

packages/devextreme-cli/templates/react/application/src/components/login-form/login-form.js

@@ -1,3 +1,5 @@
+@import "../../themes/generated/variables.base.scss";
+
 .login-form {
   .link {
     text-align: center;
@@ -10,6 +12,7 @@
   }
 
   .form-text {
-    color: rgba(0, 0, 0, 0.54);
+    margin: 10px 0;
+    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
   }
 }

packages/devextreme-cli/templates/react/application/src/components/login-form/login-form.scss

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import Form, {
   Item,
   Label,
@@ -10,8 +10,9 @@ import Form, {
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
+import './reset-password-form.scss'
 
-const notificationText = 'Check your email for a message with a link to update your password';
+const notificationText = 'We\'ve sent a link to reset your password. Check your inbox.';
 
 export default function (props) {
   const history = useHistory();
@@ -31,7 +32,7 @@ export default function (props) {
   }, [history]);
 
   return (
-    <form onSubmit={onSubmit}>
+    <form className={'reset-password-form'} onSubmit={onSubmit}>
       <Form formData={formData.current} disabled={loading}>
         <Item
           dataField={'email'}
@@ -44,6 +45,7 @@ export default function (props) {
         </Item>
         <ButtonItem>
           <ButtonOptions
+            elementAttr={submitButtonAttributes}
             width={'100%'}
             type={'default'}
             useSubmitBehavior={true}
@@ -57,9 +59,15 @@ export default function (props) {
             </span>
           </ButtonOptions>
         </ButtonItem>
+        <Item>
+          <div className={'login-link'}>
+            Return to <Link to={'/login'}>Sign In</Link>
+          </div>
+        </Item>
       </Form>
     </form>
   );
 }
 
 const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
+const submitButtonAttributes = { class: 'submit-button' };

packages/devextreme-cli/templates/react/application/src/components/reset-password-form/reset-password-form.js

@@ -0,0 +1,13 @@
+@import "../../themes/generated/variables.base.scss";
+
+.reset-password-form {
+  .submit-button {
+    margin-top: 10px;
+  }
+
+  .login-link {
+    color: $base-accent;
+    font-size: 16px;
+    text-align: center;
+  }
+}

packages/devextreme-cli/templates/react/application/src/components/reset-password-form/reset-password-form.scss

@@ -29,7 +29,8 @@
       }
 
       .description {
-        color: rgba(0, 0, 0, 0.54);
+        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+        line-height: 18px;
       }
     }
   }