nodebb-theme-harmony 1.0.0 → 1.0.1

package/templates/account/blocks.tpl

@@ -1,45 +1,40 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<div class="d-flex justify-content-between mb-3">
-				<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
-				<div class="justify-content-end">
-					<div class="dropdown">
-						<div class="input-group">
-							<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
-							<button class="btn btn-primary btn-sm" type="button">
-								<i class="fa fa-search"></i>
-							</button>
-						</div>
+<!-- IMPORT partials/account/header.tpl -->
+<div class="d-flex justify-content-between mb-3">
+	<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
+	<div class="justify-content-end">
+		<div class="dropdown">
+			<div class="input-group">
+				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
 
-						<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
-							<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
-							{{{ each edit }}}
-							<li class="">
-								<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
-									<div class="text-truncate">
-										<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
-									</div>
-									<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
-								</div>
-							</li>
-							{{{ end }}}
-						</ul>
-					</div>
-				</div>
-			</div>
-			<div class="users">
-				<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
-					{{{ each users }}}
-					<!-- IMPORT partials/users/item.tpl -->
+				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end p-1 text-sm block-edit overflow-auto" style="max-height:300px;">
+					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+					{{{ each edit }}}
+					<li class="">
+						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
+							<div class="text-truncate">
+								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
+							</div>
+							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
+						</div>
+					</li>
 					{{{ end }}}
-				</div>
-				<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
-				<!-- IMPORT partials/paginator.tpl -->
+				</ul>
+
+				<button class="btn btn-primary btn-sm" type="button">
+					<i class="fa fa-search"></i>
+				</button>
 			</div>
 		</div>
-
 	</div>
-</div>
+</div>
+<div class="users">
+	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+		{{{ each users }}}
+		<!-- IMPORT partials/users/item.tpl -->
+		{{{ end }}}
+	</div>
+	<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/categories.tpl

@@ -1,34 +1,52 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<h3 class="fw-semibold fs-5">{title}</h3>
+<div class="d-flex justify-content-between align-items-center mb-3">
+	<div class="d-flex gap-1">
+		<h3 class="fw-semibold fs-5 mb-0">{title}</h3>
+	</div>
 
-			<div class="row">
-				<div class="col-lg-12 mb-2">
-					<div class="btn-group bottom-sheet" component="category/watch/all">
-						<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-							<span>[[user:change_all]]</span>
-							<span class="caret"></span>
-						</button>
-						<ul class="dropdown-menu">
-							<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
-							<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
-							<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
-						</ul>
-					</div>
-				</div>
-				<div class="col-lg-12">
-					<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
-						{{{each categories}}}
-						<!-- IMPORT partials/account/category-item.tpl -->
-						{{{end}}}
-					</ul>
-					<!-- IMPORT partials/paginator.tpl -->
-				</div>
-			</div>
+	<div class="d-flex gap-1">
+		<div class="btn-group bottom-sheet" component="category/watch/all">
+			<button class="btn-ghost-sm fw-semibold dropdown-toggle" data-bs-toggle="dropdown" type="button">
+				<span>[[user:change_all]]</span>
+			</button>
+			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end">
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/watching" data-state="watching">
+						<div class="d-flex align-items-center gap-2">
+							<i class="flex-shrink-0 fa fa-fw fa-inbox"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:watching]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:watching.description]]</div>
+					</a>
+				</li>
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/notwatching" data-state="notwatching">
+						<div class="d-flex align-items-center gap-2">
+							<i class="flex-shrink-0 fa fa-fw fa-clock-o"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:not-watching]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:not-watching.description]]</div>
+					</a>
+				</li>
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/ignoring" data-state="ignoring">
+						<div class="d-flex align-items-center gap-2">
+							<i class="flex-shrink-0 fa fa-fw fa-eye-slash"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:ignoring]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:ignoring.description]]</div>
+					</a>
+				</li>
+			</ul>
 		</div>
 	</div>
 </div>
+
+<div>
+	<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+		{{{each categories}}}
+		<!-- IMPORT partials/account/category-item.tpl -->
+		{{{end}}}
+	</ul>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/consent.tpl

@@ -1,17 +1,73 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
+<h3 class="fw-semibold fs-5">[[user:consent.title]]</h3>
 
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<h3 class="fw-semibold fs-5">[[user:consent.title]]</h3>
+<p class="lead">[[user:consent.lead]]</p>
+<p>[[user:consent.intro]]</p>
 
