Update settings dialog view/edit permissions for once-author-now-stud…

…ents

fuel/app/classes/materia/api/v1.php

@@ -350,7 +350,7 @@ static public function widget_instance_update($inst_id=null, $name=null, $qset=n
 				$access = Perm_Manager::get_all_users_explicit_perms($inst_id, Perm::INSTANCE)['widget_user_perms'];
 				foreach ($access as $user_id => $user_perms)
 				{
-					if (Perm_Manager::is_student($user_id))
+					if (Perm_Manager::is_student($user_id) && $user_id != $inst->user_id)
 					{
 						\Model_Notification::send_item_notification(\Model_user::find_current_id(), $user_id, Perm::INSTANCE, $inst_id, 'disabled', null);
 						Perm_Manager::clear_user_object_perms($inst_id, Perm::INSTANCE, $user_id);

src/components/attempts-slider.jsx

@@ -16,7 +16,7 @@ const AttemptsSlider = ({inst, parentState, setParentState}) => {
 	const sliderStop = e => {
 		setSliderStopped(true)
 	}
-	
+
 	// now that the slider value isn't actively changing, round the raw value to the nearest stop
 	// pass that rounded value up to the parent component
 	useEffect(() => {

src/components/my-widgets-scores.jsx

@@ -7,7 +7,7 @@ import LoadingIcon from './loading-icon'
 import NoScoreContent from'./no-score-content'
 import './my-widgets-scores.scss'
 
-const MyWidgetsScores = ({inst, beardMode}) => {
+const MyWidgetsScores = ({inst, beardMode, is_student}) => {
 	const [state, setState] = useState({
 		isShowingAll: false,
 		hasScores: false,
@@ -16,7 +16,7 @@ const MyWidgetsScores = ({inst, beardMode}) => {
 	const { data: currScores, isFetched } = useQuery({
 		queryKey: ['score-summary', inst.id],
 		queryFn: () => apiGetScoreSummary(inst.id),
-		enabled: !!inst && !!inst.id,
+		enabled: !!inst && !!inst.id && !is_student,
 		staleTime: Infinity,
 		placeholderData: []
 	})
@@ -61,7 +61,9 @@ const MyWidgetsScores = ({inst, beardMode}) => {
 	const handleShowOlderClick = () => setState({...state, isShowingAll: !state.isShowingAll})
 
 	let contentRender = <LoadingIcon />
-	if (isFetched) {
+	if (is_student) {
+		contentRender = <p>Students cannot view scores.</p>
+	} else if (isFetched) {
 		contentRender = <NoScoreContent scorable={parseInt(inst.widget.is_scorable)} isDraft={inst.is_draft} beardMode={beardMode} />
 		if (state.hasScores || containsStorage()) {
 			const semesterElements = displayedSemesters.map(semester => (
@@ -99,8 +101,8 @@ const MyWidgetsScores = ({inst, beardMode}) => {
 		<div className='scores'>
 			<h2>Student Activity</h2>
 			<span id='export_scores_button'
-				className={`aux_button ${inst.is_draft ? 'disabled' : ''}`}
-				onClick={openExport}>
+			className={`aux_button ${inst.is_draft ? 'disabled' : ''}`}
+			onClick={openExport}>
 				<span className='arrow_down'></span>
 				Export Options
 			</span>

src/components/my-widgets-scores.scss

@@ -10,6 +10,12 @@
 	overflow-y: auto;
 	padding-bottom: 1em;
 
+	&.limited_because_student {
+		filter: blur(3px);
+		user-select: none;
+		pointer-events: none;
+	}
+
 	#export_scores_button.disabled,
 	#export_scores_button.disabled:hover {
 		background: #d4d4d4;

src/components/my-widgets-selected-instance.jsx

@@ -499,7 +499,7 @@ const MyWidgetSelectedInstance = ({
 			{ warningDialogRender }
 			{ settingsDialogRender }
 			{ lockedDialogRender }
-			<MyWidgetsScores inst={inst} setInvalidLogin={setInvalidLogin} beardMode={beardMode}/>
+			<MyWidgetsScores inst={inst} setInvalidLogin={setInvalidLogin} beardMode={beardMode} is_student={currentUser.is_student}/>
 		</section>
 	)
 }

src/components/my-widgets-settings-dialog.jsx

@@ -95,6 +95,7 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
 			}
 		}
 	})
+	inst.is_embedded = true
 
 	// Used for initialization
 	useEffect(() => {
@@ -225,7 +226,7 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
 		const changes = state.formData.changes
 		const openClose = validateFormData(changes.dates, changes.times, changes.periods)
 		const errInfo = getErrorInfo(openClose[2]) // Creates an error message if needed
-		const errMsg = errInfo.msg
+		let errMsg = errInfo.msg
 		const errors = errInfo.errors
 		let form = {
 			inst_id: inst.id,
@@ -244,6 +245,10 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
 			form.attempts = -1
 		}
 
+		if (currentUser.is_student && form.attempts != inst.attempts && form.attempts != -1 ) {
+			errMsg = "Cannot set attempts to " + form.attempts + ". Students can keep the current number of attempts or set the attempt limits to Unlimited."
+		}
+
 		// Submits the form if there are no errors
 		if (errMsg.length === 0) {
 			let args = [
@@ -431,13 +436,20 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
 	}
 
 	let studentLimitWarningRender = null
-	if ( currentUser.is_student) {
+	if ( currentUser.is_student && currentUser.id != inst.user_id ) {
 		studentLimitWarningRender = (
 			<p className='student-role-notice'>
 				You are viewing a limited version of this page due to your current role as a student.
 				Students do not have permission to change certain settings like attempt limits or access levels.
 			</p>
 		)
+	} else if (currentUser.is_student && currentUser.id == inst.user_id) {
+		studentLimitWarningRender = (
+			<p className='student-role-notice'>
+				You are viewing a limited version of this page due to your current role as a student.
+				Owners who are students may only change access to Guest Mode and increase attempt limits to Unlimited.
+			</p>
+		)
 	}
 
 	const handlePeriodSelectFormDataChange = data => setState({...state, formData: data})
@@ -472,6 +484,16 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
 		)
 	}
 
+	// Viewing access settings
+	let canViewNormal 	= !inst.is_student_made
+	let canViewEmbedded = inst.is_embedded && !inst.is_student_made
+	let canViewGuest 	= !currentUser.is_student || currentUser.id == inst.user_id
+						|| inst.is_student_made
+	// Editing access settings
+	let canEditNormal 	= canViewNormal && !currentUser.is_student
+	let canEditGuest 	= !currentUser.is_student || currentUser.id == inst.user_id
+	let canEditEmbedded = canViewEmbedded && !currentUser.is_student
+
 	return (
 		<Modal onClose={onClose} ignoreClose={state.showWarning}>
 			<div className='settings-modal'>
@@ -481,21 +503,21 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
 				</div>
 				{ studentLimitWarningRender }
 				<ul className='attemptsPopup'>
-					<li className={`attempt-content ${currentUser.is_student ? 'hide' : ''}`}>
+					<li className={`attempt-content ${currentUser.is_student && currentUser.id != inst.user_id ? 'hide' : ''}`}>
 						<h3>Attempts</h3>
 						<AttemptsSlider key='slider-key' inst={inst} parentState={state} setParentState={setState}/>
 					</li>
 					<ul className='to-from'>
 						{ periodSelectElements }
 						<li className='access'>
 							<h3>Access</h3>
-							<ul className={`access-options ${inst.is_embedded ? 'embedded' : ''} ${currentUser.is_student && !inst.is_student_made ? 'limited-because-student' : ''}`}>
-								{currentUser.is_student && !inst.is_student_made ? <li className='studentWarningListItem student-role-notice'>Access settings are currently disabled because of your student status.</li> : ''}
-								<li className={`normal ${inst.is_student_made ? '' : 'show'}`}>
+							<ul className={`access-options ${inst.is_embedded ? 'embedded' : ''}`}>
+								{currentUser.is_student && !inst.is_student_made ? <li className='studentWarningListItem student-role-notice'>Access settings are currently limited because of your student status.</li> : ''}
+								<li className={`normal ${!canViewNormal ? '' : 'show'} ${!canEditNormal ? ' limited-because-student' : ''}`} aria-hidden={!canViewNormal}>
 									<input type='radio'
 										id='normal-radio'
 										value='normal'
-										disabled={currentUser.is_student}
+										disabled={!canEditNormal}
 										checked={state.formData.changes.access === 'normal'}
 										onChange={() => accessChange('normal')} />
 									<label htmlFor='normal-radio'>Normal</label>
@@ -505,11 +527,11 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
 										The widget can be distributed via URL, embed code, or as an assignment in your LMS.
 									</div>
 								</li>
-								<li className={`guest-mode ${inst.is_student_made ? 'disabled' : ''}`}>
+								<li className={`guest-mode ${!canEditGuest ? 'disabled' : ''} ${!canViewGuest ? ' limited-because-student ' : ''} `} aria-hidden={!canViewGuest}>
 									<input type='radio'
 										id='guest-radio'
 										value='guest'
-										disabled={currentUser.is_student && !inst.is_student_made}
+										disabled={!canEditGuest}
 										checked={state.formData.changes.access === 'guest'}
 										onChange={() => accessChange('guest')} />
 									<label htmlFor='guest-radio'>Guest Mode</label>
@@ -523,15 +545,15 @@ const MyWidgetsSettingsDialog = ({ onClose, inst, currentUser, otherUserPerms, o
 									</div>
 								</li>
 								<li id='embedded-only'
-									className={`embed-only ${inst.is_embedded && !inst.is_student_made ? 'show' : ''}`}>
+								className={`embed-only ${canViewEmbedded ? ' show' : ''} ${!canEditEmbedded ? ' limited-because-student disabled' : ''}`} aria-hidden={!canViewEmbedded}>
 									<input type='radio'
 										id='embed-radio'
 										value='embed'
-										disabled={currentUser.is_student || inst.is_student_made}
+										disabled={!canEditEmbedded}
 										checked={state.formData.changes.access === 'embed'}
 										onChange={() => {accessChange('embed')}}
 									/>
-									<label>Embedded Only</label>
+									<label htmlFor='embed-radio'>Embedded Only</label>
 									<div className='input-desc'>
 										This widget will not be playable outside of the classes
 										it is embedded within.

src/components/my-widgets-settings-dialog.scss

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	width: 680px;
-	max-height: 720px;
 	padding: 10px 10px 0 10px;
 
 	.top-bar {
@@ -276,15 +275,13 @@
 						}
 					}
 
-					&.limited-because-student {
+					.limited-because-student {
 
-						li.normal.show, li.guest-mode, li.embed-only {
-							filter: blur(3px);
-							user-select: none;
-							pointer-events: none;
-						}
+						filter: blur(3px);
+						user-select: none;
+						pointer-events: none;
 
-						li.studentWarningListItem {
+						&.studentWarningListItem {
 							margin: 0 0 15px 0;
 						}
 					}