From 031aac3e215792deb1e66619a8bbd38c8cd569ed Mon Sep 17 00:00:00 2001 From: Kiran K Date: Fri, 4 Nov 2022 00:18:32 +0530 Subject: [PATCH] Add a new UI for the login screen (#647) * Add a new UI for the login screen * Update the error page UI * text tweak, fixed active element in menu bar, updated logo to generic one * text tweaks * fixed unauth route, it needs to be the original one, not the redirected one * Display the list of well-known URLs on login screen * Display the well-known URLs on the dashboard * added description to links * tweak to login page Co-authored-by: Deepak Prabhakara --- components/Sidebar.tsx | 12 ++- components/connection/AddEdit.tsx | 14 +-- components/connection/WellKnownURLs.tsx | 48 ++++++++++ components/layouts/AccountLayout.tsx | 2 +- lib/utils.ts | 14 +-- pages/_app.tsx | 52 ++++++++--- pages/admin/auth/login.tsx | 113 ++++++++++++++++++++++++ pages/admin/connection/index.tsx | 8 +- pages/admin/dashboard.tsx | 9 ++ pages/api/auth/[...nextauth].ts | 8 +- pages/error.tsx | 30 ++++--- public/logo.png | Bin 11300 -> 22696 bytes 12 files changed, 261 insertions(+), 49 deletions(-) create mode 100644 components/connection/WellKnownURLs.tsx create mode 100644 pages/admin/auth/login.tsx create mode 100644 pages/admin/dashboard.tsx diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index d399a1b61..68461183f 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -1,4 +1,4 @@ -import { ShieldCheckIcon, UsersIcon } from '@heroicons/react/20/solid'; +import { ShieldCheckIcon, UsersIcon, HomeIcon } from '@heroicons/react/20/solid'; import Image from 'next/image'; import Link from 'next/link'; import classNames from 'classnames'; @@ -12,11 +12,17 @@ export const Sidebar = (props: { isOpen: boolean; setIsOpen: any }) => { const { asPath } = useRouter(); const menus = [ + { + href: '/admin/dashboard', + text: 'Dashboard', + icon: HomeIcon, + active: asPath.includes('/admin/dashboard'), + }, { href: '/admin/connection', - text: 'SSO Connections', + text: 'Enterprise SSO', icon: ShieldCheckIcon, - active: asPath.includes('/admin/saml'), + active: asPath.includes('/admin/connection'), }, { href: '/admin/directory-sync', diff --git a/components/connection/AddEdit.tsx b/components/connection/AddEdit.tsx index 7c7c69e81..cb15fb7d7 100644 --- a/components/connection/AddEdit.tsx +++ b/components/connection/AddEdit.tsx @@ -268,14 +268,14 @@ const AddEdit = ({ connection }: AddEditProps) => { return ( <> - + Back

- {isEditView ? 'Edit Connection' : 'Create Connection'} + {isEditView ? 'Edit SSO Connection' : 'Create SSO Connection'}

{!isEditView && (
@@ -388,7 +388,7 @@ const AddEdit = ({ connection }: AddEditProps) => { readOnly={readOnly} maxLength={maxLength} onChange={getHandleChange()} - className={`textarea textarea-bordered h-24 w-full ${ + className={`textarea-bordered textarea h-24 w-full ${ isArray ? 'whitespace-pre' : '' }`} rows={rows} @@ -408,7 +408,7 @@ const AddEdit = ({ connection }: AddEditProps) => { readOnly={readOnly} maxLength={maxLength} onChange={getHandleChange({ key: 'checked' })} - className='checkbox checkbox-primary ml-5 align-middle' + className='checkbox-primary checkbox ml-5 align-middle' /> ) : ( @@ -421,7 +421,7 @@ const AddEdit = ({ connection }: AddEditProps) => { readOnly={readOnly} maxLength={maxLength} onChange={getHandleChange()} - className='input input-bordered w-full' + className='input-bordered input w-full' /> )}
@@ -429,7 +429,7 @@ const AddEdit = ({ connection }: AddEditProps) => { } )}
-

{

+
+ + + + + + + + ); +}; + +Login.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +export const getServerSideProps = async (context: GetServerSidePropsContext) => { + return { + props: { + csrfToken: await getCsrfToken(context), + }, + }; +}; + +export default Login; diff --git a/pages/admin/connection/index.tsx b/pages/admin/connection/index.tsx index 543844fce..cf9309eaa 100644 --- a/pages/admin/connection/index.tsx +++ b/pages/admin/connection/index.tsx @@ -31,9 +31,9 @@ const Connections: NextPage = () => { return (
-

Connections

+

Enterprise SSO

- + + New Connection @@ -95,7 +95,7 @@ const Connections: NextPage = () => {