info button

SecureSharing/Views/Home/Index.cshtml

@@ -50,24 +50,28 @@
         </div>
     </div>
 
-
-    <div class="mb-3">
-        <label class="label-text">Should link be visible outside diligent network?</label>
-        <div class="button-box row">
-            <div class="single-button-input col-4">
-                <input id="Anonymous" class="radio-input" type="checkbox" asp-for="Anonymous" value="true">
-                <label for="Anonymous" class="label-available">Anonymous share</label>
+    <div class="button-box row">
+        <div class="mb-3">
+            <label class="label-text">Anonymous share</label>
+            <div class="tooltip-div">
+                <i class="fas fa-info"></i>
+                <span class="tooltip-label">This indicates that this message will be visible to people outside diligent network.</span>
             </div>
+            <label class="switch">
+                <input id="Anonymous" type="checkbox" asp-for="Anonymous" value="true">
+                <span class="slider round"></span>
+            </label>
         </div>
-    </div>
-@* TODO: https://www.w3schools.com/howto/howto_css_switch.asp *@
-    <div class="mb-3">
-        <label class="label-text">Should content be edited after posting?</label>
-        <div class="button-box row">
-            <div class="single-button-input col-4">
-                <input id="AllowEditing" class="radio-input" type="checkbox" asp-for="AllowEditing" value="true">
-                <label for="AllowEditing" class="label-available">Allow editing</label>
+        <div class="mb-3">
+            <label class="label-text">Allow editing</label>
+            <div class="tooltip-div">
+                <i class="fas fa-info"></i>
+                <span class="tooltip-label">This indicates that this message can be edited by everyone.</span>
             </div>
+            <label class="switch">
+                <input id="AllowEditing" type="checkbox" asp-for="AllowEditing" value="true">
+                <span class="slider round"></span>
+            </label>
         </div>
     </div>
 
@@ -85,6 +89,18 @@ $('#fileInput').change(function() {
   }
 });
 
+document.getElementById("AllowEditing").onchange = () => {
+    if (document.getElementById("AllowEditing").checked === true){
+        document.getElementById("Anonymous").checked = true;
+    }
+};
+
+document.getElementById("Anonymous").onchange = () => {
+    if (document.getElementById("AllowEditing").checked === true){
+        document.getElementById("Anonymous").checked = true;
+    }
+};
+
 var selectedFiles;
 
 $(document).ready(() => {

SecureSharing/Views/Home/LinkEdit.cshtml

@@ -2,10 +2,6 @@
     Layout = "~/Views/Shared/_Layout.cshtml";
 }
 @model MessageModel
-
-<h1>@Model.Id</h1>
-<h1>@Model.Code</h1>
-
 <h1>Share files</h1>
 <form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="UpdateMessage" class="share-files-form">
     <input type="hidden" asp-for="Id" value="@Model.Id">

SecureSharing/wwwroot/css/site.css

@@ -315,4 +315,93 @@ h1 {
 p {
     padding-left: 2px;
     font-size: 20px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+    padding: 0.5rem;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #90278F;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #90278F;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+.tooltip-div {
+    position: relative;
+    display: inline-block;
+    margin-right: 5px;
+}
+
+.tooltip-div .tooltip-label {
+    visibility: hidden;
+    outline: black solid;
+    width: 150px;
+    background-color: #90278F;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    padding: 5px 0;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 50%;
+    margin-left: -60px;
+}
+
+.tooltip-div:hover .tooltip-label {
+    visibility: visible;
 }