Task #216344 - UI for registration page

package.json

@@ -4,7 +4,7 @@
   "workspaces": {
     "packages": [
       "packages/common-lib",
-      "packages/core",
+     "packages/core",
       "packages/nulp_elite"
     ]
   },
@@ -45,7 +45,7 @@
     "normalize-css-color": "^1.0.2",
     "papaparse": "^5.4.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom ": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.45.4",

packages/nulp_elite/package.json

@@ -20,7 +20,7 @@
     "native-base": "^3.2.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-i18next": "^11.15.3",
+    "react-i18next": "11.15.3",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-tab-view": "^3.1.1",
     "react-native-web": "0.19.10",

packages/nulp_elite/public/locales/en/core.json

@@ -0,0 +1,3 @@
+{
+  "MY_CLASSES": "My Classes"
+}

packages/nulp_elite/public/locales/en/translation.json

@@ -0,0 +1,62 @@
+{
+  "MY_CLASSES": "My Classes",
+  "WELCOME_BACK": "Hello, welcome back to our your account !",
+  "LOGIN": "Login",
+  "GET_OTP": "Get OTP >",
+  "SUBMIT_OTP": "Submit OTP",
+  "LETS_GO": "Lets Go! ->",
+  "WELCOME": "Welcome!",
+  "SIGNUP": "Sign Up",
+  "SUBTITLE": "Login using your Mobile Number",
+  "LEARN": "Learn",
+  "IMPROVE": "Improve",
+  "LEARN_SUBTITLE": "Learn Anytime, anywhere.",
+  "IMPROVE_SUBTITLE": "Improve on the go.",
+  "MOBILENUMBER": "Mobile Number",
+  "NAME": "Name",
+
+  "DATEOFBIRTH": "Date of Birth",
+
+  "EMAILID": "Email ID",
+
+  "STATE": "State",
+
+  "DISTRICT": "District",
+
+  "BLOCK": "Block",
+
+  "SCHOOL": "School",
+
+  "UDISE": "UDISE",
+  "CLASS": "Class",
+  "ENTER_MOBILE_NUMBER": "Enter Mobile Number",
+  "ENTER_NAME": "Enter Name",
+
+  "ENTER_DATEOFBIRTH": "Enter Date of Birth",
+
+  "ENTER_EMAILID": "Enter Email ID",
+
+  "ENTER_STATE": "Enter State",
+
+  "ENTER_DISTRICT": "Enter District",
+
+  "ENTER_BLOCK": "Enter Block",
+
+  "ENTER_SCHOOL": "Enter School",
+
+  "ENTER_UDISE": "Enter UDISE",
+
+  "ENTER_CLASS": "Enter Class",
+
+  "ENTER_USERNAME": "Enter Username",
+  "ENTER_PASSWORD": "ENTER Password",
+  "USERNAME": "USERNAME",
+  "PASSWORD": "PASSWORD",
+  "HELP": "Help",
+  "LOGOUT": "LOGOUT",
+  "LANGUAGE": "Language",
+  "ENGLISH":"English",
+  "HINDI":"Hindi",
+  "WELCOME_TEXT": "Welcome to Our Learning Portal Content",
+  "EXPLORE_COURSES":" Explore Courses"
+}

packages/nulp_elite/public/locales/hi/core.json

@@ -0,0 +1,6 @@
+{
+  "MY_CLASSES": "मेरी कक्षाएँ",
+  "TIME_TABLE": "समय सारिणी",
+  "THE_CLASSES_YOU_TAKE": "आपके द्वारा ली जाने वाली सभी कक्षाएँ देखें",
+  "CLASS_TEACHER": "कक्षाध्यापक"
+}

packages/nulp_elite/public/locales/hi/translation.json

@@ -0,0 +1,12 @@
+{
+  "MY_CLASSES": "मेरी कक्षाएँ",
+  "CHOOSE_ANOTHER_CLASS": "दूसरी कक्षा चुनें",
+  "WELCOME_BACK": "नमस्कार, हमारे अपने खाते में वापस स्वागत है!",
+  "HELP": "मदद",
+  "LOGOUT": "लॉगआउट",
+  "LANGUAGE": "भाषा",
+  "ENGLISH":"अंग्रेज़ी",
+  "HINDI":"हिंदी",
+  "WELCOME_TEXT": "हमारे लर्निंग पोर्टल सामग्री में आपका स्वागत है",
+  "EXPLORE_COURSES":"पाठ्यक्रम खोजें"
+}

