Fixed splash screen for login and signup (#152)

2025-11-02 19:48:17 +00:00 · 2021-08-14 02:58:39 +05:30 · 2021-08-14 02:58:39 +05:30 · 1e7cf60b5d
commit 1e7cf60b5d
parent 918c354f49
11 changed files with 179 additions and 108 deletions
--- a/catalog-rest-service/src/main/resources/ui/src/assets/img/google-icon.png
+++ b/catalog-rest-service/src/main/resources/ui/src/assets/img/google-icon.png
--- a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx
@ -47,7 +47,7 @@ import Suggestions from './Suggestions';
 const Appbar: React.FC = (): JSX.Element => {
  const location = useLocation();
  const history = useHistory();
-  const { isAuthenticatedRoute, isSignedIn } = useAuth();
+  const { isAuthenticatedRoute, isSignedIn } = useAuth(location.pathname);
  const match: Match | null = useRouteMatch({
    path: ROUTES.EXPLORE_WITH_SEARCH,
  });
@ -169,11 +169,7 @@ const Appbar: React.FC = (): JSX.Element => {
            </div>
          </div>
        </div>
-      ) : (
-        <div className="tw-flex tw-justify-center tw-items-center tw-my-5">
-          <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} />
-        </div>
-      )}
+      ) : null}
    </>
  );
 };