-			<p class="lead">[[user:consent.lead]]</p>
-			<p>[[user:consent.intro]]</p>
+<hr />
 
-			<hr />
+<div class="row">
+	<div class="col-sm-6">
+		{{{ if gdpr_consent }}}
+		<div class="alert alert-success">
+			<i class="fa fa-check float-end fa-3x"></i>
+			[[user:consent.received]]
+		</div>
+		{{{ else }}}
+		<div class="alert alert-warning">
+			[[user:consent.not_received]]
+			<br /><br />
+			<div class="text-center">
+				<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
+			</div>
+		</div>
+		{{{ end }}}
+		<div class="card">
+			<div class="card-body">
+				<p>[[user:consent.email_intro]]</p>
+				{{{ if digest.enabled }}}
+				<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
+				{{{ else }}}
+				<p>[[user:consent.digest_off]]</p>
+				{{{ end }}}
 
-			<div class="row">
+				<div class="d-grid">
+					<a class="btn btn-outline-secondary" href="./settings">
+						<i class="fa fa-cog"></i>
+						[[pages:account/settings]]
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-sm-6">
+		<div class="card">
+			<div class="card-body">
+				<p><strong>[[user:consent.right_of_access]]</strong></p>
+				<p>[[user:consent.right_of_access_description]]</p>
+				<p><strong>[[user:consent.right_to_rectification]]</strong></p>
+				<p>[[user:consent.right_to_rectification_description]]</p>
+				<p><strong>[[user:consent.right_to_erasure]]</strong></p>
+				<p>[[user:consent.right_to_erasure_description]]</p>
+				<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
+				<p>[[user:consent.right_to_data_portability_description]]</p>
+
+				<hr />
+
+				<div class="btn-group-vertical d-grid">
+					<a data-action="export-profile" class="btn btn-outline-secondary">
+						<i class="fa fa-download"></i> [[user:consent.export_profile]]
+					</a>
+					<a data-action="export-posts" class="btn btn-outline-secondary">
+						<i class="fa fa-download"></i> [[user:consent.export_posts]]
+					</a>
+					<a data-action="export-uploads" class="btn btn-outline-secondary">
+						<i class="fa fa-download"></i> [[user:consent.export_uploads]]
+					</a>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/edit/password.tpl

@@ -1,37 +1,32 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_password]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
+<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_password]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
-			<form class="edit-form">
-				<!-- disables autocomplete on FF --><input type="password" style="display:none">
+<form class="edit-form">
+	<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
-				{{{ if isSelf }}}
-				<div class="mb-2">
-					<label class="form-label fw-semibold text-xm" for="inputCurrentPassword">[[user:current_password]]</label>
-					<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-				</div>
-				{{{ end }}}
+	{{{ if isSelf }}}
+	<div class="mb-2">
+		<label class="form-label fw-semibold text-xm" for="inputCurrentPassword">[[user:current_password]]</label>
+		<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value="" {{{ if !hasPassword }}} disabled{{{ end }}}>
+	</div>
+	{{{ end }}}
 
-				<div class="mb-2">
-					<label class="form-label fw-semibold text-xm" for="inputNewPassword">[[user:new_password]]</label>
-					<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
-					<span class="form-feedback" id="password-notify"></span>
-				</div>
+	<div class="mb-2">
+		<label class="form-label fw-semibold text-xm" for="inputNewPassword">[[user:new_password]]</label>
+		<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
+		<span class="form-feedback" id="password-notify"></span>
+	</div>
 
-				<div class="mb-2">
-					<label class="form-label fw-semibold text-xm" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
-					<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
-					<span class="form-feedback" id="password-confirm-notify"></span>
-				</div>
+	<div class="mb-2">
+		<label class="form-label fw-semibold text-xm" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
+		<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
+		<span class="form-feedback" id="password-confirm-notify"></span>
+	</div>
 
-				<div class="form-actions">
-					<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
-				</div>
-			</form>
-		</div>
+	<div class="form-actions">
+		<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
 	</div>
-</div>
+</form>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/edit/username.tpl

