Added Authentication

assets/build/api/openapi-config.ts

@@ -26,6 +26,9 @@ const config: ConfigFile = {
     },
     '../../js/src/core/modules/asset/properties-api-slice.gen.ts': {
       filterEndpoints: [/properties/i]
+    },
+    '../../js/src/core/modules/auth/user/user-api-slice.gen.ts': {
+      filterEndpoints: [/user/i]
     }
   },
   exportName: 'api',

assets/js/src/core/app/router/router.tsx

@@ -0,0 +1,28 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React from 'react'
+import { createBrowserRouter } from 'react-router-dom'
+import { DefaultPage } from '@Pimcore/modules/app/default-page'
+import { LoginPage } from '@Pimcore/modules/auth/login-page'
+
+export const router = createBrowserRouter([
+  {
+    path: '/admin/studio',
+    element: <DefaultPage />
+  },
+  {
+    path: '/admin/studio/login',
+    element: <LoginPage />
+  }
+])

assets/js/src/core/components/login-form/login-form-style.tsx

@@ -0,0 +1,56 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+  return {
+    form: css`
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        font-family: Lato, sans-serif;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+
+        .flex-space {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .ant-btn-link {
+          color: ${token.colorPrimary};
+
+          &:hover {
+            color: ${token.colorPrimaryHover};
+          }
+        }
+      }
+
+      .login__additional-logins {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+
+        .ant-btn {
+          width: 100%;
+        }
+      }
+    `
+  }
+})

assets/js/src/core/components/login-form/login-form.tsx

