TimeTrex Community Edition v16.2.0

interface/html5/views/my_account/notification/NotificationViewController.js

@@ -0,0 +1,566 @@
+export class NotificationViewController extends BaseViewController {
+	constructor( options = {} ) {
+		_.defaults( options, {
+			el: '#notification_view_container',
+
+			is_viewing: null,
+			status_id_array: null,
+			type_id_array: null
+
+		} );
+
+		super( options );
+	}
+
+	init( options ) {
+		//this._super('initialize', options );
+		this.edit_view_tpl = 'NotificationEditView.html';
+		this.permission_id = 'notification';
+		this.viewId = 'Notification';
+		this.script_name = 'NotificationView';
+		this.table_name_key = 'Notification';
+		this.navigate_link = '';
+		this.selected_payload = {};
+		this.context_menu_name = $.i18n._( 'Notifications' );
+		this.navigation_label = $.i18n._( 'Notification' );
+		this.api = TTAPI.APINotification;
+
+		this.is_viewing = false;
+
+		this.render();
+		this.buildContextMenu();
+
+		this.initData();
+	}
+
+	initOptions() {
+		this.initDropDownOption( 'type', 'type_id', this.api );
+		this.initDropDownOption( 'status', 'status_id', this.api );
+	}
+
+	onGridDblClickRow( e ) {
+		// shorten it's path as its only ever a view click
+		ProgressBar.showOverlay();
+		this.onViewClick();
+		this.setDefaultMenu( true );
+	}
+
+	getFilterColumnsFromDisplayColumns() {
+		var column_filter = {};
+
+		column_filter.id = true;
+		column_filter.object_id = true;
+		column_filter.payload_data = true;
+		column_filter.status_id = true;
+
+		// Error: Unable to get property 'getGridParam' of undefined or null reference
+		var display_columns = [];
+		if ( this.grid ) {
+			display_columns = this.grid.getGridParam( 'colModel' );
+		}
+
+		if ( display_columns ) {
+			var len = display_columns.length;
+
+			for ( var i = 0; i < len; i++ ) {
+				var column_info = display_columns[i];
+				column_filter[column_info.name] = true;
+			}
+		}
+
+		return column_filter;
+	}
+
+	setGridCellBackGround() {
+		var data = this.grid.getGridParam( 'data' );
+
+		//Error: TypeError: data is undefined in /interface/html5/framework/jquery.min.js?v=7.4.6-20141027-074127 line 2 > eval line 70
+		if ( !data ) {
+			return;
+		}
+
+		var len = data.length;
+
+		for ( var i = 0; i < len; i++ ) {
+			var item = data[i];
+
+			if ( item.status_id == 10 ) {
+				$( 'tr[id=\'' + item.id + '\'] td' ).css( 'font-weight', 'bold' );
+			}
+		}
+	}
+
+	getCustomContextMenuModel() {
+		var context_menu_model = {
+			groups: {
+				other: {
+					label: $.i18n._( 'Other' ),
+					id: this.script_name + 'other',
+					sort_order: 9000
+				},
+				mark: {
+					label: $.i18n._( 'Mark' ),
+					id: this.viewId + 'mark',
+					sort_order: 8000
+				}
+			},
+			exclude: [
+				'save_and_continue',
+				'save_and_next',
+				'save_and_new',
+				'save_and_copy',
+				'save',
+				'copy',
+				'copy_as_new',
+				'edit',
+				'new_add',
+				'add',
+				'mass_edit',
+				'export_excel',
+				'delete_and_next'
+
+			],
+			include: [
+				'view',
+				{
+					label: $.i18n._( 'Jump To' ),
+					id: 'navigate',
+					vue_icon: 'tticon tticon-north_east_black_24dp',
+					menu_align: 'right',
+					permission_result: true,
+					permission: 8200,
+					sort_order: 8100
+				},
+				{
+					label: '', //Empty label. vue_icon is displayed instead of text.
+					id: 'other_header',
+					menu_align: 'right',
+					action_group: 'other',
+					action_group_header: true,
+					vue_icon: 'tticon tticon-more_vert_black_24dp',
+				},
+				{
+					label: $.i18n._( 'Mark: Read' ),
+					id: 'read',
+					menu_align: 'left',
+					action_group: 'mark',
+					permission_result: true,
+					permission: null,
+					sort_order: 8000
+				},
+				{
+					label: $.i18n._( 'Mark: UnRead' ),
+					id: 'unread',
+					menu_align: 'left',
+					action_group: 'mark',
+					permission_result: true,
+					permission: null,
+					sort_order: 8100
+				},
+			]
+		};
+
+		return context_menu_model;
+	}
+
+	onCustomContextClick( id, context_btn ) {
+		switch ( id ) {
+			case 'close_misc':
+			case 'cancel':
+				this.onCancelClick();
+				break;
+			case 'read':
+				this.onReadClick();
+				break;
+			case 'unread':
+				this.onUnReadClick();
+				break;
+			case 'navigate':
+				this.onNavigateClick();
+				break;
+		}
+	}
+
+	oncancelClick() {
+		this.removeEditView();
+	}
+
+	onReadClick() {
+		var notification_ids = [];
+		if ( this.is_viewing && this.current_edit_record ) {
+			notification_ids.push( this.current_edit_record.id );
+		} else {
+			notification_ids = this.getGridSelectIdArray();
+		}
+
+		if ( notification_ids.length > 0 ) {
+			var $this = this;
+
+			this.api['setNotificationStatus']( notification_ids, 20, {
+				onResult: function( res ) {
+					if ( $this.is_viewing ) {
+						$this.removeEditView();
+					}
+					$this.search( false );
+				}
+			} );
+		}
+	}
+
+	onUnReadClick() {
+		var notification_ids = [];
+		if ( this.is_viewing && this.current_edit_record ) {
+			notification_ids.push( this.current_edit_record.id );
+		} else {
+			notification_ids = this.getGridSelectIdArray();
+		}
+
+		if ( notification_ids.length > 0 ) {
+			var $this = this;
+
+			this.api['setNotificationStatus']( notification_ids, 10, {
+				onResult: function( res ) {
+					if ( $this.is_viewing ) {
+						$this.removeEditView();
+					}
+					$this.search( false );
+				}
+			} );
+		}
+	}
+
+	onNavigateClick() {
+		if ( this.navigate_link !== '' ) {
+			// If viewing a notification the view needs to be closed for window.location to work correctly for links that open another onViewClick view.
+			if ( this.is_viewing == true ) {
+				this.onCancelClick();
+			}
+
+			if ( this.navigate_link === 'open_view' ) {
+				for ( let i = 0; i < this.selected_payload.timetrex.event.length; i++ ) {
+					if ( this.selected_payload.timetrex.event[i].type === 'open_view' || this.selected_payload.timetrex.event[i].type === 'open_view_immediate' ) {
+						NotificationConsumer.openViewLinkedToNotification( this.selected_payload.timetrex.event[i] );
+						break;
+					}
+				}
+			} else {
+				if ( this.selected_payload.link_target && this.selected_payload.link_target === '_blank' ) {
+					window.open(
+						this.navigate_link,
+						'_blank'
+					);
+				} else {
+					window.location = this.navigate_link;
+				}
+			}
+		}
+	}
+
+	setNavigateLink() {
+		this.navigate_link = '';
+
+		var data = this.grid.getGridParam( 'data' );
+
+		if ( !data ) {
+			return false;
+		}
+
+		var notification_ids = [];
+
+		if ( this.current_edit_record && this.current_edit_record.id ) {
+			notification_ids.push( this.current_edit_record.id );
+		} else {
+			notification_ids = this.getGridSelectIdArray();
+		}
+
+		if ( notification_ids.length === 1 ) {
+			var len = data.length;
+
+			for ( var i = 0; i < len; i++ ) {
+				var item = data[i];
+
+				if ( item.id === notification_ids[0] ) {
+					//Check if payload has an "open_view" or "open_view_immediate" event for opening and passing data to a edit view.
+					if ( item.payload_data.timetrex !== undefined && item.payload_data.timetrex.event !== undefined ) {
+						for ( let i = 0; i < item.payload_data.timetrex.event.length; i++ ) {
+							if ( item.payload_data.timetrex.event[i].type === 'open_view' || item.payload_data.timetrex.event[i].type === 'open_view_immediate' ) {
+								this.navigate_link = 'open_view';
+								this.selected_payload = item.payload_data;
+								return true;
+							}
+						}
+					} else if ( item.payload_data.link !== undefined && item.payload_data.link !== '' ) {
+						//Normal navigation link found.
+						this.navigate_link = item.payload_data.link;
+						this.selected_payload = item.payload_data;
+						return true;
+					}
+				}
+			}
+		}
+		this.navigate_link = '';
+		this.selected_payload = {};
+		return false;
+	}
+
+	initEditView() {
+		if ( this.current_edit_record && this.current_edit_record.status_id == 10 ) {
+			var $this = this;
+
+			//Set current notification being viewed as read.
+			$this.current_edit_record.status_id = 20;
+			this.api['setNotificationStatus']( [this.current_edit_record.id], 20, {
+				onResult: function( res ) {
+					$this.search( false );
+				}
+			} );
+		}
+
+		super.initEditView();
+	}
+
+	setCustomDefaultMenuIcon( id, context_btn, grid_selected_length ) {
+		switch ( id ) {
+			case 'read':
+				this.setDefaultMenuReadIcon( context_btn, grid_selected_length );
+				break;
+			case 'unread':
+				this.setDefaultMenuUnReadIcon( context_btn, grid_selected_length );
+				break;
+			case 'navigate':
+				this.setDefaultMenuNavigateIcon( context_btn, grid_selected_length );
+				break;
+		}
+	}
+
+	setCustomEditMenuIcon( id, context_btn ) {
+		switch ( id ) {
+			case'navigate':
+				this.setDefaultMenuNavigateIcon( context_btn );
+				break;
+			case'read':
+				this.setEditMenuReadIcon( context_btn );
+				break;
+			case'unread':
+				this.setEditMenuUnReadIcon( context_btn );
+				break;
+		}
+	}
+
+	setDefaultMenuDeleteAndNextIcon( context_btn, grid_selected_length, pId ) {
+		if ( this.is_viewing ) {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setEditMenuDeleteAndNextIcon( context_btn, grid_selected_length, pId ) {
+		if ( this.is_viewing ) {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setDefaultMenuDeleteIcon( context_btn, grid_selected_length, pId ) {
+
+		if ( grid_selected_length >= 1 ) {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setEditMenuDeleteIcon( context_btn, grid_selected_length, pId ) {
+
+		if ( this.is_viewing ) {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setDefaultMenuViewIcon( context_btn, grid_selected_length, pId ) {
+
+		if ( this.is_viewing == false && grid_selected_length === 1 ) {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setDefaultMenuCancelIcon( context_btn, pId ) {
+		if ( this.is_viewing ) {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setDefaultMenuReadIcon( context_btn, grid_selected_length, pId ) {
+		if ( grid_selected_length >= 1 ) {
+			//Check if any notifications are unread.
+			var selected_items = this.getSelectedItems();
+			for ( var i = 0; i < selected_items.length; i++ ) {
+				if ( selected_items[i] !== null && selected_items[i].status_id == 10 ) {
+					ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+					return;
+				}
+			}
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setDefaultMenuUnReadIcon( context_btn, grid_selected_length, pId ) {
+		if ( grid_selected_length >= 1 ) {
+			//Check if any notifications are read.
+			var selected_items = this.getSelectedItems();
+			for ( var i = 0; i < selected_items.length; i++ ) {
+				if ( selected_items[i] !== null && selected_items[i].status_id == 20 ) {
+					ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+					return;
+				}
+			}
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setDefaultMenuNavigateIcon( context_btn, grid_selected_length, pId ) {
+		if ( this.is_viewing == true || grid_selected_length === 1 ) {
+			// check a link is set in the payload data
+			if ( this.setNavigateLink() == true ) {
+				ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+			} else {
+				ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+			}
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setEditMenuReadIcon( context_btn ) {
+		//Because the notification view closes when clicking "Mark Read / Unread" this icon will always be disabled as the message is always read when viewed.
+		//But may be needed in the future.
+		if ( this.current_edit_record && this.current_edit_record.status_id == 10 ) {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	setEditMenuUnReadIcon( context_btn ) {
+		if ( this.current_edit_record && this.current_edit_record.status_id == 20 ) {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+		} else {
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+		}
+	}
+
+	buildEditViewUI() {
+
+		super.buildEditViewUI();
+		var $this = this;
+
+		var tab_model = {
+			'tab_notification': { 'label': $.i18n._( 'Notification' ) }
+		};
+		this.setTabModel( tab_model );
+
+		var form_item_input;
+
+		this.navigation.AComboBox( {
+			api_class: TTAPI.APINotification,
+			id: this.script_name + '_navigation',
+			allow_multiple_selection: false,
+			layout_name: 'global_notification',
+			navigation_mode: true,
+			show_search_inputs: true
+		} );
+
+		this.setNavigation();
+
+		//Tab 0 start
+		var tab_notification = $( '#tab_notification' );
+
+		var tab_notification_column1 = tab_notification.find( '.first-column' );
+
+		this.edit_view_tabs[0] = [];
+
+		this.edit_view_tabs[0].push( tab_notification_column1 );
+
+		// Type
+		form_item_input = Global.loadWidgetByName( FormItemType.COMBO_BOX );
+		form_item_input.TComboBox( { field: 'type_id' } );
+		form_item_input.setSourceData( Global.addFirstItemToArray( $this.type_array ) );
+		this.addEditFieldToColumn( $.i18n._( 'Type' ), form_item_input, tab_notification_column1, '' );
+
+		// Date
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'created_date' } );
+		this.addEditFieldToColumn( $.i18n._( 'Date' ), form_item_input, tab_notification_column1, '' );
+
+		// Title
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'title_long' } );
+		this.addEditFieldToColumn( $.i18n._( 'Title' ), form_item_input, tab_notification_column1, '' );
+
+		// Body
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'body_long_text' } );
+		form_item_input.off( 'click' ).on( "click", function() {
+			$this.onNavigateClick();
+		});
+		this.addEditFieldToColumn( $.i18n._( 'Message' ), form_item_input, tab_notification_column1, '' );
+	}
+
+	buildSearchFields() {
+		super.buildSearchFields();
+		this.search_fields = [
+			new SearchField( {
+				label: $.i18n._( 'Status' ),
+				in_column: 1,
+				field: 'status_id',
+				multiple: true,
+				basic_search: true,
+				adv_search: false,
+				layout_name: 'global_option_column',
+				form_item_type: FormItemType.AWESOME_BOX
+			} ),
+			new SearchField( {
+				label: $.i18n._( 'Type' ),
+				in_column: 1,
+				field: 'type_id',
+				multiple: true,
+				basic_search: true,
+				adv_search: false,
+				layout_name: 'global_option_column',
+				form_item_type: FormItemType.AWESOME_BOX
+			} ),
+			new SearchField( {
+				label: $.i18n._( 'Title' ),
+				in_column: 1,
+				field: 'title_long',
+				multiple: true,
+				basic_search: true,
+				adv_search: false,
+				form_item_type: FormItemType.TEXT_INPUT
+			} )
+
+		];
+	}
+
+	// Search is triggered when a notification is marked as read, unread or deleted.
+	// Search also pulls in new notifications if any have been created which makes it a good time to update the notification bell.
+	search( set_default_menu, page_action, page_number, callBack ) {
+		super.search( set_default_menu, page_action, page_number, callBack );
+		if ( Global.UNIT_TEST_MODE == false ) {
+			NotificationConsumer.getUnreadNotifications();
+		}
+	}
+
+}

interface/html5/views/my_account/password/ChangePasswordViewController.js

@@ -0,0 +1,582 @@
+export class ChangePasswordViewController extends BaseViewController {
+	constructor( options = {} ) {
+		_.defaults( options, {
+			showPassword: null,
+
+			showPhonePassword: null,
+			mfa_type_array: null,
+			has_authenticated: false,
+			api_authentication: null,
+			api_misc: null,
+			api_notification_device_token: null,
+
+			result_data: []
+		} );
+
+		super( options );
+	}
+
+	init( options ) {
+
+		//this._super('initialize', options );
+
+		this.permission_id = 'user';
+		this.viewId = 'ChangePassword';
+		this.script_name = 'ChangePasswordView';
+		this.context_menu_name = $.i18n._( 'Passwords / Security' );
+		this.api = TTAPI.APIUser;
+		this.api_authentication = TTAPI.APIAuthentication;
+		this.api_notification_device_token = TTAPI.APINotificationDeviceToken;
+		this.api_misc = TTAPI.APIMisc;
+
+		this.initPermission();
+
+		this.render();
+
+		this.initData();
+	}
+
+	initOptions( callback ) {
+		var options = [{ option_name: 'mfa_type' },];
+
+		this.initDropDownOptions( options, callback );
+	}
+
+	initPermission() {
+		super.initPermission();
+
+		if ( PermissionManager.validate( 'user', 'edit_own_password' ) ) {
+			this.showPassword = true;
+		} else {
+			this.showPassword = false;
+		}
+
+		if ( PermissionManager.validate( 'user', 'edit_own_phone_password' ) ) {
+			this.showPhonePassword = true;
+		} else {
+			this.showPhonePassword = false;
+		}
+	}
+
+	render() {
+		super.render();
+	}
+
+	getCustomContextMenuModel() {
+		var context_menu_model = {
+			groups: {
+				trusted: {
+					label: $.i18n._( 'Trusted Device' ), id: this.viewId + 'trusted', sort_order: 8000
+				}
+			},
+			exclude: ['default'],
+			include: [
+				'save',
+				'cancel',
+				{
+					label: '', //Empty label. vue_icon is displayed instead of text.
+					id: 'other_header',
+					menu_align: 'right',
+					action_group: 'other',
+					action_group_header: true,
+					vue_icon: 'tticon tticon-more_vert_black_24dp',
+				},
+				{
+					label: $.i18n._( 'Reauthenticate' ),
+					id: 'reauthenticate',
+					menu_align: 'right',
+					action_group: 'other'
+				},
+				{
+					label: $.i18n._( 'Register API Key' ),
+					id: 'register_api_key',
+					menu_align: 'right',
+					action_group: 'other'
+				},
+				{
+					label: $.i18n._( 'Remove All Trusted Devices' ),
+					id: 'remove_all_trusted_devices',
+					menu_align: 'right',
+					action_group: 'other'
+				},
+				{
+					label: $.i18n._( 'Logout All Sessions' ),
+					id: 'logout_all_sessions',
+					menu_align: 'right',
+					action_group: 'other'
+				},
+			]
+		};
+
+		return context_menu_model;
+	}
+
+	onCustomContextClick( id ) {
+		switch ( id ) {
+			case 'remove_all_trusted_devices':
+				this.removeAllTrustedDevices();
+				break;
+			case 'reauthenticate':
+				Global.showAuthenticationModal( this.viewId, 'user_name_multi_factor', {
+					step: 'password',
+					type_id: 10,
+					user_action_message: ''
+				}, true, ( result ) => {
+					Global.hideAuthenticationModal();
+					if ( result.status === true ) {
+						this.has_authenticated = true;
+					}
+				} );
+				break;
+			case 'register_api_key':
+				this.registerAPIKey();
+				break;
+			case 'logout_all_sessions':
+				this.logoutAllSessions();
+				break;
+		}
+	}
+
+	registerAPIKey() {
+		this.api_authentication.registerAPIKeyForCurrentUser( {
+			onResult: ( result ) => {
+				if ( result.isValid() ) {
+					var key = result.getResult();
+					TAlertManager.showFlexAlert( $.i18n._( 'API Key' ), $.i18n._( 'Below is a new API key for ' ) + LocalCacheData.getLoginUser().user_name + $.i18n._( ' Please copy or write it down for safe keeping, as you will not be able to see it again after this.' ), 'text', key, null, 345, $.i18n._( 'Close' ) );
+				}
+			}
+		} );
+	}
+
+	logoutAllSessions() {
+		TAlertManager.showConfirmAlert( $.i18n._( 'Which sessions do you want to log out? Note that your current session will not be logged out.' ), $.i18n._( 'Logout' ), ( flag ) => {
+			this.api_authentication.logoutAllSessions( !flag, {
+				onResult: ( result ) => {
+					if ( result.isValid() ) {
+						TAlertManager.showAlert( $.i18n._( 'Sessions have been logged out.' ) );
+					}
+				}
+			} );
+		}, $.i18n._( 'Browser/App' ), $.i18n._( '+API Keys' ) );
+	}
+
+	removeAllTrustedDevices() {
+		this.api_authentication.removeAllTrustedDevices( {
+			onResult: ( result ) => {
+				TAlertManager.showAlert( $.i18n._( 'All trusted devices have been removed.' ), $.i18n._( 'Trusted Device' ) );
+			}
+		} );
+	}
+
+	saveValidate( context_btn, p_id ) {
+		// always show
+	}
+
+	setCurrentEditRecordData() {
+		//Set current edit record data to all widgets
+
+		for ( var key in this.current_edit_record ) {
+			var widget = this.edit_view_ui_dic[key];
+			if ( Global.isSet( widget ) ) {
+				switch ( key ) {
+					case 'user_name':
+						widget.setValue( LocalCacheData.loginUser.user_name );
+						break;
+					case 'phone_id':
+
+						if ( !LocalCacheData.loginUser.phone_id ) {
+							widget.setValue( $.i18n._( 'Not Specified' ) );
+						} else {
+							widget.setValue( LocalCacheData.loginUser.phone_id );
+						}
+
+						break;
+					default:
+						widget.setValue( this.current_edit_record[key] );
+						break;
+				}
+
+			}
+		}
+
+		this.collectUIDataToCurrentEditRecord();
+		this.setEditViewDataDone();
+	}
+
+	openEditView() {
+
+		var $this = this;
+
+		if ( $this.edit_only_mode && ( this.showPassword || this.showPhonePassword ) ) {
+
+			$this.buildContextMenu();
+
+			$this.initOptions( () => {
+				if ( !$this.edit_view ) {
+					$this.initEditViewUI( 'ChangePassword', 'ChangePasswordEditView.html' );
+				}
+
+				$this.getUserPasswordData( function( result ) {
+					$this.current_edit_record = result;
+					$this.initEditView();
+				} );
+			} );
+
+		}
+	}
+
+	getUserPasswordData( callBack ) {
+		var $this = this;
+		var filter = {};
+		filter.filter_data = {};
+		filter.filter_data.id = LocalCacheData.loginUser.id;
+		filter.filter_columns = { id: true, mfa_type_id: true };
+
+		$this.api['get' + $this.api.key_name]( filter, {
+			onResult: function( result ) {
+				var result_data = result.getResult();
+				if ( Global.isSet( result_data[0] ) ) {
+					callBack( result_data[0] );
+				}
+			}
+		} );
+	}
+
+	checkTabPermissions( tab ) {
+		var retval = false;
+
+		switch ( tab ) {
+			case 'tab_web_password':
+				if ( this.showPassword ) {
+					retval = true;
+				}
+				break;
+			case 'tab_quick_punch_password':
+				if ( this.showPhonePassword ) {
+					retval = true;
+				}
+				break;
+			default:
+				retval = super.checkTabPermissions( tab );
+				break;
+		}
+
+		return retval;
+	}
+
+	onFormItemChange( target, doNotValidate ) {
+
+		this.setIsChanged( target );
+		this.setMassEditingFieldsWhenFormChange( target );
+
+		var key = target.getField();
+		//this.current_edit_record[key] = target.getValue();
+		var c_value = target.getValue();
+
+		switch ( key ) {
+			case 'mfa_type_id':
+				this.onMfaTypeChange( c_value );
+				break;
+			default:
+				break;
+		}
+
+		this.current_edit_record[key] = c_value;
+	}
+
+	toggleSaveButton( show_button ) {
+		var context_menu_array = ContextMenuManager.getMenuModelByMenuId( this.determineContextMenuMountAttributes().id );
+
+		context_menu_array.forEach( ( context_btn ) => {
+			if ( context_btn.id === 'save' ) {
+				ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, show_button );
+			}
+		} );
+	}
+
+	onMfaTypeChange( mfa_type_id ) {
+		//Disable "Save" button as the user may quickly press it before the QR code is generated, causing them to miss instructions.
+		this.toggleSaveButton( false );
+
+		//Validate current user to make sure mfa settings can be saved
+		this.api.validateUser( { id: LocalCacheData.getLoginUser().id }, {
+			onResult: ( result ) => {
+				if ( result.isValid() == false ) {
+					let details = result.getDetails();
+					let error_string = $.i18n._( 'Validation Error. Unable to turn on Multifactor Authentication.<br><br>' );
+
+					if ( Global.isArray( details ) || typeof details === 'object' ) {
+						error_string += Global.convertValidationErrorToString( details );
+					} else {
+						error_string += result.getDescription();
+					}
+
+					this.toggleSaveButton( true );
+					TAlertManager.showAlert( error_string, $.i18n._( 'Error' ) );
+				} else {
+					if ( mfa_type_id === 0 ) {
+						this.toggleSaveButton( true );
+						return; //Do not show MFA instructions if MFA is being turned off
+					}
+
+					this.showMfaInstructions( true );
+				}
+
+				//If we need to check app token exists
+				// let data = {};
+				// data.filter_data = { id: LocalCacheData.getLoginUser().id };
+				// this.api_notification_device_token.getNotificationDeviceToken( data, {
+				// 	onResult: ( res ) => {
+				// 		result = res.getResult();
+				// 		if ( Array.isArray( result ) && result.length > 0 ) {
+				// 			this.showMfaInstructions( true );
+				// 		} else {
+				// 			this.showMfaInstructions( false );
+				// 		}
+				// 	}
+				// } );
+				// }
+			}
+		} );
+	}
+
+	showMfaInstructions( has_notification_device_token ) {
+		this.api_misc.generateQRCode( JSON.stringify( {
+			server_url: Global.getBaseURL( null, false ).replace( '/interface/html5/', '' ), //App does not need the /interface/html5/ part of the URL
+			user_name: LocalCacheData.getLoginUser().user_name
+		} ), {
+			onResult: ( res ) => {
+				this.toggleSaveButton( true );
+
+				let result = res.getResult();
+				TAlertManager.showModalAlert( 'multifactor_authentication', 'download_instructions', ( flag ) => {
+					if ( flag === true ) {
+						this.onSaveClick();
+					}
+				}, result );
+			}
+		} );
+	}
+
+	onSaveClick( ignoreWarning ) {
+		var $this = this;
+
+		var record = this.current_edit_record;
+		LocalCacheData.current_doing_context_action = 'save';
+		if ( !Global.isSet( ignoreWarning ) ) {
+			ignoreWarning = false;
+		}
+		this.clearErrorTips();
+
+		var key = this.getEditViewTabIndex();
+		if ( key === 0 ) {
+			$this.saveWebPassword( record, function( result ) {
+				if ( result.isValid() ) {
+
+					$this.removeEditView();
+				} else {
+					$this.showErrorTips( result, 0 );
+				}
+
+			} );
+		} else if ( key === 1 ) {
+			$this.savePhonePassword( record, function( result ) {
+				if ( result.isValid() ) {
+
+					$this.removeEditView();
+				} else {
+					$this.showErrorTips( result, 1 );
+				}
+			} );
+		} else if ( key === 2 ) {
+			$this.saveMultiFactorSettings( record, function( result ) {
+				if ( result.isValid() ) {
+
+					$this.removeEditView();
+				} else {
+					$this.showErrorTips( result, 1 );
+				}
+			} );
+		}
+	}
+
+	showErrorTips( result, index ) {
+
+		var details = result.getDetails();
+		var error_list = details;
+		var tabKey;
+
+		var found_in_current_tab = false;
+		for ( var key in error_list ) {
+			if ( parseInt( index ) === 0 ) {
+
+				if ( this.current_edit_record['web.password'] ) {
+					tabKey = 'web.' + key;
+				} else {
+					continue;
+				}
+
+			}
+
+			if ( parseInt( index ) === 1 ) {
+				if ( this.current_edit_record['phone.password'] ) {
+					tabKey = 'phone.' + key.replace( 'phone_', '' );
+				} else {
+					continue;
+				}
+
+			}
+
+			if ( !error_list.hasOwnProperty( key ) ) {
+				continue;
+			}
+
+			if ( !Global.isSet( this.edit_view_ui_dic[tabKey] ) ) {
+				continue;
+			}
+
+			if ( this.edit_view_ui_dic[tabKey].is( ':visible' ) ) {
+				this.edit_view_ui_dic[tabKey].setErrorStyle( error_list[key], true );
+				found_in_current_tab = true;
+			}
+
+			this.edit_view_error_ui_dic[tabKey] = this.edit_view_ui_dic[tabKey];
+
+		}
+
+		if ( !found_in_current_tab ) {
+
+			this.showEditViewError( result );
+
+		}
+	}
+
+	saveWebPassword( record, callBack ) {
+		var $this = this;
+		this.api['changePassword']( record['web.password'], record['web.password2'], 'user_name', {
+			onResult: function( result ) {
+				callBack( result );
+			}
+		} );
+	}
+
+	savePhonePassword( record, callBack ) {
+		var $this = this;
+		this.api['changePassword']( record['phone.password'], record['phone.password2'], 'quick_punch_id', {
+			onResult: function( result ) {
+				callBack( result );
+			}
+		} );
+	}
+
+	saveMultiFactorSettings( record, callBack ) {
+		this.api.setMultiFactorSettings( this.current_edit_record.mfa_type_id, {
+			onResult: ( result ) => {
+				callBack( result );
+			}
+		} );
+	}
+
+	buildEditViewUI() {
+		var $this = this;
+		super.buildEditViewUI();
+
+		var tab_model = {
+			'tab_web_password': { 'label': $.i18n._( 'Web Password' ) },
+			'tab_quick_punch_password': { 'label': $.i18n._( 'Quick Punch Password' ) },
+			'tab_multifactor': {
+				'label': $.i18n._( 'Multifactor Authentication' ),
+				init_callback: 'initMultifactorView',
+				html_template: this.getMultifactorTabHtml()
+			},
+		};
+		this.setTabModel( tab_model );
+
+		//Tab 0 start
+
+		var tab_web_password = this.edit_view_tab.find( '#tab_web_password' );
+
+		var tab_web_password_column1 = tab_web_password.find( '.first-column' );
+
+		this.edit_view_tabs[0] = [];
+
+		this.edit_view_tabs[0].push( tab_web_password_column1 );
+
+		// User Name
+		var form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'user_name' } );
+		this.addEditFieldToColumn( $.i18n._( 'User Name' ), form_item_input, tab_web_password_column1, '' );
+
+		// New Password
+		form_item_input = Global.loadWidgetByName( FormItemType.PASSWORD_INPUT );
+		form_item_input.TPasswordInput( { field: 'web.password', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'New Password' ), form_item_input, tab_web_password_column1 );
+
+		// New Password(confirm)
+		form_item_input = Global.loadWidgetByName( FormItemType.PASSWORD_INPUT );
+		form_item_input.TPasswordInput( { field: 'web.password2', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'New Password (Confirm)' ), form_item_input, tab_web_password_column1, '' );
+
+		//Tab 1 start
+
+		var tab_quick_punch_password = this.edit_view_tab.find( '#tab_quick_punch_password' );
+
+		var tab_quick_punch_password_column1 = tab_quick_punch_password.find( '.first-column' );
+
+		this.edit_view_tabs[1] = [];
+
+		this.edit_view_tabs[1].push( tab_quick_punch_password_column1 );
+
+		// Quick Punch ID
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'phone_id' } );
+		this.addEditFieldToColumn( $.i18n._( 'Quick Punch ID' ), form_item_input, tab_quick_punch_password_column1, '' );
+
+		// New Password
+		form_item_input = Global.loadWidgetByName( FormItemType.PASSWORD_INPUT );
+		form_item_input.TPasswordInput( { field: 'phone.password', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'New Quick Punch Password' ), form_item_input, tab_quick_punch_password_column1 );
+
+		// New Password(confirm)
+		form_item_input = Global.loadWidgetByName( FormItemType.PASSWORD_INPUT );
+		form_item_input.TPasswordInput( { field: 'phone.password2', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'New Quick Punch Password (Confirm)' ), form_item_input, tab_quick_punch_password_column1, '' );
+
+		//Tab 2 start
+
+		var tab_multifactor = this.edit_view_tab.find( '#tab_multifactor' );
+		var tab_multifactor_column1 = tab_multifactor.find( '.first-column' );
+
+		this.edit_view_tabs[1] = [];
+		this.edit_view_tabs[1].push( tab_multifactor_column1 );
+
+		// Multifactor Authentication Type
+		form_item_input = Global.loadWidgetByName( FormItemType.COMBO_BOX );
+		form_item_input.TComboBox( { field: 'mfa_type_id' } );
+		form_item_input.setSourceData( this.mfa_type_array );
+		this.addEditFieldToColumn( $.i18n._( 'Multifactor Type' ), form_item_input, tab_multifactor_column1, '' );
+	}
+
+	initMultifactorView() {
+		if ( ( Global.getProductEdition() >= 15 ) ) {
+			this.edit_view_tab.find( '#tab_multifactor' ).find( '.first-column' ).css( 'display', 'block' );
+			this.edit_view.find( '.permission-defined-div' ).css( 'display', 'none' );
+		} else {
+			this.edit_view_tab.find( '#tab_multifactor' ).find( '.first-column' ).css( 'display', 'none' );
+			this.edit_view.find( '.permission-defined-div' ).css( 'display', 'block' );
+			this.edit_view.find( '.permission-message' ).html( Global.getUpgradeMessage() );
+		}
+	}
+
+	getMultifactorTabHtml() {
+		return `
+		<div id="tab_multifactor" class="edit-view-tab-outside">
+			<div class="edit-view-tab" id="tab_multifactor_content_div">
+				<div class="first-column full-width-column"></div>
+				<div class="save-and-continue-div permission-defined-div">
+					<span class="message permission-message"></span>
+				</div>
+			</div>
+		</div>`;
+	}
+}

interface/html5/views/my_account/user_contact/LoginUserContactViewController.js

@@ -0,0 +1,297 @@
+export class LoginUserContactViewController extends BaseViewController {
+	constructor( options = {} ) {
+		_.defaults( options, {
+			sex_array: null,
+
+			company_api: null,
+
+
+		} );
+
+		super( options );
+	}
+
+	init( options ) {
+
+		//this._super('initialize', options );
+
+		this.permission_id = 'user';
+		this.viewId = 'LoginUserContact';
+		this.script_name = 'LoginUserContactView';
+		this.table_name_key = 'bank_account';
+		this.context_menu_name = $.i18n._( 'Contact Information' );
+		this.api = TTAPI.APIUser;
+		this.company_api = TTAPI.APICompany;
+
+		this.render();
+		this.buildContextMenu();
+
+		this.initData();
+	}
+
+	render() {
+		super.render();
+	}
+
+	initOptions( callBack ) {
+
+		var options = [
+			{ option_name: 'sex', field_name: 'sex_id', api: this.api }
+		];
+
+		this.initDropDownOptions( options, function( result ) {
+			if ( callBack ) {
+				callBack( result ); // First to initialize drop down options, and then to initialize edit view UI.
+			}
+		} );
+	}
+
+	getCustomContextMenuModel() {
+		var context_menu_model = {
+			exclude: ['default'],
+			include: [
+				'save',
+				'cancel'
+			]
+		};
+
+		return context_menu_model;
+	}
+
+	getUserContactData( callBack ) {
+		var $this = this;
+		var filter = {};
+		filter.filter_data = {};
+		filter.filter_data.id = LocalCacheData.loginUser.id;
+
+		$this.api['get' + $this.api.key_name]( filter, {
+			onResult: function( result ) {
+				var result_data = result.getResult();
+				if ( Global.isSet( result_data[0] ) ) {
+					callBack( result_data[0] );
+				}
+
+			}
+		} );
+	}
+
+	openEditView() {
+		var $this = this;
+
+		if ( $this.edit_only_mode ) {
+
+			$this.initOptions( function( result ) {
+				if ( !$this.edit_view ) {
+					$this.initEditViewUI( 'LoginUserContact', 'LoginUserContactEditView.html' );
+				}
+
+				$this.getUserContactData( function( result ) {
+					// Waiting for the API returns data to set the current edit record.
+					$this.current_edit_record = result;
+
+					$this.initEditView();
+
+				} );
+
+			} );
+
+		}
+	}
+
+	setCurrentEditRecordData() {
+		//Set current edit record data to all widgets
+		for ( var key in this.current_edit_record ) {
+
+			if ( !this.current_edit_record.hasOwnProperty( key ) ) {
+				continue;
+			}
+
+			var widget = this.edit_view_ui_dic[key];
+			if ( Global.isSet( widget ) ) {
+				switch ( key ) {
+					case 'country': //popular case
+//						this.eSetProvince( this.current_edit_record[key] );
+						widget.setValue( this.current_edit_record[key] );
+						break;
+					case 'sin':
+						if ( !this.current_edit_record[key] ) {
+							widget.setValue( 'N/A' );
+						} else {
+							widget.setValue( this.current_edit_record[key] );
+						}
+						break;
+					default:
+						widget.setValue( this.current_edit_record[key] );
+						break;
+				}
+
+			}
+		}
+
+		this.collectUIDataToCurrentEditRecord();
+		this.setEditViewDataDone();
+	}
+
+	onSaveClick( ignoreWarning ) {
+		ignoreWarning = true; //When login user is saving their own contact information, always ignore warnings because in most cases there isn't much they can do anyways.
+		super.onSaveClick( ignoreWarning );
+	}
+
+	setErrorMenu() {
+
+		var context_menu_array = ContextMenuManager.getMenuModelByMenuId( this.determineContextMenuMountAttributes().id );
+		var len = context_menu_array.length;
+
+		for ( var i = 0; i < len; i++ ) {
+			let context_btn = context_menu_array[i];
+			let id = context_menu_array[i].id;
+			ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
+
+			switch ( id ) {
+				case 'cancel':
+					break;
+				default:
+					ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
+					break;
+			}
+
+		}
+	}
+
+	buildEditViewUI() {
+		var $this = this;
+		super.buildEditViewUI();
+
+		var tab_model = {
+			'tab_contact_information': { 'label': $.i18n._( 'Contact Information' ), 'is_multi_column': true },
+		};
+		this.setTabModel( tab_model );
+
+		//Tab 0 start
+
+		var tab_contact_information = this.edit_view_tab.find( '#tab_contact_information' );
+
+		var tab_contact_information_column1 = tab_contact_information.find( '.first-column' );
+
+		this.edit_view_tabs[0] = [];
+
+		this.edit_view_tabs[0].push( tab_contact_information_column1 );
+
+		// First Name
+		var form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'first_name' } );
+		this.addEditFieldToColumn( $.i18n._( 'First Name' ), form_item_input, tab_contact_information_column1, '' );
+
+		// Middle Name
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+
+		form_item_input.TText( { field: 'middle_name' } );
+		this.addEditFieldToColumn( $.i18n._( 'Middle Name' ), form_item_input, tab_contact_information_column1 );
+
+		// Last Name
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+
+		form_item_input.TText( { field: 'last_name' } );
+		this.addEditFieldToColumn( $.i18n._( 'Last Name' ), form_item_input, tab_contact_information_column1 );
+
+		// Home Address (Line 1)
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'address1', width: '100%' } );
+		this.addEditFieldToColumn( $.i18n._( 'Home Address(Line 1)' ), form_item_input, tab_contact_information_column1 );
+		form_item_input.parent().width( '45%' );
+
+		// //Home Address(Line 2)
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'address2', width: '100%' } );
+		this.addEditFieldToColumn( $.i18n._( 'Home Address(Line 2)' ), form_item_input, tab_contact_information_column1 );
+		form_item_input.parent().width( '45%' );
+
+		// City
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'city' } );
+		this.addEditFieldToColumn( $.i18n._( 'City' ), form_item_input, tab_contact_information_column1 );
+
+		// Country
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'country', set_empty: true } );
+		this.addEditFieldToColumn( $.i18n._( 'Country' ), form_item_input, tab_contact_information_column1 );
+
+		// Province/State
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'province', set_empty: true } );
+		this.addEditFieldToColumn( $.i18n._( 'Province/State' ), form_item_input, tab_contact_information_column1 );
+
+		// Postal/ZIP Code
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'postal_code', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'Postal/ZIP Code' ), form_item_input, tab_contact_information_column1, '' );
+
+		var tab_contact_information_column2 = tab_contact_information.find( '.second-column' );
+
+		this.edit_view_tabs[0].push( tab_contact_information_column2 );
+
+		// Gender
+		form_item_input = Global.loadWidgetByName( FormItemType.COMBO_BOX );
+		form_item_input.TComboBox( { field: 'sex_id' } );
+		form_item_input.setSourceData( $this.sex_array );
+		this.addEditFieldToColumn( $.i18n._( 'Gender' ), form_item_input, tab_contact_information_column2 );
+
+		// Work Phone
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'work_phone', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'Work Phone' ), form_item_input, tab_contact_information_column2, '' );
+
+		// Work Phone Ext
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'work_phone_ext', width: 100 } );
+		this.addEditFieldToColumn( $.i18n._( 'Work Phone Ext' ), form_item_input, tab_contact_information_column2 );
+
+		// Home Phone
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'home_phone', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'Home Phone' ), form_item_input, tab_contact_information_column2 );
+
+		// Mobile Phone
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'mobile_phone', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'Mobile Phone' ), form_item_input, tab_contact_information_column2 );
+
+		// Fax
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'fax_phone', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'Fax' ), form_item_input, tab_contact_information_column2 );
+
+		// Work Email
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'work_email', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'Work Email' ), form_item_input, tab_contact_information_column2 );
+
+		// Home Email
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
+
+		form_item_input.TTextInput( { field: 'home_email', width: 200 } );
+		this.addEditFieldToColumn( $.i18n._( 'Home Email' ), form_item_input, tab_contact_information_column2 );
+
+		//Birth Date
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+
+		form_item_input.TText( { field: 'birth_date' } );
+		this.addEditFieldToColumn( $.i18n._( 'Birth Date' ), form_item_input, tab_contact_information_column2 );
+
+		// SIN/SSN
+		form_item_input = Global.loadWidgetByName( FormItemType.TEXT );
+		form_item_input.TText( { field: 'sin' } );
+		this.addEditFieldToColumn( $.i18n._( 'SIN/SSN' ), form_item_input, tab_contact_information_column2, '' );
+
+	}
+
+}