@@ -1,33 +1,28 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_username]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
+<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_username]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
-			<form class="form-horizontal edit-form">
-				<div class="mb-2">
-					<label class="form-label fw-semibold text-sm" for="inputNewUsername">[[user:username]]</label>
-					<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
-				</div>
+<form class="form-horizontal edit-form">
+	<div class="mb-2">
+		<label class="form-label fw-semibold text-sm" for="inputNewUsername">[[user:username]]</label>
+		<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
+	</div>
 
-				<!-- disables autocomplete on FF --><input type="password" style="display:none">
+	<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
-				{{{ if isSelf }}}
-				<div class="mb-2">
-					<label class="form-label fw-semibold text-sm" for="inputCurrentPassword">[[user:current_password]]</label>
-					<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""{{{ if !hasPassword }}} disabled{{{ end }}}>
-				</div>
-				{{{ end }}}
+	{{{ if isSelf }}}
+	<div class="mb-2">
+		<label class="form-label fw-semibold text-sm" for="inputCurrentPassword">[[user:current_password]]</label>
+		<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""{{{ if !hasPassword }}} disabled{{{ end }}}>
+	</div>
+	{{{ end }}}
 
-				<input type="hidden" name="uid" id="inputUID" value="{uid}" />
+	<input type="hidden" name="uid" id="inputUID" value="{uid}" />
 
-				<br/>
-				<div class="form-actions">
-					<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
-				</div>
-			</form>
-		</div>
+	<br/>
+	<div class="form-actions">
+		<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
 	</div>
-</div>
+</form>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/edit.tpl

@@ -1,132 +1,121 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<div class="d-flex justify-content-between mb-3">
-				<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:edit-profile]]{{{ else }}}[[pages:account/edit, {username}]]{{{ end }}}</h3>
-				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>
+<div class="d-flex justify-content-between mb-3 align-items-center">
+	<h3 class="fw-semibold fs-5 mb-0">{{{ if isSelf }}}[[user:edit-profile]]{{{ else }}}[[pages:account/edit, {username}]]{{{ end }}}</h3>
+	<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>
+</div>
+<div class="row">
+	<div class="col-xl-6 col-12">
+		<form role="form" component="profile/edit/form">
+			<div class="mb-2">
+				<label class="form-label fw-bold" for="fullname">[[user:fullname]]</label>
+				<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
 			</div>
-			<div class="row">
-				<div class="col-xl-6 col-12">
-					<form role="form" component="profile/edit/form">
-						<div class="mb-2">
-							<label class="form-label fw-bold" for="fullname">[[user:fullname]]</label>
-							<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
-						</div>
-						<!-- IF allowWebsite -->
-						<div class="mb-2">
-							<label class="form-label fw-bold" for="website">[[user:website]]</label>
-							<input class="form-control" type="text" id="website" name="website" placeholder="http://..." value="{website}">
-						</div>
-						<!-- ENDIF allowWebsite -->
-
-						<div class="mb-2">
-							<label class="form-label fw-bold" for="location">[[user:location]]</label>
-							<input class="form-control" type="text" id="location" name="location" placeholder="[[user:location]]" value="{location}">
-						</div>
-
-						<div class="mb-2">
-							<label class="form-label fw-bold" for="birthday">[[user:birthday]]</label>
-							<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
-						</div>
+			{{{ if allowWebsite }}}
+			<div class="mb-2">
+				<label class="form-label fw-bold" for="website">[[user:website]]</label>
+				<input class="form-control" type="text" id="website" name="website" placeholder="http://..." value="{website}">
+			</div>
+			{{{ end }}}
 
-						<div class="mb-2">
-							<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
+			<div class="mb-2">
+				<label class="form-label fw-bold" for="location">[[user:location]]</label>
+				<input class="form-control" type="text" id="location" name="location" placeholder="[[user:location]]" value="{location}">
+			</div>
 
