invite user
񻂗1
As a meridian portal user on the user page ÔÚÓû§Ò³ÃæÉÏÒÔ×ÓÎçÏßÃÅ»§ÍøÕ¾Óû§µÄÉí·Ý
I want to see an ¡°invite users¡± button ÎÒÏë¿´µ½Ò»¸ö¡°ÑûÇëÓû§¡±°´Å¥
So that i can click on it to open up the invite users modal ÕâÑùÎҾͿÉÒÔµ¥»÷ËüÀ´´ò¿ªÑûÇë Óû§Ä£Ê½
Design
the button on this page: https://www.figma.com/file/z0TQxwrLxpvPwtzKkoBxbz/Portal?node-id=2%3A930 – Á¬½ÓÒÔÔ¤ ÀÀ
Á´½Ó´ò¿ª¾ÍÊÇÒªÇó1-ÁÐ×Ó.png
Extra Notes
1. Click this button should open up the invite users modal 1.µ¥»÷´Ë°´Å¥Ó¦´ò¿ªÑûÇëÓû§Ä£Ê½
2. There is already styling for this button in Pages.css 2. Pages.cssÖÐÒѾÓд˰´Å¥µÄÑùʽ
a. just add the btn-1 or btn-2 class to your button and it should look good a. Ö»Ð轫btn-1»òbtn-2ÀàÌí¼Óµ½ÄúµÄ°´Å¥ÖУ¬ËüÓ¦¸Ã¿´ÆðÀ´²»´í
Invite user
񻂗2
As an meridian portal user on the users page ÔÚÓû§Ò³ÃæÉÏÒÔ×ÓÎçÏßÃÅ»§ÍøÕ¾Óû§µÄÉí·Ý I want to see an invite users modal ÎÒÏë¿´µ½ÑûÇëÓû§Ä£Ê½
So that i can invite colleagues to join my organization ÕâÑùÎҾͿÉÒÔÑûÇëͬʼÓÈëÎÒµÄ×éÖ¯
Designs
empty https://www.figma.com/file/z0TQxwrLxpvPwtzKkoBxbz/Portal?node-id=467%3A8039 – Á¬½ÓÒÔÔ¤ÀÀ
Á´½Ó´ò¿ª¾ÍÊÇÒªÇó2-ÁÐ×Ó1.png
filled https://www.figma.com/file/z0TQxwrLxpvPwtzKkoBxbz/Portal?node-id=467%3A8302 –
Á¬½ÓÒÔÔ¤ÀÀ Á´½Ó´ò¿ª¾ÍÊÇÒªÇó2-ÁÐ×Ó2.png
Extra Notes
1. The subject line should be ¡°[currently logged in user¡¯s display name] has invited you to Meridian (Action Required)¡°
2. The body should be pre-filled to be ¡°Hello,
You have been invited to join [organization¡¯s name]¡¯s Organization on Meridian. You must complete the registration process to continue.
Click the link below to continue.¡±
3. When the user deletes the pre-filled text in the subject, the placeholder text should be ¡°Enter a subject line for the email here…¡±
4. When the user deletes the pre-filled text in the body, the placeholder text should be ¡°Enter a body for the email here…¡±
5. The placeholder text for the invitees field should be ¡°Enter emails separated by commas or spaces…¡±
6. When a user enters in an email, we should turn it into a bubble like the designs once they type in a space or a comma and then a space https://www.figma.com/file/z0TQxwrLxpvPwtzKkoBxbz/Portal?node-id=467%3A8302 – Á¬½Ó ÒÔÔ¤ÀÀ
a. If the user taps on the X in the bubble that email should be removed from the list b.The user should be able to enter as many emails here as they want
7. In order for the form to be submittable/the send button to be enabled, there must be a subject line, body, and at least 1 email in the corresponding fields.
1.(subject)Ö÷ÌâÐÐӦΪ ¡°[currently logged in user¡¯s display name(µ±Ç°µÇ¼Óû§µÄÃû×Ö)] has invited you to Meridian (Action Required)¡°
¼ûÒªÇó2-ÁÐ×Ó1.png
2.(body)Ö÷ÌâÌåÓ¦Ô¤ÏÈÌî³äΪ ¡°Hello,
You have been invited to join CSUN¡¯s Organization on Meridian. You must complete the
registration process to continue. Click the link below to continue.¡±
¼ûÒªÇó2-ÁÐ×Ó1.png
3.µ±Óû§É¾³ýÖ÷Ìâ(subject)ÖеÄÔ¤Ìî³äÎı¾Ê±£¬Õ¼Î»·ûÎı¾Ó¦Îª¡°ÊäÈëÖ÷Ìâ ÇëÔÚ´Ë´¦ÊäÈëµç×ÓÓʼþµÄÐÐ…¡± ¼ûÒªÇó2-ÁÐ×Ó1.png 4.µ±Óû§É¾³ýÕýÎÄ(body)ÖеÄÔ¤Ìî³äÎı¾Ê±£¬Õ¼Î»·ûÎı¾Ó¦Îª¡°Îª…ÊäÈëÕýÎÄ ÕâÀïµÄµç×ÓÓʼþ…¡± ¼ûÒªÇó2-ÁÐ×Ó1.png
5.±»ÑûÇëÕß×ֶεÄռλ·ûÎı¾Ó¦Îª¡°ÊäÈëÓöººÅ»ò¿Õ¸ñ·Ö¸ôµÄµç×ÓÓʼþ…¡± ¼ûÒªÇó2-ÁÐ×Ó1.png 6.µ±Óû§ÊäÈëµç×ÓÓʼþʱ£¬Ò»µ©ÔÚ¿Õ¸ñÖÐÊäÈëÉè¼Æ£¬ÎÒÃǾÍÓ¦½«Æä±ä³ÉÆøÅÝ »ò¶ººÅ£¬È»ºó¼ÓÒ»¸ö¿Õ¸ñ ¼ûÒªÇó2-ÁÐ×Ó2.png
a.Èç¹ûÓû§µã»÷ÆøÅÝÖеÄX£¬ÔòÓ¦´ÓÁбíÖÐɾ³ý¸Ãµç×ÓÓʼþ
b.Óû§Ó¦¸Ã¿ÉÒÔÔÚ´Ë´¦ÊäÈëÈÎÒâÊýÁ¿µÄµç×ÓÓʼþ
7.ΪÁËʹ±í¸ñ¿ÉÌá½»/ÆôÓ÷¢ËÍ°´Å¥£¬±ØÐëÓÐÒ»¸öÖ÷ÌâÐУ¬ÕýÎÄ£¬ ÔÚÏàÓ¦µÄ×Ö¶ÎÖÐÖÁÉÙÓÐ1·âµç×ÓÓʼþ¡£
ÒªÇó2£¬ÁÐ×Ó1
ÒªÇó2£¬ÁÐ×Ó2
ÒªÇó3 (¿ÉÔÝʱ²»¹Ü)
As a portal users on the Students page ×÷ΪѧÉúÒ³ÃæÉϵÄÃÅ»§ÍøÕ¾Óû§
I want to click on one of the students ÎÒÏëµã»÷ÆäÖÐһλѧÉú
So that a more detailed modal with more student info is opened ÕâÑù¾Í¿ÉÒÔ´ò¿ª¾ßÓиü¶àѧ ÉúÐÅÏ¢µÄ¸üÏêϸµÄģʽ
1. Ignore locking this form for some users (will handle in a separate ticket)
2. All fields should be editable but still considering data validation on phone number, email, and username fields
a. phone number must be at least 10 digits and only numerical values are allowed b. email must have an @ and a . after the @
c. username can only be alpha numeric and must be unique to that organization
3. If the user opens up the modal and no changes are made – the button at the bottom should say ¡°Close¡± and clicking that will close the modal
a. Clicking the X icon or outside of the modal should close the modal too
4. As a user is editing a field, if it at any point is not filled (empty) or does not meet thee data validation for that field (ex not a valid email/phone number etc), the error state for that field should show up (make the outline of the field and the field title red & add error message at the bottom of the form). Once the user corrects the entry, the error state should dismiss.
5. If the user made a change to any of the fields, the button at the bottom should say ¡°Save¡±
a.The button should be disabled if a required field is left blank or if the data validation is not met
b.The button should be enabled if the changes made to the field(s) is/are valid.
6. If the user has made changes to any field and they click the X in the upper right hand corner or click outside of the modal, a dialog error message should pop up saying ¡°Are you sure you want to close the Student Details? All changes made will not be saved.¡±
a. It should have buttons ¡°Ok¡± and ¡°Cancel¡±
b. Clicking ¡°Ok¡± should close the error message and modal and NOT save the changes made
c.Clicking ¡°Cancel¡± should close the error message but leave the modal open
7.Clicking ¡°Save¡± at the bottom of the modal should update that user¡¯s information
a. The modal should close
b. The button at the bottom should revert back to the ¡°Close¡± button
8. permissions are varying rn, designs might not accurately reflects that. feel free to implement the permissions part based on what the endpoint for users has as permissions
1.ºöÂÔΪijЩÓû§Ëø¶¨´Ë±íµ¥(½«ÔÚµ¥¶ÀµÄƱ֤Öд¦Àí)
2. ËùÓÐ×ֶξùÓ¦¿É±à¼£¬µ«ÈÔÔÚ¿¼ÂǶԵ绰ºÅÂ룬µç×ÓÓʼþºÍÓû§Ãû×ֶνøÐÐÊý¾ÝÑéÖ¤
a.µç»°ºÅÂë±ØÐëÖÁÉÙΪ10λÊý×Ö£¬²¢ÇÒÖ»ÄÜʹÓÃÊý×ÖÖµ b.µç×ÓÓʼþ±ØÐë°üº¬@ºÍ¡£Ö®ºó @ c.Óû§ÃûÖ»ÄÜÊÇ×ÖĸÊý×Ö£¬²¢ÇÒ¶ÔÓÚ¸Ã×éÖ¯±ØÐëÊÇΨһµÄ
3.Èç¹ûÓû§´ò¿ªÄ£Ì¬µ«Î´½øÐÐÈκθü¸Ä-µ×²¿µÄ°´Å¥Ó¦ÏÔʾ¡°Close¡±£¬È»ºóµ¥»÷ÒԹرÕģ̬ a.µ¥»÷Xͼ±ê»òģ̬֮ÍâÒ²Ó¦¹Ø±Õģ̬
4.Óû§±à¼×Ö¶Îʱ£¬Èç¹ûÔÚÈκÎʱºòδÌîд¸Ã×Ö¶Î(Ϊ¿Õ)»ò²»·ûºÏ¸Ã×ֶεÄÊý¾ÝÑéÖ¤ÒªÇó(ÀýÈç ÎÞЧµÄµç×ÓÓʼþ/µç»°ºÅÂëµÈ)£¬Ôò¸Ã×ֶεĴíÎó״̬ӦÏÔʾ³öÀ´(½«×ֶεÄÂÖÀªºÍ×ֶαêÌâÉèΪ ºìÉ«£¬²¢ÔÚ±íµ¥µ×²¿Ìí¼Ó´íÎóÏûÏ¢)¡£Ò»µ©Óû§¸üÕýÊäÈ룬´íÎó״̬Ӧ±»Ïû³ý¡£
5.Èç¹ûÓû§¶ÔÈκÎ×ֶνøÐÐÁ˸ü¸Ä£¬Ôòµ×²¿µÄ°´Å¥Ó¦ÏÔʾ¡°Save¡± a.Èç¹û±ØÌî×Ö¶ÎΪ¿Õ»ò²»·ûºÏÊý¾ÝÑéÖ¤£¬ÔòÓ¦½ûÓøð´Å¥ b.Èç¹û¶Ô×Ö¶ÎËù×öµÄ¸ü¸ÄÓÐЧ£¬ÔòÓ¦ÆôÓøð´Å¥¡£
6.Èç¹ûÓû§¶ÔÈκÎ×ֶνøÐÐÁ˸ü¸Ä£¬È»ºóµ¥»÷ÓÒÉϽǵÄX»òÔÚģ̬֮Íâµ¥»÷£¬Ôò»áµ¯³ö¶Ô»°¿ò´í ÎóÏûÏ¢£¬Ìáʾ¡°ÄúÈ·¶¨Òª¹Ø±ÕѧÉúÏêϸÐÅÏ¢Âð?ËùÓÐËù×öµÄ¸ü¸Ä½«²»»á±£´æ¡£¡±
a. ËüÓ¦¸Ã¾ßÓС°Ok¡±ºÍ¡°Cancel¡±°´Å¥ b.µ¥»÷¡°Ok¡±½«¹Ø±Õ´íÎóÏûÏ¢ºÍģʽÐÅÏ¢£¬²¢ÇÒ²»±£´æËù×öµÄ¸ü¸Ä
c.µ¥»÷¡°Cancel¡±Ó¦¹Ø±Õ´íÎóÏûÏ¢£¬µ«½«Ä£Ê½±£³Ö´ò¿ª×´Ì¬ 7. µ¥»÷ģʽµ×²¿µÄ¡°save¡±Ó¦¸üиÃÓû§µÄÐÅÏ¢
a.ģ̬Ӧ¸Ã¹Ø±Õ
b.µ×²¿µÄ°´Å¥Ó¦»Ö¸´Îª¡°Close¡±°´Å¥ ȨÏÞ¸÷²»Ïàͬ£¬Éè¼Æ¿ÉÄÜÎÞ·¨×¼È··´Ó³ÕâÒ»µã¡£¿ÉÒÔ¸ù¾ÝÓû§¶Ëµã¾ßÓеÄȨÏÞËæÒâʵÏÖȨÏÞ²¿·Ö ÒªÇó3-ÁÐ×Ó