Show Signer in commit lists and add basic trust (#10425) (#10524)

Backport #10425
Backport #10511

* Show Signer in commit lists and add basic trust (#10425)

Show the avatar of the signer in the commit list pages as we do not
enforce that the signer is an author or committer. This makes it
clearer who has signed the commit.

Also display commits signed by non-members differently from
members and in particular make it clear when a non-member signer
is different from the committer to help reduce the risk of
spoofing.

Signed-off-by: Andrew Thornton <art27@cantab.net>

Fix the signing icon in the  view_list.tmpl page (#10511)

Co-Authored-By: silverwind <me@silverwind.io>
Co-authored-by: guillep2k <18600385+guillep2k@users.noreply.github.com>

3 files changed, 250 insertions, 10 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 068b9e8144..4806cc56a5 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -471,6 +471,10 @@ code,
             color: #fbbd08 !important;
         }
 
+        &.orange {
+            color: #f2711c !important;
+        }
+
         &.gold {
             color: #a1882b !important;
         }
@@ -668,6 +672,10 @@ code,
             background-color: #fbbf09 !important;
         }
 
+        &.orange {
+            background-color: #f2711c !important;
+        }
+
         &.gold {
             background-color: #a1882b !important;
         }
@@ -719,6 +727,10 @@ code,
             border-color: #fbbd08 !important;
         }
 
+        &.orange {
+            border-color: #f2711c !important;
+        }
+
         &.gold {
             border-color: #a1882b !important;
         }
@@ -1041,7 +1053,7 @@ i.icons .icon:first-child {
 }
 
 i.icon.centerlock {
-    top: 1.5em;
+    top: 1.45em;
 }
 
 .ui.label > .detail .icons {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index e75fb0fae7..3fbd467081 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1222,7 +1222,7 @@
                     text-align: center;
                 }
 
-                width: 140px;
+                width: 175px;
             }
         }
 
@@ -1243,21 +1243,49 @@
     #repo-files-table .sha.label {
         border: 1px solid #bbbbbb;
 
