Unconnected-user-layout: Add SettingLanguage

In all unconnected user layouts, it is necessary to provide the ability to change the language.

GitLab: #234

Change-Id: Id94c85c69812aae5e6673b5802805e0a8b3b9c64

client/src/components/UnconnectedUserLayout.tsx

@@ -18,6 +18,8 @@
 import { Box, Card, CardContent, CardHeader, Container, Typography, useMediaQuery, useTheme } from '@mui/material'
 import { motion } from 'framer-motion'
 
+import SettingLanguage from './GeneralSettings/SettingLanguage'
+
 interface UnconnectedUserLayoutProps {
   pageName?: string
   children: React.ReactNode
@@ -58,6 +60,10 @@ export default function UnconnectedUserLayout({ pageName, children, message }: U
   }
 
   return (
+    <>
+      <Box sx={{ position: 'absolute', right: '0', padding: '1px' }}>
+        <SettingLanguage doNotDisplayLabel={true}></SettingLanguage>
+      </Box>
       <Box sx={backgroundStyle}>
         <Container className="message-list" sx={mainContainerStyle}>
           <motion.div
@@ -70,7 +76,13 @@ export default function UnconnectedUserLayout({ pageName, children, message }: U
               <CardContent
                 sx={
                   isMobile
-                  ? { width: '100%', height: '90%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }
+                    ? {
+                        width: '100%',
+                        height: '90%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                      }
                     : {}
                 }
                 component="form"
@@ -100,5 +112,6 @@ export default function UnconnectedUserLayout({ pageName, children, message }: U
           </motion.div>
         </Container>
       </Box>
+    </>
   )
 }

client/src/components/WelcomeAnimation.jsx

@@ -20,7 +20,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import JamiLogo from '../icons/jamiLogoIcon.svg?react'
+import Logo from '../icons/jamiLogoIcon.svg?react'
 
 const list = {
   hidden: { opacity: 0 },
@@ -80,7 +80,7 @@ export default function WelcomeAnimation(props) {
               }}
             >
               <motion.div style={{ width: '100%', display: 'flex', justifyContent: 'center' }} variants={item}>
-                <JamiLogo width="60%" />
+                <Logo width="60%" />
               </motion.div>
             </motion.div>
           )}

client/src/pages/AdminLogin.tsx

@@ -24,7 +24,7 @@ import { useTranslation } from 'react-i18next'
 import { Link, Navigate } from 'react-router-dom'
 
 import UnconnectedUserLayout from '../components/UnconnectedUserLayout'
-import jamiLogoIcon from '../icons/jamiLogoIcon.svg'
+import logoIcon from '../icons/jamiLogoIcon.svg'
 import { useLoginAdminMutation } from '../services/adminQueries'
 
 export default function AdminLogin() {
@@ -56,10 +56,11 @@ export default function AdminLogin() {
   }
 
   return (
+    <>
       <UnconnectedUserLayout>
         <Box sx={isMobile ? { ...titleStyle, marginTop: '-20%' } : { ...titleStyle, marginTop: '-40%' }}>
           <img
-          src={jamiLogoIcon}
+            src={logoIcon}
             alt="Jami logo"
             style={{ width: '20%', height: 'auto', borderRadius: borderRadius, marginRight: '15px' }}
           />
@@ -92,6 +93,7 @@ export default function AdminLogin() {
               <GroupAddRounded />
             </Fab>
           </Box>
+        </Box>
         <Box
           sx={{
             mt: theme.typography.pxToRem(100),
@@ -106,7 +108,7 @@ export default function AdminLogin() {
             </Link>
           </Typography>
         </Box>
-      </Box>
       </UnconnectedUserLayout>
+    </>
   )
 }

client/src/pages/Login.tsx

@@ -21,7 +21,6 @@ import { ChangeEvent, FormEvent, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Form, Link } from 'react-router-dom'
 
-import SettingLanguage from '../components/GeneralSettings/SettingLanguage'
 import { PasswordInput, UsernameInput } from '../components/Input'
 import JamiWelcomeLogo from '../components/JamiWelcomeLogo'
 import ProcessingRequest from '../components/ProcessingRequest'
@@ -109,10 +108,6 @@ function LoginForm() {
 
   return (
     <>
-      <Box sx={{ position: 'absolute', right: '0', padding: '1px' }}>
-        <SettingLanguage doNotDisplayLabel={true}></SettingLanguage>
-      </Box>
-
       <ProcessingRequest open={isPending} />
       <UnconnectedUserLayout>
         <Box

client/src/pages/Registration.tsx

@@ -22,7 +22,6 @@ import { ChangeEvent, FormEvent, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Form, Link, useNavigate } from 'react-router-dom'
 
-import SettingLanguage from '../components/GeneralSettings/SettingLanguage'
 import { NameStatus, PasswordInput, PasswordStatus, UsernameInput } from '../components/Input'
 import JamiWelcomeLogo from '../components/JamiWelcomeLogo'
 import ProcessingRequest from '../components/ProcessingRequest'
@@ -146,11 +145,7 @@ function RegistrationForm() {
 
   return (
     <>
-      <Box sx={{ position: 'absolute', right: '0', padding: '1px' }}>
-        <SettingLanguage doNotDisplayLabel={true}></SettingLanguage>
-      </Box>
       <ProcessingRequest open={isPending} />
-
       <UnconnectedUserLayout>
         <Box
           sx={{