Refactor flash message and remove SanitizeHTML template func (#37179)

1. Fix the "flash message" layout problem for different cases
* I am sure most of the users should have ever seen the ugly
center-aligned error message with multiple lines.
2. Fix inconsistent "Details" flash message EOL handling, sometimes
`\n`, sometimes `<br>`
   * Now, always use "\n" and use `<pre>` to render
3. Remove SanitizeHTML template func because it is not useful and can be
easily abused.
* But it is still kept for mail templates, for example:
https://github.com/go-gitea/gitea/issues/36049
4. Clarify PostProcessCommitMessage's behavior and add FIXME comment

By the way: cleaned up some devtest pages, move embedded style block to
CSS file

templates/base/alert.tmpl

@@ -1,25 +1,9 @@
-{{- if .Flash.ErrorMsg -}}
-	<div class="ui negative message flash-message flash-error">
-		<p>{{.Flash.ErrorMsg | SanitizeHTML}}</p>
-	</div>
-{{- end -}}
-{{- if .Flash.SuccessMsg -}}
-	<div class="ui positive message flash-message flash-success">
-		<p>{{.Flash.SuccessMsg | SanitizeHTML}}</p>
-	</div>
-{{- end -}}
-{{- if .Flash.InfoMsg -}}
-	<div class="ui info message flash-message flash-info">
-		<p>{{.Flash.InfoMsg | SanitizeHTML}}</p>
-	</div>
-{{- end -}}
-{{- if .Flash.WarningMsg -}}
-	<div class="ui warning message flash-message flash-warning">
-		<p>{{.Flash.WarningMsg | SanitizeHTML}}</p>
-	</div>
-{{- end -}}
+{{- if .Flash.ErrorMsg}}{{ctx.RenderUtils.RenderFlashMessage "error" .Flash.ErrorMsg}}{{end -}}
+{{- if .Flash.WarningMsg}}{{ctx.RenderUtils.RenderFlashMessage "warning" .Flash.WarningMsg}}{{end -}}
+{{- if .Flash.InfoMsg}}{{ctx.RenderUtils.RenderFlashMessage "info" .Flash.InfoMsg}}{{end -}}
+{{- if .Flash.SuccessMsg}}{{ctx.RenderUtils.RenderFlashMessage "success" .Flash.SuccessMsg}}{{end -}}
 {{- if .ShowTwoFactorRequiredMessage -}}
-<div class="ui negative message flash-message flash-error">
-	<p><a href="{{AppSubUrl}}/user/settings/security/two_factor/enroll">{{ctx.Locale.Tr "auth.twofa_required"}}</a></p>
+<div class="ui error message flash-message flash-error">
+	<a href="{{AppSubUrl}}/user/settings/security/two_factor/enroll">{{ctx.Locale.Tr "auth.twofa_required"}}</a>
 </div>
 {{- end -}}

templates/base/alert_details.tmpl

@@ -2,10 +2,8 @@
 {{if .Details}}
 <details>
 	<summary>{{.Summary}}</summary>
-	{{.Details | SanitizeHTML}}
+	<pre>{{.Details}}</pre>
 </details>
 {{else}}
-<div>
-	{{.Summary}}
-</div>
+<div>{{.Summary}}</div>
 {{end}}

templates/devtest/devtest-header.tmpl

@@ -1,4 +1,4 @@
 {{template "base/head" ctx.RootData}}
 <link rel="stylesheet" href="{{AssetURI "css/devtest.css"}}">
 <div class="tw-hidden" data-global-init="initDevtestPage"></div>
-{{template "base/alert" .}}
+<div class="ui container tw-mt-4">{{template "base/alert" ctx.RootData}}</div>

templates/devtest/fetch-action.tmpl

@@ -1,6 +1,5 @@
 {{template "devtest/devtest-header"}}
 <div class="page-content devtest ui container">
-	{{template "base/alert" .}}
 	<div>
 		<h1>link-action</h1>
 		<div>
@@ -17,29 +16,20 @@
 	<div>
 		<h1>form-fetch-action</h1>
 		<div>Use "window.fetch" to send a form request to backend</div>
-		<div>
-			<form method="get" action="fetch-action-test?k=1" class="form-fetch-action">
+		<div class="flex-relaxed-list fetch-action-demo-forms">
+			<form method="get" action="./fetch-action-test?k=1" class="form-fetch-action">
 				<button name="btn">submit get</button>
 			</form>
-			<form method="post" action="fetch-action-test?k=1" class="form-fetch-action">
+			<form method="post" action="./fetch-action-test?k=1" class="form-fetch-action">
 				<div><textarea name="text" rows="3"></textarea></div>
 				<div><label><input name="check" type="checkbox"> check</label></div>
 				<div><button name="btn">submit post</button></div>
 			</form>
-			<form method="post" action="no-such-uri" class="form-fetch-action">
+			<form method="post" action="./no-such-uri" class="form-fetch-action">
 				<div class="tw-py-8">bad action url</div>
 				<div><button name="btn">submit test</button></div>
 			</form>
 		</div>
 	</div>
 </div>
-<style>
-	.ui.message.flash-message {
-		text-align: left;
-	}
-	.form-fetch-action {
-		margin-bottom: 1em;
-		border: 1px red dashed; /* show the border for demo purpose */
-	}
-</style>
 {{template "devtest/devtest-footer"}}

templates/devtest/toast-and-message.tmpl

@@ -1,5 +1,5 @@
 {{template "devtest/devtest-header"}}
-<div>
+<div class="ui container">
 	<h1>Toast</h1>
 	<div>
 		<button class="ui button toast-test-button" data-toast-level="info" data-toast-message="test info">Show Info Toast</button>

templates/repo/commit_page.tmpl

@@ -195,7 +195,7 @@
 				<span class="tw-text-text-light">{{DateUtils.TimeSince .NoteCommit.Author.When}}</span>
 			</div>
 			<div class="ui bottom attached info segment git-notes">
-				<pre class="commit-body">{{.NoteRendered | SanitizeHTML}}</pre>
+				<pre class="commit-body">{{.NoteRendered}}</pre>
 			</div>
 		{{end}}
 

templates/repo/issue/view_content/comments.tmpl

@@ -164,7 +164,7 @@
 				<div class="detail flex-text-block">
 					{{svg "octicon-git-commit"}}
 					{{/* the content is a link like <a href="{RepoLink}/commit/{CommitID}">message title</a> (from CreateRefComment) */}}
-					<span class="comment-text-line">{{.Content | SanitizeHTML}}</span>
+					<span class="comment-text-line">{{.GetSanitizedContentHTML}}</span>
 				</div>
 			</div>
 		{{else if eq .Type 7}}