@@ -0,0 +1,110 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { Button, Checkbox, Input } from 'antd'
+import React from 'react'
+import { EyeInvisibleOutlined, EyeTwoTone, UserOutlined } from '@ant-design/icons'
+import { useStyle } from '@Pimcore/components/login-form/login-form-style'
+import { type ILoginRequest, useLoginMutation } from '@Pimcore/modules/auth/auth-api-slice'
+import { useDispatch } from 'react-redux'
+import { useMessage } from '@Pimcore/components/message/useMessage'
+import { useTranslation } from 'react-i18next'
+import { setUser } from '@Pimcore/modules/auth/user/user-slice'
+
+export interface IAdditionalLogins {
+  key: string
+  name: string
+  link: string
+}
+
+interface ILoginFormProps {
+  additionalLogins?: IAdditionalLogins[]
+}
+
+export const LoginForm = ({ additionalLogins }: ILoginFormProps): React.JSX.Element => {
+  const dispatch = useDispatch()
+  const { styles } = useStyle()
+  const messageApi = useMessage()
+  const { t } = useTranslation()
+
+  const [formState, setFormState] = React.useState<ILoginRequest>({
+    username: '',
+    password: ''
+  })
+
+  const [login, { isLoading }] = useLoginMutation()
+
+  const handleAuthentication = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
+    try {
+      e.preventDefault()
+      const user = await login(formState).unwrap()
+
+      dispatch(setUser(user))
+    } catch (error) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      messageApi.error({
+        content: error.data.error
+      })
+    }
+  }
+
+  return (
+    <div className={ styles.form }>
+      <form onSubmit={ handleAuthentication }>
+        <Input
+          onChange={ (e) => { setFormState({ ...formState, username: e.target.value }) } }
+          placeholder="Username"
+          prefix={ <UserOutlined /> }
+        />
+        <Input.Password
+          iconRender={ (visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />) }
+          onChange={ (e) => { setFormState({ ...formState, password: e.target.value }) } }
+          placeholder="Password"
+        />
+        <div className={ 'flex-space' }>
+          <Checkbox
+            aria-label={ t('aria.login-form-additional-logins.remember-me-checkbox') }
+          >
+            {t('login-form.remember-me')}
+          </Checkbox>
+          <Button type={ 'link' }>{t('login-form.forgot-password')}</Button>
+        </div>
+
+        <Button
+          htmlType="submit"
+          loading={ isLoading }
+          type="primary"
+        >
+          {t('login-form.login')}
+        </Button>
+      </form>
+
+      {Array.isArray(additionalLogins) && (
+        <div className={ 'login__additional-logins' }>
+          <p>{t('login-form-additional-logins.or')}</p>
+
+          {additionalLogins?.map((login) => (
+            <Button
+              aria-label={ `${t('aria.login-form-additional-logins.additional-login-provider')} ${login.name}` }
+              href={ login.link }
+              key={ login.key }
+              type={ 'primary' }
+            >
+              {login.name}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

assets/js/src/core/modules/app/translations/translations-loader-container.tsx → assets/js/src/core/modules/app/app-loader.tsx

@@ -12,33 +12,59 @@
 */
 
 import React, { useEffect, useState } from 'react'
+import { api } from '@Pimcore/modules/auth/user/user-api-slice.gen'
+import { useAppDispatch } from '@Pimcore/app/store'
 import { useGetTranslationsMutation } from '@Pimcore/modules/app/translations/translations-api-slice.gen'
 import { useTranslation } from 'react-i18next'
+import { setUser } from '@Pimcore/modules/auth/user/user-slice'
 
-interface TranslationsLoaderContainerProps {
+export interface IAppLoaderProps {
   children: React.ReactNode
 }
 
-export const TranslationsLoaderContainer = (props: TranslationsLoaderContainerProps): React.JSX.Element => {
-  const [isLoading, setIsLoading] = useState(true)
+export const AppLoader = (props: IAppLoaderProps): React.JSX.Element => {
+  const dispatch = useAppDispatch()
   const [translations] = useGetTranslationsMutation()
   const { i18n } = useTranslation()
+  const [isLoading, setIsLoading] = useState(true)
 
-  useEffect(() => {
-    translations({ translation: { locale: 'en', keys: [] } })
+  async function initLoadUser (): Promise<any> {
+    const userFetcher = dispatch(api.endpoints.getStudioApiUserCurrentUserInformation.initiate())
+
+    userFetcher
+      .then(({ data, isSuccess }) => {
+        if (isSuccess && data !== undefined) {
+          dispatch(setUser(data))
+        }
+      })
+      .catch(() => {})
+
+    return await userFetcher
+  }
+
+  async function loadTranslations (): Promise<any> {
+    await translations({ translation: { locale: 'en', keys: [] } })
       .unwrap()
       .then(response => {
         i18n.addResourceBundle('en', 'translation', response.keys ?? [], true, true)
-        setIsLoading(false)
       })
       .catch((error) => {
         console.error('rejected', error)
       })
+  }
+
+  useEffect(() => {
+    Promise.all([
+      initLoadUser(),
+      loadTranslations()
+    ]).then(() => {
+      setIsLoading(false)
+    }).catch(() => {})
   }, [])
 
   if (isLoading) {
     return (
-      <div>Loading...</div>
+      <div>Loading ...</div>
     )
   }
 

assets/js/src/core/modules/app/app-view.tsx

@@ -13,21 +13,20 @@
 
 import React, { StrictMode } from 'react'
 import { GlobalProvider } from './global-provider'
-import { BaseLayoutView } from '@Pimcore/modules/app/base-layout/base-layout-view'
 import { App as AntApp } from 'antd'
-import { TranslationsLoaderContainer } from '@Pimcore/modules/app/translations/translations-loader-container'
-import { Background } from '@Pimcore/components/background/background'
+import { RouterProvider } from 'react-router-dom'
+import { router } from '@Pimcore/app/router/router'
+import { AppLoader } from '@Pimcore/modules/app/app-loader'
 
 export const AppView = (): React.JSX.Element => {
   return (
     <>
       <StrictMode>
         <GlobalProvider>
           <AntApp>
-            <Background />
-            <TranslationsLoaderContainer>
-              <BaseLayoutView />
-            </TranslationsLoaderContainer>
+            <AppLoader>
+              <RouterProvider router={ router } />
+            </AppLoader>
           </AntApp>
         </GlobalProvider>
       </StrictMode>

assets/js/src/core/modules/app/default-page.tsx

@@ -0,0 +1,28 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React from 'react'
+import { Background } from '@Pimcore/components/background/background'
+import { BaseLayoutView } from '@Pimcore/modules/app/base-layout/base-layout-view'
+import { useMiddleware } from '@Pimcore/modules/auth/hooks/use-middleware'
+
+export const DefaultPage = (): React.JSX.Element => {
+  useMiddleware()
+
+  return (
+    <>
+      <Background />
+      <BaseLayoutView />
+    </>
+  )
+}

assets/js/src/core/modules/auth/auth-api-slice.ts

@@ -0,0 +1,42 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { api } from '@Pimcore/app/api/pimcore'
+
+export interface IUser {
+  username: string
+  roles: string[]
+}
+
+export interface ILoginRequest {
+  username: string
+  password: string
+}
+
+export const authApi = api
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      login: builder.mutation<IUser, ILoginRequest>({
+        query: (credentials) => ({
+          url: 'studio/api/login',
+          method: 'POST',
+          body: credentials
+        })
+      })
+    }),
+    overrideExisting: false
+  })
+
+export { authApi as api }
+
+export const { useLoginMutation } = authApi

assets/js/src/core/modules/auth/hooks/use-is-authenticated.ts

@@ -0,0 +1,21 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { useMemo } from 'react'
+import { useUser } from '@Pimcore/modules/auth/hooks/use-user'
+
+export const useIsAuthenticated = (): boolean => {
+  const user = useUser()
+
+  return useMemo(() => (user?.username !== null), [user])
+}