-							<select class="form-select mb-1" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
-								<option value="">[[user:no-group-title]]</option>
-								{{{each groups}}}
-								<!-- IF groups.userTitleEnabled -->
-								<option value="{groups.displayName}" <!-- IF groups.selected -->selected<!-- ENDIF groups.selected -->>{groups.userTitle}</option>
-								<!-- ENDIF groups.userTitleEnabled -->
-								{{{end}}}
-							</select>
-							<!-- IF allowMultipleBadges -->
-							<div class="d-none d-md-block">
-								<span class="form-text">[[user:group-order-help]]</span>
-								<i role="button" component="group/order/up" class="fa fa-chevron-up"></i> <i role="button" component="group/order/down" class="fa fa-chevron-down"></i>
-							</div>
-							<!-- ENDIF -->
-						</div>
+			<div class="mb-2">
+				<label class="form-label fw-bold" for="birthday">[[user:birthday]]</label>
+				<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
+			</div>
 
-						<!-- IF allowAboutMe -->
-						<div class="mb-2">
-							<label class="form-label fw-bold" for="aboutme">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
-							<textarea class="form-control" id="aboutme" name="aboutme" rows="5">{aboutme}</textarea>
-						</div>
-						<!-- ENDIF allowAboutMe -->
+			<div class="mb-2">
+				<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
 
-						<!-- IF allowSignature -->
-						<!-- IF !disableSignatures -->
-						<div class="mb-2">
-							<label class="form-label fw-bold" for="signature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
-							<textarea class="form-control" id="signature" name="signature" rows="5">{signature}</textarea>
-						</div>
-						<!-- ENDIF !disableSignatures -->
-						<!-- ENDIF allowSignature -->
-					</form>
-					<hr class="visible-xs visible-sm"/>
+				<select class="form-select mb-1" id="groupTitle" name="groupTitle" {{{ if allowMultipleBadges }}} size="{groupSelectSize}" multiple{{{ end }}}>
+					<option value="">[[user:no-group-title]]</option>
+					{{{ each groups }}}
+					{{{ if ./userTitleEnabled }}}
+					<option value="{groups.displayName}" {{{ if ./selected }}}selected{{{ end }}}>{./userTitle}</option>
+					{{{ end }}}
+					{{{ end }}}
+				</select>
+				{{{ if allowMultipleBadges }}}
+				<div class="d-none d-md-block">
+					<span class="form-text">[[user:group-order-help]]</span>
+					<i role="button" component="group/order/up" class="fa fa-chevron-up"></i> <i role="button" component="group/order/down" class="fa fa-chevron-down"></i>
 				</div>
+				{{{ end }}}
+			</div>
+
+			{{{ if allowAboutMe }}}
+			<div class="mb-2">
+				<label class="form-label fw-bold" for="aboutme">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
+				<textarea class="form-control" id="aboutme" name="aboutme" rows="5">{aboutme}</textarea>
+			</div>
+			{{{ end }}}
 
-				<div class="col-xl-6 col-12">
-					<div class="text-center">
-						<ul class="list-group mb-3 text-sm text-nowrap">
-							<!-- IF allowProfilePicture -->
-							<a id="changePictureBtn" href="#" class="list-group-item px-1 text-decoration-none">[[user:change_picture]]</a>
-							<!-- ENDIF allowProfilePicture -->
-							<!-- IF !username:disableEdit -->
-							<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item px-1 text-decoration-none">[[user:change_username]]</a>
-							<!-- ENDIF !username:disableEdit -->
-							<!-- IF !email:disableEdit -->
-							<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item px-1 text-decoration-none">[[user:change_email]]</a>
-							<!-- ENDIF !email:disableEdit -->
-							<!-- IF canChangePassword -->
-							<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item px-1 text-decoration-none">[[user:change_password]]</a>
-							<!-- ENDIF canChangePassword -->
-							{{{each editButtons}}}
-							<a href="{config.relative_path}{editButtons.link}" class="list-group-item px-1 text-decoration-none">{editButtons.text}</a>
-							{{{end}}}
-						</ul>
+			{{{ if (allowSignature && !disableSignatures) }}}
+			<div class="mb-2">
+				<label class="form-label fw-bold" for="signature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
+				<textarea class="form-control" id="signature" name="signature" rows="5">{signature}</textarea>
+			</div>
+			{{{ end }}}
+		</form>
+		<hr class="visible-xs visible-sm"/>
+	</div>
 
