---
title: User Settings - Done
slug: user-settings-done
docTags: 
createdAt: 2025-02-07T22:15:24.312Z
---

# HTML

```html
<div data-w-tab="User Settings" class="tab-pane w-tab-pane">
    <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="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">Manage this user&#x27;s contact information, and time zone settings.</div>
                <div class="w-form">
                    <form id="edit-settings" name="edit-settings" data-name="edit-settings" 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="The email address cannot be changed by an admin. The user must update it themselves and verify the new email before it takes effect." 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>
                                <input class="form-field disabled w-input" maxlength="256" name="Email-Address" data-name="Email Address" placeholder="Email Address" type="email" id="Email-Address" disabled> <!-- make sure this only pulls from the DB and cannot be used to write back to the DB if field is enabled in dev tools -->
                            </div>
                            <div class="form-field-container">
                                <div class="field-label-container">
                                    <label for="country" class="field-label">Country</label>
                                </div>
                                <div id="country" 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="timezone" class="field-label">Time Zone</label>
                                </div>
                                <div id="timezone" 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>
            <div data-w-tab="Security" class="sub-tab-content-area w-tab-pane">
                <h2>Security Settings</h2>
                <div class="subheading">Manage user roles, authentication, and access control.</div>
                <h3 class="no-margin">Permissions</h3>
                <div class="subheading">Define the user’s level of access within the system.</div>
                    <div class="w-layout-grid form-grid">
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="role" class="field-label">Role</label>
                                <div data-tippy-content="Control the user’s membership in the workspace." 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>
                            <div id="role" 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">Administrator</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">Administrator</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">User</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="heading-wrapper">
                        <h3 class="no-margin">Authentication</h3>
                    </div>
                    <div class="subheading">Manage login security, including password resets and two-factor authentication (2FA).</div>
                    <div class="w-layout-grid form-grid">
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="password-reset" class="field-label">Reset Password</label>
                                <div data-tippy-content="Sends an email to the user with a link to reset their password." 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>
                            <button id="password-reset" type="button" data-wait="Sending..." class="button secondary w-button">Send Password Reset</button>
                        </div>
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="remove-2fa" class="field-label">Reset 2FA</label>
                                <div data-tippy-content="Removes the user’s two-factor authentication setup, requiring them to set it up again on their next login." 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>
                            <button id="remove-2fa" type="button" data-wait="Processing..." class="button secondary w-button">Remove 2FA</button>
                        </div>
                    </div>
                    <div class="heading-wrapper">
                        <h3 class="no-margin">Workspace Access</h3>
                    </div>
                    <div class="subheading">Control the user’s membership in the workspace.</div>
                    <div class="w-layout-grid form-grid">
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="remove-from-workspace" class="field-label">Remove from Workspace</label>
                                <div data-tippy-content=" Revokes the user’s access to this workspace and removes their associated permissions." 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>
                            <button id="remove-from-workspace" type="button" data-wait="Processing..." class="button danger w-button">Remove from Workspace</button>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
```

