Iterate the Modal Widget Dialog paddings and phishing warning

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/dialogs/_ModalWidgetDialog.scss

@@ -15,7 +15,19 @@ limitations under the License.
 */
 
 .mx_ModalWidgetDialog {
+    .mx_ModalWidgetDialog_warning {
+        margin-bottom: 24px;
+
+        > img {
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+    }
+
     .mx_ModalWidgetDialog_buttons {
+        float: right;
+        margin-top: 24px;
+
         .mx_AccessibleButton + .mx_AccessibleButton {
             margin-left: 8px;
         }
@@ -24,5 +36,7 @@ limitations under the License.
     iframe {
         width: 100%;
         height: 450px;
+        border: 0;
+        border-radius: 8px;
     }
 }

res/img/element-icons/warning-badge.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#737D8C" style="mix-blend-mode:multiply"/>
+<rect x="7" y="3" width="2" height="6" rx="1" fill="white"/>
+<rect x="7" y="11" width="2" height="2" rx="1" fill="white"/>
+</svg>

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -87,7 +87,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
 
     public render() {
         // TODO: Don't violate every single security principle
-        // TODO copied from SGWidget
+        // TODO: DRY - copied from SGWidget
         const templated = this.widget.getCompleteUrl({
             currentRoomId: RoomViewStore.getRoomId(),
             currentUserId: MatrixClientPeg.get().getUserId(),
@@ -140,15 +140,26 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             contentId="mx_Dialog_content"
             onFinished={this.props.onFinished}
         >
+            <div className="mx_ModalWidgetDialog_warning">
+                <img
+                    src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                    height="16"
+                    width="16"
+                    alt=""
+                />
+                {_t("Data on this screen is shared with %(widgetDomain)s", {
+                    widgetDomain: parsed.hostname,
+                })}
+            </div>
             <div>
                 <iframe
                     ref={this.appFrame}
-                    // sandbox="allow-forms allow-scripts" TODO
-                    src={widgetUrl.toString()}
+                    sandbox="allow-forms allow-scripts"
+                    src={widgetUrl}
                     onLoad={this.onLoad}
                 />
             </div>
-            <div className="mx_ModalWidgetDialog_buttons" style={{float: "right"}}>
+            <div className="mx_ModalWidgetDialog_buttons">
                 { buttons }
             </div>
         </BaseDialog>;

src/i18n/strings/en_EN.json

@@ -1769,6 +1769,7 @@
     "Your homeserver doesn't seem to support this feature.": "Your homeserver doesn't seem to support this feature.",
     "Message edits": "Message edits",
     "Modal Widget": "Modal Widget",
+    "Data on this screen is shared with %(widgetDomain)s": "Data on this screen is shared with %(widgetDomain)s",
     "Your account is not secure": "Your account is not secure",
     "Your password": "Your password",
     "This session, or the other session": "This session, or the other session",