add a help button

This commit is contained in:
Peter Cai 2020-02-19 20:26:58 +08:00
parent 84644040da
commit 2eb9ce10fc
No known key found for this signature in database
GPG Key ID: 71F5FB4E4F3FD54F
4 changed files with 53 additions and 2 deletions

View File

@ -1,5 +1,6 @@
import React from "react"
import Dropzone from "react-dropzone"
import HelpButton from "./helpButton"
import LinkButton from "./util/linkButton"
import * as crypto from "../crypto"
import * as util from "../util"
@ -89,6 +90,7 @@ class BinaryUpload extends React.Component
}
</Dropzone>
<div className="content-buttons">
<HelpButton openDialog={@props.openDialog} />
<button
className="button-blue"
disabled={@state.uploading}

43
src/web/helpButton.coffee Normal file
View File

@ -0,0 +1,43 @@
import React from "react"
import * as util from "../util"
class HelpButton extends React.Component
constructor: (props) ->
super props
showHelp: =>
@props.openDialog do =>
<React.Fragment>
<p><strong>Angry.Im Pastebin Service</strong><br/>
Source code:&nbsp;
<a target="_blank" href="https://github.com/PeterCxy/worker-pastebin">
https://github.com/PeterCxy/worker-pastebin
</a>
</p>
<p>
This application is intended as a programming practice.
There is <strong>absolutely no guarantee</strong> on its functionality, security and reliability.
</p>
<p>
<strong>Maximum file size: {util.humanFileSize util.MAX_UPLOAD_SIZE}</strong>, all uploads are kept for <strong>7 days</strong> only.
</p>
<p>
File uploads with <strong>"Encryption: ON"</strong> are encrypted with <i>AES-128-GCM</i> before uploading to server.
The encryption key and IV (<i>Initialization Vector</i>) are generated <strong>in your browser</strong> and not uploaded to server.<br/>
They are appended to the final uploaded URL in the form of {"\"#<key>-<iv>\""} (as a <a target="_blank" href="https://en.wikipedia.org/wiki/Fragment_identifier"><i>Fragment Identifier</i></a>),&nbsp;
so that they will <strong>not</strong> be sent to the server as part of the URL when you access the file later from your browser.
</p>
<p>
The decryption will also be done entirely in your browser. Therefore, it is not supported to access encrypted files outside of a modern browser.
</p>
</React.Fragment>
render: ->
<button
className="button-blue"
onClick={@showHelp}
>
Help
</button>
export default HelpButton

View File

@ -1,4 +1,5 @@
import React from "react"
import HelpButton from "./helpButton"
import LinkButton from "./util/linkButton"
import ContentEditable from "./util/contentEditable"
@ -62,6 +63,7 @@ class Pastebin extends React.Component
plainText
/>
<div className="content-buttons">
<HelpButton openDialog={@props.openDialog} />
<button
className="button-blue"
onClick={@toggleHighlight}

View File

@ -1,9 +1,12 @@
.ReactModal__Content_My {
font-family: sans-serif;
font-size: 14px;
display: flex;
flex-flow: column;
position: absolute;
width: $dialog-width;
height: $dialog-height;
min-height: $dialog-height;
max-height: 80vh;
left: calc((100vw - #{$dialog-width}) / 2);
top: $dialog-margin;
background-color: white;
@ -14,13 +17,14 @@
padding: $dialog-inset;
box-sizing: border-box;
p {
> p {
display: inline-block;
flex: 1;
box-sizing: border-box;
white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
overflow-y: auto;
}
.dialog-buttons {