packages/nulp_elite/src/App.js

@@ -6,7 +6,7 @@ import Home from "pages/Home";
 import Courses from "pages/Courses";
 import Coursetest from "pages/CourseTest";
 import Search from "pages/Search";
-  
+
 import Contents from "pages/Contents";
 import {
   NativeBaseProvider,
@@ -21,8 +21,9 @@ import {
   ScrollView,
 } from "native-base";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import { DEFAULT_THEME, initializeI18n, H2 } from "@shiksha/common-lib";
-import { useTranslation } from "react-i18next";
+import { DEFAULT_THEME, H2 ,initializeI18n} from "@shiksha/common-lib";
+import { useTranslation, initReactI18next } from "react-i18next";
+import i18n from 'i18next';
 import Framework from "pages/Frmework";
 import User from "pages/User";
 import Registration from "pages/Registration";
@@ -36,13 +37,15 @@ import MyConnections from "pages/connections/MyConnections";
 import DomainList from "pages/search/DomainList";
 
 function App() {
+  // const [t] = useTranslation();
   const [search, setSearch] = React.useState(true);
   const [searchState, setSearchState] = React.useState(false);
   // const theme = extendTheme(DEFAULT_THEME);
   const colors = "";
   const [sortArray, setSortArray] = React.useState([]);
-
+  
   const routes = [
+
     {
       moduleName: "nulp_elite",
       path: "/home",
@@ -124,6 +127,41 @@ function App() {
       component: Certificate,
     },
   ];
+   // public_url="http://localhost:5000"
+  //  public_url="https://alt.uniteframework.io"
+  // initializeI18n(
+  //   ["translation"],
+  //   // `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json`
+  //   // `http://localhost:3300/locales/{{lng}}/{{ns}}.json`
+  // );
+  initializeI18n(
+    ["translation"],
+    `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json`
+  );
+
+  // const resources = {
+  //   en: {
+  //     translation: {
+  //       enTranslation
+  //     }
+  //   },
+  //   hi: {
+  //     translation: {
+  //       hiTranslation
+  //     }
+  //   }
+  // };
+  // console.log(hiTranslation)
+
+  // i18n.use(initReactI18next).init({
+  //   resources,
+  //   lng: 'en',
+
+  //   interpolation: {
+  //     escapeValue: false
+  //   }
+  // });
+
 
   // return(
   //   // <Box></Box>
@@ -141,9 +179,13 @@ function App() {
   return (
     <NativeBaseProvider>
       {/* <ChakraProvider> */}
-      <React.Suspense>
+      {/* <React.Suspense> */}
+      {/* <I18nextProvider i18n={i18n}> */}
+      {/* <ChakraProvider> */}
+        <React.Suspense>
         <Router>
           <Routes>
+
             {routes.map((route, index) => (
               <Route
                 key={index}
@@ -155,6 +197,8 @@ function App() {
         </Router>
         </React.Suspense>
       {/* </ChakraProvider> */}
+      {/* </ChakraProvider> */}
+      {/* </I18nextProvider> */}
     </NativeBaseProvider>
   );
 }

packages/nulp_elite/src/pages/Contents.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import { contentService } from "@shiksha/common-lib";
 import URLSConfig from "../configs/urlConfig.json";
+import { useTranslation } from "react-i18next";
+import{changeLanguage} from "i18next";
 import {
   Layout,
   IconByName,
@@ -26,9 +28,10 @@ import {
   Image,
 } from "native-base";
 
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams,useNavigate } from "react-router-dom";
 
 const Contents = () => {
+   const { t } = useTranslation();
   const [search, setSearch] = React.useState(true);
   const [searchState, setSearchState] = React.useState(false);
   // const theme = extendTheme(DEFAULT_THEME);
@@ -39,6 +42,7 @@ const Contents = () => {
   const [filters, setFilters] = useState({});
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const navigate = useNavigate();
 
   // Example of API Call
   useEffect(() => {
@@ -101,6 +105,11 @@ const Contents = () => {
     setFilters({ ...filters, [field]: value });
   };
 
+  // const changeLanguage = (lng) => {
+  //   changeLanguage(lng);
+
+  // };
+
   return (
     <Layout
       isDisabledAppBar={true}
@@ -128,8 +137,14 @@ const Contents = () => {
                     );
                   }}
                 >
-                  <Menu.Item>Help</Menu.Item>
-                  <Menu.Item>Logout</Menu.Item>
+                   <Menu.Item onPress={(item) => navigate("/help")}>
+                    {t("HELP")}
+                  </Menu.Item>
+                  <Menu.Item onPress={(item) => navigate("/logoff")}>
+                    {t("LOGOUT")}                    
+                  </Menu.Item>
+
+
                 </Menu>
               </VStack>
               <VStack></VStack>
@@ -153,41 +168,18 @@ const Contents = () => {
                       variant="solid"
                       {...triggerProps}
                     >
-                      Language
+                      {t("LANGUAGE")}
                     </Button>
                   );
                   // }}>
                 }}
               >
-                <Menu.Item>English</Menu.Item>
-                <Menu.Item> Hindi</Menu.Item>
+                <Menu.Item onPress={(item) => changeLanguage('en')}>{t("ENGLISH")}</Menu.Item>
+                <Menu.Item onPress={(item) => changeLanguage('hi')}>{t("HINDI")}</Menu.Item>
               </Menu>
             </Box>
-            {/* </Right> */}
-
-            {/* <Avatar
-           size="48px"
-           borderRadius=""
-              source={require("../assets/nulp_logo.jpeg")}
-          /> */}
-
-            {/* <VStack>
-          <Avatar
-            size="37px"
-            borderRadius="md"
-            source={{
-              uri: "https://via.placeholder.com/50x50.png",
-            }}
-          />
-          </VStack> */}
           </Box>
         ),
-        // title: "User Name",
-        // // isEnableSearchBtn: true,
-        // subHeading: "Hello",
-        // iconComponent: (
-
-        // ),
       }}
       subHeader={
         <Link to="/" style={{ textDecoration: "none" }}>
@@ -234,14 +226,14 @@ const Contents = () => {
     >
       <Box textAlign="center" padding="10">
         <Heading as="h1" size="2xl" marginBottom="4">
-          Welcome to Our Learning Portal Content
+          {t("WELCOME_TEXT")}
         </Heading>
-        <Text fontSize="xl" marginBottom="8">
+        {/* <Text fontSize="xl" marginBottom="8">
           Enhance your knowledge and skills with our diverse range of courses
           and content.
-        </Text>
+        </Text> */}
         <Button colorScheme="blue" size="lg" onClick={navigateToCourse()}>
-          Explore Courses
+         {t( "EXPLORE_COURSES")}
         </Button>
 
         {isLoading && <p>Loading...</p>}
@@ -255,13 +247,14 @@ const Contents = () => {
         ))}
       </Box>
 
-      {/* <Routes>
-       <Route path="/" element={<Home />} />
-       <Route path="/Contents" element={<Contents />} />
-       <Route path="/Courses" element={<Courses />} />
-       <Route path="/Sample" element={<Sample />} />
- </Routes>     */}
-    </Layout>
+       {/* <Routes>
+      //  <Route path="/" element={<Home />} />
+      //  <Route path="/Contents" element={<Contents />} />
+      //  <Route path="/Courses" element={<Courses />} />
+      //  <Route path="/Sample" element={<Sample />} />
+      // </Routes>     */}
+     </Layout>
+    //  <Box>HERE</Box>
   );
 };
 

packages/nulp_elite/src/pages/Courses.js

@@ -24,11 +24,6 @@ const Courses = () => {
   const [showModalSort, setShowModalSort] = React.useState(false);
   const { isOpen, onOpen, onClose } = useDisclose();
   const navigate = useNavigate();
-
-  const redirectTo = async (path) => {
-    // Perform logout logic here if path is logout
-    window.location.href = path;
-  };
   return (
     <Layout
       isDisabledAppBar={true}
@@ -56,10 +51,10 @@ const Courses = () => {
                     );
                   }}
                 >
-                  <Menu.Item onPress={(item) => redirectTo("/help")}>
+                  <Menu.Item onPress={(item) => navigate("/help")}>
                     Help
                   </Menu.Item>
-                  <Menu.Item onPress={(item) => redirectTo("/logoff")}>
+                  <Menu.Item onPress={(item) => navigate("/logoff")}>
                     Logout
                   </Menu.Item>
                 </Menu>
@@ -153,7 +148,7 @@ const Courses = () => {
           Explore Courses
         </Button>
       </Box>
-    </Layout>
+      </Layout> 
   );
 };