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

* Show Signer in commit lists and add basic trust

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>

* ensure orange text and background is available

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

* Update gpg_key.go

* Update models/gpg_key.go

* Apply suggestions from code review

* Require team collaborators to have access to UnitTypeCode

* as per @6543

* fix position of sha as per @silverwind

* as per @guillep2k

3 files changed, 249 insertions, 9 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 3b40abe208..1df0124542 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -443,6 +443,10 @@ code,
             color: #fbbd08 !important;
         }
 
+        &.orange {
+            color: #f2711c !important;
+        }
+
         &.gold {
             color: #a1882b !important;
         }
@@ -640,6 +644,10 @@ code,
             background-color: #fbbf09 !important;
         }
 
+        &.orange {
+            background-color: #f2711c !important;
+        }
+
         &.gold {
             background-color: #a1882b !important;
         }
@@ -691,6 +699,10 @@ code,
             border-color: #fbbd08 !important;
         }
 
+        &.orange {
+            border-color: #f2711c !important;
+        }
+
         &.gold {
             border-color: #a1882b !important;
         }
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 7618a4d763..503ef1debd 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1234,7 +1234,7 @@
                     text-align: center;
                 }
 
-                width: 140px;
+                width: 175px;
             }
         }
 
@@ -1255,21 +1255,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;
             }
         }
 
@@ -1277,14 +1305,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 {
@@ -1893,21 +1965,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/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index a6f58e85d2..fdae5ecdc1 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1156,6 +1156,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, .6);
+    &.message {
+        color: #d07d7d;
+        .ui.text {
+            color: #d07d7d;
+        }
+        .pull-right {
+            color: #9e9e9e;
+        }
+    }
+}
+
 .repository .label.list .item {
     border-bottom: 1px dashed #4c505c;
 }
@@ -1166,6 +1224,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),