@@ -3,6 +3,7 @@ import {useLocation, useNavigate, useParams} from "react-router-dom";
33import { useAppStore } from "../stores/AppStore" ;
44import I18n from "../locale/I18n" ;
55import { AUTHORITIES , isUserAllowed , urnFromRole } from "../utils/UserRole" ;
6+ import Select from "react-select" ;
67import {
78 allProviders ,
89 consequencesRoleDeletion ,
@@ -30,12 +31,13 @@ import SwitchField from "../components/SwitchField";
3031import { dateFromEpoch , displayExpiryDate , futureDate } from "../utils/Date" ;
3132import DOMPurify from "dompurify" ;
3233import WarningIndicator from "../components/WarningIndicator" ;
33- import DatePicker from "react-datepicker" ;
34- import { MinimalDateField } from "../components/MinimalDateField" ;
34+ import { DateField } from "../components/DateField" ;
3535
3636const DEFAULT_EXPIRY_DAYS = 365 ;
3737const CUT_OFF_DELETED_USER = 5 ;
3838
39+ const removeByOptions = [ "after" , "on" ] . map ( val => ( { value : val , label : I18n . t ( `invitations.${ val } ` ) } ) )
40+
3941export const RoleForm = ( ) => {
4042 const location = useLocation ( ) ;
4143 const navigate = useNavigate ( ) ;
@@ -64,6 +66,7 @@ export const RoleForm = () => {
6466 const [ applications , setApplications ] = useState ( [ ] ) ;
6567 const [ provisionings , setProvisionings ] = useState ( { } ) ;
6668 const [ deletedUserRoles , setDeletedUserRoles ] = useState ( null ) ;
69+ const [ removeRoleBy , setRemoveRoleBy ] = useState ( removeByOptions [ 0 ] ) ;
6770
6871 const allowedToEditApplication = useState ( isUserAllowed ( AUTHORITIES . INSTITUTION_ADMIN , user ) ) ;
6972
@@ -83,6 +86,10 @@ export const RoleForm = () => {
8386 }
8487 Promise . all ( promises ) . then ( res => {
8588 if ( ! newRole ) {
89+ if ( res [ 0 ] . defaultExpiryDate !== 0 ) {
90+ res [ 0 ] . defaultExpiryDate = new Date ( res [ 0 ] . defaultExpiryDate * 1000 ) ;
91+ setRemoveRoleBy ( removeByOptions [ 1 ] ) ;
92+ }
8693 setRole ( res [ 0 ] ) ;
8794 setCustomRoleExpiryDate ( res [ 0 ] . defaultExpiryDays !== DEFAULT_EXPIRY_DAYS )
8895 setCustomInviterDisplayName ( ! isEmpty ( res [ 0 ] . inviterDisplayName ) )
@@ -180,6 +187,15 @@ export const RoleForm = () => {
180187 } )
181188 }
182189
190+ const toggleRemoveBy = option => {
191+ setRemoveRoleBy ( option ) ;
192+ if ( option . value === "after" ) {
193+ setRole ( { ...role , defaultExpiryDays : DEFAULT_EXPIRY_DAYS , defaultExpiryDate : null } ) ;
194+ } else {
195+ setRole ( { ...role , defaultExpiryDays : 0 , defaultExpiryDate : futureDate ( 365 , new Date ( ) ) } ) ;
196+ }
197+ }
198+
183199 const updateUserIfNecessary = ( path , flashMessage ) => {
184200 if ( user . userRoles . some ( userRole => userRole . role . id === role . id ) ) {
185201 //We need to refresh the roles of the User to ensure 100% consistency
@@ -245,7 +261,7 @@ export const RoleForm = () => {
245261 && validOrganizationGUID
246262 && ! isEmpty ( applications [ 0 ] )
247263 && applications . every ( app => ! app || ( ! app . invalid && ! isEmpty ( app . landingPage ) ) )
248- && role . defaultExpiryDays > 0
264+ && ( role . defaultExpiryDays > 0 || role . defaultExpiryDate !== null )
249265 && ( ! isEmpty ( role . inviterDisplayName ) || ! customInviterDisplayName ) ;
250266 }
251267
@@ -279,6 +295,12 @@ export const RoleForm = () => {
279295 setApplications ( [ ...applications ] ) ;
280296 }
281297
298+ const deriveExpiryDate = ( ) => {
299+ console . log ( `defaultExpityDate ${ role . defaultExpiryDate } , defaultExpiryDays: ${ role . defaultExpiryDays } ` )
300+ const expiryDate = isEmpty ( role . defaultExpiryDate ) ? futureDate ( role . defaultExpiryDays , new Date ( ) ) : role . defaultExpiryDate ;
301+ return displayExpiryDate ( expiryDate ) ;
302+
303+ } ;
282304 const renderForm = ( ) => {
283305 const valid = isValid ( ) ;
284306 const disabledSubmit = ( ! valid && ! initial ) || ! validOrganizationGUID ;
@@ -441,48 +463,63 @@ export const RoleForm = () => {
441463
442464 < SwitchField name = { "roleExpiryDate" }
443465 value = { customRoleExpiryDate }
444- onChange = { ( ) => setCustomRoleExpiryDate ( ! customRoleExpiryDate ) }
445- label = { I18n . t ( "invitations.roleExpiryDateQuestion" ) }
446- info = { I18n . t ( "invitations.roleExpiryDateInfo" , {
447- expiry : displayExpiryDate ( futureDate ( role . defaultExpiryDays , new Date ( ) ) )
466+ onChange = { ( ) => {
467+ if ( customRoleExpiryDate ) {
468+ setRole ( {
469+ ...role ,
470+ defaultExpiryDays : DEFAULT_EXPIRY_DAYS ,
471+ defaultExpiryDate : null
472+ } ) ;
473+ setRemoveRoleBy ( removeByOptions [ 0 ] ) ;
474+ }
475+ setCustomRoleExpiryDate ( ! customRoleExpiryDate ) ;
476+ } }
477+ label = { I18n . t ( `invitations.roleExpiryDateQuestion` ) }
478+ info = { I18n . t ( `invitations.roleExpiryDateInfo${ role . defaultExpiryDays === DEFAULT_EXPIRY_DAYS ? "Default" : "" } ` , {
479+ expiry : deriveExpiryDate ( ) ,
480+ days : DEFAULT_EXPIRY_DAYS
448481 } ) }
449482 last = { customRoleExpiryDate }
450483 />
451484 { customRoleExpiryDate &&
452- < div className = "role-expiry-date" >
453- < InputField name = { I18n . t ( "roles.defaultExpiryDays" ) }
454- value = { role . defaultExpiryDays || 0 }
455- isInteger = { true }
456- onChange = { e => {
457- const val = parseInt ( e . target . value ) ;
458- const defaultExpiryDays = Number . isInteger ( val ) && val > 0 ? val : 0 ;
459- setRole (
460- { ...role , defaultExpiryDays : defaultExpiryDays } )
461- } }
462- toolTip = { I18n . t ( "tooltips.defaultExpiryDays" ) }
463- customClassName = "inner-switch" />
464- < span className = "separator" > { I18n . t ( "forms.fixed" ) } </ span >
465- < DatePicker
466- name = { "custom-expiry-date" }
467- id = { "custom-expiry-date" }
468- selected = { null }
469- dateFormat = { "dd/MM/yyyy" }
470- onChange = { ( ) => true }
471- showWeekNumbers
472- isClearable = { true }
473- showIcon = { true }
474- showYearDropdown = { true }
475- weekLabel = "Week"
476- disabled = { false }
477- todayButton = { null }
478- maxDate = { null }
479- minDate = { new Date ( ) }
480- />
481- </ div >
485+ < div className = "role-expiry-date-container" >
486+ < p className = "label" > { I18n . t ( "invitations.removeRole" ) } </ p >
487+ < div className = "role-expiry-date" >
488+ < Select className = "input-select-inner"
489+ classNamePrefix = { "select-inner" }
490+ value = { removeRoleBy }
491+ options = { removeByOptions }
492+ onChange = { toggleRemoveBy }
493+ />
494+ { removeRoleBy . value === "after" &&
495+ < >
496+ < InputField value = { role . defaultExpiryDays || DEFAULT_EXPIRY_DAYS }
497+ isInteger = { true }
498+ onChange = { e => {
499+ const val = parseInt ( e . target . value ) ;
500+ const defaultExpiryDays = Number . isInteger ( val ) && val > 0 ? val : 0 ;
501+ setRole (
502+ { ...role , defaultExpiryDays : defaultExpiryDays } )
503+ } }
504+ customClassName = "inner-switch" />
505+ < span > { I18n . t ( "invitations.days" ) } </ span >
506+ </ >
507+ }
508+ { removeRoleBy . value === "on" &&
509+ < DateField value = { role . defaultExpiryDate || futureDate ( 365 , new Date ( ) ) }
510+ onChange = { e => setRole ( { ...role , defaultExpiryDate : e } ) }
511+ showYearDropdown = { true }
512+ pastDatesAllowed = { config . pastDateAllowed }
513+ allowNull = { false }
514+ minDate = { futureDate ( 1 , new Date ( ) ) }
515+ />
516+ }
482517
483- }
518+ </ div >
519+ </ div >
520+ }
484521
485- { ( ! initial && ( isEmpty ( role . defaultExpiryDays ) || role . defaultExpiryDays < 1 ) ) &&
522+ { ( ! initial && removeRoleBy . value === "after" && ( isEmpty ( role . defaultExpiryDays ) || role . defaultExpiryDays < 1 ) ) &&
486523 < ErrorIndicator msg = { I18n . t ( "forms.required" , {
487524 attribute : I18n . t ( "roles.defaultExpiryDays" ) . toLowerCase ( )
488525 } ) } /> }
0 commit comments