mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-08 09:42:43 +00:00
Merge branch 'master' of https://github.com/naturalcrit/homebrewery into fix-vulnerability-admin-pages
This commit is contained in:
Víctor Losada Hernández
@@ -19,7 +19,8 @@ const BrewItem = createClass({
|
||||
stubbed : true
|
||||
},
|
||||
updateListFilter : ()=>{},
|
||||
reportError : ()=>{}
|
||||
reportError : ()=>{},
|
||||
renderStorage : true
|
||||
};
|
||||
},
|
||||
|
||||
@@ -95,6 +96,7 @@ const BrewItem = createClass({
|
||||
},
|
||||
|
||||
renderStorageIcon : function(){
|
||||
if(!this.props.renderStorage) return;
|
||||
if(this.props.brew.googleId) {
|
||||
return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
|
||||
<a href={this.props.brew.webViewLink} target='_blank'>
|
||||
@@ -142,10 +144,14 @@ const BrewItem = createClass({
|
||||
}
|
||||
<span title={`Authors:\n${brew.authors?.join('\n')}`}>
|
||||
<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
|
||||
<>
|
||||
<a key={index} href={`/user/${author}`}>{author}</a>
|
||||
{index < brew.authors.length - 1 && ', '}
|
||||
</>))}
|
||||
<React.Fragment key={index}>
|
||||
{author === 'hidden'
|
||||
? <span title="Username contained an email address; hidden to protect user's privacy">{author}</span>
|
||||
: <a href={`/user/${author}`}>{author}</a>
|
||||
}
|
||||
{index < brew.authors.length - 1 && ', '}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</span>
|
||||
<br />
|
||||
<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
|
||||
|
||||
@@ -119,11 +119,12 @@
|
||||
text-align : center;
|
||||
a{
|
||||
.animate(opacity);
|
||||
display : block;
|
||||
margin : 8px 0px;
|
||||
opacity : 0.6;
|
||||
font-size : 1.3em;
|
||||
color : white;
|
||||
display : block;
|
||||
margin : 8px 0px;
|
||||
opacity : 0.6;
|
||||
font-size : 1.3em;
|
||||
color : white;
|
||||
text-decoration : unset;
|
||||
&:hover{
|
||||
opacity : 1;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
/* eslint-disable max-lines */
|
||||
require('./editPage.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
const _ = require('lodash');
|
||||
const createClass = require('create-react-class');
|
||||
|
||||
const request = require('../../utils/request-middleware.js');
|
||||
const { Meta } = require('vitreum/headtags');
|
||||
|
||||
@@ -11,7 +12,7 @@ const Navbar = require('../../navbar/navbar.jsx');
|
||||
|
||||
const NewBrew = require('../../navbar/newbrew.navitem.jsx');
|
||||
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
||||
const PrintLink = require('../../navbar/print.navitem.jsx');
|
||||
const PrintNavItem = require('../../navbar/print.navitem.jsx');
|
||||
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
||||
const Account = require('../../navbar/account.navitem.jsx');
|
||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
||||
@@ -20,9 +21,14 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
|
||||
const Editor = require('../../editor/editor.jsx');
|
||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
const LockNotification = require('./lockNotification/lockNotification.jsx');
|
||||
|
||||
const Markdown = require('naturalcrit/markdown.js');
|
||||
|
||||
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
|
||||
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||
|
||||
import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
|
||||
|
||||
const googleDriveIcon = require('../../googleDrive.svg');
|
||||
|
||||
@@ -38,20 +44,24 @@ const EditPage = createClass({
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
brew : this.props.brew,
|
||||
isSaving : false,
|
||||
isPending : false,
|
||||
alertTrashedGoogleBrew : this.props.brew.trashed,
|
||||
alertLoginToTransfer : false,
|
||||
saveGoogle : this.props.brew.googleId ? true : false,
|
||||
confirmGoogleTransfer : false,
|
||||
error : null,
|
||||
htmlErrors : Markdown.validate(this.props.brew.text),
|
||||
url : '',
|
||||
autoSave : true,
|
||||
autoSaveWarning : false,
|
||||
unsavedTime : new Date(),
|
||||
currentEditorPage : 0
|
||||
brew : this.props.brew,
|
||||
isSaving : false,
|
||||
isPending : false,
|
||||
alertTrashedGoogleBrew : this.props.brew.trashed,
|
||||
alertLoginToTransfer : false,
|
||||
saveGoogle : this.props.brew.googleId ? true : false,
|
||||
confirmGoogleTransfer : false,
|
||||
error : null,
|
||||
htmlErrors : Markdown.validate(this.props.brew.text),
|
||||
url : '',
|
||||
autoSave : true,
|
||||
autoSaveWarning : false,
|
||||
unsavedTime : new Date(),
|
||||
currentEditorViewPageNum : 1,
|
||||
currentEditorCursorPageNum : 1,
|
||||
currentBrewRendererPageNum : 1,
|
||||
displayLockMessage : this.props.brew.lock || false,
|
||||
themeBundle : {}
|
||||
};
|
||||
},
|
||||
|
||||
@@ -83,6 +93,8 @@ const EditPage = createClass({
|
||||
htmlErrors : Markdown.validate(prevState.brew.text)
|
||||
}));
|
||||
|
||||
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||
|
||||
document.addEventListener('keydown', this.handleControlKeys);
|
||||
},
|
||||
componentWillUnmount : function() {
|
||||
@@ -95,7 +107,7 @@ const EditPage = createClass({
|
||||
const S_KEY = 83;
|
||||
const P_KEY = 80;
|
||||
if(e.keyCode == S_KEY) this.trySave(true);
|
||||
if(e.keyCode == P_KEY) window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
|
||||
if(e.keyCode == P_KEY) printCurrentBrew();
|
||||
if(e.keyCode == P_KEY || e.keyCode == S_KEY){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@@ -106,16 +118,27 @@ const EditPage = createClass({
|
||||
this.editor.current.update();
|
||||
},
|
||||
|
||||
handleEditorViewPageChange : function(pageNumber){
|
||||
this.setState({ currentEditorViewPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleEditorCursorPageChange : function(pageNumber){
|
||||
this.setState({ currentEditorCursorPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleBrewRendererPageChange : function(pageNumber){
|
||||
this.setState({ currentBrewRendererPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleTextChange : function(text){
|
||||
//If there are errors, run the validator on every change to give quick feedback
|
||||
let htmlErrors = this.state.htmlErrors;
|
||||
if(htmlErrors.length) htmlErrors = Markdown.validate(text);
|
||||
|
||||
this.setState((prevState)=>({
|
||||
brew : { ...prevState.brew, text: text },
|
||||
isPending : true,
|
||||
htmlErrors : htmlErrors,
|
||||
currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
|
||||
brew : { ...prevState.brew, text: text },
|
||||
isPending : true,
|
||||
htmlErrors : htmlErrors,
|
||||
}), ()=>{if(this.state.autoSave) this.trySave();});
|
||||
},
|
||||
|
||||
@@ -126,7 +149,10 @@ const EditPage = createClass({
|
||||
}), ()=>{if(this.state.autoSave) this.trySave();});
|
||||
},
|
||||
|
||||
handleMetaChange : function(metadata){
|
||||
handleMetaChange : function(metadata, field=undefined){
|
||||
if(field == 'theme' || field == 'renderer') // Fetch theme bundle only if theme or renderer was changed
|
||||
fetchThemeBundle(this, metadata.renderer, metadata.theme);
|
||||
|
||||
this.setState((prevState)=>({
|
||||
brew : {
|
||||
...prevState.brew,
|
||||
@@ -134,13 +160,22 @@ const EditPage = createClass({
|
||||
},
|
||||
isPending : true,
|
||||
}), ()=>{if(this.state.autoSave) this.trySave();});
|
||||
|
||||
},
|
||||
|
||||
hasChanges : function(){
|
||||
return !_.isEqual(this.state.brew, this.savedBrew);
|
||||
},
|
||||
|
||||
updateBrew : function(newData){
|
||||
this.setState((prevState)=>({
|
||||
brew : {
|
||||
...prevState.brew,
|
||||
style : newData.style,
|
||||
text : newData.text
|
||||
}
|
||||
}));
|
||||
},
|
||||
|
||||
trySave : function(immediate=false){
|
||||
if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
|
||||
if(this.hasChanges()){
|
||||
@@ -193,6 +228,9 @@ const EditPage = createClass({
|
||||
htmlErrors : Markdown.validate(prevState.brew.text)
|
||||
}));
|
||||
|
||||
updateHistory(this.state.brew);
|
||||
versionHistoryGarbageCollection();
|
||||
|
||||
const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
|
||||
|
||||
const brew = this.state.brew;
|
||||
@@ -378,7 +416,7 @@ const EditPage = createClass({
|
||||
post to reddit
|
||||
</Nav.item>
|
||||
</Nav.dropdown>
|
||||
<PrintLink shareId={this.processShareId()} />
|
||||
<PrintNavItem />
|
||||
<RecentNavItem brew={this.state.brew} storageKey='edit' />
|
||||
<Account />
|
||||
</Nav.section>
|
||||
@@ -392,6 +430,7 @@ const EditPage = createClass({
|
||||
{this.renderNavbar()}
|
||||
|
||||
<div className='content'>
|
||||
{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
|
||||
<SplitPane onDragFinish={this.handleSplitMove}>
|
||||
<Editor
|
||||
ref={this.editor}
|
||||
@@ -401,15 +440,28 @@ const EditPage = createClass({
|
||||
onMetaChange={this.handleMetaChange}
|
||||
reportError={this.errorReported}
|
||||
renderer={this.state.brew.renderer}
|
||||
userThemes={this.props.userThemes}
|
||||
snippetBundle={this.state.themeBundle.snippets}
|
||||
updateBrew={this.updateBrew}
|
||||
onCursorPageChange={this.handleEditorCursorPageChange}
|
||||
onViewPageChange={this.handleEditorViewPageChange}
|
||||
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
|
||||
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
|
||||
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
|
||||
/>
|
||||
<BrewRenderer
|
||||
text={this.state.brew.text}
|
||||
style={this.state.brew.style}
|
||||
renderer={this.state.brew.renderer}
|
||||
theme={this.state.brew.theme}
|
||||
themeBundle={this.state.themeBundle}
|
||||
errors={this.state.htmlErrors}
|
||||
lang={this.state.brew.lang}
|
||||
currentEditorPage={this.state.currentEditorPage}
|
||||
onPageChange={this.handleBrewRendererPageChange}
|
||||
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
|
||||
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
|
||||
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
|
||||
allowPrint={true}
|
||||
/>
|
||||
</SplitPane>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
require('./lockNotification.less');
|
||||
const React = require('react');
|
||||
import Dialog from '../../../../components/dialog.jsx';
|
||||
|
||||
function LockNotification(props) {
|
||||
props = {
|
||||
shareId : 0,
|
||||
disableLock : ()=>{},
|
||||
message : '',
|
||||
...props
|
||||
};
|
||||
|
||||
const removeLock = ()=>{
|
||||
alert(`Not yet implemented - ID ${props.shareId}`);
|
||||
};
|
||||
|
||||
return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' >
|
||||
<h1>BREW LOCKED</h1>
|
||||
<p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p>
|
||||
<hr />
|
||||
<h3>LOCK REASON</h3>
|
||||
<p>{props.message || 'Unable to retrieve Lock Message'}</p>
|
||||
<hr />
|
||||
<p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p>
|
||||
<p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p>
|
||||
<button onClick={removeLock}>REQUEST LOCK REMOVAL</button>
|
||||
</Dialog>;
|
||||
};
|
||||
|
||||
module.exports = LockNotification;
|
||||
@@ -0,0 +1,27 @@
|
||||
.lockNotification {
|
||||
z-index : 1;
|
||||
width : 80%;
|
||||
padding : 10px;
|
||||
margin : 5% 10%;
|
||||
line-height : 1.5em;
|
||||
color : black;
|
||||
text-align : center;
|
||||
background-color : #CCCCCC;
|
||||
|
||||
&::backdrop { background-color : #000000AA; }
|
||||
|
||||
button {
|
||||
margin : 10px;
|
||||
color : white;
|
||||
background-color : #333333;
|
||||
|
||||
&:hover { background-color : #777777; }
|
||||
}
|
||||
|
||||
h1, h3 {
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-weight : 800;
|
||||
}
|
||||
h1 { font-size : 24px; }
|
||||
h3 { font-size : 18px; }
|
||||
}
|
||||
@@ -2,6 +2,9 @@ const dedent = require('dedent-tabs').default;
|
||||
|
||||
const loginUrl = 'https://www.naturalcrit.com/login';
|
||||
|
||||
//001-050 : Brew errors
|
||||
//050-100 : Other pages errors
|
||||
|
||||
const errorIndex = (props)=>{
|
||||
return {
|
||||
// Default catch all
|
||||
@@ -136,11 +139,32 @@ const errorIndex = (props)=>{
|
||||
|
||||
**Brew ID:** ${props.brew.brewId}`,
|
||||
|
||||
// Theme load error
|
||||
'09' : dedent`
|
||||
## No Homebrewery theme document could be found.
|
||||
|
||||
The server could not locate the Homebrewery document. It was likely deleted by
|
||||
its owner.
|
||||
|
||||
:
|
||||
|
||||
**Requested access:** ${props.brew.accessType}
|
||||
|
||||
**Brew ID:** ${props.brew.brewId}`,
|
||||
|
||||
//account page when account is not defined
|
||||
'50' : dedent`
|
||||
## You are not signed in
|
||||
|
||||
You are trying to access the account page, but are not signed in to an account.
|
||||
|
||||
Please login or signup at our [login page](https://www.naturalcrit.com/login?redirect=https://homebrewery.naturalcrit.com/account).`,
|
||||
|
||||
// Brew locked by Administrators error
|
||||
'100' : dedent`
|
||||
'51' : dedent`
|
||||
## This brew has been locked.
|
||||
|
||||
Please contact the Administrators to unlock this document.
|
||||
Only an author may request that this lock is removed.
|
||||
|
||||
:
|
||||
|
||||
@@ -152,7 +176,7 @@ const errorIndex = (props)=>{
|
||||
|
||||
// ####### Admin pages errors #######
|
||||
|
||||
'401': dedent`
|
||||
'52': dedent`
|
||||
## Authorization Required
|
||||
You need to provide correct administrator credentials to access this page.
|
||||
|
||||
@@ -162,7 +186,7 @@ const errorIndex = (props)=>{
|
||||
[reddit mod mail](https://old.reddit.com/message/compose/?to=/r/homebrewery) or
|
||||
in the [hb_issues channel of the Discord of Many Things server](https://discord.gg/domt).
|
||||
`,
|
||||
'403': dedent`
|
||||
'53': dedent`
|
||||
## Access Denied
|
||||
|
||||
The credentials you entered are not correct, you may try again, attention, there is a limited number of tries before you are blocked.
|
||||
@@ -177,7 +201,7 @@ const errorIndex = (props)=>{
|
||||
as so at our subreddit or discord you will find in the home page.
|
||||
`,
|
||||
|
||||
'470' : dedent`
|
||||
'53' : dedent`
|
||||
## You have runned out of attempts
|
||||
|
||||
You have failed to provide correct credentials to access the page too many times, and you have run out of attempts.
|
||||
@@ -195,7 +219,11 @@ const errorIndex = (props)=>{
|
||||
|
||||
In any case, your attempts have been logged, and you will not be capable of doing any more attempt for now.
|
||||
`,
|
||||
'90' : dedent` An unexpected error occurred while looking for these brews.
|
||||
Try again in a few minutes.`,
|
||||
|
||||
'91' : dedent` An unexpected error occurred while trying to get the total of brews.`,
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = errorIndex;
|
||||
module.exports = errorIndex;
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
//TODO: Depricate
|
||||
|
||||
module.exports = function(shareId){
|
||||
return function(event){
|
||||
event = event || window.event;
|
||||
if((event.ctrlKey || event.metaKey) && event.keyCode == 80){
|
||||
const win = window.open(`/homebrew/print/${shareId}?dialog=true`, '_blank');
|
||||
win.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -1,7 +1,6 @@
|
||||
require('./homePage.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
const _ = require('lodash');
|
||||
const cx = require('classnames');
|
||||
const request = require('../../utils/request-middleware.js');
|
||||
const { Meta } = require('vitreum/headtags');
|
||||
@@ -10,10 +9,11 @@ const Nav = require('naturalcrit/nav/nav.jsx');
|
||||
const Navbar = require('../../navbar/navbar.jsx');
|
||||
const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
|
||||
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
||||
const VaultNavItem = require('../../navbar/vault.navitem.jsx');
|
||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
||||
const AccountNavItem = require('../../navbar/account.navitem.jsx');
|
||||
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
||||
|
||||
const { fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||
|
||||
const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
|
||||
const Editor = require('../../editor/editor.jsx');
|
||||
@@ -31,15 +31,22 @@ const HomePage = createClass({
|
||||
},
|
||||
getInitialState : function() {
|
||||
return {
|
||||
brew : this.props.brew,
|
||||
welcomeText : this.props.brew.text,
|
||||
error : undefined,
|
||||
currentEditorPage : 0
|
||||
brew : this.props.brew,
|
||||
welcomeText : this.props.brew.text,
|
||||
error : undefined,
|
||||
currentEditorViewPageNum : 1,
|
||||
currentEditorCursorPageNum : 1,
|
||||
currentBrewRendererPageNum : 1,
|
||||
themeBundle : {}
|
||||
};
|
||||
},
|
||||
|
||||
editor : React.createRef(null),
|
||||
|
||||
componentDidMount : function() {
|
||||
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||
},
|
||||
|
||||
handleSave : function(){
|
||||
request.post('/api')
|
||||
.send(this.state.brew)
|
||||
@@ -55,10 +62,22 @@ const HomePage = createClass({
|
||||
handleSplitMove : function(){
|
||||
this.editor.current.update();
|
||||
},
|
||||
|
||||
handleEditorViewPageChange : function(pageNumber){
|
||||
this.setState({ currentEditorViewPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleEditorCursorPageChange : function(pageNumber){
|
||||
this.setState({ currentEditorCursorPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleBrewRendererPageChange : function(pageNumber){
|
||||
this.setState({ currentBrewRendererPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleTextChange : function(text){
|
||||
this.setState((prevState)=>({
|
||||
brew : { ...prevState.brew, text: text },
|
||||
currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
|
||||
brew : { ...prevState.brew, text: text },
|
||||
}));
|
||||
},
|
||||
renderNavbar : function(){
|
||||
@@ -70,6 +89,7 @@ const HomePage = createClass({
|
||||
}
|
||||
<NewBrewItem />
|
||||
<HelpNavItem />
|
||||
<VaultNavItem />
|
||||
<RecentNavItem />
|
||||
<AccountNavItem />
|
||||
</Nav.section>
|
||||
@@ -89,12 +109,22 @@ const HomePage = createClass({
|
||||
onTextChange={this.handleTextChange}
|
||||
renderer={this.state.brew.renderer}
|
||||
showEditButtons={false}
|
||||
snippetBundle={this.state.themeBundle.snippets}
|
||||
onCursorPageChange={this.handleEditorCursorPageChange}
|
||||
onViewPageChange={this.handleEditorViewPageChange}
|
||||
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
|
||||
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
|
||||
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
|
||||
/>
|
||||
<BrewRenderer
|
||||
text={this.state.brew.text}
|
||||
style={this.state.brew.style}
|
||||
renderer={this.state.brew.renderer}
|
||||
currentEditorPage={this.state.currentEditorPage}
|
||||
onPageChange={this.handleBrewRendererPageChange}
|
||||
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
|
||||
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
|
||||
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
|
||||
themeBundle={this.state.themeBundle}
|
||||
/>
|
||||
</SplitPane>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,7 @@ const request = require('../../utils/request-middleware.js');
|
||||
const Markdown = require('naturalcrit/markdown.js');
|
||||
|
||||
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||
const PrintNavItem = require('../../navbar/print.navitem.jsx');
|
||||
const Navbar = require('../../navbar/navbar.jsx');
|
||||
const AccountNavItem = require('../../navbar/account.navitem.jsx');
|
||||
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
||||
@@ -18,6 +19,7 @@ const Editor = require('../../editor/editor.jsx');
|
||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
|
||||
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||
|
||||
const BREWKEY = 'homebrewery-new';
|
||||
const STYLEKEY = 'homebrewery-new-style';
|
||||
@@ -37,12 +39,15 @@ const NewPage = createClass({
|
||||
const brew = this.props.brew;
|
||||
|
||||
return {
|
||||
brew : brew,
|
||||
isSaving : false,
|
||||
saveGoogle : (global.account && global.account.googleId ? true : false),
|
||||
error : null,
|
||||
htmlErrors : Markdown.validate(brew.text),
|
||||
currentEditorPage : 0
|
||||
brew : brew,
|
||||
isSaving : false,
|
||||
saveGoogle : (global.account && global.account.googleId ? true : false),
|
||||
error : null,
|
||||
htmlErrors : Markdown.validate(brew.text),
|
||||
currentEditorViewPageNum : 1,
|
||||
currentEditorCursorPageNum : 1,
|
||||
currentBrewRendererPageNum : 1,
|
||||
themeBundle : {}
|
||||
};
|
||||
},
|
||||
|
||||
@@ -75,10 +80,15 @@ const NewPage = createClass({
|
||||
saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
|
||||
});
|
||||
|
||||
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||
|
||||
localStorage.setItem(BREWKEY, brew.text);
|
||||
if(brew.style)
|
||||
localStorage.setItem(STYLEKEY, brew.style);
|
||||
localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
|
||||
if(window.location.pathname != '/new') {
|
||||
window.history.replaceState({}, window.location.title, '/new/');
|
||||
}
|
||||
},
|
||||
componentWillUnmount : function() {
|
||||
document.removeEventListener('keydown', this.handleControlKeys);
|
||||
@@ -89,7 +99,7 @@ const NewPage = createClass({
|
||||
const S_KEY = 83;
|
||||
const P_KEY = 80;
|
||||
if(e.keyCode == S_KEY) this.save();
|
||||
if(e.keyCode == P_KEY) this.print();
|
||||
if(e.keyCode == P_KEY) printCurrentBrew();
|
||||
if(e.keyCode == P_KEY || e.keyCode == S_KEY){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@@ -100,15 +110,26 @@ const NewPage = createClass({
|
||||
this.editor.current.update();
|
||||
},
|
||||
|
||||
handleEditorViewPageChange : function(pageNumber){
|
||||
this.setState({ currentEditorViewPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleEditorCursorPageChange : function(pageNumber){
|
||||
this.setState({ currentEditorCursorPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleBrewRendererPageChange : function(pageNumber){
|
||||
this.setState({ currentBrewRendererPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleTextChange : function(text){
|
||||
//If there are errors, run the validator on every change to give quick feedback
|
||||
let htmlErrors = this.state.htmlErrors;
|
||||
if(htmlErrors.length) htmlErrors = Markdown.validate(text);
|
||||
|
||||
this.setState((prevState)=>({
|
||||
brew : { ...prevState.brew, text: text },
|
||||
htmlErrors : htmlErrors,
|
||||
currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
|
||||
brew : { ...prevState.brew, text: text },
|
||||
htmlErrors : htmlErrors,
|
||||
}));
|
||||
localStorage.setItem(BREWKEY, text);
|
||||
},
|
||||
@@ -120,7 +141,10 @@ const NewPage = createClass({
|
||||
localStorage.setItem(STYLEKEY, style);
|
||||
},
|
||||
|
||||
handleMetaChange : function(metadata){
|
||||
handleMetaChange : function(metadata, field=undefined){
|
||||
if(field == 'theme' || field == 'renderer') // Fetch theme bundle only if theme or renderer was changed
|
||||
fetchThemeBundle(this, metadata.renderer, metadata.theme);
|
||||
|
||||
this.setState((prevState)=>({
|
||||
brew : { ...prevState.brew, ...metadata },
|
||||
}), ()=>{
|
||||
@@ -140,8 +164,6 @@ const NewPage = createClass({
|
||||
isSaving : true
|
||||
});
|
||||
|
||||
console.log('saving new brew');
|
||||
|
||||
let brew = this.state.brew;
|
||||
// Split out CSS to Style if CSS codefence exists
|
||||
if(brew.text.startsWith('```css') && brew.text.indexOf('```\n\n') > 0) {
|
||||
@@ -151,12 +173,10 @@ const NewPage = createClass({
|
||||
}
|
||||
|
||||
brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
|
||||
|
||||
const res = await request
|
||||
.post(`/api${this.state.saveGoogle ? '?saveToGoogle=true' : ''}`)
|
||||
.send(brew)
|
||||
.catch((err)=>{
|
||||
console.log(err);
|
||||
this.setState({ isSaving: false, error: err });
|
||||
});
|
||||
if(!res) return;
|
||||
@@ -180,16 +200,6 @@ const NewPage = createClass({
|
||||
}
|
||||
},
|
||||
|
||||
print : function(){
|
||||
window.open('/print?dialog=true&local=print', '_blank');
|
||||
},
|
||||
|
||||
renderLocalPrintButton : function(){
|
||||
return <Nav.item color='purple' icon='far fa-file-pdf' onClick={this.print}>
|
||||
get PDF
|
||||
</Nav.item>;
|
||||
},
|
||||
|
||||
renderNavbar : function(){
|
||||
return <Navbar>
|
||||
|
||||
@@ -202,7 +212,7 @@ const NewPage = createClass({
|
||||
<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
|
||||
this.renderSaveButton()
|
||||
}
|
||||
{this.renderLocalPrintButton()}
|
||||
<PrintNavItem />
|
||||
<HelpNavItem />
|
||||
<RecentNavItem />
|
||||
<AccountNavItem />
|
||||
@@ -222,15 +232,27 @@ const NewPage = createClass({
|
||||
onStyleChange={this.handleStyleChange}
|
||||
onMetaChange={this.handleMetaChange}
|
||||
renderer={this.state.brew.renderer}
|
||||
userThemes={this.props.userThemes}
|
||||
snippetBundle={this.state.themeBundle.snippets}
|
||||
onCursorPageChange={this.handleEditorCursorPageChange}
|
||||
onViewPageChange={this.handleEditorViewPageChange}
|
||||
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
|
||||
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
|
||||
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
|
||||
/>
|
||||
<BrewRenderer
|
||||
text={this.state.brew.text}
|
||||
style={this.state.brew.style}
|
||||
renderer={this.state.brew.renderer}
|
||||
theme={this.state.brew.theme}
|
||||
themeBundle={this.state.themeBundle}
|
||||
errors={this.state.htmlErrors}
|
||||
lang={this.state.brew.lang}
|
||||
currentEditorPage={this.state.currentEditorPage}
|
||||
onPageChange={this.handleBrewRendererPageChange}
|
||||
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
|
||||
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
|
||||
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
|
||||
allowPrint={true}
|
||||
/>
|
||||
</SplitPane>
|
||||
</div>
|
||||
|
||||
@@ -1,112 +0,0 @@
|
||||
require('./printPage.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
const _ = require('lodash');
|
||||
const { Meta } = require('vitreum/headtags');
|
||||
const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
|
||||
const Markdown = require('naturalcrit/markdown.js');
|
||||
|
||||
const Themes = require('themes/themes.json');
|
||||
|
||||
const BREWKEY = 'homebrewery-new';
|
||||
const STYLEKEY = 'homebrewery-new-style';
|
||||
const METAKEY = 'homebrewery-new-meta';
|
||||
|
||||
const PrintPage = createClass({
|
||||
displayName : 'PrintPage',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
query : {},
|
||||
brew : {
|
||||
text : '',
|
||||
style : '',
|
||||
renderer : 'legacy',
|
||||
lang : ''
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
brew : {
|
||||
text : this.props.brew.text || '',
|
||||
style : this.props.brew.style || undefined,
|
||||
renderer : this.props.brew.renderer || 'legacy',
|
||||
theme : this.props.brew.theme || '5ePHB',
|
||||
lang : this.props.brew.lang || 'en'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount : function() {
|
||||
if(this.props.query.local == 'print'){
|
||||
const brewStorage = localStorage.getItem(BREWKEY);
|
||||
const styleStorage = localStorage.getItem(STYLEKEY);
|
||||
const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
|
||||
|
||||
this.setState((prevState, prevProps)=>{
|
||||
return {
|
||||
brew : {
|
||||
text : brewStorage,
|
||||
style : styleStorage,
|
||||
renderer : metaStorage?.renderer || 'legacy',
|
||||
theme : metaStorage?.theme || '5ePHB',
|
||||
lang : metaStorage?.lang || 'en'
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if(this.props.query.dialog) window.print();
|
||||
},
|
||||
|
||||
renderStyle : function() {
|
||||
if(!this.state.brew.style) return;
|
||||
//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
|
||||
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.state.brew.style}\n</style>` }} />;
|
||||
},
|
||||
|
||||
renderPages : function(){
|
||||
if(this.state.brew.renderer == 'legacy') {
|
||||
return _.map(this.state.brew.text.split('\\page'), (pageText, index)=>{
|
||||
return <div
|
||||
className='phb page'
|
||||
id={`p${index + 1}`}
|
||||
dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }}
|
||||
key={index} />;
|
||||
});
|
||||
} else {
|
||||
return _.map(this.state.brew.text.split(/^\\page$/gm), (pageText, index)=>{
|
||||
pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
return (
|
||||
<div className='page' id={`p${index + 1}`} key={index} >
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
render : function(){
|
||||
const rendererPath = this.state.brew.renderer == 'V3' ? 'V3' : 'Legacy';
|
||||
const themePath = this.state.brew.theme ?? '5ePHB';
|
||||
const baseThemePath = Themes[rendererPath][themePath].baseTheme;
|
||||
|
||||
return <div>
|
||||
<Meta name='robots' content='noindex, nofollow' />
|
||||
<link href={`/themes/${rendererPath}/Blank/style.css`} type='text/css' rel='stylesheet'/>
|
||||
{baseThemePath &&
|
||||
<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type='text/css' rel='stylesheet'/>
|
||||
}
|
||||
<link href={`/themes/${rendererPath}/${themePath}/style.css`} type='text/css' rel='stylesheet'/>
|
||||
{/* Apply CSS from Style tab */}
|
||||
{this.renderStyle()}
|
||||
<div className='pages' lang={this.state.brew.lang}>
|
||||
{this.renderPages()}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = PrintPage;
|
||||
@@ -1,3 +0,0 @@
|
||||
.printPage{
|
||||
|
||||
}
|
||||
@@ -6,25 +6,33 @@ const { Meta } = require('vitreum/headtags');
|
||||
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||
const Navbar = require('../../navbar/navbar.jsx');
|
||||
const MetadataNav = require('../../navbar/metadata.navitem.jsx');
|
||||
const PrintLink = require('../../navbar/print.navitem.jsx');
|
||||
const PrintNavItem = require('../../navbar/print.navitem.jsx');
|
||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
||||
const Account = require('../../navbar/account.navitem.jsx');
|
||||
|
||||
|
||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
|
||||
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||
|
||||
const SharePage = createClass({
|
||||
displayName : 'SharePage',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
brew : DEFAULT_BREW_LOAD
|
||||
brew : DEFAULT_BREW_LOAD,
|
||||
disableMeta : false
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
themeBundle : {}
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount : function() {
|
||||
document.addEventListener('keydown', this.handleControlKeys);
|
||||
|
||||
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||
},
|
||||
|
||||
componentWillUnmount : function() {
|
||||
@@ -35,7 +43,7 @@ const SharePage = createClass({
|
||||
if(!(e.ctrlKey || e.metaKey)) return;
|
||||
const P_KEY = 80;
|
||||
if(e.keyCode == P_KEY){
|
||||
window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
|
||||
if(e.keyCode == P_KEY) printCurrentBrew();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
@@ -61,18 +69,26 @@ const SharePage = createClass({
|
||||
},
|
||||
|
||||
render : function(){
|
||||
const titleStyle = this.props.disableMeta ? { cursor: 'default' } : {};
|
||||
const titleEl = <Nav.item className='brewTitle' style={titleStyle}>{this.props.brew.title}</Nav.item>;
|
||||
|
||||
return <div className='sharePage sitePage'>
|
||||
<Meta name='robots' content='noindex, nofollow' />
|
||||
<Navbar>
|
||||
<Nav.section className='titleSection'>
|
||||
<MetadataNav brew={this.props.brew}>
|
||||
<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
|
||||
</MetadataNav>
|
||||
{
|
||||
this.props.disableMeta ?
|
||||
titleEl
|
||||
:
|
||||
<MetadataNav brew={this.props.brew}>
|
||||
{titleEl}
|
||||
</MetadataNav>
|
||||
}
|
||||
</Nav.section>
|
||||
|
||||
<Nav.section>
|
||||
{this.props.brew.shareId && <>
|
||||
<PrintLink shareId={this.processShareId()} />
|
||||
<PrintNavItem/>
|
||||
<Nav.dropdown>
|
||||
<Nav.item color='red' icon='fas fa-code'>
|
||||
source
|
||||
@@ -95,7 +111,14 @@ const SharePage = createClass({
|
||||
</Navbar>
|
||||
|
||||
<div className='content'>
|
||||
<BrewRenderer text={this.props.brew.text} style={this.props.brew.style} renderer={this.props.brew.renderer} theme={this.props.brew.theme} />
|
||||
<BrewRenderer
|
||||
text={this.props.brew.text}
|
||||
style={this.props.brew.style}
|
||||
renderer={this.props.brew.renderer}
|
||||
theme={this.props.brew.theme}
|
||||
themeBundle={this.state.themeBundle}
|
||||
allowPrint={true}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ const Account = require('../../navbar/account.navitem.jsx');
|
||||
const NewBrew = require('../../navbar/newbrew.navitem.jsx');
|
||||
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
||||
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
||||
const VaultNavitem = require('../../navbar/vault.navitem.jsx');
|
||||
|
||||
const UserPage = createClass({
|
||||
displayName : 'UserPage',
|
||||
@@ -66,6 +67,7 @@ const UserPage = createClass({
|
||||
}
|
||||
<NewBrew />
|
||||
<HelpNavItem />
|
||||
<VaultNavitem/>
|
||||
<RecentNavItem />
|
||||
<Account />
|
||||
</Nav.section>
|
||||
|
||||
396
client/homebrew/pages/vaultPage/vaultPage.jsx
Normal file
396
client/homebrew/pages/vaultPage/vaultPage.jsx
Normal file
@@ -0,0 +1,396 @@
|
||||
require('./vaultPage.less');
|
||||
|
||||
const React = require('react');
|
||||
const { useState, useEffect, useRef } = React;
|
||||
|
||||
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||
const Navbar = require('../../navbar/navbar.jsx');
|
||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
||||
const Account = require('../../navbar/account.navitem.jsx');
|
||||
const NewBrew = require('../../navbar/newbrew.navitem.jsx');
|
||||
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
||||
const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx');
|
||||
const SplitPane = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
|
||||
const ErrorIndex = require('../errorPage/errors/errorIndex.js');
|
||||
|
||||
const request = require('../../utils/request-middleware.js');
|
||||
|
||||
const VaultPage = (props)=>{
|
||||
const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
|
||||
|
||||
//Response state
|
||||
const [brewCollection, setBrewCollection] = useState(null);
|
||||
const [totalBrews, setTotalBrews] = useState(null);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
|
||||
const titleRef = useRef(null);
|
||||
const authorRef = useRef(null);
|
||||
const countRef = useRef(null);
|
||||
const v3Ref = useRef(null);
|
||||
const legacyRef = useRef(null);
|
||||
const submitButtonRef = useRef(null);
|
||||
|
||||
useEffect(()=>{
|
||||
disableSubmitIfFormInvalid();
|
||||
loadPage(pageState, true);
|
||||
}, []);
|
||||
|
||||
const updateStateWithBrews = (brews, page)=>{
|
||||
setBrewCollection(brews || null);
|
||||
setPageState(parseInt(page) || 1);
|
||||
setSearching(false);
|
||||
};
|
||||
|
||||
const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page)=>{
|
||||
const url = new URL(window.location.href);
|
||||
const urlParams = new URLSearchParams(url.search);
|
||||
|
||||
urlParams.set('title', titleValue);
|
||||
urlParams.set('author', authorValue);
|
||||
urlParams.set('count', countValue);
|
||||
urlParams.set('v3', v3Value);
|
||||
urlParams.set('legacy', legacyValue);
|
||||
urlParams.set('page', page);
|
||||
|
||||
url.search = urlParams.toString();
|
||||
window.history.replaceState(null, '', url.toString());
|
||||
};
|
||||
|
||||
const performSearch = async (title, author, count, v3, legacy, page)=>{
|
||||
updateUrl(title, author, count, v3, legacy, page);
|
||||
|
||||
const response = await request.get(
|
||||
`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}`
|
||||
).catch((error)=>{
|
||||
console.log('error at loadPage: ', error);
|
||||
setError(error);
|
||||
updateStateWithBrews([], 1);
|
||||
});
|
||||
|
||||
if(response.ok)
|
||||
updateStateWithBrews(response.body.brews, page);
|
||||
};
|
||||
|
||||
const loadTotal = async (title, author, v3, legacy)=>{
|
||||
setTotalBrews(null);
|
||||
|
||||
const response = await request.get(
|
||||
`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`
|
||||
).catch((error)=>{
|
||||
console.log('error at loadTotal: ', error);
|
||||
setError(error);
|
||||
updateStateWithBrews([], 1);
|
||||
});
|
||||
|
||||
if(response.ok)
|
||||
setTotalBrews(response.body.totalBrews);
|
||||
};
|
||||
|
||||
const loadPage = async (page, updateTotal)=>{
|
||||
if(!validateForm())
|
||||
return;
|
||||
|
||||
setSearching(true);
|
||||
setError(null);
|
||||
|
||||
const title = titleRef.current.value || '';
|
||||
const author = authorRef.current.value || '';
|
||||
const count = countRef.current.value || 10;
|
||||
const v3 = v3Ref.current.checked != false;
|
||||
const legacy = legacyRef.current.checked != false;
|
||||
|
||||
performSearch(title, author, count, v3, legacy, page);
|
||||
|
||||
if(updateTotal)
|
||||
loadTotal(title, author, v3, legacy);
|
||||
};
|
||||
|
||||
const renderNavItems = ()=>(
|
||||
<Navbar>
|
||||
<Nav.section>
|
||||
<Nav.item className='brewTitle'>
|
||||
Vault: Search for brews
|
||||
</Nav.item>
|
||||
</Nav.section>
|
||||
<Nav.section>
|
||||
<NewBrew />
|
||||
<HelpNavItem />
|
||||
<RecentNavItem />
|
||||
<Account />
|
||||
</Nav.section>
|
||||
</Navbar>
|
||||
);
|
||||
|
||||
const validateForm = ()=>{
|
||||
//form validity: title or author must be written, and at least one renderer set
|
||||
const isTitleValid = titleRef.current.validity.valid && titleRef.current.value;
|
||||
const isAuthorValid = authorRef.current.validity.valid && authorRef.current.value;
|
||||
const isCheckboxChecked = legacyRef.current.checked || v3Ref.current.checked;
|
||||
|
||||
const isFormValid = (isTitleValid || isAuthorValid) && isCheckboxChecked;
|
||||
|
||||
return isFormValid;
|
||||
};
|
||||
|
||||
const disableSubmitIfFormInvalid = ()=>{
|
||||
submitButtonRef.current.disabled = !validateForm();
|
||||
};
|
||||
|
||||
const renderForm = ()=>(
|
||||
<div className='brewLookup'>
|
||||
<h2 className='formTitle'>Brew Lookup</h2>
|
||||
<div className='formContents'>
|
||||
<label>
|
||||
Title of the brew
|
||||
<input
|
||||
ref={titleRef}
|
||||
type='text'
|
||||
name='title'
|
||||
defaultValue={props.query.title || ''}
|
||||
onKeyUp={disableSubmitIfFormInvalid}
|
||||
pattern='.{3,}'
|
||||
title='At least 3 characters'
|
||||
onKeyDown={(e)=>{
|
||||
if(e.key === 'Enter' && !submitButtonRef.current.disabled)
|
||||
loadPage(1, true);
|
||||
}}
|
||||
placeholder='v3 Reference Document'
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Author of the brew
|
||||
<input
|
||||
ref={authorRef}
|
||||
type='text'
|
||||
name='author'
|
||||
pattern='.{1,}'
|
||||
defaultValue={props.query.author || ''}
|
||||
onKeyUp={disableSubmitIfFormInvalid}
|
||||
onKeyDown={(e)=>{
|
||||
if(e.key === 'Enter' && !submitButtonRef.current.disabled)
|
||||
loadPage(1, true);
|
||||
}}
|
||||
placeholder='Username'
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Results per page
|
||||
<select ref={countRef} name='count' defaultValue={props.query.count || 20}>
|
||||
<option value='10'>10</option>
|
||||
<option value='20'>20</option>
|
||||
<option value='40'>40</option>
|
||||
<option value='60'>60</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input
|
||||
className='renderer'
|
||||
ref={v3Ref}
|
||||
type='checkbox'
|
||||
defaultChecked={props.query.v3 !== 'false'}
|
||||
onChange={disableSubmitIfFormInvalid}
|
||||
/>
|
||||
Search for v3 brews
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input
|
||||
className='renderer'
|
||||
ref={legacyRef}
|
||||
type='checkbox'
|
||||
defaultChecked={props.query.legacy !== 'false'}
|
||||
onChange={disableSubmitIfFormInvalid}
|
||||
/>
|
||||
Search for legacy brews
|
||||
</label>
|
||||
|
||||
<button
|
||||
id='searchButton'
|
||||
ref={submitButtonRef}
|
||||
onClick={()=>{
|
||||
loadPage(1, true);
|
||||
}}
|
||||
>
|
||||
Search
|
||||
<i
|
||||
className={searching ? 'fas fa-spin fa-spinner': 'fas fa-search'}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<legend>
|
||||
<h3>Tips and tricks</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Only <b>published</b> brews are searchable via this tool
|
||||
</li>
|
||||
<li>
|
||||
Usernames are case-sensitive
|
||||
</li>
|
||||
<li>
|
||||
Use <code>"word"</code> to match an exact string,
|
||||
and <code>-</code> to exclude words (at least one word must not be negated)
|
||||
</li>
|
||||
<li>
|
||||
Some common words like "a", "after", "through", "itself", "here", etc.,
|
||||
are ignored in searches. The full list can be found
|
||||
<a href='https://github.com/mongodb/mongo/blob/0e3b3ca8480ddddf5d0105d11a94bd4698335312/src/mongo/db/fts/stop_words_english.txt'>
|
||||
here
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<small>New features will be coming, such as filters and search by tags.</small>
|
||||
</legend>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderPaginationControls = ()=>{
|
||||
if(!totalBrews) return null;
|
||||
|
||||
const countInt = parseInt(props.query.count || 20);
|
||||
const totalPages = Math.ceil(totalBrews / countInt);
|
||||
|
||||
let startPage, endPage;
|
||||
if(pageState <= 6) {
|
||||
startPage = 1;
|
||||
endPage = Math.min(totalPages, 10);
|
||||
} else if(pageState + 4 >= totalPages) {
|
||||
startPage = Math.max(1, totalPages - 9);
|
||||
endPage = totalPages;
|
||||
} else {
|
||||
startPage = pageState - 5;
|
||||
endPage = pageState + 4;
|
||||
}
|
||||
|
||||
const pagesAroundCurrent = new Array(endPage - startPage + 1)
|
||||
.fill()
|
||||
.map((_, index)=>(
|
||||
<a
|
||||
key={startPage + index}
|
||||
className={`pageNumber ${
|
||||
pageState === startPage + index ? 'currentPage' : ''
|
||||
}`}
|
||||
onClick={()=>loadPage(startPage + index, false)}
|
||||
>
|
||||
{startPage + index}
|
||||
</a>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className='paginationControls'>
|
||||
<button
|
||||
className='previousPage'
|
||||
onClick={()=>loadPage(pageState - 1, false)}
|
||||
disabled={pageState === startPage}
|
||||
>
|
||||
<i className='fa-solid fa-chevron-left'></i>
|
||||
</button>
|
||||
<ol className='pages'>
|
||||
{startPage > 1 && (
|
||||
<a
|
||||
className='pageNumber firstPage'
|
||||
onClick={()=>loadPage(1, false)}
|
||||
>
|
||||
1 ...
|
||||
</a>
|
||||
)}
|
||||
{pagesAroundCurrent}
|
||||
{endPage < totalPages && (
|
||||
<a
|
||||
className='pageNumber lastPage'
|
||||
onClick={()=>loadPage(totalPages, false)}
|
||||
>
|
||||
... {totalPages}
|
||||
</a>
|
||||
)}
|
||||
</ol>
|
||||
<button
|
||||
className='nextPage'
|
||||
onClick={()=>loadPage(pageState + 1, false)}
|
||||
disabled={pageState === totalPages}
|
||||
>
|
||||
<i className='fa-solid fa-chevron-right'></i>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFoundBrews = ()=>{
|
||||
if(searching) {
|
||||
return (
|
||||
<div className='foundBrews searching'>
|
||||
<h3 className='searchAnim'>Searching</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if(error) {
|
||||
const errorText = ErrorIndex()[error.HBErrorCode.toString()] || '';
|
||||
|
||||
return (
|
||||
<div className='foundBrews noBrews'>
|
||||
<h3>Error: {errorText}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if(!brewCollection) {
|
||||
return (
|
||||
<div className='foundBrews noBrews'>
|
||||
<h3>No search yet</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if(brewCollection.length === 0) {
|
||||
return (
|
||||
<div className='foundBrews noBrews'>
|
||||
<h3>No brews found</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='foundBrews'>
|
||||
<span className='totalBrews'>
|
||||
{`Brews found: `}
|
||||
<span>{totalBrews}</span>
|
||||
</span>
|
||||
{brewCollection.map((brew, index)=>{
|
||||
return (
|
||||
<BrewItem
|
||||
brew={{ ...brew }}
|
||||
key={index}
|
||||
reportError={props.reportError}
|
||||
renderStorage={false}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{renderPaginationControls()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='vaultPage'>
|
||||
<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
|
||||
<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
|
||||
{renderNavItems()}
|
||||
<div className='content'>
|
||||
<SplitPane showDividerButtons={false}>
|
||||
<div className='form dataGroup'>{renderForm()}</div>
|
||||
|
||||
<div className='resultsContainer dataGroup'>
|
||||
{renderFoundBrews()}
|
||||
</div>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = VaultPage;
|
||||
362
client/homebrew/pages/vaultPage/vaultPage.less
Normal file
362
client/homebrew/pages/vaultPage/vaultPage.less
Normal file
@@ -0,0 +1,362 @@
|
||||
.vaultPage {
|
||||
height : 100%;
|
||||
overflow-y : hidden;
|
||||
background-color : #2C3E50;
|
||||
|
||||
*:not(input) { user-select : none; }
|
||||
|
||||
.content {
|
||||
background : #2C3E50;
|
||||
height: 100%;
|
||||
|
||||
.dataGroup {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
background : white;
|
||||
|
||||
&.form .brewLookup {
|
||||
position : relative;
|
||||
padding : 50px clamp(20px, 4vw, 50px);
|
||||
|
||||
small {
|
||||
font-size : 10pt;
|
||||
color : #555555;
|
||||
|
||||
a { color : #333333; }
|
||||
}
|
||||
|
||||
code {
|
||||
padding-inline : 5px;
|
||||
background : lightgrey;
|
||||
border-radius : 5px;
|
||||
font-family : monospace;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family : 'CodeBold';
|
||||
letter-spacing : 2px;
|
||||
}
|
||||
|
||||
legend {
|
||||
h3 {
|
||||
margin-block : 30px 20px;
|
||||
font-size : 20px;
|
||||
text-align : center;
|
||||
border-bottom : 2px solid;
|
||||
}
|
||||
ul {
|
||||
padding-inline : 30px 10px;
|
||||
li {
|
||||
margin-block : 5px;
|
||||
line-height : calc(1em + 5px);
|
||||
list-style : disc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
left : 0;
|
||||
display : block;
|
||||
padding : 10px;
|
||||
font-weight : 900;
|
||||
color : white;
|
||||
white-space : pre-wrap;
|
||||
content : 'Error:\A At least one renderer should be enabled to make a search';
|
||||
background : rgb(255, 60, 60);
|
||||
opacity : 0;
|
||||
transition : opacity 0.5s;
|
||||
}
|
||||
&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
|
||||
|
||||
.formTitle {
|
||||
margin : 20px 0;
|
||||
font-size : 30px;
|
||||
color : black;
|
||||
text-align : center;
|
||||
border-bottom : 2px solid;
|
||||
}
|
||||
|
||||
.formContents {
|
||||
position : relative;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
|
||||
label {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
margin : 10px 0;
|
||||
}
|
||||
select { margin : 0 10px; }
|
||||
|
||||
input {
|
||||
margin : 0 10px;
|
||||
|
||||
&:invalid { background : rgb(255, 188, 181); }
|
||||
|
||||
&[type='checkbox'] {
|
||||
position : relative;
|
||||
display : inline-block;
|
||||
width : 50px;
|
||||
height : 30px;
|
||||
font-family : 'WalterTurncoat';
|
||||
font-size : 20px;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
letter-spacing : 2px;
|
||||
appearance : none;
|
||||
background : red;
|
||||
isolation : isolate;
|
||||
border-radius : 5px;
|
||||
|
||||
&::before,&::after {
|
||||
position : absolute;
|
||||
inset : 0;
|
||||
z-index : 5;
|
||||
padding-top : 2px;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display : block;
|
||||
content : 'No';
|
||||
}
|
||||
|
||||
&::after {
|
||||
display : none;
|
||||
content : 'Yes';
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background : green;
|
||||
|
||||
&::before { display : none; }
|
||||
&::after { display : block; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
position : absolute;
|
||||
right : 20px;
|
||||
bottom : 0;
|
||||
|
||||
i {
|
||||
margin-left : 10px;
|
||||
animation-duration : 1000s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.resultsContainer {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
height : 100%;
|
||||
overflow-y : auto;
|
||||
font-family : 'BookInsanityRemake';
|
||||
font-size : 0.34cm;
|
||||
|
||||
h3 {
|
||||
font-family : 'Open Sans';
|
||||
font-weight : 900;
|
||||
color : white;
|
||||
}
|
||||
|
||||
.foundBrews {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
max-height : 100%;
|
||||
padding : 50px 50px 70px 50px;
|
||||
overflow-y : scroll;
|
||||
background-color : #2C3E50;
|
||||
|
||||
h3 { font-size : 25px; }
|
||||
|
||||
&.noBrews {
|
||||
display : grid;
|
||||
place-items : center;
|
||||
color : white;
|
||||
}
|
||||
|
||||
&.searching {
|
||||
display : grid;
|
||||
place-items : center;
|
||||
color : white;
|
||||
|
||||
h3 { position : relative; }
|
||||
|
||||
h3.searchAnim::after {
|
||||
position : absolute;
|
||||
top : 50%;
|
||||
right : 0;
|
||||
width : max-content;
|
||||
height : 1em;
|
||||
content : '';
|
||||
translate : calc(100% + 5px) -50%;
|
||||
animation : trailingDots 2s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.totalBrews {
|
||||
position : fixed;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
z-index : 1000;
|
||||
padding : 8px 10px;
|
||||
font-family : 'Open Sans';
|
||||
font-size : 11px;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
background-color : #333333;
|
||||
|
||||
.searchAnim {
|
||||
position : relative;
|
||||
display : inline-block;
|
||||
width : 3ch;
|
||||
height : 1em;
|
||||
}
|
||||
|
||||
.searchAnim::after {
|
||||
position : absolute;
|
||||
top : 50%;
|
||||
right : 0;
|
||||
width : max-content;
|
||||
height : 1em;
|
||||
content : '';
|
||||
translate : -50% -50%;
|
||||
animation : trailingDots 2s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.brewItem {
|
||||
width : 47%;
|
||||
margin-right : 40px;
|
||||
color : black;
|
||||
isolation:isolate;
|
||||
|
||||
&:after {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
display:block;
|
||||
content:'';
|
||||
background-image : url('/assets/parchmentBackground.jpg');
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
&:nth-child(even of .brewItem) { margin-right : 0; }
|
||||
|
||||
h2 {
|
||||
font-family : 'MrEavesRemake';
|
||||
font-size : 0.75cm;
|
||||
font-weight : 800;
|
||||
line-height : 0.988em;
|
||||
color : var(--HB_Color_HeaderText);
|
||||
}
|
||||
.info {
|
||||
font-family : 'ScalySansRemake';
|
||||
font-size : 1.2em;
|
||||
position:relative;
|
||||
z-index:2;
|
||||
|
||||
>span {
|
||||
margin-right : 12px;
|
||||
line-height : 1.5em;
|
||||
}
|
||||
}
|
||||
.links {
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
z-index:1;
|
||||
}
|
||||
}
|
||||
|
||||
.paginationControls {
|
||||
position : absolute;
|
||||
left : 50%;
|
||||
display : grid;
|
||||
grid-template-areas : 'previousPage currentPage nextPage';
|
||||
grid-template-columns : 50px 1fr 50px;
|
||||
place-items : center;
|
||||
width : auto;
|
||||
translate : -50%;
|
||||
|
||||
.pages {
|
||||
display : flex;
|
||||
grid-area : currentPage;
|
||||
justify-content : space-evenly;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
padding : 5px 8px;
|
||||
text-align : center;
|
||||
|
||||
.pageNumber {
|
||||
margin-inline : 1vw;
|
||||
font-family : 'Open Sans';
|
||||
font-weight : 900;
|
||||
color : white;
|
||||
text-underline-position : under;
|
||||
text-wrap : nowrap;
|
||||
cursor : pointer;
|
||||
|
||||
&.currentPage {
|
||||
color : gold;
|
||||
text-decoration : underline;
|
||||
pointer-events : none;
|
||||
}
|
||||
|
||||
&.firstPage { margin-right : -5px; }
|
||||
|
||||
&.lastPage { margin-left : -5px; }
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width : max-content;
|
||||
|
||||
&.previousPage { grid-area : previousPage; }
|
||||
|
||||
&.nextPage { grid-area : nextPage; }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes trailingDots {
|
||||
|
||||
0%,
|
||||
32% { content : ' .'; }
|
||||
|
||||
33%,
|
||||
65% { content : ' ..'; }
|
||||
|
||||
66%,
|
||||
100% { content : ' ...'; }
|
||||
}
|
||||
|
||||
// media query for when the page is smaller than 1079 px in width
|
||||
@media screen and (max-width : 1079px) {
|
||||
.vaultPage .content {
|
||||
|
||||
.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }
|
||||
|
||||
.dataGroup.resultsContainer .foundBrews .brewItem {
|
||||
width : 100%;
|
||||
margin-inline : auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user