+        .ui.signature.avatar {
+            height: 16px;
+            margin-bottom: 0;
+            width: auto;
+        }
+
         .detail.icon {
             background: #fafafa;
             margin: -6px -10px -4px 0;
-            padding: 5px 3px 5px 6px;
+            padding: 5px 4px 5px 6px;
             border-left: 1px solid #bbbbbb;
+            border-top: 0;
+            border-right: 0;
+            border-bottom: 0;
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
+
+            img {
+                margin-right: 0;
+            }
+
+            > div {
+                display: inline-flex;
+                align-items: center;
+            }
         }
 
         &.isSigned.isWarning {
             border: 1px solid #db2828;
             background: fade(#db2828, 10%);
 
+            .shortsha {
+                display: inline-block;
+                padding-top: 1px;
+            }
+
             .detail.icon {
-                border-left: 1px solid fade(#db2828, 50%);
+                border-left: 1px solid #db2828;
+                color: #db2828;
+            }
+
+            &:hover {
+                background: fade(#db2828, 30%) !important;
             }
         }
 
@@ -1265,14 +1293,58 @@
             border: 1px solid #21ba45;
             background: fade(#21ba45, 10%);
 
+            .shortsha {
+                display: inline-block;
+                padding-top: 1px;
+            }
+
             .detail.icon {
                 border-left: 1px solid #21ba45;
+                color: #21ba45;
             }
 
             &:hover {
                 background: fade(#21ba45, 30%) !important;
             }
         }
+
+        &.isSigned.isVerifiedUntrusted {
+            border: 1px solid #fbbd08;
+            background: fade(#fbbd08, 10%);
+
+            .shortsha {
+                display: inline-block;
+                padding-top: 1px;
+            }
+
+            .detail.icon {
+                border-left: 1px solid #fbbd08;
+                color: #fbbd08;
+            }
+
+            &:hover {
+                background: fade(#fbbd08, 30%) !important;
+            }
+        }
+
+        &.isSigned.isVerifiedUnmatched {
+            border: 1px solid #f2711c;
+            background: fade(#f2711c, 10%);
+
+            .shortsha {
+                display: inline-block;
+                padding-top: 1px;
+            }
+
+            .detail.icon {
+                border-left: 1px solid #f2711c;
+                color: #f2711c;
+            }
+
+            &:hover {
+                background: fade(#f2711c, 30%) !important;
+            }
+        }
     }
 
     .diff-detail-box {
@@ -1872,21 +1944,114 @@
         }
     }
 
-    .ui.attached.isSigned.isVerified {
-        &:not(.positive) {
-            border-left: 1px solid #a3c293;
-            border-right: 1px solid #a3c293;
+    .ui.attached.isSigned.isWarning {
+        border-left: 1px solid #c29393;
+        border-right: 1px solid #c29393;
+
+        &.top,
+        &.message {
+            border-top: 1px solid #c29393;
         }
 
-        &.top:not(.positive) {
+        &.message {
+            box-shadow: none;
+            background-color: #fff5f5;
+            color: #d95c5c;
+
+            .ui.text {
+                color: #d64444;
+            }
+        }
+
+        &:last-child,
+        &.bottom {
+            border-bottom: 1px solid #c29393;
+        }
+    }
+
+    .ui.attached.isSigned:not(.isWarning) .pull-right {
+        padding-top: 5px;
+    }
+
+    .ui.attached.isSigned.isVerified {
+        border-left: 1px solid #a3c293;
+        border-right: 1px solid #a3c293;
+
+        &.top,
+        &.message {
             border-top: 1px solid #a3c293;
         }
 
-        &:not(.positive):last-child {
+        &.message {
+            box-shadow: none;
+            background-color: #fcfff5;
+            color: #6cc644;
+
+            .pull-right {
+                color: #000;
+            }
+
+            .ui.text {
+                color: #21ba45;
+            }
+        }
+
+        &:last-child,
+        &.bottom {
             border-bottom: 1px solid #a3c293;
         }
     }
 
+    .ui.attached.isSigned.isVerifiedUntrusted {
+        border-left: 1px solid #c2c193;
+        border-right: 1px solid #c2c193;
+
+        &.top,
+        &.message {
+            border-top: 1px solid #c2c193;
+        }
+
+        &.message {
+            box-shadow: none;
+            background-color: #fffff5;
+            color: #fbbd08;
+
+            .ui.text {
+                color: #d2ab00;
+            }
+        }
+
+        &:last-child,
+        &.bottom {
+            border-bottom: 1px solid #c2c193;
+        }
+    }
+
+    .ui.attached.isSigned.isVerifiedUnmatched {
+        border-left: 1px solid #c2a893;
+        border-right: 1px solid #c2a893;
+
+        &.top,
+        &.message {
+            border-top: 1px solid #c2a893;
+        }
+
+        &.message {
+            box-shadow: none;
+            background-color: #fffaf5;
+            color: #f2711c;
+
+            .ui.text {
+                color: #ee5f00;
+            }
+        }
+
+        &:last-child,
+        &.bottom {
+            border-bottom: 1px solid #c2a893;
+        }
+    }
+
     .ui.segment.sub-menu {
         padding: 7px;
         line-height: 0;
diff --git a/web_src/less/themes/arc-green.less b/web_src/less/themes/arc-green.less
index c5f4a43f59..1bd644ece8 100644
--- a/web_src/less/themes/arc-green.less
+++ b/web_src/less/themes/arc-green.less
@@ -1136,6 +1136,64 @@ a.ui.labels .label:hover {
     border-left-color: #888;
 }
 
+.repository .ui.attached.message.isSigned.isVerified {
+    background-color: #394829;
+    color: #9e9e9e;
+
+    &.message {
+        color: #87ab63;
+        .ui.text {
+            color: #9e9e9e;
+        }
+        .pull-right {
+            color: #87ab63;
+        }
+    }
+}
+
+.repository .ui.attached.message.isSigned.isVerifiedUntrusted {
+    background-color: #4a3903;
+    color: #9e9e9e;
+    &.message {
+        color: #c2c193;
+        .ui.text {
+            color: #9e9e9e;
+        }
+        .pull-right,
+        a {
+            color: #c2c193;
+        }
+    }
+}
+
+.repository .ui.attached.message.isSigned.isVerifiedUnmatched {
+    background-color: #4e3321;
+    color: #9e9e9e;
+    &.message {
+        color: #c2a893;
+        .ui.text {
+            color: #9e9e9e;
+        }
+        .pull-right,
+        a {
+            color: #c2a893;
+        }
+    }
+}
+
+.repository .ui.attached.message.isSigned.isWarning {
+    background-color: rgba(80, 23, 17, 0.6);
+    &.message {
+        color: #d07d7d;
+        .ui.text {
+            color: #d07d7d;
+        }
+        .pull-right {
+            color: #9e9e9e;
+        }
+    }
+}
+
 .repository .label.list .item {
     border-bottom: 1px dashed #4c505c;
 }
@@ -1146,6 +1204,11 @@ a.ui.labels .label:hover {
     color: #87ab63 !important;
 }
 
+.ui.text.yellow,
+.yellow.icon.icon.icon {
+    color: #e4ac07 !important;
+}
+
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3),