Feature/305 read only role

frontend/src/lib/config.js

@@ -18,6 +18,7 @@ const config = {
         "form",
       ],
       administration_level: [1],
+      description: "reprehenderit qui in ea voluptate",
     },
     {
       id: 2,
@@ -35,6 +36,7 @@ const config = {
         "form",
       ],
       administration_level: [2],
+      description: "sed quia non numquam eius",
     },
     {
       id: 3,
@@ -49,13 +51,23 @@ const config = {
         "questionnaires",
       ],
       administration_level: [3, 4],
+      description: "Nemo enim ipsam voluptatem",
     },
     {
       id: 4,
       name: "User",
       filter_form: 1,
       page_access: ["profile", "form", "data"],
       administration_level: [4],
+      description: "dicta sunt explicabo",
+    },
+    {
+      id: 5,
+      name: "Institutional User",
+      filter_form: false,
+      page_access: ["profile", "visualisation"],
+      administration_level: [1, 2, 3, 4],
+      description: "perspiciatis unde omnis iste natus error",
     },
   ],
   checkAccess: (roles, page) => {

frontend/src/pages/add-user/AddUser.jsx

@@ -26,6 +26,7 @@ const AddUser = () => {
   const [showForms, setShowForms] = useState(false);
   const [loading, setLoading] = useState(false);
   const [allowedForms, setAllowedForms] = useState([]);
+  const [description, setDescription] = useState("");
   const [form] = Form.useForm();
   const {
     user: authUser,
@@ -86,9 +87,9 @@ const AddUser = () => {
   };
 
   const allowedRole = useMemo(() => {
-    return config.roles.filter((r) => r.id >= authUser.role.id);
+    const lookUp = authUser.role?.id === 2 ? 3 : authUser.role?.id || 4;
+    return config.roles.filter((r) => r.id >= lookUp);
   }, [authUser]);
-
   const checkRole = useCallback(() => {
     const admin = takeRight(administration, 1)?.[0];
     const role = form.getFieldValue("role");
@@ -183,6 +184,10 @@ const AddUser = () => {
     }
   }, [id, form, forms, notify]);
 
+  const roleDescription = (e) => {
+    const role = config.roles.filter((data) => data.id === e);
+    setDescription(role[0].description);
+  };
   return (
     <div id="add-user">
       <Row justify="space-between">
@@ -314,6 +319,7 @@ const AddUser = () => {
               <Select
                 getPopupContainer={(trigger) => trigger.parentNode}
                 placeholder="Select one.."
+                onChange={roleDescription}
               >
                 {allowedRole.map((r, ri) => (
                   <Option key={ri} value={r.id}>
@@ -322,6 +328,9 @@ const AddUser = () => {
                 ))}
               </Select>
             </Form.Item>
+            <span className="role-description">
+              {description ? description : ""}
+            </span>
           </div>
           <Form.Item noStyle shouldUpdate>
             {(f) => {

frontend/src/pages/add-user/style.scss

@@ -48,3 +48,8 @@
     }
   }
 }
+.role-description {
+  color: gray;
+  position: relative;
+  top: -19px;
+}

frontend/src/pages/login/Login.jsx

@@ -92,10 +92,7 @@ const Login = () => {
                           <h1 data-testid="welcome-title">
                             Welcome to RTMIS, {invitedUser.name}
                             <br />
-                            <small>
-                              Set your own password including the following
-                              criteria
-                            </small>
+                            <small>Please set your password</small>
                           </h1>
                           <RegistrationForm invite={invitedUser.invite} />
                         </>

frontend/src/pages/login/__test__/Login.test.js

@@ -36,7 +36,7 @@ describe("Login and Registration", () => {
 
     const welcome = screen.getByTestId("welcome-title");
     expect(welcome.textContent).toBe(
-      `Welcome to RTMIS, ${fakeUser.name}Set your own password including the following criteria`
+      `Welcome to RTMIS, ${fakeUser.name}Please set your password`
     );
 
     expect(screen.getByText(/Confirm Password/i)).toBeInTheDocument();

frontend/src/pages/login/__test__/__snapshots__/Login.test.js.snap

@@ -346,7 +346,7 @@ exports[`Login and Registration test if the registration form exists: Registrati
                 Welcome to RTMIS, John Doe
                 <br />
                 <small>
-                  Set your own password including the following criteria
+                  Please set your password
                 </small>
               </h1>
               <div
@@ -399,14 +399,14 @@ exports[`Login and Registration test if the registration form exists: Registrati
                     <input
                       class="ant-checkbox-input"
                       type="checkbox"
-                      value="Special Character"
+                      value="Special Character ( -._!\`'#%&,:;<>=@{}~$()*+/?[]^|] )"
                     />
                     <span
                       class="ant-checkbox-inner"
                     />
                   </span>
                   <span>
-                    Special Character
+                    Special Character ( -._!\`'#%&,:;&lt;&gt;=@{}~$()*+/?[]^|] )
                   </span>
                 </label>
                 <label

frontend/src/pages/login/components/RegistrationForm.jsx

@@ -8,12 +8,14 @@ import { useNotification } from "../../../util/hooks";
 const checkBoxOptions = [
   { name: "Lowercase Character", re: /[a-z]/ },
   { name: "Numbers", re: /\d/ },
-  { name: "Special Character", re: /[-._!"`'#%&,:;<>=@{}~$()*+/?[\]^|]/ },
+  {
+    name: "Special Character ( -._!`'#%&,:;<>=@{}~$()*+/?[]^|] )",
+    re: /[-._!`'#%&,:;<>=@{}~$()*+/?[\]^|]/,
+  },
   { name: "Uppercase Character", re: /[A-Z]/ },
   { name: "No White Space", re: /^\S*$/ },
   { name: "Minimum 8 Character", re: /(?=.{8,})/ },
 ];
-
 const RegistrationForm = (props) => {
   const { invite } = props;
   const [checkedList, setCheckedList] = useState([]);

frontend/src/pages/login/style.scss

@@ -142,6 +142,10 @@
               }
             }
           }
+
+          .ant-checkbox-wrapper-checked {
+            background-color: #00ff5a66;
+          }
         }
       }
     }