--- a/catalog-rest-service/src/main/resources/ui/src/components/containers/PageContainer.js
+++ b/catalog-rest-service/src/main/resources/ui/src/components/containers/PageContainer.js
@ -18,10 +18,20 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAuth } from '../../hooks/authHooks';

 const PageContainer = ({ children, leftPanelContent, className }) => {
+  const location = useLocation();
+  const { isAuthenticatedRoute } = useAuth(location.pathname);
+
  return (
-    <div className={classnames('page-container', className || '')}>
+    <div
+      className={classnames(
+        'page-container',
+        className || '',
+        !isAuthenticatedRoute ? 'full-page' : null
+      )}>
      {leftPanelContent && <div className="side-panel">{leftPanelContent}</div>}
      {children}
    </div>
--- a/catalog-rest-service/src/main/resources/ui/src/components/dropdown/DropDown.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/dropdown/DropDown.tsx
@ -25,6 +25,7 @@ import CheckBoxDropDownList from './CheckBoxDropDownList';
 import { DropDownListItem, DropDownProp, DropDownType } from './types';

 const DropDown: React.FC<DropDownProp> = ({
+  className = '',
  label,
  type,
  icon: Icon,
@ -72,7 +73,7 @@ const DropDown: React.FC<DropDownProp> = ({
              type === DropDownType.CHECKBOX
                ? `tw-rounded tw-text-body tw-text-gray-400 tw-border tw-border-main focus:tw-border-gray-500 tw-w-full`
                : `tw-justify-center tw-nav`
-            }`}
+            } ${className}`}
            id="menu-button"
            type="button"
            onClick={() => setIsOpen((isOpen) => !isOpen)}>
@ -141,6 +142,7 @@ const DropDown: React.FC<DropDownProp> = ({
  );
 };
 DropDown.propTypes = {
+  className: PropTypes.string,
  label: PropTypes.string,
  type: PropTypes.string.isRequired,
  icon: PropTypes.elementType,
--- a/catalog-rest-service/src/main/resources/ui/src/components/dropdown/types.ts
+++ b/catalog-rest-service/src/main/resources/ui/src/components/dropdown/types.ts
@ -48,6 +48,7 @@ export type DropDownListProp = {
 };

 export type DropDownProp = {
+  className?: string;
  label?: string;
  type: string;
  icon?: React.ElementType | string;
--- a/catalog-rest-service/src/main/resources/ui/src/pages/login/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/login/index.tsx
@ -23,6 +23,7 @@ import appState from '../../AppState';
 import PageContainer from '../../components/containers/PageContainer';
 import { ROUTES } from '../../constants/constants';
 import { AuthTypes } from '../../enums/signin.enum';
+import SVGIcons, { Icons } from '../../utils/SvgUtils';

 const SigninPage = () => {
  const history = useHistory();
@ -37,24 +38,42 @@ const SigninPage = () => {

  return (
    <PageContainer>
-      <div className="tw-w-screen tw-h-screen tw-flex  tw-justify-center">
-        <div className="tw-flex tw-flex-col tw-mt-52">
-          <div>
-            <h3>Sign in to OpenMetadata</h3>
+      <div className="tw-w-screen tw-h-screen tw-flex tw-justify-center">
+        <div className="tw-flex tw-flex-col tw-items-center signin-box">
+          <div className="tw-flex tw-justify-center tw-items-center tw-my-7">
+            <SVGIcons
+              alt="OpenMetadata Logo"
+              icon={Icons.LOGO_SMALL}
+              width="50"
+            />
          </div>
-          <div className="tw-flex tw-flex-col tw-mt-4" onClick={handleSignIn}>
+          <div className="tw-mb-7">
+            <h4 className="tw-font-semibold">
+              Welcome to <span className="tw-text-primary">OpenMetadata</span>
+            </h4>
+          </div>
+          <div className="tw-text-grey-muted tw-font-light tw-mb-7">
+            <h6 className="tw-mb-px">Centralized Metadata Store, Discover,</h6>
+            <h6 className="tw-mb-px">Collaborate and get your Data Right</h6>
+          </div>
+          <div className="tw-mt-16" onClick={handleSignIn}>
            {appState.authProvider.provider === AuthTypes.GOOGLE && (
-              <button className="tw-signin-button tw-bg-red-700 hover:tw-bg-red-600">
-                Sign in with Google
+              <button className="tw-signin-button">
+                <SVGIcons
+                  alt="Google Logo"
+                  icon={Icons.GOOGLE_ICON}
+                  width="22"
+                />
+                <span className="tw-ml-3">Sign in with Google</span>
              </button>
            )}
            {appState.authProvider.provider === AuthTypes.OKTA && (
-              <button className="tw-signin-button tw-bg-blue-700 hover:tw-bg-blue-600">
+              <button className="tw-signin-button tw-text-white tw-bg-blue-700 hover:tw-bg-blue-600">
                Sign in with Okta
              </button>
            )}
            {appState.authProvider.provider === AuthTypes.GITHUB && (
-              <button className="tw-signin-button tw-bg-gray-800 hover:tw-bg-gray-700">
+              <button className="tw-signin-button tw-text-white tw-bg-gray-800 hover:tw-bg-gray-700">
                Sign in with Github
              </button>
            )}
--- a/catalog-rest-service/src/main/resources/ui/src/pages/signup/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/signup/index.tsx
@ -22,9 +22,11 @@ import { useHistory } from 'react-router-dom';
 import appState from '../../AppState';
 import { createUser, getTeams } from '../../axiosAPIs/userAPI';
 import { Button } from '../../components/buttons/Button/Button';
+import PageContainer from '../../components/containers/PageContainer';
 import DropDown from '../../components/dropdown/DropDown';
 import { imageTypes, ROUTES } from '../../constants/constants';
 import { getNameFromEmail } from '../../utils/AuthProvider.util';
+import SVGIcons, { Icons } from '../../utils/SvgUtils';
 type Team = {
  id: string;
  displayName: string;
@ -124,103 +126,114 @@ const Signup = () => {
  return (
    <>
      {!loading && (
-        <div className="tw-w-full tw-flex tw-justify-around tw-items-stretch">
-          <div className="tw-flex tw-w-full xl:tw-w-2/5">
-            <div className="tw-w-full tw-p-8">
-              <form action="." method="POST" onSubmit={onSubmitHandler}>
-                <h1 className="tw-text-2xl tw-font-bold">
-                  Create your account
-                </h1>
-                <hr className="tw-my-1" />
-                <div className="tw-mb-4 tw-mt-6">
-                  <label
-                    className="tw-block tw-text-body tw-text-grey-body tw-mb-2"
-                    htmlFor="displayName">
-                    Full name
-                  </label>
-                  <input
-                    required
-                    autoComplete="off"
-                    className="tw-appearance-none tw-border tw-border-main  
+        <PageContainer>
+          <div className="tw-w-screen tw-h-screen tw-flex tw-justify-center">
+            <div className="tw-flex tw-flex-col tw-items-center signup-box">
+              <div className="tw-flex tw-justify-center tw-items-center tw-my-7">
+                <SVGIcons
+                  alt="OpenMetadata Logo"
+                  icon={Icons.LOGO_SMALL}
+                  width="50"
+                />
+              </div>
+              <div className="tw-mb-7">
+                <h4 className="tw-font-semibold">
+                  Join <span className="tw-text-primary">OpenMetadata</span>
+                </h4>
+              </div>
+              <div className="tw-px-8 tw-w-full">
+                <form action="." method="POST" onSubmit={onSubmitHandler}>
+                  <div className="tw-mb-4">
+                    <label
+                      className="tw-block tw-text-body tw-text-grey-body tw-mb-2"
+                      htmlFor="displayName">
+                      Full name
+                    </label>
+                    <input
+                      required
+                      autoComplete="off"
+                      className="tw-appearance-none tw-border tw-border-main  
                tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-grey-body  tw-leading-tight 
                focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover tw-h-10"
-                    id="displayName"
-                    name="displayName"
-                    placeholder="Your Full name"
-                    type="text"
-                    value={details.displayName}
-                    onChange={onChangeHadler}
-                  />
-                </div>
-                <div className="tw-mb-4 tw-mt-6">
-                  <label
-                    className="tw-block tw-text-body tw-text-grey-body tw-mb-2"
-                    htmlFor="name">
-                    Username
-                  </label>
-                  <input
-                    readOnly
-                    required
-                    autoComplete="off"
-                    className="tw-cursor-not-allowed tw-appearance-none tw-border tw-border-main tw-rounded tw-bg-gray-100
+                      id="displayName"
+                      name="displayName"
+                      placeholder="Your Full name"
+                      type="text"
+                      value={details.displayName}
+                      onChange={onChangeHadler}
+                    />
+                  </div>
+                  <div className="tw-mb-4">
+                    <label
+                      className="tw-block tw-text-body tw-text-grey-body tw-mb-2"
+                      htmlFor="name">
+                      Username
+                    </label>
+                    <input
+                      readOnly
+                      required
+                      autoComplete="off"
+                      className="tw-cursor-not-allowed tw-appearance-none tw-border tw-border-main tw-rounded tw-bg-gray-100
                    tw-w-full tw-py-2 tw-px-3 tw-text-grey-body tw-leading-tight focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover tw-h-10"
-                    id="name"
-                    name="name"
-                    placeholder="Username"
-                    type="text"
-                    value={details.name}
-                    onChange={onChangeHadler}
-                  />
-                </div>
-                <div className="tw-mb-4 tw-mt-6">
-                  <label
-                    className="tw-block tw-text-body tw-text-grey-body tw-mb-2"
-                    htmlFor="email">
-                    Email
-                  </label>
-                  <input
-                    readOnly
-                    required
-                    autoComplete="off"
-                    className="tw-cursor-not-allowed tw-appearance-none tw-border tw-border-main tw-rounded tw-bg-gray-100
+                      id="name"
+                      name="name"
+                      placeholder="Username"
+                      type="text"
+                      value={details.name}
+                      onChange={onChangeHadler}
+                    />
+                  </div>
+                  <div className="tw-mb-4">
+                    <label
+                      className="tw-block tw-text-body tw-text-grey-body tw-mb-2"
+                      htmlFor="email">
+                      Email
+                    </label>
+                    <input
+                      readOnly
+                      required
+                      autoComplete="off"
+                      className="tw-cursor-not-allowed tw-appearance-none tw-border tw-border-main tw-rounded tw-bg-gray-100
                    tw-w-full tw-py-2 tw-px-3 tw-text-grey-body tw-leading-tight focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover tw-h-10"
-                    id="email"
-                    name="email"
-                    placeholder="Your email address"
-                    type="email"
-                    value={details.email}
-                    onChange={onChangeHadler}
-                  />
-                </div>
-                <div className="tw-mb-4 tw-mt-6">
-                  <label
-                    className="tw-block tw-text-body tw-text-grey-body tw-mb-2"
-                    htmlFor="email">
-                    Select teams
-                  </label>
-                  <DropDown
-                    dropDownList={getTeamsData(teams)}
-                    label="Select ..."
-                    selectedItems={selectedTeams as Array<string>}
-                    type="checkbox"
-                    onSelect={(_e, value) => selectedTeamsHandler(value)}
-                  />
-                </div>
-                <div className="tw-flex tw-mt-8 tw-justify-end">
-                  <Button
-                    className="tw-text-white 
+                      id="email"
+                      name="email"
+                      placeholder="Your email address"
+                      type="email"
+                      value={details.email}
+                      onChange={onChangeHadler}
+                    />
+                  </div>
+                  <div className="tw-mb-4">
+                    <label
+                      className="tw-block tw-text-body tw-text-grey-body tw-mb-2"
+                      htmlFor="email">
+                      Select teams
+                    </label>
+                    <DropDown
+                      className="tw-bg-white"
+                      dropDownList={getTeamsData(teams)}
+                      label="Select..."
+                      selectedItems={selectedTeams as Array<string>}
+                      type="checkbox"
+                      onSelect={(_e, value) => selectedTeamsHandler(value)}
+                    />
+                  </div>
+                  <div className="tw-flex tw-my-7 tw-justify-end">
+                    <Button
+                      className="tw-text-white 
                       tw-text-sm tw-py-2 tw-px-4 tw-font-semibold tw-rounded tw-h-10 tw-justify-self-end"
-                    size="regular"
-                    theme="primary"
-                    type="submit"
-                    variant="contained">
-                    Create
-                  </Button>
-                </div>
-              </form>
+                      size="regular"
+                      theme="primary"
+                      type="submit"
+                      variant="contained">
+                      Create
+                    </Button>
+                  </div>
+                </form>
+              </div>
            </div>
          </div>
-        </div>
+        </PageContainer>
      )}
      {loading && (
        <p className="tw-text-center tw-text-grey-body tw-h3 tw-flex tw-justify-center tw-items-center">
--- a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
+++ b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
@ -161,7 +161,11 @@
  }

  .tw-signin-button {
-    @apply tw-rounded-md tw-text-white tw-px-4 tw-py-2 tw-mt-5 tw-border tw-text-base tw-font-medium;
+    @apply tw-rounded-md tw-bg-white tw-w-60 tw-h-9 tw-px-4 tw-mt-2 tw-border tw-font-medium;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+  }
+  .tw-signin-button:hover {
+    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
  }

  .tw-card {
@ -274,4 +278,14 @@
  body .content-container ul {
    @apply tw-list-disc;
  }
+
+  .signin-box {
+    @apply tw-m-auto tw-h-100 tw-w-120;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  }
+
+  .signup-box {
+    @apply tw-m-auto tw-w-120;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  }
 }
--- a/catalog-rest-service/src/main/resources/ui/src/styles/x-master.css
+++ b/catalog-rest-service/src/main/resources/ui/src/styles/x-master.css
@ -296,6 +296,10 @@ a:focus {
  height: calc(100% - 104px);
 }

+.page-container.full-page {
+  height: 100%;
+}
+
 /* Widget Box */
 .sl-box {
  display: -webkit-box;
--- a/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx
@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react';
+import IconGoogle from '../assets/img/google-icon.png';
 import IconSuccess from '../assets/svg/check.svg';
 import IconAsstest from '../assets/svg/data-assets.svg';
 import IconError from '../assets/svg/error.svg';
@ -54,6 +55,7 @@ type Props = {
 export const Icons = {
  LOGO: 'logo',
  LOGO_SMALL: 'logo-small',
+  GOOGLE_ICON: 'google-icon',
  EDIT: 'icon-edit',
  EXPLORE: 'icon-explore',
  MY_DATA: 'icon-my-data',
@ -147,6 +149,10 @@ const SVGIcons: FunctionComponent<Props> = ({
    case Icons.LOGO_SMALL:
      IconComponent = LogoMonogram;

+      break;
+    case Icons.GOOGLE_ICON:
+      IconComponent = IconGoogle;
+
      break;
    case Icons.MENU:
      IconComponent = IconMenu;
--- a/catalog-rest-service/src/main/resources/ui/tailwind.config.js
+++ b/catalog-rest-service/src/main/resources/ui/tailwind.config.js
@ -96,6 +96,12 @@ module.exports = {
        h6: '14px',
        body: '14px',
      },
+      height: {
+        100: '25rem',
+      },
+      width: {
+        120: '30rem',
+      },
      maxHeight: {
        32: '8rem',
        '90vh': '90vh',