---
title: My Settings - Done
slug: my-settings-done
docTags: 
createdAt: 2025-02-07T20:34:29.958Z
---

# Description

This is the "My Settings" tab, it differs from the "User Settings" tab in [Edit User](docId\:vmFSk7wHjfD-V82d8eNB4) in several ways.&#x20;

1. **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)
2. **Uploads subtab**: This page allows users to rename and delete files they've uploaded such as avatar images.&#x20;
3. **Security subtab**:  The Security subtab is entirely different for Edit Profile vs Edit User
   1. 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.
   2. There is no option to change one's own role in the Workspace
   3. There is no option to remove the user from the workspace
   4. There are 2FA options for when we roll out 2FA.&#x20;

# HTML

```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">john.doe@email.com</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">john.doe@email.com</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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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="&lt;Transparent Rectangle&gt;" 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="&lt;Transparent Rectangle&gt;" 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>
```