-						<!-- IF config.requireEmailConfirmation -->
-						<!-- IF email -->
-						<!-- IF isSelf -->
-						<a id="confirm-email" href="#" class="btn btn-warning <!-- IF email:confirmed -->hide<!-- ENDIF email:confirmed -->">[[user:confirm_email]]</a><br/><br/>
-						<!-- ENDIF isSelf -->
-						<!-- ENDIF email -->
-						<!-- ENDIF config.requireEmailConfirmation -->
-					</div>
+	<div class="col-xl-6 col-12">
+		<div class="text-center">
+			<ul class="list-group mb-3 text-sm text-nowrap">
+				{{{ if allowProfilePicture }}}
+				<a component="profile/change/picture" href="#" class="list-group-item px-1 text-decoration-none">[[user:change_picture]]</a>
+				{{{ end }}}
+				{{{ if !username:disableEdit }}}
+				<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item px-1 text-decoration-none">[[user:change_username]]</a>
+				{{{ end }}}
+				{{{ if !email:disableEdit }}}
+				<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item px-1 text-decoration-none">[[user:change_email]]</a>
+				{{{ end }}}
+				{{{ if canChangePassword }}}
+				<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item px-1 text-decoration-none">[[user:change_password]]</a>
+				{{{ end }}}
+				{{{ each editButtons }}}
+				<a href="{config.relative_path}{./link}" class="list-group-item px-1 text-decoration-none">{./text}</a>
+				{{{ end }}}
+			</ul>
 
-					{{{ if sso.length }}}
-					<label class="form-label text-sm fw-semibold">[[user:sso.title]]</label>
-					<div class="list-group">
-						{{{each sso}}}
-						<div class="list-group-item d-flex justify-content-between">
-							<a class="text-sm text-reset text-decoration-none" data-component="{../component}" href="{../url}" target="<!-- IF ../associated -->_blank<!-- ELSE -->_top<!-- ENDIF ../associated -->">
-								<!-- IF ../icon --><i class="fa {../icon}"></i><!-- ENDIF ../icon -->
-								<!-- IF ../associated -->[[user:sso.associated]]<!-- ELSE -->[[user:sso.not-associated]]<!-- ENDIF ../associated -->
-								{../name}
-							</a>
-							<!-- IF ../deauthUrl -->
-							<a data-component="{../component}" class="btn btn-outline-secondary btn-sm" href="{../deauthUrl}">[[user:sso.dissociate]]</a>
-							<!-- END -->
-						</div>
-						{{{end}}}
-					</div>
-					{{{ end }}}
+			{{{ if config.requireEmailConfirmation }}}
+			{{{ if (email && isSelf) }}}
+			<a id="confirm-email" href="#" class="btn btn-warning {{{ if email:confirmed }}}hide{{{ end }}}">[[user:confirm_email]]</a><br/><br/>
+			{{{ end }}}
+			{{{ end }}}
+		</div>
 
-					<hr/>
-					{{{ if (allowAccountDelete && isSelf) }}}
-					<div class="d-flex justify-content-end">
-						<button id="deleteAccountBtn" class="btn btn-danger">[[user:delete_account]]</button>
-					</div>
-					{{{ end }}}
-				</div>
+		{{{ if sso.length }}}
+		<label class="form-label text-sm fw-semibold">[[user:sso.title]]</label>
+		<div class="list-group">
+			{{{ each sso }}}
+			<div class="list-group-item d-flex justify-content-between">
+				<a class="text-sm text-reset text-decoration-none" data-component="{./component}" href="{./url}" target="{{{ if ./associated }}}_blank{{{ else }}}_top{{{ end }}}">
+					{{{ if ./icon }}}<i class="fa {./icon}"></i>{{{ end }}}
+					{{{ if ./associated }}}[[user:sso.associated]]{{{ else }}}[[user:sso.not-associated]]{{{ end }}}
+					{./name}
+				</a>
+				{{{ if ./deauthUrl }}}
+				<a data-component="{./component}" class="btn btn-outline-secondary btn-sm" href="{./deauthUrl}">[[user:sso.dissociate]]</a>
+				{{{ end }}}
 			</div>
+			{{{ end }}}
 		</div>
+		{{{ end }}}
+
+		<hr/>
+		{{{ if (allowAccountDelete && isSelf) }}}
+		<div class="d-flex justify-content-end">
+			<button id="deleteAccountBtn" class="btn btn-danger">[[user:delete_account]]</button>
+		</div>
+		{{{ end }}}
 	</div>
 </div>
 
-
+<!-- IMPORT partials/account/footer.tpl -->