My Settings - Done
Description
This is the "My Settings" tab, it differs from the "User Settings" tab in Edit User in several ways.
- General subtab: This page allows modification of the email address and has an inline edit process. (requires email verification as well). The version in Edit User displays the email address in a disabled input, but admins cannot change the email address of users (as it requires verification)
- Uploads subtab: This page allows users to rename and delete files they've uploaded such as avatar images.
- Security subtab: The Security subtab is entirely different for Edit Profile vs Edit User
- This version has a button to launch the Change Password modal so the user can change their password in the app without having to do it from an emailed link.
- There is no option to change one's own role in the Workspace
- There is no option to remove the user from the workspace
- There are 2FA options for when we roll out 2FA.
HTML
<div data-w-tab="My Settings" class="tab-pane w-tab-pane w--tab-active">
<div data-current="General" data-easing="ease" data-duration-in="300" data-duration-out="100" class="sub-tabs w-tabs">
<div class="sub-tabs-menu w-tab-menu">
<a data-w-tab="General" class="sub-tab-menu-link w-inline-block w-tab-link w--current">
<div class="sub-tab-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 32 32" width="32" height="32"><path d="M12,4A5,5,0,1,1,7,9a5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,12,2Z"></path><path d="M22,30H20V25a5,5,0,0,0-5-5H9a5,5,0,0,0-5,5v5H2V25a7,7,0,0,1,7-7h6a7,7,0,0,1,7,7Z"></path><rect x="22" y="4" width="10" height="2"></rect><rect x="22" y="9" width="10" height="2"></rect><rect x="22" y="14" width="7" height="2"></rect></svg>
</div>
<div>General</div>
</a>
<a data-w-tab="Uploads" class="sub-tab-menu-link w-inline-block w-tab-link w--current">
<div class="sub-tab-icon w-embed">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" width="32" height="32"><path d="M26,28H6a2.0021,2.0021,0,0,1-2-2V11A2.0021,2.0021,0,0,1,6,9h5.6665a2.0119,2.0119,0,0,1,1.2007.4L16.3335,12H26a2.0021,2.0021,0,0,1,2,2V26A2.0021,2.0021,0,0,1,26,28ZM11.6665,11H5.9985L6,26H26V14H15.6665Z"/><path d="M28,9H17.6665l-4-3H6V4h7.6665a2.0119,2.0119,0,0,1,1.2007.4L18.3335,7H28Z"/></svg>
</div>
<div>Uploads</div>
</a>
<a data-w-tab="Security" class="sub-tab-menu-link w-inline-block w-tab-link">
<div class="sub-tab-icon w-embed">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 32 32" width="32" height="32"><path d="M30,24V22H27.8989a4.9678,4.9678,0,0,0-.7319-1.7529l1.49-1.49-1.414-1.414-1.49,1.49A4.9678,4.9678,0,0,0,24,18.1011V16H22v2.1011a4.9678,4.9678,0,0,0-1.7529.7319l-1.49-1.49-1.414,1.414,1.49,1.49A4.9678,4.9678,0,0,0,18.1011,22H16v2h2.1011a4.9678,4.9678,0,0,0,.7319,1.7529l-1.49,1.49,1.414,1.414,1.49-1.49A4.9678,4.9678,0,0,0,22,27.8989V30h2V27.8989a4.9678,4.9678,0,0,0,1.7529-.7319l1.49,1.49,1.414-1.414-1.49-1.49A4.9678,4.9678,0,0,0,27.8989,24Zm-7,2a3,3,0,1,1,3-3A3.0033,3.0033,0,0,1,23,26Z" transform="translate(0 0)"></path><path d="M14,26.667l-3.2344-1.7246A8.9858,8.9858,0,0,1,6,17V4H26V14h2V4a2.0023,2.0023,0,0,0-2-2H6A2.0023,2.0023,0,0,0,4,4V17a10.9814,10.9814,0,0,0,5.8242,9.707L14,28.9336Z" transform="translate(0 0)"></path></svg>
</div>
<div>Security</div>
</a>
</div>
<div class="sub-tab-content w-tab-content">
<div data-w-tab="General" class="sub-tab-content-area w-tab-pane w--tab-active">
<h2>General Settings</h2>
<div class="subheading">Edit your account details, contact information, and time zone settings.</div>
<form id="edit-profile" name="edit-profile" data-name="edit-profile" method="get">
<div class="form-field-container">
<div class="field-label-container"><
label for="profile-image" class="field-label">Profile Picture</label>
</div>
<div id="profile-image" class="profile-image-edit">
<img alt="{user's name}" src="{profile image}" loading="lazy" class="profile-image">
<div id="change-image" class="change-image"> <!-- onlick open image upload/picker modal -->
<div class="w-embed">
<svg xmlns="http://www.w3.org/2000/svg" height="32" viewbox="0 0 24 24" width="32" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z"></path></svg>
</div>
</div>
</div>
</div>
<div class="space-2rem"></div>
<div class="w-layout-grid form-grid">
<div class="form-field-container">
<div class="field-label-container">
<label for="First-Name" class="field-label">First Name</label>
</div>
<input class="form-field w-input" maxlength="256" name="First-Name" data-name="First Name" placeholder="First Name" type="text" id="First-Name">
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="Last-Name" class="field-label">Last Name</label>
</div>
<input class="form-field w-input" maxlength="256" name="Last-Name" data-name="Last Name" placeholder="Last Name" type="text" id="Last-Name">
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="name" class="field-label">Email Address</label>
<div data-tippy-content="Your email address is used for login and must be verified before changes can be saved. A verification email will be sent to the provided address with a link to confirm your update." class="help-tooltip w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<!-- START Standard View (text with inline edit icon) -->
<!-- Standard View -->
<div class="form-field-click-to-edit">
<div class="click-to-edit-left">
<div class="form-field-text-click-to-edit">[email protected]</div>
</div>
<div class="click-to-edit-right">
<div data-tippy-content="Edit" class="inline-edit-button">
<div class="inline-edit-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2">
<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
</svg></div>
</div>
</div>
</div>
<!-- END Standard View -->
<!-- START Edit View (input box) -->
<div class="form-field-click-to-edit">
<div class="click-to-edit-left">
<input class="form-field w-input" maxlength="256" name="Email-Address" data-name="Email Address" placeholder="Email Address" type="email" id="Email-Address" required="">
</div>
<div class="click-to-edit-right">
<a data-wait="Sending..." data-tippy-content="Click to send a verification email. You must open the email and follow the link to confirm your email address before the change is applied." href="#" class="button w-button">Verify</a>
<div data-tippy-content="Cancel" class="inline-edit-button red">
<div class="inline-edit-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512">
<path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path>
</svg></div>
</div>
</div>
</div>
<!-- END Edit View -->
<!-- START Awaiting Verification View -->
<div class="form-field-click-to-edit">
<div class="click-to-edit-left">
<div class="form-field-text-click-to-edit">[email protected]</div>
<div data-tippy-content="This email address has not been verified. Your previous email is still in effect and will be used for login and communication until verification is completed." class="tag danger label">Unverified</div>
</div>
<div class="click-to-edit-right">
<!-- START Resend Verification button - triggers verification email to be resent -->
<a data-wait="Resending..." data-tippy-content="Click to send a new verification email if you haven’t received the previous one." href="#" class="button small w-button">Resend Verification</a>
<!-- END Resend Verification button -->
<!-- START Cancel change button -->
<div data-tippy-content="Discard your pending email change and revert to your previously verified email address." class="inline-edit-button red">
<div class="inline-edit-icon w-embed">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512"><path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path></svg>
</div>
</div>
<!-- END Cancel change button -->
</div>
</div>
<!-- END Awaiting Verification View -->
<!-- END inline edit email views -->
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="name" class="field-label">Country</label>
</div>
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">United States</div>
</div>
<div class="dropdown-open w-dropdown-list">
<div class="dropdown-filter"><input class="dropdown-filter-input w-input" maxlength="256" name="field-2" data-name="Field 2" placeholder="Filter" type="text" id="field-2" required=""></div>
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">United States</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Canada</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">United Kingdom</div>
</a>
</div>
</div>
</div>
</div>
<div class="form-field-container">
<div class="field-label-container"><label for="name" class="field-label">Time Zone</label></div>
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">(UTC-05:00) Eastern Time (US & Canada)</div>
</div>
<div class="dropdown-open w-dropdown-list">
<div class="dropdown-filter"><input class="dropdown-filter-input w-input" maxlength="256" name="field-2" data-name="Field 2" placeholder="Filter" type="text" id="field-2" required=""></div>
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">(UTC-08:00) Pacific Time (US & Canada)</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">(UTC-07:00) Mountain Time (US & Canada)</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">(UTC-06:00) Central Time (US & Canada)</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">(UTC-05:00) Eastern Time (US & Canada)</div>
</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div data-w-tab="Uploads" class="sub-tab-content-area w-tab-pane">
<h2>Uploads</h2>
<div class="subheading">Manage your uploaded files. View, edit, or delete documents and media associated with your account.</div>
<form id="manage-files" name="manage-files" data-name="manage-files" method="get">
<div class="table-outline">
<div class="table-scroll-container">
<table class="table">
<thead class="table-head">
<tr class="table-header-row">
<th class="table-checkbox-column"><label class="w-checkbox table-checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div><input type="checkbox" name="" data-name="" style="opacity:0;position:absolute;z-index:-1">
</label></th>
<th>
<div class="table-cell-content">
<div class="table-heading">File Name</div>
<div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<defs>
<style>.cls-1{fill:none;}</style>
</defs>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
<rect id="Transparent_Rectangle" data-name="Transparent Rectangle" class="cls-1"></rect>
</polygon></polygon></svg></div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Type</div>
<div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<defs>
<style>.cls-1{fill:none;}</style>
</defs>
<title>chevron--sort</title>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1"></rect>
</polygon></polygon></svg></div>
</div>
</th>
<th>
<div class="table-cell-content grow">
<div class="table-heading">uploaded</div>
<div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<defs>
<style>.cls-1{fill:none;}</style>
</defs>
<title>chevron--sort</title>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1"></rect>
</polygon></polygon></svg></div>
</div>
</th>
<th class="action-column">
<div class="table-header-icon-container">
<a data-tippy-content="Upload a File" href="#" class="table-header-button w-inline-block">
<div class="table-button-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" style="padding: 1px;" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg></div>
</a>
<div data-delay="0" data-hover="false" class="table-menu-container w-dropdown">
<div class="table-menu-button w-dropdown-toggle">
<div class="table-header-button">
<div class="table-button-icon w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32">
<circle cx="16" cy="8" r="2"></circle>
<circle cx="16" cy="16" r="2"></circle>
<circle cx="16" cy="24" r="2"></circle>
</svg></div>
</div>
</div>
<nav class="table-menu w-dropdown-list">
<a href="#" class="table-menu-item w-inline-block">
<div class="table-menu-item-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg></div>
<div class="table-menu-item-text">Delete Selected</div>
</a>
</nav>
</div>
</div>
</th>
</tr>
<tr class="table-filter-row">
<th class="table-checkbox-column"> </th>
<th>
<div class="table-filter-cell-content"><input class="input-filter w-input" maxlength="256" name="Filter-Col1" data-name="Filter-Col1" placeholder="Filter" type="text" id="Filter-Col"></div>
</th>
<th>
<div class="table-filter-cell-content">
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed table-filter w-dropdown-toggle">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text-content placeholder">All File Types</div>
</div>
<nav class="dropdown-open w-dropdown-list">
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Image</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Word File (.doc, .docx)</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">PDF</div>
</a>
</div>
</nav>
</div>
</div>
</th>
<th>
<div class="table-filter-cell-content">
<div class="date-filter"><input class="input-filter date-picker w-input" maxlength="256" name="Datefilter" data-name="Datefilter" placeholder="All Time" type="text" id="Datefilter-3">
<div id="dateFilterButton" class="date-filter-icon-container">
<div class="date-filter-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
<path d="M26,4H22V2H20V4H12V2H10V4H6A2.0025,2.0025,0,0,0,4,6V26a2.0025,2.0025,0,0,0,2,2H26a2.0025,2.0025,0,0,0,2-2V6A2.0025,2.0025,0,0,0,26,4ZM6,6h4V8h2V6h8V8h2V6h4l0,4H6Zm0,6h5v6H6ZM19,26H13V20h6Zm0-8H13V12h6Zm2,8V20h5l.0012,6Z"></path>
</svg></div>
</div>
</div>
</div>
</th>
<th> </th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-checkbox-column"><label class="w-checkbox table-checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div><input type="checkbox" name="" data-name="" style="opacity:0;position:absolute;z-index:-1">
</label></td>
<td class="table-cell">
<div class="table-cell-content">
<div data-tippy-content="{file name}" class="table-cell-left">
<img width="Auto" src="{image}" alt="{file name}" class="table-image">
<div class="table-data">{file name}</div>
</div>
<div class="table-cell-right">
<div data-tippy-content="Rename" class="inline-edit-button">
<div class="inline-edit-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
</svg></div>
</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">PDF</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">May 22, 2020</div>
</div>
<div class="table-cell-right"> </div>
</div>
</td>
<td class="table-cell">
<div class="table-row-action-button-container">
<div data-tippy-content="Download" class="table-row-action-button">
<div class="table-row-action-button-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg></div>
</div>
<div data-tippy-content="Delete" class="table-row-action-button">
<div class="table-row-action-button-icon delete w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg></div>
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-checkbox-column"><label class="w-checkbox table-checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div><input type="checkbox" name="" data-name="" style="opacity:0;position:absolute;z-index:-1">
</label></td>
<td class="table-cell">
<div class="table-cell-content">
<div data-tippy-content="{file name}" class="table-cell-left">
<img width="32" alt="{file name}" src="{image}" class="table-image">
<input class="inline-edit-input w-input" maxlength="256" name="inline-edit" data-name="inline-edit" placeholder="Enter a file name" type="text" id="inline-edit" value="{filename no extension}" required> <!-- users can rename the file prefix, but not the extension -->
</div>
<div class="table-cell-right">
<div data-tippy-content="Save" class="inline-edit-button green">
<div class="inline-edit-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 448 512">
<path d="M32 96c0-17.7 14.3-32 32-32l0 96c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32V65.8c4.5 1.6 8.7 4.2 12.1 7.6l74.5 74.5c6 6 9.4 14.1 9.4 22.6V416c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96zM96 64H288v96H96V64zM0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V170.5c0-17-6.7-33.3-18.7-45.3L354.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96zM272 320a48 48 0 1 1 -96 0 48 48 0 1 1 96 0zm-48-80a80 80 0 1 0 0 160 80 80 0 1 0 0-160z"></path>
</svg></div>
</div>
<div data-tippy-content="Cancel" class="inline-edit-button red">
<div class="inline-edit-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512">
<path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path>
</svg></div>
</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left overflow">
<div class="table-data">PNG</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">May 22, 2020</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-row-action-button-container">
<div data-tippy-content="Download" class="table-row-action-button">
<div class="table-row-action-button-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg></div>
</div>
<div data-tippy-content="Delete" class="table-row-action-button">
<div class="table-row-action-button-icon delete w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-pagination">
<div class="pagination-left">
<div class="items-per-page-container">
<div>Items per page:</div>
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed table-filter no-stretch w-dropdown-toggle">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text-content">10</div>
</div>
<nav class="dropdown-open top-left w-dropdown-list">
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">10</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">25</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">50</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">100</div>
</a>
</div>
</nav>
</div>
</div>
<div class="paginaton-total-items">
<div>1–10 of 103 items<br></div>
</div>
</div>
<div class="pagination-right">
<div class="pagination-pages-dropdown">
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed table-filter no-stretch w-dropdown-toggle">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text-content">#</div>
</div>
<nav class="dropdown-open top-right w-dropdown-list">
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">1</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">2</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">3</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">3</div>
</a>
</div>
</nav>
</div>
<div>of 11 pages</div>
</div>
<div class="pagination-button">
<div class="pagination-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve">
<polygon points="20,24 10,16 20,8 ">
</polygon></svg></div>
</div>
<div class="pagination-button">
<div class="pagination-icon w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32" xml:space="preserve">
<polygon points="12,8 22,16 12,24 ">
</polygon></svg></div>
</div>
</div>
</div>
</div>
</form>
</div>
<div data-w-tab="Security" class="sub-tab-content-area w-tab-pane">
<h2>Security Settings</h2>
<div class="subheading">Manage your password, and security settings.</div>
<div class="w-layout-grid form-grid">
<div class="form-field-container">
<div class="field-label-container">
<label for="name" class="field-label">Change Password</label>
</div>
<button type="button" data-wait="Processing..." class="button w-button">Change Password</button> <!-- Launches change password modal/process -->
</div>
<div class="space-0px"></div>
</div>
<div class="heading-wrapper">
<h3 class="no-margin">Two-Factor Authentication (2FA)</h3>
</div>
<div class="subheading">Enhance account security by enabling Two-Factor Authentication.</div>
<div class="fancy-option-group">
<!-- START 2FA SMS -->
<!-- START 2FA SMS Not Configured -->
<div class="fancy-option">
<div class="fancy-option-text-container">
<div class="fancy-option-heading">SMS Verification</div>
<div class="fancy-option-text">Receive verification codes via SMS.</div>
</div>
<button type="button" data-wait="Processing..." href="#" class="button w-button">Setup</button> <!-- Starts SMS 2FA Setup process -->
</div>
<!-- END 2FA SMS Not Configured -->
<!-- START 2FA SMS Configured -->
<div class="fancy-option">
<div class="fancy-option-text-container">
<div class="fancy-option-heading">SMS Verification</div>
<div class="fancy-option-text">Verification codes will be sent to <strong>+1 (555) 123-4567</strong></div>
</div>
<button type="button" data-wait="Processing..." href="#" class="button secondary w-button">Change Number</button> <!-- Starts SMS 2FA setup process again, once verified number is replaced for 2FA -->
<button type="button" data-wait="Processing..." href="#" class="button danger w-button">Remove</button> <!-- Removes SMS 2FA from account. -->
</div>
<!-- END 2FA SMS Configured -->
<!-- END 2FA SMS -->
<!-- START 2FA Authenticator App -->
<!-- START 2FA Authenticator Not Configured -->
<div class="fancy-option">
<div class="fancy-option-text-container">
<div class="fancy-option-heading">Authenticator App</div>
<div class="fancy-option-text">Use an authenticator app like Google Authenticator or Authy.</div>
</div>
<button type="button" data-wait="Processing..." href="#" class="button w-button">Setup</button> <!-- Launches Authenticator 2FA setup -->
</div>
<!-- END 2FA Authenticator Not Configured -->
<!-- START 2FA Authenticator Configured -->
<div class="fancy-option">
<div class="fancy-option-text-container">
<div class="fancy-option-heading">Authenticator App</div>
<div class="fancy-option-text">Your authenticator app is now linked.</div>
</div>
<button type="button" data-wait="Processing..." href="#" class="button secondary w-button">Reset</button> <!-- Removes Authenticator 2FA from account, asks user to resetup again -->
<button type="button" data-wait="Processing..." href="#" class="button danger w-button">Remove</button> <!-- Removes Authenticator 2FA from account. -->
</div>
<!-- END 2FA Authenticator Configured -->
<!-- END 2FA Authenticator App -->
</div>
</div>
</div>
</div>
</div>