+
|
+
|---|
+
|
+
|---|
Co-founder & CEO
${siteLink}
`, + `Don't want onboarding emails like this from us? Don't worry, this is the only one. If you've previously subscribed to emails about product offers and company news and events, you can unsubscribe ${userSettingsLink}.`, + ] + }, +}) + +templates.securityAlert = NoCTAEmailTemplate({ + subject(opts) { + return `Overleaf security note: ${opts.action}` + }, + title(opts) { + return opts.action.charAt(0).toUpperCase() + opts.action.slice(1) + }, + message(opts, isPlainText) { + const dateFormatted = moment().format('dddd D MMMM YYYY') + const timeFormatted = moment().format('HH:mm') + const helpLink = EmailMessageHelper.displayLink( + 'quick guide', + `${settings.siteUrl}/learn/how-to/Keeping_your_account_secure`, + isPlainText + ) + + const actionDescribed = EmailMessageHelper.cleanHTML( + opts.actionDescribed, + isPlainText + ) + + if (!opts.message) { + opts.message = [] + } + const message = opts.message.map(m => { + return EmailMessageHelper.cleanHTML(m, isPlainText) + }) + + return [ + `We are writing to let you know that ${actionDescribed} on ${dateFormatted} at ${timeFormatted} GMT.`, + ...message, + `If this was you, you can ignore this email.`, + `If this was not you, we recommend getting in touch with our support team at ${settings.adminEmail} to report this as potentially suspicious activity on your account.`, + `We also encourage you to read our ${helpLink} to keeping your ${settings.appName} account safe.`, + ] + }, +}) + +templates.SAMLDataCleared = ctaTemplate({ + subject(opts) { + return `Institutional Login No Longer Linked - ${settings.appName}` + }, + title(opts) { + return 'Institutional Login No Longer Linked' + }, + message(opts, isPlainText) { + return [ + `We're writing to let you know that due to a bug on our end, we've had to temporarily disable logging into your ${settings.appName} through your institution.`, + `To get it going again, you'll need to relink your institutional email address to your ${settings.appName} account via your settings.`, + ] + }, + secondaryMessage() { + return [ + `If you ordinarily log in to your ${settings.appName} account through your institution, you may need to set or reset your password to regain access to your account first.`, + 'This bug did not affect the security of any accounts, but it may have affected license entitlements for a small number of users. We are sorry for any inconvenience that this may cause for you.', + `If you have any questions, please get in touch with our support team at ${settings.adminEmail} or by replying to this email.`, + ] + }, + ctaText(opts) { + return 'Update my Emails and Affiliations' + }, + ctaURL(opts) { + return `${settings.siteUrl}/user/settings` + }, +}) + +function _formatUserNameAndEmail(user, placeholder) { + if (user.first_name && user.last_name) { + const fullName = `${user.first_name} ${user.last_name}` + if (SpamSafe.isSafeUserName(fullName)) { + if (SpamSafe.isSafeEmail(user.email)) { + return `${fullName} (${user.email})` + } else { + return fullName + } + } + } + return SpamSafe.safeEmail(user.email, placeholder) +} + +module.exports = { + templates, + ctaTemplate, + NoCTAEmailTemplate, + buildEmail, +} diff --git a/services/web/app/src/Features/Email/EmailHandler.js b/services/web/app/src/Features/Email/EmailHandler.js new file mode 100644 index 0000000000..6c17752f8b --- /dev/null +++ b/services/web/app/src/Features/Email/EmailHandler.js @@ -0,0 +1,24 @@ +const { callbackify } = require('util') +const Settings = require('@overleaf/settings') +const EmailBuilder = require('./EmailBuilder') +const EmailSender = require('./EmailSender') + +const EMAIL_SETTINGS = Settings.email || {} + +module.exports = { + sendEmail: callbackify(sendEmail), + promises: { + sendEmail, + }, +} + +async function sendEmail(emailType, opts) { + const email = EmailBuilder.buildEmail(emailType, opts) + if (email.type === 'lifecycle' && !EMAIL_SETTINGS.lifecycle) { + return + } + opts.html = email.html + opts.text = email.text + opts.subject = email.subject + await EmailSender.promises.sendEmail(opts) +} diff --git a/services/web/app/src/Features/Email/EmailMessageHelper.js b/services/web/app/src/Features/Email/EmailMessageHelper.js new file mode 100644 index 0000000000..8c6b2fd3bd --- /dev/null +++ b/services/web/app/src/Features/Email/EmailMessageHelper.js @@ -0,0 +1,27 @@ +const sanitizeHtml = require('sanitize-html') +const sanitizeOptions = { + html: { + allowedTags: ['span', 'b', 'br', 'i'], + allowedAttributes: { + span: ['style', 'class'], + }, + }, + plainText: { + allowedTags: [], + allowedAttributes: {}, + }, +} + +function cleanHTML(text, isPlainText) { + if (!isPlainText) return sanitizeHtml(text, sanitizeOptions.html) + return sanitizeHtml(text, sanitizeOptions.plainText) +} + +function displayLink(text, url, isPlainText) { + return isPlainText ? `${text} (${url})` : `${text}` +} + +module.exports = { + cleanHTML, + displayLink, +} diff --git a/services/web/app/src/Features/Email/EmailOptionsHelper.js b/services/web/app/src/Features/Email/EmailOptionsHelper.js new file mode 100644 index 0000000000..2d064008b2 --- /dev/null +++ b/services/web/app/src/Features/Email/EmailOptionsHelper.js @@ -0,0 +1,20 @@ +function _getIndefiniteArticle(providerName) { + const vowels = ['a', 'e', 'i', 'o', 'u'] + if (vowels.includes(providerName.charAt(0).toLowerCase())) return 'an' + return 'a' +} + +function linkOrUnlink(accountLinked, providerName, email) { + const action = accountLinked ? 'linked' : 'no longer linked' + const actionDescribed = accountLinked ? 'was linked to' : 'was unlinked from' + const indefiniteArticle = _getIndefiniteArticle(providerName) + return { + to: email, + action: `${providerName} account ${action}`, + actionDescribed: `${indefiniteArticle} ${providerName} account ${actionDescribed} your account ${email}`, + } +} + +module.exports = { + linkOrUnlink, +} diff --git a/services/web/app/src/Features/Email/EmailSender.js b/services/web/app/src/Features/Email/EmailSender.js new file mode 100644 index 0000000000..ff2bc0f2c5 --- /dev/null +++ b/services/web/app/src/Features/Email/EmailSender.js @@ -0,0 +1,117 @@ +const { callbackify } = require('util') +const logger = require('logger-sharelatex') +const metrics = require('@overleaf/metrics') +const Settings = require('@overleaf/settings') +const nodemailer = require('nodemailer') +const sesTransport = require('nodemailer-ses-transport') +const mandrillTransport = require('nodemailer-mandrill-transport') +const OError = require('@overleaf/o-error') +const RateLimiter = require('../../infrastructure/RateLimiter') +const _ = require('underscore') + +const EMAIL_SETTINGS = Settings.email || {} + +module.exports = { + sendEmail: callbackify(sendEmail), + promises: { + sendEmail, + }, +} + +const client = getClient() + +function getClient() { + let client + if (EMAIL_SETTINGS.parameters) { + const emailParameters = EMAIL_SETTINGS.parameters + if (emailParameters.AWSAccessKeyID || EMAIL_SETTINGS.driver === 'ses') { + logger.log('using aws ses for email') + client = nodemailer.createTransport(sesTransport(emailParameters)) + } else if (emailParameters.sendgridApiKey) { + throw new OError( + 'sendgridApiKey configuration option is deprecated, use SMTP instead' + ) + } else if (emailParameters.MandrillApiKey) { + logger.log('using mandril for email') + client = nodemailer.createTransport( + mandrillTransport({ + auth: { + apiKey: emailParameters.MandrillApiKey, + }, + }) + ) + } else { + logger.log('using smtp for email') + const smtp = _.pick( + emailParameters, + 'host', + 'port', + 'secure', + 'auth', + 'ignoreTLS', + 'logger', + 'name' + ) + client = nodemailer.createTransport(smtp) + } + } else { + logger.warn( + 'Email transport and/or parameters not defined. No emails will be sent.' + ) + client = { + async sendMail(options) { + logger.log({ options }, 'Would send email if enabled.') + }, + } + } + return client +} + +async function sendEmail(options) { + try { + const canContinue = await checkCanSendEmail(options) + if (!canContinue) { + logger.log( + { + sendingUser_id: options.sendingUser_id, + to: options.to, + subject: options.subject, + canContinue, + }, + 'rate limit hit for sending email, not sending' + ) + throw new OError('rate limit hit sending email') + } + metrics.inc('email') + const sendMailOptions = { + to: options.to, + from: EMAIL_SETTINGS.fromAddress || '', + subject: options.subject, + html: options.html, + text: options.text, + replyTo: options.replyTo || EMAIL_SETTINGS.replyToAddress, + socketTimeout: 30 * 1000, + } + if (EMAIL_SETTINGS.textEncoding != null) { + sendMailOptions.textEncoding = EMAIL_SETTINGS.textEncoding + } + await client.sendMail(sendMailOptions) + } catch (err) { + throw new OError('error sending message').withCause(err) + } +} + +async function checkCanSendEmail(options) { + if (options.sendingUser_id == null) { + // email not sent from user, not rate limited + return true + } + const opts = { + endpointName: 'send_email', + timeInterval: 60 * 60 * 3, + subjectName: options.sendingUser_id, + throttle: 100, + } + const allowed = await RateLimiter.promises.addCount(opts) + return allowed +} diff --git a/services/web/app/src/Features/Email/Layouts/BaseWithHeaderEmailLayout.js b/services/web/app/src/Features/Email/Layouts/BaseWithHeaderEmailLayout.js new file mode 100644 index 0000000000..851ca417ba --- /dev/null +++ b/services/web/app/src/Features/Email/Layouts/BaseWithHeaderEmailLayout.js @@ -0,0 +1,390 @@ +const _ = require('underscore') +const settings = require('@overleaf/settings') + +module.exports = _.template(`\ + + + + + + + + + + + +
+
|
+
${institutionEmail}`, + ], + } + EmailHandler.sendEmail('securityAlert', emailOptions, error => { + if (error) { + logger.warn({ err: error }) + } + }) +} + +function _sendUnlinkedEmail(primaryEmail, providerName, institutionEmail) { + const emailOptions = { + to: primaryEmail, + actionDescribed: `an Institutional SSO account at ${providerName} was unlinked from your account ${primaryEmail}`, + action: 'institutional SSO account no longer linked', + message: [ + `No longer linked:
${institutionEmail}`, + ], + } + EmailHandler.sendEmail('securityAlert', emailOptions, error => { + if (error) { + logger.warn({ err: error }) + } + }) +} + +async function getUser(providerId, externalUserId) { + if (!providerId || !externalUserId) { + throw new Error( + `invalid arguments: providerId: ${providerId}, externalUserId: ${externalUserId}` + ) + } + const user = await User.findOne({ + 'samlIdentifiers.externalUserId': externalUserId.toString(), + 'samlIdentifiers.providerId': providerId.toString(), + }).exec() + + return user +} + +async function redundantSubscription(userId, providerId, providerName) { + const subscription = await SubscriptionLocator.promises.getUserIndividualSubscription( + userId + ) + + if (subscription) { + await NotificationsBuilder.promises + .redundantPersonalSubscription( + { + institutionId: providerId, + institutionName: providerName, + }, + { _id: userId } + ) + .create() + } +} + +async function linkAccounts( + userId, + externalUserId, + institutionEmail, + providerId, + providerName, + hasEntitlement, + auditLog +) { + await _addIdentifier( + userId, + externalUserId, + providerId, + hasEntitlement, + institutionEmail, + providerName, + auditLog + ) + try { + await _addInstitutionEmail(userId, institutionEmail, providerId, auditLog) + } catch (error) { + await _removeIdentifier(userId, providerId) + throw error + } + await UserUpdater.promises.confirmEmail(userId, institutionEmail) // will set confirmedAt if not set, and will always update reconfirmedAt + await _sendLinkedEmail(userId, providerName, institutionEmail) + // update v1 affiliations record + if (hasEntitlement) { + await InstitutionsAPI.promises.addEntitlement(userId, institutionEmail) + try { + await redundantSubscription(userId, providerId, providerName) + } catch (error) { + logger.err({ err: error }, 'error checking redundant subscription') + } + } else { + await InstitutionsAPI.promises.removeEntitlement(userId, institutionEmail) + } +} + +async function unlinkAccounts( + userId, + institutionEmail, + primaryEmail, + providerId, + providerName, + auditLog +) { + providerId = providerId.toString() + + await _addAuditLogEntry( + false, + userId, + auditLog, + institutionEmail, + providerId, + providerName + ) + // update v2 user + await _removeIdentifier(userId, providerId) + // update v1 affiliations record + await InstitutionsAPI.promises.removeEntitlement(userId, institutionEmail) + // send email + _sendUnlinkedEmail(primaryEmail, providerName, institutionEmail) +} + +async function _removeIdentifier(userId, providerId) { + providerId = providerId.toString() + + const query = { + _id: userId, + } + const update = { + $pull: { + samlIdentifiers: { + providerId, + }, + }, + } + await User.updateOne(query, update).exec() +} + +async function updateEntitlement( + userId, + institutionEmail, + providerId, + hasEntitlement +) { + providerId = providerId.toString() + hasEntitlement = !!hasEntitlement + const query = { + _id: userId, + 'samlIdentifiers.providerId': providerId.toString(), + } + const update = { + $set: { + 'samlIdentifiers.$.hasEntitlement': hasEntitlement, + }, + } + // update v2 user + await User.updateOne(query, update).exec() + // update v1 affiliations record + if (hasEntitlement) { + await InstitutionsAPI.promises.addEntitlement(userId, institutionEmail) + } else { + await InstitutionsAPI.promises.removeEntitlement(userId, institutionEmail) + } +} + +function entitlementAttributeMatches(entitlementAttribute, entitlementMatcher) { + if (Array.isArray(entitlementAttribute)) { + entitlementAttribute = entitlementAttribute.join(' ') + } + if ( + typeof entitlementAttribute !== 'string' || + typeof entitlementMatcher !== 'string' + ) { + return false + } + try { + const entitlementRegExp = new RegExp(entitlementMatcher) + return !!entitlementAttribute.match(entitlementRegExp) + } catch (err) { + logger.error({ err }, 'Invalid SAML entitlement matcher') + // this is likely caused by an invalid regex in the matcher string + // log the error but do not bubble so that user can still sign in + // even if they don't have the entitlement + return false + } +} + +function userHasEntitlement(user, providerId) { + providerId = providerId.toString() + if (!user || !Array.isArray(user.samlIdentifiers)) { + return false + } + for (const samlIdentifier of user.samlIdentifiers) { + if (providerId && samlIdentifier.providerId !== providerId) { + continue + } + if (samlIdentifier.hasEntitlement) { + return true + } + } + return false +} + +const SAMLIdentityManager = { + entitlementAttributeMatches, + getUser, + linkAccounts, + redundantSubscription, + unlinkAccounts, + updateEntitlement, + userHasEntitlement, +} + +module.exports = SAMLIdentityManager diff --git a/services/web/app/src/Features/User/ThirdPartyIdentityManager.js b/services/web/app/src/Features/User/ThirdPartyIdentityManager.js new file mode 100644 index 0000000000..c1054d8741 --- /dev/null +++ b/services/web/app/src/Features/User/ThirdPartyIdentityManager.js @@ -0,0 +1,237 @@ +const APP_ROOT = '../../../../app/src' +const UserAuditLogHandler = require(`${APP_ROOT}/Features/User/UserAuditLogHandler`) +const EmailHandler = require(`${APP_ROOT}/Features/Email/EmailHandler`) +const EmailOptionsHelper = require(`${APP_ROOT}/Features/Email/EmailOptionsHelper`) +const Errors = require('../Errors/Errors') +const _ = require('lodash') +const logger = require('logger-sharelatex') +const OError = require('@overleaf/o-error') +const settings = require('@overleaf/settings') +const { User } = require(`${APP_ROOT}/models/User`) +const { promisifyAll } = require(`${APP_ROOT}/util/promises`) + +const oauthProviders = settings.oauthProviders || {} + +function getUser(providerId, externalUserId, callback) { + if (providerId == null || externalUserId == null) { + return callback( + new OError('invalid SSO arguments', { + externalUserId, + providerId, + }) + ) + } + const query = _getUserQuery(providerId, externalUserId) + User.findOne(query, function (err, user) { + if (err != null) { + return callback(err) + } + if (!user) { + return callback(new Errors.ThirdPartyUserNotFoundError()) + } + callback(null, user) + }) +} + +function login(providerId, externalUserId, externalData, callback) { + ThirdPartyIdentityManager.getUser( + providerId, + externalUserId, + function (err, user) { + if (err != null) { + return callback(err) + } + if (!externalData) { + return callback(null, user) + } + const query = _getUserQuery(providerId, externalUserId) + const update = _thirdPartyIdentifierUpdate( + user, + providerId, + externalUserId, + externalData + ) + User.findOneAndUpdate(query, update, { new: true }, callback) + } + ) +} + +function link( + userId, + providerId, + externalUserId, + externalData, + auditLog, + callback, + retry +) { + const accountLinked = true + if (!oauthProviders[providerId]) { + return callback(new Error('Not a valid provider')) + } + + UserAuditLogHandler.addEntry( + userId, + 'link-sso', + auditLog.initiatorId, + auditLog.ipAddress, + { + providerId, + }, + error => { + if (error) { + return callback(error) + } + const query = { + _id: userId, + 'thirdPartyIdentifiers.providerId': { + $ne: providerId, + }, + } + const update = { + $push: { + thirdPartyIdentifiers: { + externalUserId, + externalData, + providerId, + }, + }, + } + // add new tpi only if an entry for the provider does not exist + // projection includes thirdPartyIdentifiers for tests + User.findOneAndUpdate(query, update, { new: 1 }, (err, res) => { + if (err && err.code === 11000) { + callback(new Errors.ThirdPartyIdentityExistsError()) + } else if (err != null) { + callback(err) + } else if (res) { + _sendSecurityAlert(accountLinked, providerId, res, userId) + callback(null, res) + } else if (retry) { + // if already retried then throw error + callback(new Error('update failed')) + } else { + // attempt to clear existing entry then retry + ThirdPartyIdentityManager.unlink( + userId, + providerId, + auditLog, + function (err) { + if (err != null) { + return callback(err) + } + ThirdPartyIdentityManager.link( + userId, + providerId, + externalUserId, + externalData, + auditLog, + callback, + true + ) + } + ) + } + }) + } + ) +} + +function unlink(userId, providerId, auditLog, callback) { + const accountLinked = false + if (!oauthProviders[providerId]) { + return callback(new Error('Not a valid provider')) + } + UserAuditLogHandler.addEntry( + userId, + 'unlink-sso', + auditLog.initiatorId, + auditLog.ipAddress, + { + providerId, + }, + error => { + if (error) { + return callback(error) + } + const query = { + _id: userId, + } + const update = { + $pull: { + thirdPartyIdentifiers: { + providerId, + }, + }, + } + // projection includes thirdPartyIdentifiers for tests + User.findOneAndUpdate(query, update, { new: 1 }, (err, res) => { + if (err != null) { + callback(err) + } else if (!res) { + callback(new Error('update failed')) + } else { + // no need to wait, errors are logged and not passed back + _sendSecurityAlert(accountLinked, providerId, res, userId) + callback(null, res) + } + }) + } + ) +} + +function _getUserQuery(providerId, externalUserId) { + externalUserId = externalUserId.toString() + providerId = providerId.toString() + const query = { + 'thirdPartyIdentifiers.externalUserId': externalUserId, + 'thirdPartyIdentifiers.providerId': providerId, + } + return query +} + +function _sendSecurityAlert(accountLinked, providerId, user, userId) { + const providerName = oauthProviders[providerId].name + const emailOptions = EmailOptionsHelper.linkOrUnlink( + accountLinked, + providerName, + user.email + ) + EmailHandler.sendEmail('securityAlert', emailOptions, error => { + if (error) { + logger.error( + { err: error, userId }, + `could not send security alert email when ${emailOptions.action}` + ) + } + }) +} + +function _thirdPartyIdentifierUpdate( + user, + providerId, + externalUserId, + externalData +) { + providerId = providerId.toString() + // get third party identifier object from array + const thirdPartyIdentifier = user.thirdPartyIdentifiers.find( + tpi => + tpi.externalUserId === externalUserId && tpi.providerId === providerId + ) + // do recursive merge of new data over existing data + _.merge(thirdPartyIdentifier.externalData, externalData) + const update = { 'thirdPartyIdentifiers.$': thirdPartyIdentifier } + return update +} + +const ThirdPartyIdentityManager = { + getUser, + login, + link, + unlink, +} + +ThirdPartyIdentityManager.promises = promisifyAll(ThirdPartyIdentityManager) + +module.exports = ThirdPartyIdentityManager diff --git a/services/web/app/src/Features/User/UserAuditLogHandler.js b/services/web/app/src/Features/User/UserAuditLogHandler.js new file mode 100644 index 0000000000..5ba1e3b8dd --- /dev/null +++ b/services/web/app/src/Features/User/UserAuditLogHandler.js @@ -0,0 +1,67 @@ +const OError = require('@overleaf/o-error') +const { User } = require('../../models/User') +const { callbackify } = require('util') + +const MAX_AUDIT_LOG_ENTRIES = 200 + +function _canHaveNoInitiatorId(operation, info) { + if (operation === 'reset-password') return true + if (operation === 'unlink-sso' && info.providerId === 'collabratec') + return true +} + +/** + * Add an audit log entry + * + * The entry should include at least the following fields: + * + * - userId: the user on behalf of whom the operation was performed + * - operation: a string identifying the type of operation + * - initiatorId: who performed the operation + * - ipAddress: the IP address of the initiator + * - info: an object detailing what happened + */ +async function addEntry(userId, operation, initiatorId, ipAddress, info = {}) { + if (!operation || !ipAddress) + throw new OError('missing required audit log data', { + operation, + initiatorId, + ipAddress, + }) + + if (!initiatorId && !_canHaveNoInitiatorId(operation, info)) { + throw new OError('missing initiatorId for audit log', { + operation, + ipAddress, + }) + } + + const timestamp = new Date() + const entry = { + operation, + initiatorId, + info, + ipAddress, + timestamp, + } + const result = await User.updateOne( + { _id: userId }, + { + $push: { + auditLog: { $each: [entry], $slice: -MAX_AUDIT_LOG_ENTRIES }, + }, + } + ).exec() + if (result.nModified === 0) { + throw new OError('user not found', { userId }) + } +} + +const UserAuditLogHandler = { + addEntry: callbackify(addEntry), + promises: { + addEntry, + }, +} + +module.exports = UserAuditLogHandler diff --git a/services/web/app/src/Features/User/UserController.js b/services/web/app/src/Features/User/UserController.js new file mode 100644 index 0000000000..4be2977624 --- /dev/null +++ b/services/web/app/src/Features/User/UserController.js @@ -0,0 +1,487 @@ +const UserHandler = require('./UserHandler') +const UserDeleter = require('./UserDeleter') +const UserGetter = require('./UserGetter') +const { User } = require('../../models/User') +const NewsletterManager = require('../Newsletter/NewsletterManager') +const UserRegistrationHandler = require('./UserRegistrationHandler') +const logger = require('logger-sharelatex') +const metrics = require('@overleaf/metrics') +const AuthenticationManager = require('../Authentication/AuthenticationManager') +const SessionManager = require('../Authentication/SessionManager') +const Features = require('../../infrastructure/Features') +const UserAuditLogHandler = require('./UserAuditLogHandler') +const UserSessionsManager = require('./UserSessionsManager') +const UserUpdater = require('./UserUpdater') +const Errors = require('../Errors/Errors') +const HttpErrorHandler = require('../Errors/HttpErrorHandler') +const OError = require('@overleaf/o-error') +const EmailHandler = require('../Email/EmailHandler') +const UrlHelper = require('../Helpers/UrlHelper') +const { promisify } = require('util') +const { expressify } = require('../../util/promises') + +async function _sendSecurityAlertClearedSessions(user) { + const emailOptions = { + to: user.email, + actionDescribed: `active sessions were cleared on your account ${user.email}`, + action: 'active sessions cleared', + } + try { + await EmailHandler.promises.sendEmail('securityAlert', emailOptions) + } catch (error) { + // log error when sending security alert email but do not pass back + logger.error( + { error, userId: user._id }, + 'could not send security alert email when sessions cleared' + ) + } +} + +function _sendSecurityAlertPasswordChanged(user) { + const emailOptions = { + to: user.email, + actionDescribed: `your password has been changed on your account ${user.email}`, + action: 'password changed', + } + EmailHandler.sendEmail('securityAlert', emailOptions, error => { + if (error) { + // log error when sending security alert email but do not pass back + logger.error( + { error, userId: user._id }, + 'could not send security alert email when password changed' + ) + } + }) +} + +async function _ensureAffiliation(userId, emailData) { + if (emailData.samlProviderId) { + await UserUpdater.promises.confirmEmail(userId, emailData.email) + } else { + await UserUpdater.promises.addAffiliationForNewUser(userId, emailData.email) + } +} + +async function changePassword(req, res, next) { + metrics.inc('user.password-change') + const userId = SessionManager.getLoggedInUserId(req.session) + + const user = await AuthenticationManager.promises.authenticate( + { _id: userId }, + req.body.currentPassword + ) + if (!user) { + return HttpErrorHandler.badRequest(req, res, 'Your old password is wrong') + } + + if (req.body.newPassword1 !== req.body.newPassword2) { + return HttpErrorHandler.badRequest( + req, + res, + req.i18n.translate('password_change_passwords_do_not_match') + ) + } + + try { + await AuthenticationManager.promises.setUserPassword( + user, + req.body.newPassword1 + ) + } catch (error) { + if (error.name === 'InvalidPasswordError') { + return HttpErrorHandler.badRequest(req, res, error.message) + } else { + throw error + } + } + await UserAuditLogHandler.promises.addEntry( + user._id, + 'update-password', + user._id, + req.ip + ) + + // no need to wait, errors are logged and not passed back + _sendSecurityAlertPasswordChanged(user) + + await UserSessionsManager.promises.revokeAllUserSessions(user, [ + req.sessionID, + ]) + + return res.json({ + message: { + type: 'success', + email: user.email, + text: req.i18n.translate('password_change_successful'), + }, + }) +} + +async function clearSessions(req, res, next) { + metrics.inc('user.clear-sessions') + const userId = SessionManager.getLoggedInUserId(req.session) + const user = await UserGetter.promises.getUser(userId, { email: 1 }) + const sessions = await UserSessionsManager.promises.getAllUserSessions(user, [ + req.sessionID, + ]) + await UserAuditLogHandler.promises.addEntry( + user._id, + 'clear-sessions', + user._id, + req.ip, + { sessions } + ) + await UserSessionsManager.promises.revokeAllUserSessions(user, [ + req.sessionID, + ]) + + await _sendSecurityAlertClearedSessions(user) + + res.sendStatus(201) +} + +async function ensureAffiliation(user) { + if (!Features.hasFeature('affiliations')) { + return + } + + const flaggedEmails = user.emails.filter(email => email.affiliationUnchecked) + if (flaggedEmails.length === 0) { + return + } + + if (flaggedEmails.length > 1) { + logger.error( + { userId: user._id }, + `Unexpected number of flagged emails: ${flaggedEmails.length}` + ) + } + + await _ensureAffiliation(user._id, flaggedEmails[0]) +} + +async function ensureAffiliationMiddleware(req, res, next) { + let user + if (!Features.hasFeature('affiliations') || !req.query.ensureAffiliation) { + return next() + } + const userId = SessionManager.getLoggedInUserId(req.session) + try { + user = await UserGetter.promises.getUser(userId) + } catch (error) { + return new Errors.UserNotFoundError({ info: { userId } }) + } + try { + await ensureAffiliation(user) + } catch (error) { + return next(error) + } + return next() +} + +const UserController = { + clearSessions: expressify(clearSessions), + + tryDeleteUser(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + const { password } = req.body + + if (password == null || password === '') { + logger.err( + { userId }, + 'no password supplied for attempt to delete account' + ) + return res.sendStatus(403) + } + AuthenticationManager.authenticate( + { _id: userId }, + password, + (err, user) => { + if (err != null) { + OError.tag( + err, + 'error authenticating during attempt to delete account', + { + userId, + } + ) + return next(err) + } + if (!user) { + logger.err({ userId }, 'auth failed during attempt to delete account') + return res.sendStatus(403) + } + UserDeleter.deleteUser( + userId, + { deleterUser: user, ipAddress: req.ip }, + err => { + if (err) { + const errorData = { + message: 'error while deleting user account', + info: { userId }, + } + if (err instanceof Errors.SubscriptionAdminDeletionError) { + // set info.public.error for JSON response so frontend can display + // a specific message + errorData.info.public = { + error: 'SubscriptionAdminDeletionError', + } + logger.warn(OError.tag(err, errorData.message, errorData.info)) + return HttpErrorHandler.unprocessableEntity( + req, + res, + errorData.message, + errorData.info.public + ) + } else { + return next(OError.tag(err, errorData.message, errorData.info)) + } + } + const sessionId = req.sessionID + if (typeof req.logout === 'function') { + req.logout() + } + req.session.destroy(err => { + if (err != null) { + OError.tag(err, 'error destroying session') + return next(err) + } + UserSessionsManager.untrackSession(user, sessionId) + res.sendStatus(200) + }) + } + ) + } + ) + }, + + unsubscribe(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + UserGetter.getUser(userId, (err, user) => { + if (err != null) { + return next(err) + } + NewsletterManager.unsubscribe(user, err => { + if (err != null) { + logger.warn( + { err, user }, + 'Failed to unsubscribe user from newsletter' + ) + } + res.sendStatus(200) + }) + }) + }, + + updateUserSettings(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + User.findById(userId, (err, user) => { + if (err != null || user == null) { + logger.err({ err, userId }, 'problem updaing user settings') + return res.sendStatus(500) + } + + if (req.body.first_name != null) { + user.first_name = req.body.first_name.trim() + } + if (req.body.last_name != null) { + user.last_name = req.body.last_name.trim() + } + if (req.body.role != null) { + user.role = req.body.role.trim() + } + if (req.body.institution != null) { + user.institution = req.body.institution.trim() + } + if (req.body.mode != null) { + user.ace.mode = req.body.mode + } + if (req.body.editorTheme != null) { + user.ace.theme = req.body.editorTheme + } + if (req.body.overallTheme != null) { + user.ace.overallTheme = req.body.overallTheme + } + if (req.body.fontSize != null) { + user.ace.fontSize = req.body.fontSize + } + if (req.body.autoComplete != null) { + user.ace.autoComplete = req.body.autoComplete + } + if (req.body.autoPairDelimiters != null) { + user.ace.autoPairDelimiters = req.body.autoPairDelimiters + } + if (req.body.spellCheckLanguage != null) { + user.ace.spellCheckLanguage = req.body.spellCheckLanguage + } + if (req.body.pdfViewer != null) { + user.ace.pdfViewer = req.body.pdfViewer + } + if (req.body.syntaxValidation != null) { + user.ace.syntaxValidation = req.body.syntaxValidation + } + if (req.body.fontFamily != null) { + user.ace.fontFamily = req.body.fontFamily + } + if (req.body.lineHeight != null) { + user.ace.lineHeight = req.body.lineHeight + } + + user.save(err => { + if (err != null) { + return next(err) + } + const newEmail = + req.body.email != null + ? req.body.email.trim().toLowerCase() + : undefined + if ( + newEmail == null || + newEmail === user.email || + req.externalAuthenticationSystemUsed() + ) { + // end here, don't update email + SessionManager.setInSessionUser(req.session, { + first_name: user.first_name, + last_name: user.last_name, + }) + res.sendStatus(200) + } else if (newEmail.indexOf('@') === -1) { + // email invalid + res.sendStatus(400) + } else { + // update the user email + const auditLog = { + initiatorId: userId, + ipAddress: req.ip, + } + UserUpdater.changeEmailAddress(userId, newEmail, auditLog, err => { + if (err) { + if (err instanceof Errors.EmailExistsError) { + const translation = req.i18n.translate( + 'email_already_registered' + ) + return HttpErrorHandler.conflict(req, res, translation) + } else { + return HttpErrorHandler.legacyInternal( + req, + res, + req.i18n.translate('problem_changing_email_address'), + OError.tag(err, 'problem_changing_email_address', { + userId, + newEmail, + }) + ) + } + } + User.findById(userId, (err, user) => { + if (err != null) { + logger.err( + { err, userId }, + 'error getting user for email update' + ) + return res.sendStatus(500) + } + SessionManager.setInSessionUser(req.session, { + email: user.email, + first_name: user.first_name, + last_name: user.last_name, + }) + UserHandler.populateTeamInvites(user, err => { + // need to refresh this in the background + if (err != null) { + logger.err({ err }, 'error populateTeamInvites') + } + res.sendStatus(200) + }) + }) + }) + } + }) + }) + }, + + doLogout(req, cb) { + metrics.inc('user.logout') + const user = SessionManager.getSessionUser(req.session) + logger.log({ user }, 'logging out') + const sessionId = req.sessionID + if (typeof req.logout === 'function') { + req.logout() + } // passport logout + req.session.destroy(err => { + if (err) { + OError.tag(err, 'error destroying session') + return cb(err) + } + if (user != null) { + UserSessionsManager.untrackSession(user, sessionId) + } + cb() + }) + }, + + logout(req, res, next) { + const requestedRedirect = req.body.redirect + ? UrlHelper.getSafeRedirectPath(req.body.redirect) + : undefined + const redirectUrl = requestedRedirect || '/login' + + UserController.doLogout(req, err => { + if (err != null) { + return next(err) + } + res.redirect(redirectUrl) + }) + }, + + expireDeletedUser(req, res, next) { + const userId = req.params.userId + UserDeleter.expireDeletedUser(userId, error => { + if (error) { + return next(error) + } + + res.sendStatus(204) + }) + }, + + expireDeletedUsersAfterDuration(req, res, next) { + UserDeleter.expireDeletedUsersAfterDuration(error => { + if (error) { + return next(error) + } + + res.sendStatus(204) + }) + }, + + register(req, res, next) { + const { email } = req.body + if (email == null || email === '') { + return res.sendStatus(422) // Unprocessable Entity + } + UserRegistrationHandler.registerNewUserAndSendActivationEmail( + email, + (error, user, setNewPasswordUrl) => { + if (error != null) { + return next(error) + } + res.json({ + email: user.email, + setNewPasswordUrl, + }) + } + ) + }, + + changePassword: expressify(changePassword), +} + +UserController.promises = { + doLogout: promisify(UserController.doLogout), + ensureAffiliation, + ensureAffiliationMiddleware, +} + +module.exports = UserController diff --git a/services/web/app/src/Features/User/UserCreator.js b/services/web/app/src/Features/User/UserCreator.js new file mode 100644 index 0000000000..95f6917b89 --- /dev/null +++ b/services/web/app/src/Features/User/UserCreator.js @@ -0,0 +1,115 @@ +const logger = require('logger-sharelatex') +const util = require('util') +const { AffiliationError } = require('../Errors/Errors') +const Features = require('../../infrastructure/Features') +const { User } = require('../../models/User') +const UserDeleter = require('./UserDeleter') +const UserGetter = require('./UserGetter') +const UserUpdater = require('./UserUpdater') +const Analytics = require('../Analytics/AnalyticsManager') +const UserOnboardingEmailQueueManager = require('./UserOnboardingEmailManager') +const UserPostRegistrationAnalyticsManager = require('./UserPostRegistrationAnalyticsManager') +const OError = require('@overleaf/o-error') + +async function _addAffiliation(user, affiliationOptions) { + try { + await UserUpdater.promises.addAffiliationForNewUser( + user._id, + user.email, + affiliationOptions + ) + } catch (error) { + throw new AffiliationError('add affiliation failed').withCause(error) + } + + try { + user = await UserGetter.promises.getUser(user._id) + } catch (error) { + logger.error( + OError.tag(error, 'could not get fresh user data', { + userId: user._id, + email: user.email, + }) + ) + } + return user +} + +async function createNewUser(attributes, options = {}) { + let user = new User() + + if (attributes.first_name == null || attributes.first_name === '') { + attributes.first_name = attributes.email.split('@')[0] + } + + Object.assign(user, attributes) + + user.ace.syntaxValidation = true + if (user.featureSwitches != null) { + user.featureSwitches.pdfng = true + } + + const reversedHostname = user.email.split('@')[1].split('').reverse().join('') + + const emailData = { + email: user.email, + createdAt: new Date(), + reversedHostname, + } + if (Features.hasFeature('affiliations')) { + emailData.affiliationUnchecked = true + } + if ( + attributes.samlIdentifiers && + attributes.samlIdentifiers[0] && + attributes.samlIdentifiers[0].providerId + ) { + emailData.samlProviderId = attributes.samlIdentifiers[0].providerId + } + + user.emails = [emailData] + + user = await user.save() + + if (Features.hasFeature('affiliations')) { + try { + user = await _addAffiliation(user, options.affiliationOptions || {}) + } catch (error) { + if (options.requireAffiliation) { + await UserDeleter.promises.deleteMongoUser(user._id) + throw OError.tag(error) + } else { + logger.error(OError.tag(error)) + } + } + } + + Analytics.recordEvent(user._id, 'user-registered') + Analytics.setUserProperty(user._id, 'created-at', new Date()) + + if (Features.hasFeature('saas')) { + try { + await UserOnboardingEmailQueueManager.scheduleOnboardingEmail(user) + await UserPostRegistrationAnalyticsManager.schedulePostRegistrationAnalytics( + user + ) + } catch (error) { + logger.error( + OError.tag(error, 'Failed to schedule sending of onboarding email', { + userId: user._id, + }) + ) + } + } + + return user +} + +const UserCreator = { + createNewUser: util.callbackify(createNewUser), + promises: { + createNewUser: createNewUser, + }, +} + +module.exports = UserCreator diff --git a/services/web/app/src/Features/User/UserDeleter.js b/services/web/app/src/Features/User/UserDeleter.js new file mode 100644 index 0000000000..a183978cb8 --- /dev/null +++ b/services/web/app/src/Features/User/UserDeleter.js @@ -0,0 +1,133 @@ +const { callbackify } = require('util') +const logger = require('logger-sharelatex') +const moment = require('moment') +const { User } = require('../../models/User') +const { DeletedUser } = require('../../models/DeletedUser') +const NewsletterManager = require('../Newsletter/NewsletterManager') +const ProjectDeleter = require('../Project/ProjectDeleter') +const SubscriptionHandler = require('../Subscription/SubscriptionHandler') +const SubscriptionUpdater = require('../Subscription/SubscriptionUpdater') +const SubscriptionLocator = require('../Subscription/SubscriptionLocator') +const UserMembershipsHandler = require('../UserMembership/UserMembershipsHandler') +const UserSessionsManager = require('./UserSessionsManager') +const InstitutionsAPI = require('../Institutions/InstitutionsAPI') +const Errors = require('../Errors/Errors') + +module.exports = { + deleteUser: callbackify(deleteUser), + deleteMongoUser: callbackify(deleteMongoUser), + expireDeletedUser: callbackify(expireDeletedUser), + ensureCanDeleteUser: callbackify(ensureCanDeleteUser), + expireDeletedUsersAfterDuration: callbackify(expireDeletedUsersAfterDuration), + + promises: { + deleteUser: deleteUser, + deleteMongoUser: deleteMongoUser, + expireDeletedUser: expireDeletedUser, + ensureCanDeleteUser: ensureCanDeleteUser, + expireDeletedUsersAfterDuration: expireDeletedUsersAfterDuration, + }, +} + +async function deleteUser(userId, options = {}) { + if (!userId) { + logger.warn('user_id is null when trying to delete user') + throw new Error('no user_id') + } + + try { + const user = await User.findById(userId).exec() + logger.log({ user }, 'deleting user') + + await ensureCanDeleteUser(user) + await _cleanupUser(user) + await _createDeletedUser(user, options) + await ProjectDeleter.promises.deleteUsersProjects(user._id) + await deleteMongoUser(user._id) + } catch (error) { + logger.warn({ error, userId }, 'something went wrong deleting the user') + throw error + } +} + +/** + * delete a user document only + */ +async function deleteMongoUser(userId) { + if (!userId) { + throw new Error('no user_id') + } + + await User.deleteOne({ _id: userId }).exec() +} + +async function expireDeletedUser(userId) { + const deletedUser = await DeletedUser.findOne({ + 'deleterData.deletedUserId': userId, + }).exec() + + deletedUser.user = undefined + deletedUser.deleterData.deleterIpAddress = undefined + await deletedUser.save() +} + +async function expireDeletedUsersAfterDuration() { + const DURATION = 90 + const deletedUsers = await DeletedUser.find({ + 'deleterData.deletedAt': { + $lt: new Date(moment().subtract(DURATION, 'days')), + }, + user: { + $ne: null, + }, + }).exec() + + if (deletedUsers.length === 0) { + return + } + + for (let i = 0; i < deletedUsers.length; i++) { + await expireDeletedUser(deletedUsers[i].deleterData.deletedUserId) + } +} + +async function ensureCanDeleteUser(user) { + const subscription = await SubscriptionLocator.promises.getUsersSubscription( + user + ) + if (subscription) { + throw new Errors.SubscriptionAdminDeletionError({}) + } +} + +async function _createDeletedUser(user, options) { + await DeletedUser.updateOne( + { 'deleterData.deletedUserId': user._id }, + { + user: user, + deleterData: { + deletedAt: new Date(), + deleterId: options.deleterUser ? options.deleterUser._id : undefined, + deleterIpAddress: options.ipAddress, + deletedUserId: user._id, + deletedUserLastLoggedIn: user.lastLoggedIn, + deletedUserSignUpDate: user.signUpDate, + deletedUserLoginCount: user.loginCount, + deletedUserReferralId: user.referal_id, + deletedUserReferredUsers: user.refered_users, + deletedUserReferredUserCount: user.refered_user_count, + deletedUserOverleafId: user.overleaf ? user.overleaf.id : undefined, + }, + }, + { upsert: true } + ) +} + +async function _cleanupUser(user) { + await UserSessionsManager.promises.revokeAllUserSessions(user._id, []) + await NewsletterManager.promises.unsubscribe(user, { delete: true }) + await SubscriptionHandler.promises.cancelSubscription(user) + await InstitutionsAPI.promises.deleteAffiliations(user._id) + await SubscriptionUpdater.promises.removeUserFromAllGroups(user._id) + await UserMembershipsHandler.promises.removeUserFromAllEntities(user._id) +} diff --git a/services/web/app/src/Features/User/UserEmailsConfirmationHandler.js b/services/web/app/src/Features/User/UserEmailsConfirmationHandler.js new file mode 100644 index 0000000000..f204482d54 --- /dev/null +++ b/services/web/app/src/Features/User/UserEmailsConfirmationHandler.js @@ -0,0 +1,117 @@ +const EmailHelper = require('../Helpers/EmailHelper') +const EmailHandler = require('../Email/EmailHandler') +const OneTimeTokenHandler = require('../Security/OneTimeTokenHandler') +const settings = require('@overleaf/settings') +const Errors = require('../Errors/Errors') +const UserUpdater = require('./UserUpdater') +const UserGetter = require('./UserGetter') +const { callbackify, promisify } = require('util') + +// Reject email confirmation tokens after 90 days +const TOKEN_EXPIRY_IN_S = 90 * 24 * 60 * 60 +const TOKEN_USE = 'email_confirmation' + +function sendConfirmationEmail(userId, email, emailTemplate, callback) { + if (arguments.length === 3) { + callback = emailTemplate + emailTemplate = 'confirmEmail' + } + + // when force-migrating accounts to v2 from v1, we don't want to send confirmation messages - + // setting this env var allows us to turn this behaviour off + if (process.env.SHARELATEX_NO_CONFIRMATION_MESSAGES != null) { + return callback(null) + } + + email = EmailHelper.parseEmail(email) + if (!email) { + return callback(new Error('invalid email')) + } + const data = { user_id: userId, email } + OneTimeTokenHandler.getNewToken( + TOKEN_USE, + data, + { expiresIn: TOKEN_EXPIRY_IN_S }, + function (err, token) { + if (err) { + return callback(err) + } + const emailOptions = { + to: email, + confirmEmailUrl: `${settings.siteUrl}/user/emails/confirm?token=${token}`, + sendingUser_id: userId, + } + EmailHandler.sendEmail(emailTemplate, emailOptions, callback) + } + ) +} + +async function sendReconfirmationEmail(userId, email) { + email = EmailHelper.parseEmail(email) + if (!email) { + throw new Error('invalid email') + } + + const data = { user_id: userId, email } + const token = await OneTimeTokenHandler.promises.getNewToken( + TOKEN_USE, + data, + { expiresIn: TOKEN_EXPIRY_IN_S } + ) + + const emailOptions = { + to: email, + confirmEmailUrl: `${settings.siteUrl}/user/emails/confirm?token=${token}`, + sendingUser_id: userId, + } + + await EmailHandler.promises.sendEmail('reconfirmEmail', emailOptions) +} + +const UserEmailsConfirmationHandler = { + sendConfirmationEmail, + + sendReconfirmationEmail: callbackify(sendReconfirmationEmail), + + confirmEmailFromToken(token, callback) { + OneTimeTokenHandler.getValueFromTokenAndExpire( + TOKEN_USE, + token, + function (error, data) { + if (error) { + return callback(error) + } + if (!data) { + return callback(new Errors.NotFoundError('no token found')) + } + const userId = data.user_id + const email = data.email + + if (!userId || email !== EmailHelper.parseEmail(email)) { + return callback(new Errors.NotFoundError('invalid data')) + } + UserGetter.getUser(userId, {}, function (error, user) { + if (error) { + return callback(error) + } + if (!user) { + return callback(new Errors.NotFoundError('user not found')) + } + const emailExists = user.emails.some( + emailData => emailData.email === email + ) + if (!emailExists) { + return callback(new Errors.NotFoundError('email missing for user')) + } + UserUpdater.confirmEmail(userId, email, callback) + }) + } + ) + }, +} + +UserEmailsConfirmationHandler.promises = { + sendConfirmationEmail: promisify(sendConfirmationEmail), +} + +module.exports = UserEmailsConfirmationHandler diff --git a/services/web/app/src/Features/User/UserEmailsController.js b/services/web/app/src/Features/User/UserEmailsController.js new file mode 100644 index 0000000000..cff626fb0d --- /dev/null +++ b/services/web/app/src/Features/User/UserEmailsController.js @@ -0,0 +1,253 @@ +const logger = require('logger-sharelatex') +const SessionManager = require('../Authentication/SessionManager') +const UserGetter = require('./UserGetter') +const UserUpdater = require('./UserUpdater') +const UserSessionsManager = require('./UserSessionsManager') +const EmailHandler = require('../Email/EmailHandler') +const EmailHelper = require('../Helpers/EmailHelper') +const UserEmailsConfirmationHandler = require('./UserEmailsConfirmationHandler') +const { endorseAffiliation } = require('../Institutions/InstitutionsAPI') +const Errors = require('../Errors/Errors') +const HttpErrorHandler = require('../Errors/HttpErrorHandler') +const { expressify } = require('../../util/promises') + +async function _sendSecurityAlertEmail(user, email) { + const emailOptions = { + to: user.email, + actionDescribed: `a secondary email address has been added to your account ${user.email}`, + message: [ + `Added:
${email}`, + ], + action: 'secondary email address added', + } + await EmailHandler.promises.sendEmail('securityAlert', emailOptions) +} + +async function add(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + const email = EmailHelper.parseEmail(req.body.email) + if (!email) { + return res.sendStatus(422) + } + const user = await UserGetter.promises.getUser(userId, { email: 1 }) + + const affiliationOptions = { + university: req.body.university, + role: req.body.role, + department: req.body.department, + } + + try { + await UserUpdater.promises.addEmailAddress( + userId, + email, + affiliationOptions, + { + initiatorId: user._id, + ipAddress: req.ip, + } + ) + } catch (error) { + return UserEmailsController._handleEmailError(error, req, res, next) + } + + await _sendSecurityAlertEmail(user, email) + + await UserEmailsConfirmationHandler.promises.sendConfirmationEmail( + userId, + email + ) + + res.sendStatus(204) +} + +function resendConfirmation(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + const email = EmailHelper.parseEmail(req.body.email) + if (!email) { + return res.sendStatus(422) + } + UserGetter.getUserByAnyEmail(email, { _id: 1 }, function (error, user) { + if (error) { + return next(error) + } + if (!user || user._id.toString() !== userId) { + return res.sendStatus(422) + } + UserEmailsConfirmationHandler.sendConfirmationEmail( + userId, + email, + function (error) { + if (error) { + return next(error) + } + res.sendStatus(200) + } + ) + }) +} + +function sendReconfirmation(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + const email = EmailHelper.parseEmail(req.body.email) + if (!email) { + return res.sendStatus(400) + } + UserGetter.getUserByAnyEmail(email, { _id: 1 }, function (error, user) { + if (error) { + return next(error) + } + if (!user || user._id.toString() !== userId) { + return res.sendStatus(422) + } + UserEmailsConfirmationHandler.sendReconfirmationEmail( + userId, + email, + function (error) { + if (error) { + return next(error) + } + res.sendStatus(200) + } + ) + }) +} + +const UserEmailsController = { + list(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + UserGetter.getUserFullEmails(userId, function (error, fullEmails) { + if (error) { + return next(error) + } + res.json(fullEmails) + }) + }, + + add: expressify(add), + + remove(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + const email = EmailHelper.parseEmail(req.body.email) + if (!email) { + return res.sendStatus(422) + } + + UserUpdater.removeEmailAddress(userId, email, function (error) { + if (error) { + return next(error) + } + res.sendStatus(200) + }) + }, + + setDefault(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + const email = EmailHelper.parseEmail(req.body.email) + if (!email) { + return res.sendStatus(422) + } + const auditLog = { + initiatorId: userId, + ipAddress: req.ip, + } + UserUpdater.setDefaultEmailAddress( + userId, + email, + false, + auditLog, + true, + err => { + if (err) { + return UserEmailsController._handleEmailError(err, req, res, next) + } + SessionManager.setInSessionUser(req.session, { email: email }) + const user = SessionManager.getSessionUser(req.session) + UserSessionsManager.revokeAllUserSessions( + user, + [req.sessionID], + err => { + if (err) + logger.warn( + { err }, + 'failed revoking secondary sessions after changing default email' + ) + } + ) + res.sendStatus(200) + } + ) + }, + + endorse(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + const email = EmailHelper.parseEmail(req.body.email) + if (!email) { + return res.sendStatus(422) + } + + endorseAffiliation( + userId, + email, + req.body.role, + req.body.department, + function (error) { + if (error) { + return next(error) + } + res.sendStatus(204) + } + ) + }, + + resendConfirmation, + + sendReconfirmation, + + showConfirm(req, res, next) { + res.render('user/confirm_email', { + token: req.query.token, + title: 'confirm_email', + }) + }, + + confirm(req, res, next) { + const { token } = req.body + if (!token) { + return res.status(422).json({ + message: req.i18n.translate('confirmation_link_broken'), + }) + } + UserEmailsConfirmationHandler.confirmEmailFromToken( + token, + function (error) { + if (error) { + if (error instanceof Errors.NotFoundError) { + res.status(404).json({ + message: req.i18n.translate('confirmation_token_invalid'), + }) + } else { + next(error) + } + } else { + res.sendStatus(200) + } + } + ) + }, + + _handleEmailError(error, req, res, next) { + if (error instanceof Errors.UnconfirmedEmailError) { + return HttpErrorHandler.conflict(req, res, 'email must be confirmed') + } else if (error instanceof Errors.EmailExistsError) { + const message = req.i18n.translate('email_already_registered') + return HttpErrorHandler.conflict(req, res, message) + } else if (error.message === '422: Email does not belong to university') { + const message = req.i18n.translate('email_does_not_belong_to_university') + return HttpErrorHandler.conflict(req, res, message) + } + next(error) + }, +} + +module.exports = UserEmailsController diff --git a/services/web/app/src/Features/User/UserGetter.js b/services/web/app/src/Features/User/UserGetter.js new file mode 100644 index 0000000000..6649459b0b --- /dev/null +++ b/services/web/app/src/Features/User/UserGetter.js @@ -0,0 +1,277 @@ +const { callbackify } = require('util') +const { db } = require('../../infrastructure/mongodb') +const metrics = require('@overleaf/metrics') +const logger = require('logger-sharelatex') +const moment = require('moment') +const settings = require('@overleaf/settings') +const { promisifyAll } = require('../../util/promises') +const { + promises: InstitutionsAPIPromises, +} = require('../Institutions/InstitutionsAPI') +const InstitutionsHelper = require('../Institutions/InstitutionsHelper') +const Errors = require('../Errors/Errors') +const Features = require('../../infrastructure/Features') +const { User } = require('../../models/User') +const { normalizeQuery, normalizeMultiQuery } = require('../Helpers/Mongo') + +function _lastDayToReconfirm(emailData, institutionData) { + const globalReconfirmPeriod = settings.reconfirmNotificationDays + if (!globalReconfirmPeriod) return undefined + + // only show notification for institutions with reconfirmation enabled + if (!institutionData || !institutionData.maxConfirmationMonths) + return undefined + + if (!emailData.confirmedAt) return undefined + + if (institutionData.ssoEnabled && !emailData.samlProviderId) { + // For SSO, only show notification for linked email + return false + } + + // reconfirmedAt will not always be set, use confirmedAt as fallback + const lastConfirmed = emailData.reconfirmedAt || emailData.confirmedAt + + return moment(lastConfirmed) + .add(institutionData.maxConfirmationMonths, 'months') + .toDate() +} + +function _pastReconfirmDate(lastDayToReconfirm) { + if (!lastDayToReconfirm) return false + return moment(lastDayToReconfirm).isBefore() +} + +function _emailInReconfirmNotificationPeriod(lastDayToReconfirm) { + const globalReconfirmPeriod = settings.reconfirmNotificationDays + + if (!globalReconfirmPeriod || !lastDayToReconfirm) return false + + const notificationStarts = moment(lastDayToReconfirm).subtract( + globalReconfirmPeriod, + 'days' + ) + + return moment().isAfter(notificationStarts) +} + +async function getUserFullEmails(userId) { + const user = await UserGetter.promises.getUser(userId, { + email: 1, + emails: 1, + samlIdentifiers: 1, + }) + + if (!user) { + throw new Error('User not Found') + } + + if (!Features.hasFeature('affiliations')) { + return decorateFullEmails(user.email, user.emails, [], []) + } + + const affiliationsData = await InstitutionsAPIPromises.getUserAffiliations( + userId + ) + + return decorateFullEmails( + user.email, + user.emails || [], + affiliationsData, + user.samlIdentifiers || [] + ) +} + +async function getSsoUsersAtInstitution(institutionId, projection) { + if (!projection) { + throw new Error('missing projection') + } + + return await User.find( + { + 'samlIdentifiers.providerId': institutionId.toString(), + }, + projection + ).exec() +} + +const UserGetter = { + getSsoUsersAtInstitution: callbackify(getSsoUsersAtInstitution), + + getUser(query, projection, callback) { + if (arguments.length === 2) { + callback = projection + projection = {} + } + try { + query = normalizeQuery(query) + db.users.findOne(query, { projection }, callback) + } catch (err) { + callback(err) + } + }, + + getUserEmail(userId, callback) { + this.getUser(userId, { email: 1 }, (error, user) => + callback(error, user && user.email) + ) + }, + + getUserFullEmails: callbackify(getUserFullEmails), + + getUserByMainEmail(email, projection, callback) { + email = email.trim() + if (arguments.length === 2) { + callback = projection + projection = {} + } + db.users.findOne({ email }, { projection }, callback) + }, + + getUserByAnyEmail(email, projection, callback) { + email = email.trim() + if (arguments.length === 2) { + callback = projection + projection = {} + } + // $exists: true MUST be set to use the partial index + const query = { emails: { $exists: true }, 'emails.email': email } + db.users.findOne(query, { projection }, (error, user) => { + if (error || user) { + return callback(error, user) + } + + // While multiple emails are being rolled out, check for the main email as + // well + this.getUserByMainEmail(email, projection, callback) + }) + }, + + getUsersByAnyConfirmedEmail(emails, projection, callback) { + if (arguments.length === 2) { + callback = projection + projection = {} + } + + const query = { + 'emails.email': { $in: emails }, // use the index on emails.email + emails: { + $exists: true, + $elemMatch: { + email: { $in: emails }, + confirmedAt: { $exists: true }, + }, + }, + } + + db.users.find(query, { projection }).toArray(callback) + }, + + getUsersByV1Ids(v1Ids, projection, callback) { + if (arguments.length === 2) { + callback = projection + projection = {} + } + const query = { 'overleaf.id': { $in: v1Ids } } + db.users.find(query, { projection }).toArray(callback) + }, + + getUsersByHostname(hostname, projection, callback) { + const reversedHostname = hostname.trim().split('').reverse().join('') + const query = { + emails: { $exists: true }, + 'emails.reversedHostname': reversedHostname, + } + db.users.find(query, { projection }).toArray(callback) + }, + + getUsers(query, projection, callback) { + try { + query = normalizeMultiQuery(query) + db.users.find(query, { projection }).toArray(callback) + } catch (err) { + callback(err) + } + }, + + // check for duplicate email address. This is also enforced at the DB level + ensureUniqueEmailAddress(newEmail, callback) { + this.getUserByAnyEmail(newEmail, function (error, user) { + if (user) { + return callback(new Errors.EmailExistsError()) + } + callback(error) + }) + }, +} + +var decorateFullEmails = ( + defaultEmail, + emailsData, + affiliationsData, + samlIdentifiers +) => { + emailsData.forEach(function (emailData) { + emailData.default = emailData.email === defaultEmail + + const affiliation = affiliationsData.find( + aff => aff.email === emailData.email + ) + if (affiliation) { + const { + institution, + inferred, + role, + department, + licence, + portal, + } = affiliation + const lastDayToReconfirm = _lastDayToReconfirm(emailData, institution) + const pastReconfirmDate = _pastReconfirmDate(lastDayToReconfirm) + const inReconfirmNotificationPeriod = _emailInReconfirmNotificationPeriod( + lastDayToReconfirm + ) + emailData.affiliation = { + institution, + inferred, + inReconfirmNotificationPeriod, + lastDayToReconfirm, + pastReconfirmDate, + role, + department, + licence, + portal, + } + } + + if (emailData.samlProviderId) { + emailData.samlIdentifier = samlIdentifiers.find( + samlIdentifier => samlIdentifier.providerId === emailData.samlProviderId + ) + } + + emailData.emailHasInstitutionLicence = InstitutionsHelper.emailHasLicence( + emailData + ) + }) + + return emailsData +} +;[ + 'getUser', + 'getUserEmail', + 'getUserByMainEmail', + 'getUserByAnyEmail', + 'getUsers', + 'ensureUniqueEmailAddress', +].map(method => + metrics.timeAsyncMethod(UserGetter, method, 'mongo.UserGetter', logger) +) + +UserGetter.promises = promisifyAll(UserGetter, { + without: ['getSsoUsersAtInstitution', 'getUserFullEmails'], +}) +UserGetter.promises.getUserFullEmails = getUserFullEmails +UserGetter.promises.getSsoUsersAtInstitution = getSsoUsersAtInstitution + +module.exports = UserGetter diff --git a/services/web/app/src/Features/User/UserHandler.js b/services/web/app/src/Features/User/UserHandler.js new file mode 100644 index 0000000000..0966664c33 --- /dev/null +++ b/services/web/app/src/Features/User/UserHandler.js @@ -0,0 +1,15 @@ +const TeamInvitesHandler = require('../Subscription/TeamInvitesHandler') + +const UserHandler = { + populateTeamInvites(user, callback) { + TeamInvitesHandler.createTeamInvitesForLegacyInvitedEmail( + user.email, + callback + ) + }, + + setupLoginData(user, callback) { + this.populateTeamInvites(user, callback) + }, +} +module.exports = UserHandler diff --git a/services/web/app/src/Features/User/UserInfoController.js b/services/web/app/src/Features/User/UserInfoController.js new file mode 100644 index 0000000000..8de15065c7 --- /dev/null +++ b/services/web/app/src/Features/User/UserInfoController.js @@ -0,0 +1,82 @@ +let UserController +const UserGetter = require('./UserGetter') +const SessionManager = require('../Authentication/SessionManager') +const { ObjectId } = require('mongodb') + +module.exports = UserController = { + getLoggedInUsersPersonalInfo(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + if (!userId) { + return next(new Error('User is not logged in')) + } + UserGetter.getUser( + userId, + { + first_name: true, + last_name: true, + role: true, + institution: true, + email: true, + signUpDate: true, + }, + function (error, user) { + if (error) { + return next(error) + } + UserController.sendFormattedPersonalInfo(user, res, next) + } + ) + }, + + getPersonalInfo(req, res, next) { + let query + const userId = req.params.user_id + + if (/^\d+$/.test(userId)) { + query = { 'overleaf.id': parseInt(userId, 10) } + } else if (/^[a-f0-9]{24}$/.test(userId)) { + query = { _id: ObjectId(userId) } + } else { + return res.sendStatus(400) + } + + UserGetter.getUser( + query, + { _id: true, first_name: true, last_name: true, email: true }, + function (error, user) { + if (error) { + return next(error) + } + if (!user) { + return res.sendStatus(404) + } + UserController.sendFormattedPersonalInfo(user, res, next) + } + ) + }, + + sendFormattedPersonalInfo(user, res, next) { + const info = UserController.formatPersonalInfo(user) + res.json(info) + }, + + formatPersonalInfo(user, callback) { + if (!user) { + return {} + } + const formattedUser = { id: user._id.toString() } + for (const key of [ + 'first_name', + 'last_name', + 'email', + 'signUpDate', + 'role', + 'institution', + ]) { + if (user[key]) { + formattedUser[key] = user[key] + } + } + return formattedUser + }, +} diff --git a/services/web/app/src/Features/User/UserInfoManager.js b/services/web/app/src/Features/User/UserInfoManager.js new file mode 100644 index 0000000000..d1a44e22c7 --- /dev/null +++ b/services/web/app/src/Features/User/UserInfoManager.js @@ -0,0 +1,13 @@ +const UserGetter = require('./UserGetter') + +const UserInfoManager = { + getPersonalInfo(userId, callback) { + UserGetter.getUser( + userId, + { _id: true, first_name: true, last_name: true, email: true }, + callback + ) + }, +} + +module.exports = UserInfoManager diff --git a/services/web/app/src/Features/User/UserOnboardingEmailManager.js b/services/web/app/src/Features/User/UserOnboardingEmailManager.js new file mode 100644 index 0000000000..fb990a525d --- /dev/null +++ b/services/web/app/src/Features/User/UserOnboardingEmailManager.js @@ -0,0 +1,44 @@ +const Features = require('../../infrastructure/Features') +const Queues = require('../../infrastructure/Queues') +const EmailHandler = require('../Email/EmailHandler') +const UserUpdater = require('./UserUpdater') +const UserGetter = require('./UserGetter') + +const ONE_DAY_MS = 24 * 60 * 60 * 1000 + +class UserOnboardingEmailManager { + constructor() { + this.queue = Queues.getOnboardingEmailsQueue() + this.queue.process(async job => { + const { userId } = job.data + await this._sendOnboardingEmail(userId) + }) + } + + async scheduleOnboardingEmail(user) { + await this.queue.add({ userId: user._id }, { delay: ONE_DAY_MS }) + } + + async _sendOnboardingEmail(userId) { + const user = await UserGetter.promises.getUser( + { _id: userId }, + { email: 1 } + ) + if (user) { + await EmailHandler.promises.sendEmail('userOnboardingEmail', { + to: user.email, + }) + await UserUpdater.promises.updateUser(user._id, { + $set: { onboardingEmailSentAt: new Date() }, + }) + } + } +} + +class NoopManager { + async scheduleOnboardingEmail() {} +} + +module.exports = Features.hasFeature('saas') + ? new UserOnboardingEmailManager() + : new NoopManager() diff --git a/services/web/app/src/Features/User/UserPagesController.js b/services/web/app/src/Features/User/UserPagesController.js new file mode 100644 index 0000000000..975f13ac1b --- /dev/null +++ b/services/web/app/src/Features/User/UserPagesController.js @@ -0,0 +1,190 @@ +const UserGetter = require('./UserGetter') +const OError = require('@overleaf/o-error') +const UserSessionsManager = require('./UserSessionsManager') +const logger = require('logger-sharelatex') +const Settings = require('@overleaf/settings') +const AuthenticationController = require('../Authentication/AuthenticationController') +const SessionManager = require('../Authentication/SessionManager') +const _ = require('lodash') + +const UserPagesController = { + registerPage(req, res) { + const sharedProjectData = { + project_name: req.query.project_name, + user_first_name: req.query.user_first_name, + } + + const newTemplateData = {} + if (req.session.templateData != null) { + newTemplateData.templateName = req.session.templateData.templateName + } + + res.render('user/register', { + title: 'register', + sharedProjectData, + newTemplateData, + samlBeta: req.session.samlBeta, + }) + }, + + loginPage(req, res) { + // if user is being sent to /login with explicit redirect (redir=/foo), + // such as being sent from the editor to /login, then set the redirect explicitly + if ( + req.query.redir != null && + AuthenticationController._getRedirectFromSession(req) == null + ) { + AuthenticationController.setRedirectInSession(req, req.query.redir) + } + res.render('user/login', { + title: 'login', + }) + }, + + /** + * Landing page for users who may have received one-time login + * tokens from the read-only maintenance site. + * + * We tell them that Overleaf is back up and that they can login normally. + */ + oneTimeLoginPage(req, res, next) { + res.render('user/one_time_login') + }, + + logoutPage(req, res) { + res.render('user/logout') + }, + + renderReconfirmAccountPage(req, res) { + const pageData = { + reconfirm_email: req.session.reconfirm_email, + } + // when a user must reconfirm their account + res.render('user/reconfirm', pageData) + }, + + settingsPage(req, res, next) { + const userId = SessionManager.getLoggedInUserId(req.session) + const reconfirmationRemoveEmail = req.query.remove + // SSO + const ssoError = req.session.ssoError + if (ssoError) { + delete req.session.ssoError + } + // Institution SSO + let institutionLinked = _.get(req.session, ['saml', 'linked']) + if (institutionLinked) { + // copy object if exists because _.get does not + institutionLinked = Object.assign( + { + hasEntitlement: _.get(req.session, ['saml', 'hasEntitlement']), + }, + institutionLinked + ) + } + const samlError = _.get(req.session, ['saml', 'error']) + const institutionEmailNonCanonical = _.get(req.session, [ + 'saml', + 'emailNonCanonical', + ]) + const institutionRequestedEmail = _.get(req.session, [ + 'saml', + 'requestedEmail', + ]) + + const reconfirmedViaSAML = _.get(req.session, ['saml', 'reconfirmed']) + delete req.session.saml + let shouldAllowEditingDetails = true + if (Settings.ldap && Settings.ldap.updateUserDetailsOnLogin) { + shouldAllowEditingDetails = false + } + if (Settings.saml && Settings.saml.updateUserDetailsOnLogin) { + shouldAllowEditingDetails = false + } + const oauthProviders = Settings.oauthProviders || {} + + UserGetter.getUser(userId, (err, user) => { + if (err != null) { + return next(err) + } + res.render('user/settings', { + title: 'account_settings', + user, + hasPassword: !!user.hashedPassword, + shouldAllowEditingDetails, + languages: Settings.languages, + accountSettingsTabActive: true, + oauthProviders: UserPagesController._translateProviderDescriptions( + oauthProviders, + req + ), + oauthUseV2: Settings.oauthUseV2 || false, + institutionLinked, + samlError, + institutionEmailNonCanonical: + institutionEmailNonCanonical && institutionRequestedEmail + ? institutionEmailNonCanonical + : undefined, + reconfirmedViaSAML, + reconfirmationRemoveEmail, + samlBeta: req.session.samlBeta, + ssoError: ssoError, + thirdPartyIds: UserPagesController._restructureThirdPartyIds(user), + }) + }) + }, + + sessionsPage(req, res, next) { + const user = SessionManager.getSessionUser(req.session) + logger.log({ userId: user._id }, 'loading sessions page') + UserSessionsManager.getAllUserSessions( + user, + [req.sessionID], + (err, sessions) => { + if (err != null) { + OError.tag(err, 'error getting all user sessions', { + userId: user._id, + }) + return next(err) + } + res.render('user/sessions', { + title: 'sessions', + sessions, + }) + } + ) + }, + + _restructureThirdPartyIds(user) { + // 3rd party identifiers are an array of objects + // this turn them into a single object, which + // makes data easier to use in template + if ( + !user.thirdPartyIdentifiers || + user.thirdPartyIdentifiers.length === 0 + ) { + return null + } + return user.thirdPartyIdentifiers.reduce((obj, identifier) => { + obj[identifier.providerId] = identifier.externalUserId + return obj + }, {}) + }, + + _translateProviderDescriptions(providers, req) { + const result = {} + if (providers) { + for (const provider in providers) { + const data = providers[provider] + data.description = req.i18n.translate( + data.descriptionKey, + Object.assign({}, data.descriptionOptions) + ) + result[provider] = data + } + } + return result + }, +} + +module.exports = UserPagesController diff --git a/services/web/app/src/Features/User/UserPostRegistrationAnalyticsManager.js b/services/web/app/src/Features/User/UserPostRegistrationAnalyticsManager.js new file mode 100644 index 0000000000..d378d9257d --- /dev/null +++ b/services/web/app/src/Features/User/UserPostRegistrationAnalyticsManager.js @@ -0,0 +1,57 @@ +const Queues = require('../../infrastructure/Queues') +const UserGetter = require('./UserGetter') +const { + promises: InstitutionsAPIPromises, +} = require('../Institutions/InstitutionsAPI') +const AnalyticsManager = require('../Analytics/AnalyticsManager') +const Features = require('../../infrastructure/Features') + +const ONE_DAY_MS = 24 * 60 * 60 * 1000 + +class UserPostRegistrationAnalyticsManager { + constructor() { + this.queue = Queues.getPostRegistrationAnalyticsQueue() + this.queue.process(async job => { + const { userId } = job.data + await postRegistrationAnalytics(userId) + }) + } + + async schedulePostRegistrationAnalytics(user) { + await this.queue.add({ userId: user._id }, { delay: ONE_DAY_MS }) + } +} + +async function postRegistrationAnalytics(userId) { + const user = await UserGetter.promises.getUser({ _id: userId }, { email: 1 }) + if (!user) { + return + } + await checkAffiliations(userId) +} + +async function checkAffiliations(userId) { + const affiliationsData = await InstitutionsAPIPromises.getUserAffiliations( + userId + ) + const hasCommonsAccountAffiliation = affiliationsData.some( + affiliationData => + affiliationData.institution && affiliationData.institution.commonsAccount + ) + + if (hasCommonsAccountAffiliation) { + await AnalyticsManager.setUserProperty( + userId, + 'registered-from-commons-account', + true + ) + } +} + +class NoopManager { + async schedulePostRegistrationAnalytics() {} +} + +module.exports = Features.hasFeature('saas') + ? new UserPostRegistrationAnalyticsManager() + : new NoopManager() diff --git a/services/web/app/src/Features/User/UserRegistrationHandler.js b/services/web/app/src/Features/User/UserRegistrationHandler.js new file mode 100644 index 0000000000..d935e4cd7b --- /dev/null +++ b/services/web/app/src/Features/User/UserRegistrationHandler.js @@ -0,0 +1,146 @@ +const { User } = require('../../models/User') +const UserCreator = require('./UserCreator') +const UserGetter = require('./UserGetter') +const AuthenticationManager = require('../Authentication/AuthenticationManager') +const NewsletterManager = require('../Newsletter/NewsletterManager') +const async = require('async') +const logger = require('logger-sharelatex') +const crypto = require('crypto') +const EmailHandler = require('../Email/EmailHandler') +const OneTimeTokenHandler = require('../Security/OneTimeTokenHandler') +const Analytics = require('../Analytics/AnalyticsManager') +const settings = require('@overleaf/settings') +const EmailHelper = require('../Helpers/EmailHelper') + +const UserRegistrationHandler = { + _registrationRequestIsValid(body) { + const invalidEmail = AuthenticationManager.validateEmail(body.email || '') + const invalidPassword = AuthenticationManager.validatePassword( + body.password || '', + body.email + ) + return !(invalidEmail || invalidPassword) + }, + + _createNewUserIfRequired(user, userDetails, callback) { + if (!user) { + userDetails.holdingAccount = false + UserCreator.createNewUser( + { + holdingAccount: false, + email: userDetails.email, + first_name: userDetails.first_name, + last_name: userDetails.last_name, + }, + {}, + callback + ) + } else { + callback(null, user) + } + }, + + registerNewUser(userDetails, callback) { + const self = this + const requestIsValid = this._registrationRequestIsValid(userDetails) + if (!requestIsValid) { + return callback(new Error('request is not valid')) + } + userDetails.email = EmailHelper.parseEmail(userDetails.email) + UserGetter.getUserByAnyEmail(userDetails.email, (error, user) => { + if (error) { + return callback(error) + } + if (user && user.holdingAccount === false) { + return callback(new Error('EmailAlreadyRegistered'), user) + } + self._createNewUserIfRequired(user, userDetails, (error, user) => { + if (error) { + return callback(error) + } + async.series( + [ + callback => + User.updateOne( + { _id: user._id }, + { $set: { holdingAccount: false } }, + callback + ), + callback => + AuthenticationManager.setUserPassword( + user, + userDetails.password, + callback + ), + callback => { + if (userDetails.subscribeToNewsletter === 'true') { + NewsletterManager.subscribe(user, error => { + if (error) { + logger.warn( + { err: error, user }, + 'Failed to subscribe user to newsletter' + ) + } + }) + } + callback() + }, // this can be slow, just fire it off + ], + error => { + Analytics.recordEvent(user._id, 'user-registered') + callback(error, user) + } + ) + }) + }) + }, + + registerNewUserAndSendActivationEmail(email, callback) { + UserRegistrationHandler.registerNewUser( + { + email, + password: crypto.randomBytes(32).toString('hex'), + }, + (error, user) => { + if (error && error.message !== 'EmailAlreadyRegistered') { + return callback(error) + } + + if (error && error.message === 'EmailAlreadyRegistered') { + logger.log({ email }, 'user already exists, resending welcome email') + } + + const ONE_WEEK = 7 * 24 * 60 * 60 // seconds + OneTimeTokenHandler.getNewToken( + 'password', + { user_id: user._id.toString(), email: user.email }, + { expiresIn: ONE_WEEK }, + (error, token) => { + if (error) { + return callback(error) + } + + const setNewPasswordUrl = `${settings.siteUrl}/user/activate?token=${token}&user_id=${user._id}` + + EmailHandler.sendEmail( + 'registered', + { + to: user.email, + setNewPasswordUrl, + }, + error => { + if (error) { + logger.warn({ err: error }, 'failed to send activation email') + } + } + ) + + callback(null, user, setNewPasswordUrl) + } + ) + } + ) + }, +} + +module.exports = UserRegistrationHandler diff --git a/services/web/app/src/Features/User/UserSessionsManager.js b/services/web/app/src/Features/User/UserSessionsManager.js new file mode 100644 index 0000000000..ce1abf1f0c --- /dev/null +++ b/services/web/app/src/Features/User/UserSessionsManager.js @@ -0,0 +1,247 @@ +const OError = require('@overleaf/o-error') +const Settings = require('@overleaf/settings') +const logger = require('logger-sharelatex') +const Async = require('async') +const _ = require('underscore') +const { promisify } = require('util') +const UserSessionsRedis = require('./UserSessionsRedis') +const rclient = UserSessionsRedis.client() + +const UserSessionsManager = { + // mimic the key used by the express sessions + _sessionKey(sessionId) { + return `sess:${sessionId}` + }, + + trackSession(user, sessionId, callback) { + if (!user) { + return callback(null) + } + if (!sessionId) { + return callback(null) + } + const sessionSetKey = UserSessionsRedis.sessionSetKey(user) + const value = UserSessionsManager._sessionKey(sessionId) + rclient + .multi() + .sadd(sessionSetKey, value) + .pexpire(sessionSetKey, `${Settings.cookieSessionLength}`) // in milliseconds + .exec(function (err, response) { + if (err) { + OError.tag( + err, + 'error while adding session key to UserSessions set', + { + user_id: user._id, + sessionSetKey, + } + ) + return callback(err) + } + UserSessionsManager._checkSessions(user, function () {}) + callback() + }) + }, + + untrackSession(user, sessionId, callback) { + if (!callback) { + callback = function () {} + } + if (!user) { + return callback(null) + } + if (!sessionId) { + return callback(null) + } + const sessionSetKey = UserSessionsRedis.sessionSetKey(user) + const value = UserSessionsManager._sessionKey(sessionId) + rclient + .multi() + .srem(sessionSetKey, value) + .pexpire(sessionSetKey, `${Settings.cookieSessionLength}`) // in milliseconds + .exec(function (err, response) { + if (err) { + OError.tag( + err, + 'error while removing session key from UserSessions set', + { + user_id: user._id, + sessionSetKey, + } + ) + return callback(err) + } + UserSessionsManager._checkSessions(user, function () {}) + callback() + }) + }, + + getAllUserSessions(user, exclude, callback) { + exclude = _.map(exclude, UserSessionsManager._sessionKey) + const sessionSetKey = UserSessionsRedis.sessionSetKey(user) + rclient.smembers(sessionSetKey, function (err, sessionKeys) { + if (err) { + OError.tag(err, 'error getting all session keys for user from redis', { + user_id: user._id, + }) + return callback(err) + } + sessionKeys = _.filter(sessionKeys, k => !_.contains(exclude, k)) + if (sessionKeys.length === 0) { + logger.log({ user_id: user._id }, 'no other sessions found, returning') + return callback(null, []) + } + + Async.mapSeries( + sessionKeys, + (k, cb) => rclient.get(k, cb), + function (err, sessions) { + if (err) { + OError.tag(err, 'error getting all sessions for user from redis', { + user_id: user._id, + }) + return callback(err) + } + + const result = [] + for (let session of Array.from(sessions)) { + if (!session) { + continue + } + session = JSON.parse(session) + let sessionUser = session.passport && session.passport.user + if (!sessionUser) { + sessionUser = session.user + } + + result.push({ + ip_address: sessionUser.ip_address, + session_created: sessionUser.session_created, + }) + } + + callback(null, result) + } + ) + }) + }, + + revokeAllUserSessions(user, retain, callback) { + if (!retain) { + retain = [] + } + retain = retain.map(i => UserSessionsManager._sessionKey(i)) + if (!user) { + return callback(null) + } + const sessionSetKey = UserSessionsRedis.sessionSetKey(user) + rclient.smembers(sessionSetKey, function (err, sessionKeys) { + if (err) { + OError.tag(err, 'error getting contents of UserSessions set', { + user_id: user._id, + sessionSetKey, + }) + return callback(err) + } + const keysToDelete = _.filter( + sessionKeys, + k => !Array.from(retain).includes(k) + ) + if (keysToDelete.length === 0) { + logger.log( + { user_id: user._id }, + 'no sessions in UserSessions set to delete, returning' + ) + return callback(null) + } + logger.log( + { user_id: user._id, count: keysToDelete.length }, + 'deleting sessions for user' + ) + + const deletions = keysToDelete.map(k => cb => rclient.del(k, cb)) + + Async.series(deletions, function (err, _result) { + if (err) { + OError.tag(err, 'error revoking all sessions for user', { + user_id: user._id, + sessionSetKey, + }) + return callback(err) + } + rclient.srem(sessionSetKey, keysToDelete, function (err) { + if (err) { + OError.tag(err, 'error removing session set for user', { + user_id: user._id, + sessionSetKey, + }) + return callback(err) + } + callback(null) + }) + }) + }) + }, + + touch(user, callback) { + if (!user) { + return callback(null) + } + const sessionSetKey = UserSessionsRedis.sessionSetKey(user) + rclient.pexpire( + sessionSetKey, + `${Settings.cookieSessionLength}`, // in milliseconds + function (err, response) { + if (err) { + OError.tag(err, 'error while updating ttl on UserSessions set', { + user_id: user._id, + }) + return callback(err) + } + callback(null) + } + ) + }, + + _checkSessions(user, callback) { + if (!user) { + return callback(null) + } + const sessionSetKey = UserSessionsRedis.sessionSetKey(user) + rclient.smembers(sessionSetKey, function (err, sessionKeys) { + if (err) { + OError.tag(err, 'error getting contents of UserSessions set', { + user_id: user._id, + sessionSetKey, + }) + return callback(err) + } + Async.series( + sessionKeys.map(key => next => + rclient.get(key, function (err, val) { + if (err) { + return next(err) + } + if (!val) { + rclient.srem(sessionSetKey, key, function (err, result) { + return next(err) + }) + } else { + next() + } + }) + ), + function (err, results) { + callback(err) + } + ) + }) + }, +} + +UserSessionsManager.promises = { + getAllUserSessions: promisify(UserSessionsManager.getAllUserSessions), + revokeAllUserSessions: promisify(UserSessionsManager.revokeAllUserSessions), +} + +module.exports = UserSessionsManager diff --git a/services/web/app/src/Features/User/UserSessionsRedis.js b/services/web/app/src/Features/User/UserSessionsRedis.js new file mode 100644 index 0000000000..689e4148c0 --- /dev/null +++ b/services/web/app/src/Features/User/UserSessionsRedis.js @@ -0,0 +1,13 @@ +const RedisWrapper = require('../../infrastructure/RedisWrapper') +const rclient = RedisWrapper.client('websessions') + +const UserSessionsRedis = { + client() { + return rclient + }, + + sessionSetKey(user) { + return `UserSessions:{${user._id}}` + }, +} +module.exports = UserSessionsRedis diff --git a/services/web/app/src/Features/User/UserUpdater.js b/services/web/app/src/Features/User/UserUpdater.js new file mode 100644 index 0000000000..12ecf266e6 --- /dev/null +++ b/services/web/app/src/Features/User/UserUpdater.js @@ -0,0 +1,392 @@ +const logger = require('logger-sharelatex') +const OError = require('@overleaf/o-error') +const { db } = require('../../infrastructure/mongodb') +const { normalizeQuery } = require('../Helpers/Mongo') +const metrics = require('@overleaf/metrics') +const async = require('async') +const { callbackify, promisify } = require('util') +const UserGetter = require('./UserGetter') +const { + addAffiliation, + removeAffiliation, + promises: InstitutionsAPIPromises, +} = require('../Institutions/InstitutionsAPI') +const Features = require('../../infrastructure/Features') +const FeaturesUpdater = require('../Subscription/FeaturesUpdater') +const EmailHandler = require('../Email/EmailHandler') +const EmailHelper = require('../Helpers/EmailHelper') +const Errors = require('../Errors/Errors') +const NewsletterManager = require('../Newsletter/NewsletterManager') +const RecurlyWrapper = require('../Subscription/RecurlyWrapper') +const UserAuditLogHandler = require('./UserAuditLogHandler') + +async function _sendSecurityAlertPrimaryEmailChanged(userId, oldEmail, email) { + // send email to both old and new primary email + const emailOptions = { + actionDescribed: `the primary email address on your account was changed to ${email}`, + action: 'change of primary email address', + } + const toOld = Object.assign({}, emailOptions, { to: oldEmail }) + const toNew = Object.assign({}, emailOptions, { to: email }) + + try { + await EmailHandler.promises.sendEmail('securityAlert', toOld) + await EmailHandler.promises.sendEmail('securityAlert', toNew) + } catch (error) { + logger.error( + { error, userId }, + 'could not send security alert email when primary email changed' + ) + } +} + +async function addEmailAddress(userId, newEmail, affiliationOptions, auditLog) { + newEmail = EmailHelper.parseEmail(newEmail) + if (!newEmail) { + throw new Error('invalid email') + } + + await UserGetter.promises.ensureUniqueEmailAddress(newEmail) + + await UserAuditLogHandler.promises.addEntry( + userId, + 'add-email', + auditLog.initiatorId, + auditLog.ipAddress, + { + newSecondaryEmail: newEmail, + } + ) + + try { + await InstitutionsAPIPromises.addAffiliation( + userId, + newEmail, + affiliationOptions + ) + } catch (error) { + throw OError.tag(error, 'problem adding affiliation while adding email') + } + + try { + const reversedHostname = newEmail.split('@')[1].split('').reverse().join('') + const update = { + $push: { + emails: { email: newEmail, createdAt: new Date(), reversedHostname }, + }, + } + await UserUpdater.promises.updateUser(userId, update) + } catch (error) { + throw OError.tag(error, 'problem updating users emails') + } +} + +async function clearSAMLData(userId, auditLog, sendEmail) { + const user = await UserGetter.promises.getUser(userId, { + email: 1, + emails: 1, + }) + + await UserAuditLogHandler.promises.addEntry( + userId, + 'clear-institution-sso-data', + auditLog.initiatorId, + auditLog.ipAddress, + {} + ) + + const update = { + $unset: { + samlIdentifiers: 1, + 'emails.$[].samlProviderId': 1, + }, + } + await UserUpdater.promises.updateUser(userId, update) + + for (const emailData of user.emails) { + await InstitutionsAPIPromises.removeEntitlement(userId, emailData.email) + } + + await FeaturesUpdater.promises.refreshFeatures( + userId, + 'clear-institution-sso-data' + ) + + if (sendEmail) { + await EmailHandler.promises.sendEmail('SAMLDataCleared', { to: user.email }) + } +} + +async function setDefaultEmailAddress( + userId, + email, + allowUnconfirmed, + auditLog, + sendSecurityAlert +) { + email = EmailHelper.parseEmail(email) + if (email == null) { + throw new Error('invalid email') + } + + const user = await UserGetter.promises.getUser(userId, { + email: 1, + emails: 1, + }) + if (!user) { + throw new Error('invalid userId') + } + + const oldEmail = user.email + const userEmail = user.emails.find(e => e.email === email) + if (!userEmail) { + throw new Error('Default email does not belong to user') + } + if (!userEmail.confirmedAt && !allowUnconfirmed) { + throw new Errors.UnconfirmedEmailError() + } + + await UserAuditLogHandler.promises.addEntry( + userId, + 'change-primary-email', + auditLog.initiatorId, + auditLog.ipAddress, + { + newPrimaryEmail: email, + oldPrimaryEmail: oldEmail, + } + ) + + const query = { _id: userId, 'emails.email': email } + const update = { $set: { email } } + const res = await UserUpdater.promises.updateUser(query, update) + + // this should not happen + if (res.n === 0) { + throw new Error('email update error') + } + + if (sendSecurityAlert) { + // no need to wait, errors are logged and not passed back + _sendSecurityAlertPrimaryEmailChanged(userId, oldEmail, email) + } + + try { + await NewsletterManager.promises.changeEmail(user, email) + } catch (error) { + logger.warn( + { err: error, oldEmail, newEmail: email }, + 'Failed to change email in newsletter subscription' + ) + } + + try { + await RecurlyWrapper.promises.updateAccountEmailAddress(user._id, email) + } catch (error) { + // errors are ignored + } +} + +async function confirmEmail(userId, email) { + // used for initial email confirmation (non-SSO and SSO) + // also used for reconfirmation of non-SSO emails + const confirmedAt = new Date() + email = EmailHelper.parseEmail(email) + if (email == null) { + throw new Error('invalid email') + } + logger.log({ userId, email }, 'confirming user email') + + try { + await InstitutionsAPIPromises.addAffiliation(userId, email, { confirmedAt }) + } catch (error) { + throw OError.tag(error, 'problem adding affiliation while confirming email') + } + + const query = { + _id: userId, + 'emails.email': email, + } + + // only update confirmedAt if it was not previously set + const update = { + $set: { + 'emails.$.reconfirmedAt': confirmedAt, + }, + $min: { + 'emails.$.confirmedAt': confirmedAt, + }, + } + + if (Features.hasFeature('affiliations')) { + update.$unset = { + 'emails.$.affiliationUnchecked': 1, + } + } + + const res = await UserUpdater.promises.updateUser(query, update) + + if (res.n === 0) { + throw new Errors.NotFoundError('user id and email do no match') + } + await FeaturesUpdater.promises.refreshFeatures(userId, 'confirm-email') +} + +const UserUpdater = { + addAffiliationForNewUser(userId, email, affiliationOptions, callback) { + if (callback == null) { + // affiliationOptions is optional + callback = affiliationOptions + affiliationOptions = {} + } + addAffiliation(userId, email, affiliationOptions, error => { + if (error) { + return callback(error) + } + UserUpdater.updateUser( + { _id: userId, 'emails.email': email }, + { $unset: { 'emails.$.affiliationUnchecked': 1 } }, + error => { + if (error) { + callback( + OError.tag( + error, + 'could not remove affiliationUnchecked flag for user on create', + { + userId, + email, + } + ) + ) + } else { + callback() + } + } + ) + }) + }, + + updateUser(query, update, callback) { + if (callback == null) { + callback = () => {} + } + + try { + query = normalizeQuery(query) + } catch (err) { + return callback(err) + } + + db.users.updateOne(query, update, callback) + }, + + // + // DEPRECATED + // + // Change the user's main email address by adding a new email, switching the + // default email and removing the old email. Prefer manipulating multiple + // emails and the default rather than calling this method directly + // + changeEmailAddress(userId, newEmail, auditLog, callback) { + newEmail = EmailHelper.parseEmail(newEmail) + if (newEmail == null) { + return callback(new Error('invalid email')) + } + + let oldEmail = null + async.series( + [ + cb => + UserGetter.getUserEmail(userId, (error, email) => { + oldEmail = email + cb(error) + }), + cb => UserUpdater.addEmailAddress(userId, newEmail, {}, auditLog, cb), + cb => + UserUpdater.setDefaultEmailAddress( + userId, + newEmail, + true, + auditLog, + true, + cb + ), + cb => UserUpdater.removeEmailAddress(userId, oldEmail, cb), + ], + callback + ) + }, + + // Add a new email address for the user. Email cannot be already used by this + // or any other user + addEmailAddress: callbackify(addEmailAddress), + + // remove one of the user's email addresses. The email cannot be the user's + // default email address + removeEmailAddress(userId, email, callback) { + email = EmailHelper.parseEmail(email) + if (email == null) { + return callback(new Error('invalid email')) + } + removeAffiliation(userId, email, error => { + if (error != null) { + OError.tag(error, 'problem removing affiliation') + return callback(error) + } + + const query = { _id: userId, email: { $ne: email } } + const update = { $pull: { emails: { email } } } + UserUpdater.updateUser(query, update, (error, res) => { + if (error != null) { + OError.tag(error, 'problem removing users email') + return callback(error) + } + if (res.n === 0) { + return callback(new Error('Cannot remove email')) + } + FeaturesUpdater.refreshFeatures(userId, 'remove-email', callback) + }) + }) + }, + + clearSAMLData: callbackify(clearSAMLData), + + // set the default email address by setting the `email` attribute. The email + // must be one of the user's multiple emails (`emails` attribute) + setDefaultEmailAddress: callbackify(setDefaultEmailAddress), + + confirmEmail: callbackify(confirmEmail), + + removeReconfirmFlag(userId, callback) { + UserUpdater.updateUser( + userId.toString(), + { + $set: { must_reconfirm: false }, + }, + error => callback(error) + ) + }, +} +;[ + 'updateUser', + 'changeEmailAddress', + 'setDefaultEmailAddress', + 'addEmailAddress', + 'removeEmailAddress', + 'removeReconfirmFlag', +].map(method => + metrics.timeAsyncMethod(UserUpdater, method, 'mongo.UserUpdater', logger) +) + +const promises = { + addAffiliationForNewUser: promisify(UserUpdater.addAffiliationForNewUser), + addEmailAddress, + confirmEmail, + setDefaultEmailAddress, + updateUser: promisify(UserUpdater.updateUser), + removeReconfirmFlag: promisify(UserUpdater.removeReconfirmFlag), +} + +UserUpdater.promises = promises + +module.exports = UserUpdater diff --git a/services/web/app/src/Features/UserMembership/UserMembershipAuthorization.js b/services/web/app/src/Features/UserMembership/UserMembershipAuthorization.js new file mode 100644 index 0000000000..23530c3a40 --- /dev/null +++ b/services/web/app/src/Features/UserMembership/UserMembershipAuthorization.js @@ -0,0 +1,29 @@ +const UserMembershipAuthorization = { + hasStaffAccess(requiredStaffAccess) { + return req => { + if (!req.user) { + return false + } + if (req.user.isAdmin) { + return true + } + return ( + requiredStaffAccess && + req.user.staffAccess && + req.user.staffAccess[requiredStaffAccess] + ) + } + }, + + hasEntityAccess() { + return req => { + if (!req.entity) { + return false + } + return req.entity[req.entityConfig.fields.access].some(accessUserId => + accessUserId.equals(req.user._id) + ) + } + }, +} +module.exports = UserMembershipAuthorization diff --git a/services/web/app/src/Features/UserMembership/UserMembershipController.js b/services/web/app/src/Features/UserMembership/UserMembershipController.js new file mode 100644 index 0000000000..050b235509 --- /dev/null +++ b/services/web/app/src/Features/UserMembership/UserMembershipController.js @@ -0,0 +1,179 @@ +/* eslint-disable + max-len, + */ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS101: Remove unnecessary use of Array.from + * DS102: Remove unnecessary code created because of implicit returns + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +const SessionManager = require('../Authentication/SessionManager') +const UserMembershipHandler = require('./UserMembershipHandler') +const Errors = require('../Errors/Errors') +const EmailHelper = require('../Helpers/EmailHelper') +const CSVParser = require('json2csv').Parser + +module.exports = { + index(req, res, next) { + const { entity, entityConfig } = req + return entity.fetchV1Data(function (error, entity) { + if (error != null) { + return next(error) + } + return UserMembershipHandler.getUsers( + entity, + entityConfig, + function (error, users) { + let entityName + if (error != null) { + return next(error) + } + const entityPrimaryKey = entity[ + entityConfig.fields.primaryKey + ].toString() + if (entityConfig.fields.name) { + entityName = entity[entityConfig.fields.name] + } + return res.render('user_membership/index', { + name: entityName, + users, + groupSize: entityConfig.hasMembersLimit + ? entity.membersLimit + : undefined, + translations: entityConfig.translations, + paths: entityConfig.pathsFor(entityPrimaryKey), + }) + } + ) + }) + }, + + add(req, res, next) { + const { entity, entityConfig } = req + const email = EmailHelper.parseEmail(req.body.email) + if (email == null) { + return res.status(400).json({ + error: { + code: 'invalid_email', + message: req.i18n.translate('invalid_email'), + }, + }) + } + + if (entityConfig.readOnly) { + return next(new Errors.NotFoundError('Cannot add users to entity')) + } + + return UserMembershipHandler.addUser( + entity, + entityConfig, + email, + function (error, user) { + if (error != null ? error.alreadyAdded : undefined) { + return res.status(400).json({ + error: { + code: 'user_already_added', + message: req.i18n.translate('user_already_added'), + }, + }) + } + if (error != null ? error.userNotFound : undefined) { + return res.status(404).json({ + error: { + code: 'user_not_found', + message: req.i18n.translate('user_not_found'), + }, + }) + } + if (error != null) { + return next(error) + } + return res.json({ user }) + } + ) + }, + + remove(req, res, next) { + const { entity, entityConfig } = req + const { userId } = req.params + + if (entityConfig.readOnly) { + return next(new Errors.NotFoundError('Cannot remove users from entity')) + } + + const loggedInUserId = SessionManager.getLoggedInUserId(req.session) + if (loggedInUserId === userId) { + return res.status(400).json({ + error: { + code: 'managers_cannot_remove_self', + message: req.i18n.translate('managers_cannot_remove_self'), + }, + }) + } + + return UserMembershipHandler.removeUser( + entity, + entityConfig, + userId, + function (error, user) { + if (error != null ? error.isAdmin : undefined) { + return res.status(400).json({ + error: { + code: 'managers_cannot_remove_admin', + message: req.i18n.translate('managers_cannot_remove_admin'), + }, + }) + } + if (error != null) { + return next(error) + } + return res.sendStatus(200) + } + ) + }, + + exportCsv(req, res, next) { + const { entity, entityConfig } = req + const fields = ['email', 'last_logged_in_at'] + + return UserMembershipHandler.getUsers( + entity, + entityConfig, + function (error, users) { + if (error != null) { + return next(error) + } + const csvParser = new CSVParser({ fields }) + res.header('Content-Disposition', 'attachment; filename=Group.csv') + res.contentType('text/csv') + return res.send(csvParser.parse(users)) + } + ) + }, + + new(req, res, next) { + return res.render('user_membership/new', { + entityName: req.params.name, + entityId: req.params.id, + }) + }, + + create(req, res, next) { + const entityId = req.params.id + const entityConfig = req.entityConfig + + return UserMembershipHandler.createEntity( + entityId, + entityConfig, + function (error, entity) { + if (error != null) { + return next(error) + } + return res.redirect(entityConfig.pathsFor(entityId).index) + } + ) + }, +} diff --git a/services/web/app/src/Features/UserMembership/UserMembershipEntityConfigs.js b/services/web/app/src/Features/UserMembership/UserMembershipEntityConfigs.js new file mode 100644 index 0000000000..e74b32d7ad --- /dev/null +++ b/services/web/app/src/Features/UserMembership/UserMembershipEntityConfigs.js @@ -0,0 +1,113 @@ +module.exports = { + group: { + modelName: 'Subscription', + readOnly: true, + hasMembersLimit: true, + fields: { + primaryKey: '_id', + read: ['invited_emails', 'teamInvites', 'member_ids'], + write: null, + access: 'manager_ids', + name: 'teamName', + }, + baseQuery: { + groupPlan: true, + }, + translations: { + title: 'group_account', + subtitle: 'members_management', + remove: 'remove_from_group', + }, + pathsFor(id) { + return { + addMember: `/manage/groups/${id}/invites`, + removeMember: `/manage/groups/${id}/user`, + removeInvite: `/manage/groups/${id}/invites`, + exportMembers: `/manage/groups/${id}/members/export`, + } + }, + }, + + team: { + // for metrics only + modelName: 'Subscription', + fields: { + primaryKey: 'overleaf.id', + access: 'manager_ids', + }, + baseQuery: { + groupPlan: true, + }, + }, + + groupManagers: { + modelName: 'Subscription', + fields: { + primaryKey: '_id', + read: ['manager_ids'], + write: 'manager_ids', + access: 'manager_ids', + name: 'teamName', + }, + baseQuery: { + groupPlan: true, + }, + translations: { + title: 'group_account', + subtitle: 'managers_management', + remove: 'remove_manager', + }, + pathsFor(id) { + return { + addMember: `/manage/groups/${id}/managers`, + removeMember: `/manage/groups/${id}/managers`, + } + }, + }, + + institution: { + modelName: 'Institution', + fields: { + primaryKey: 'v1Id', + read: ['managerIds'], + write: 'managerIds', + access: 'managerIds', + name: 'name', + }, + translations: { + title: 'institution_account', + subtitle: 'managers_management', + remove: 'remove_manager', + }, + pathsFor(id) { + return { + index: `/manage/institutions/${id}/managers`, + addMember: `/manage/institutions/${id}/managers`, + removeMember: `/manage/institutions/${id}/managers`, + } + }, + }, + + publisher: { + modelName: 'Publisher', + fields: { + primaryKey: 'slug', + read: ['managerIds'], + write: 'managerIds', + access: 'managerIds', + name: 'name', + }, + translations: { + title: 'publisher_account', + subtitle: 'managers_management', + remove: 'remove_manager', + }, + pathsFor(id) { + return { + index: `/manage/publishers/${id}/managers`, + addMember: `/manage/publishers/${id}/managers`, + removeMember: `/manage/publishers/${id}/managers`, + } + }, + }, +} diff --git a/services/web/app/src/Features/UserMembership/UserMembershipHandler.js b/services/web/app/src/Features/UserMembership/UserMembershipHandler.js new file mode 100644 index 0000000000..7c224dec61 --- /dev/null +++ b/services/web/app/src/Features/UserMembership/UserMembershipHandler.js @@ -0,0 +1,135 @@ +/* eslint-disable + node/handle-callback-err, + max-len, + no-unused-vars, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS101: Remove unnecessary use of Array.from + * DS102: Remove unnecessary code created because of implicit returns + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +const { ObjectId } = require('mongodb') +const async = require('async') +const { promisifyAll } = require('../../util/promises') +const Errors = require('../Errors/Errors') +const EntityModels = { + Institution: require('../../models/Institution').Institution, + Subscription: require('../../models/Subscription').Subscription, + Publisher: require('../../models/Publisher').Publisher, +} +const UserMembershipViewModel = require('./UserMembershipViewModel') +const UserGetter = require('../User/UserGetter') +const logger = require('logger-sharelatex') +const UserMembershipEntityConfigs = require('./UserMembershipEntityConfigs') + +const UserMembershipHandler = { + getEntityWithoutAuthorizationCheck(entityId, entityConfig, callback) { + if (callback == null) { + callback = function (error, entity) {} + } + const query = buildEntityQuery(entityId, entityConfig) + return EntityModels[entityConfig.modelName].findOne(query, callback) + }, + + createEntity(entityId, entityConfig, callback) { + if (callback == null) { + callback = function (error, entity) {} + } + const data = buildEntityQuery(entityId, entityConfig) + return EntityModels[entityConfig.modelName].create(data, callback) + }, + + getUsers(entity, entityConfig, callback) { + if (callback == null) { + callback = function (error, users) {} + } + const attributes = entityConfig.fields.read + return getPopulatedListOfMembers(entity, attributes, callback) + }, + + addUser(entity, entityConfig, email, callback) { + if (callback == null) { + callback = function (error, user) {} + } + const attribute = entityConfig.fields.write + return UserGetter.getUserByAnyEmail(email, function (error, user) { + if (error != null) { + return callback(error) + } + if (!user) { + return callback({ userNotFound: true }) + } + if (entity[attribute].some(managerId => managerId.equals(user._id))) { + return callback({ alreadyAdded: true }) + } + + return addUserToEntity(entity, attribute, user, error => + callback(error, UserMembershipViewModel.build(user)) + ) + }) + }, + + removeUser(entity, entityConfig, userId, callback) { + if (callback == null) { + callback = function (error) {} + } + const attribute = entityConfig.fields.write + if (entity.admin_id != null ? entity.admin_id.equals(userId) : undefined) { + return callback({ isAdmin: true }) + } + return removeUserFromEntity(entity, attribute, userId, callback) + }, +} + +UserMembershipHandler.promises = promisifyAll(UserMembershipHandler) +module.exports = UserMembershipHandler + +var getPopulatedListOfMembers = function (entity, attributes, callback) { + if (callback == null) { + callback = function (error, users) {} + } + const userObjects = [] + + for (const attribute of Array.from(attributes)) { + for (const userObject of Array.from(entity[attribute] || [])) { + // userObject can be an email as String, a user id as ObjectId or an + // invite as Object with an email attribute as String. We want to pass to + // UserMembershipViewModel either an email as (String) or a user id (ObjectId) + const userIdOrEmail = userObject.email || userObject + userObjects.push(userIdOrEmail) + } + } + + return async.map(userObjects, UserMembershipViewModel.buildAsync, callback) +} + +var addUserToEntity = function (entity, attribute, user, callback) { + if (callback == null) { + callback = function (error) {} + } + const fieldUpdate = {} + fieldUpdate[attribute] = user._id + return entity.updateOne({ $addToSet: fieldUpdate }, callback) +} + +var removeUserFromEntity = function (entity, attribute, userId, callback) { + if (callback == null) { + callback = function (error) {} + } + const fieldUpdate = {} + fieldUpdate[attribute] = userId + return entity.updateOne({ $pull: fieldUpdate }, callback) +} + +var buildEntityQuery = function (entityId, entityConfig, loggedInUser) { + if (ObjectId.isValid(entityId.toString())) { + entityId = ObjectId(entityId) + } + const query = Object.assign({}, entityConfig.baseQuery) + query[entityConfig.fields.primaryKey] = entityId + return query +} diff --git a/services/web/app/src/Features/UserMembership/UserMembershipMiddleware.js b/services/web/app/src/Features/UserMembership/UserMembershipMiddleware.js new file mode 100644 index 0000000000..76f9e8285b --- /dev/null +++ b/services/web/app/src/Features/UserMembership/UserMembershipMiddleware.js @@ -0,0 +1,291 @@ +const { expressify } = require('../../util/promises') +const async = require('async') +const UserMembershipAuthorization = require('./UserMembershipAuthorization') +const AuthenticationController = require('../Authentication/AuthenticationController') +const UserMembershipHandler = require('./UserMembershipHandler') +const EntityConfigs = require('./UserMembershipEntityConfigs') +const Errors = require('../Errors/Errors') +const HttpErrorHandler = require('../Errors/HttpErrorHandler') +const TemplatesManager = require('../Templates/TemplatesManager') + +// set of middleware arrays or functions that checks user access to an entity +// (publisher, institution, group, template, etc.) +const UserMembershipMiddleware = { + requireTeamMetricsAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('team'), + fetchEntity(), + requireEntity(), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('groupMetrics'), + ]), + ], + + requireGroupManagementAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('group'), + fetchEntity(), + requireEntity(), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('groupManagement'), + ]), + ], + + requireGroupMetricsAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('group'), + fetchEntity(), + requireEntity(), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('groupMetrics'), + ]), + ], + + requireGroupManagersManagementAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('groupManagers'), + fetchEntity(), + requireEntity(), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('groupManagement'), + ]), + ], + + requireInstitutionMetricsAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('institution'), + fetchEntity(), + requireEntityOrCreate('institutionManagement'), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('institutionMetrics'), + ]), + ], + + requireInstitutionManagementAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('institution'), + fetchEntity(), + requireEntityOrCreate('institutionManagement'), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('institutionManagement'), + ]), + ], + + requireInstitutionManagementStaffAccess: [ + AuthenticationController.requireLogin(), + allowAccessIfAny([ + UserMembershipAuthorization.hasStaffAccess('institutionManagement'), + ]), + fetchEntityConfig('institution'), + fetchEntity(), + requireEntityOrCreate('institutionManagement'), + ], + + requirePublisherMetricsAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('publisher'), + fetchEntity(), + requireEntityOrCreate('publisherManagement'), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('publisherMetrics'), + ]), + ], + + requirePublisherManagementAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('publisher'), + fetchEntity(), + requireEntityOrCreate('publisherManagement'), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('publisherManagement'), + ]), + ], + + requireConversionMetricsAccess: [ + AuthenticationController.requireLogin(), + fetchEntityConfig('publisher'), + fetchEntity(), + requireEntityOrCreate('publisherManagement'), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('publisherMetrics'), + ]), + ], + + requireAdminMetricsAccess: [ + AuthenticationController.requireLogin(), + allowAccessIfAny([ + UserMembershipAuthorization.hasStaffAccess('adminMetrics'), + ]), + ], + + requireTemplateMetricsAccess: [ + AuthenticationController.requireLogin(), + fetchV1Template(), + requireV1Template(), + fetchEntityConfig('publisher'), + fetchPublisherFromTemplate(), + allowAccessIfAny([ + UserMembershipAuthorization.hasEntityAccess(), + UserMembershipAuthorization.hasStaffAccess('publisherMetrics'), + ]), + ], + + requirePublisherCreationAccess: [ + AuthenticationController.requireLogin(), + allowAccessIfAny([ + UserMembershipAuthorization.hasStaffAccess('publisherManagement'), + ]), + fetchEntityConfig('publisher'), + ], + + requireInstitutionCreationAccess: [ + AuthenticationController.requireLogin(), + allowAccessIfAny([ + UserMembershipAuthorization.hasStaffAccess('institutionManagement'), + ]), + fetchEntityConfig('institution'), + ], + + // graphs access is an edge-case: + // - the entity id is in `req.query.resource_id`. It must be set as + // `req.params.id` + // - the entity name is in `req.query.resource_type` and is used to find the + // require middleware depending on the entity name + requireGraphAccess(req, res, next) { + req.params.id = req.query.resource_id + let entityName = req.query.resource_type + if (!entityName) { + return HttpErrorHandler.notFound(req, res, 'resource_type param missing') + } + entityName = entityName.charAt(0).toUpperCase() + entityName.slice(1) + + const middleware = + UserMembershipMiddleware[`require${entityName}MetricsAccess`] + if (!middleware) { + return HttpErrorHandler.notFound( + req, + res, + `incorrect entity name: ${entityName}` + ) + } + // run the list of middleware functions in series. This is essencially + // a poor man's middleware runner + async.eachSeries(middleware, (fn, callback) => fn(req, res, callback), next) + }, +} + +module.exports = UserMembershipMiddleware + +// fetch entity config and set it in the request +function fetchEntityConfig(entityName) { + return (req, res, next) => { + const entityConfig = EntityConfigs[entityName] + req.entityName = entityName + req.entityConfig = entityConfig + next() + } +} + +// fetch the entity with id and config, and set it in the request +function fetchEntity() { + return expressify(async (req, res, next) => { + const entity = await UserMembershipHandler.promises.getEntityWithoutAuthorizationCheck( + req.params.id, + req.entityConfig + ) + req.entity = entity + next() + }) +} + +function fetchPublisherFromTemplate() { + return (req, res, next) => { + if (req.template.brand.slug) { + // set the id as the publisher's id as it's the entity used for access + // control + req.params.id = req.template.brand.slug + return fetchEntity()(req, res, next) + } else { + return next() + } + } +} + +// ensure an entity was found, or fail with 404 +function requireEntity() { + return (req, res, next) => { + if (req.entity) { + return next() + } + + throw new Errors.NotFoundError( + `no '${req.entityName}' entity with '${req.params.id}'` + ) + } +} + +// ensure an entity was found or redirect to entity creation page if the user +// has permissions to create the entity, or fail with 404 +function requireEntityOrCreate(creationStaffAccess) { + return (req, res, next) => { + if (req.entity) { + return next() + } + + if (UserMembershipAuthorization.hasStaffAccess(creationStaffAccess)(req)) { + res.redirect(`/entities/${req.entityName}/create/${req.params.id}`) + return + } + + throw new Errors.NotFoundError( + `no '${req.entityName}' entity with '${req.params.id}'` + ) + } +} + +// fetch the template from v1, and set it in the request +function fetchV1Template() { + return expressify(async (req, res, next) => { + const templateId = req.params.id + const body = await TemplatesManager.promises.fetchFromV1(templateId) + req.template = { + id: body.id, + title: body.title, + brand: body.brand, + } + next() + }) +} + +// ensure a template was found, or fail with 404 +function requireV1Template() { + return (req, res, next) => { + if (req.template.id) { + return next() + } + + throw new Errors.NotFoundError('no template found') + } +} + +// run a serie of synchronous access functions and call `next` if any of the +// retur values is truly. Redirect to restricted otherwise +function allowAccessIfAny(accessFunctions) { + return (req, res, next) => { + for (const accessFunction of accessFunctions) { + if (accessFunction(req)) { + return next() + } + } + HttpErrorHandler.forbidden(req, res) + } +} diff --git a/services/web/app/src/Features/UserMembership/UserMembershipRouter.js b/services/web/app/src/Features/UserMembership/UserMembershipRouter.js new file mode 100644 index 0000000000..f5492fe0ee --- /dev/null +++ b/services/web/app/src/Features/UserMembership/UserMembershipRouter.js @@ -0,0 +1,128 @@ +// TODO: This file was created by bulk-decaffeinate. +// Sanity-check the conversion and remove this comment. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +const UserMembershipMiddleware = require('./UserMembershipMiddleware') +const UserMembershipController = require('./UserMembershipController') +const SubscriptionGroupController = require('../Subscription/SubscriptionGroupController') +const TeamInvitesController = require('../Subscription/TeamInvitesController') +const RateLimiterMiddleware = require('../Security/RateLimiterMiddleware') + +module.exports = { + apply(webRouter) { + // group members routes + webRouter.get( + '/manage/groups/:id/members', + UserMembershipMiddleware.requireGroupManagementAccess, + UserMembershipController.index + ) + webRouter.post( + '/manage/groups/:id/invites', + UserMembershipMiddleware.requireGroupManagementAccess, + RateLimiterMiddleware.rateLimit({ + endpointName: 'create-team-invite', + maxRequests: 200, + timeInterval: 60, + }), + TeamInvitesController.createInvite + ) + webRouter.delete( + '/manage/groups/:id/user/:user_id', + UserMembershipMiddleware.requireGroupManagementAccess, + SubscriptionGroupController.removeUserFromGroup + ) + webRouter.delete( + '/manage/groups/:id/invites/:email', + UserMembershipMiddleware.requireGroupManagementAccess, + TeamInvitesController.revokeInvite + ) + webRouter.get( + '/manage/groups/:id/members/export', + UserMembershipMiddleware.requireGroupManagementAccess, + RateLimiterMiddleware.rateLimit({ + endpointName: 'export-team-csv', + maxRequests: 30, + timeInterval: 60, + }), + UserMembershipController.exportCsv + ) + + // group managers routes + webRouter.get( + '/manage/groups/:id/managers', + UserMembershipMiddleware.requireGroupManagersManagementAccess, + UserMembershipController.index + ) + webRouter.post( + '/manage/groups/:id/managers', + UserMembershipMiddleware.requireGroupManagersManagementAccess, + UserMembershipController.add + ) + webRouter.delete( + '/manage/groups/:id/managers/:userId', + UserMembershipMiddleware.requireGroupManagersManagementAccess, + UserMembershipController.remove + ) + + // institution members routes + webRouter.get( + '/manage/institutions/:id/managers', + UserMembershipMiddleware.requireInstitutionManagementAccess, + UserMembershipController.index + ) + webRouter.post( + '/manage/institutions/:id/managers', + UserMembershipMiddleware.requireInstitutionManagementAccess, + UserMembershipController.add + ) + webRouter.delete( + '/manage/institutions/:id/managers/:userId', + UserMembershipMiddleware.requireInstitutionManagementAccess, + UserMembershipController.remove + ) + + // publisher members routes + webRouter.get( + '/manage/publishers/:id/managers', + UserMembershipMiddleware.requirePublisherManagementAccess, + UserMembershipController.index + ) + webRouter.post( + '/manage/publishers/:id/managers', + UserMembershipMiddleware.requirePublisherManagementAccess, + UserMembershipController.add + ) + webRouter.delete( + '/manage/publishers/:id/managers/:userId', + UserMembershipMiddleware.requirePublisherManagementAccess, + UserMembershipController.remove + ) + + // publisher creation routes + webRouter.get( + '/entities/publisher/create/:id', + UserMembershipMiddleware.requirePublisherCreationAccess, + UserMembershipController.new + ) + webRouter.post( + '/entities/publisher/create/:id', + UserMembershipMiddleware.requirePublisherCreationAccess, + UserMembershipController.create + ) + + // institution creation routes + webRouter.get( + '/entities/institution/create/:id', + UserMembershipMiddleware.requireInstitutionCreationAccess, + UserMembershipController.new + ) + webRouter.post( + '/entities/institution/create/:id', + UserMembershipMiddleware.requireInstitutionCreationAccess, + UserMembershipController.create + ) + }, +} diff --git a/services/web/app/src/Features/UserMembership/UserMembershipViewModel.js b/services/web/app/src/Features/UserMembership/UserMembershipViewModel.js new file mode 100644 index 0000000000..1af1637777 --- /dev/null +++ b/services/web/app/src/Features/UserMembership/UserMembershipViewModel.js @@ -0,0 +1,67 @@ +/* eslint-disable + node/handle-callback-err, + max-len, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +let UserMembershipViewModel +const UserGetter = require('../User/UserGetter') +const { isObjectIdInstance } = require('../Helpers/Mongo') + +module.exports = UserMembershipViewModel = { + build(userOrEmail) { + if (userOrEmail._id) { + return buildUserViewModel(userOrEmail) + } else { + return buildUserViewModelWithEmail(userOrEmail) + } + }, + + buildAsync(userOrIdOrEmail, callback) { + if (callback == null) { + callback = function (error, viewModel) {} + } + if (!isObjectIdInstance(userOrIdOrEmail)) { + // userOrIdOrEmail is a user or an email and can be parsed by #build + return callback(null, UserMembershipViewModel.build(userOrIdOrEmail)) + } + + const userId = userOrIdOrEmail + const projection = { + email: 1, + first_name: 1, + last_name: 1, + lastLoggedIn: 1, + } + return UserGetter.getUser(userId, projection, function (error, user) { + if (error != null || user == null) { + return callback(null, buildUserViewModelWithId(userId.toString())) + } + return callback(null, buildUserViewModel(user)) + }) + }, +} + +var buildUserViewModel = function (user, isInvite) { + if (isInvite == null) { + isInvite = false + } + return { + _id: user._id || null, + email: user.email || null, + first_name: user.first_name || null, + last_name: user.last_name || null, + last_logged_in_at: user.lastLoggedIn || null, + invite: isInvite, + } +} + +var buildUserViewModelWithEmail = email => buildUserViewModel({ email }, true) + +var buildUserViewModelWithId = id => buildUserViewModel({ _id: id }, false) diff --git a/services/web/app/src/Features/UserMembership/UserMembershipsHandler.js b/services/web/app/src/Features/UserMembership/UserMembershipsHandler.js new file mode 100644 index 0000000000..004d8acdac --- /dev/null +++ b/services/web/app/src/Features/UserMembership/UserMembershipsHandler.js @@ -0,0 +1,88 @@ +/* eslint-disable + node/handle-callback-err, + max-len, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +const async = require('async') +const { promisifyAll } = require('../../util/promises') +const EntityModels = { + Institution: require('../../models/Institution').Institution, + Subscription: require('../../models/Subscription').Subscription, + Publisher: require('../../models/Publisher').Publisher, +} +const UserMembershipEntityConfigs = require('./UserMembershipEntityConfigs') + +const UserMembershipsHandler = { + removeUserFromAllEntities(userId, callback) { + // get all writable entity types + if (callback == null) { + callback = function (error) {} + } + const entityConfigs = [] + for (const key in UserMembershipEntityConfigs) { + const entityConfig = UserMembershipEntityConfigs[key] + if (entityConfig.fields && entityConfig.fields.write != null) { + entityConfigs.push(entityConfig) + } + } + + // remove the user from all entities types + return async.map( + entityConfigs, + (entityConfig, innerCallback) => + UserMembershipsHandler.removeUserFromEntities( + entityConfig, + userId, + innerCallback + ), + callback + ) + }, + + removeUserFromEntities(entityConfig, userId, callback) { + if (callback == null) { + callback = function (error) {} + } + const removeOperation = { $pull: {} } + removeOperation.$pull[entityConfig.fields.write] = userId + return EntityModels[entityConfig.modelName].updateMany( + {}, + removeOperation, + callback + ) + }, + + getEntitiesByUser(entityConfig, userId, callback) { + if (callback == null) { + callback = function (error, entities) {} + } + const query = Object.assign({}, entityConfig.baseQuery) + query[entityConfig.fields.access] = userId + return EntityModels[entityConfig.modelName].find( + query, + function (error, entities) { + if (entities == null) { + entities = [] + } + if (error != null) { + return callback(error) + } + return async.mapSeries( + entities, + (entity, cb) => entity.fetchV1Data(cb), + callback + ) + } + ) + }, +} + +UserMembershipsHandler.promises = promisifyAll(UserMembershipsHandler) +module.exports = UserMembershipsHandler diff --git a/services/web/app/src/Features/V1/V1Api.js b/services/web/app/src/Features/V1/V1Api.js new file mode 100644 index 0000000000..df86d22f3d --- /dev/null +++ b/services/web/app/src/Features/V1/V1Api.js @@ -0,0 +1,109 @@ +/* eslint-disable + max-len, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS101: Remove unnecessary use of Array.from + * DS102: Remove unnecessary code created because of implicit returns + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +const request = require('request') +const settings = require('@overleaf/settings') +const Errors = require('../Errors/Errors') +const { promisifyAll } = require('../../util/promises') + +// TODO: check what happens when these settings aren't defined +const DEFAULT_V1_PARAMS = { + baseUrl: settings.apis.v1.url, + auth: { + user: settings.apis.v1.user, + pass: settings.apis.v1.pass, + }, + json: true, + timeout: 30 * 1000, +} + +const v1Request = request.defaults(DEFAULT_V1_PARAMS) + +const DEFAULT_V1_OAUTH_PARAMS = { + baseUrl: settings.apis.v1.url, + json: true, + timeout: 30 * 1000, +} + +const v1OauthRequest = request.defaults(DEFAULT_V1_OAUTH_PARAMS) + +const V1Api = { + request(options, callback) { + if (callback == null) { + return request(options) + } + return v1Request(options, (error, response, body) => + V1Api._responseHandler(options, error, response, body, callback) + ) + }, + + oauthRequest(options, token, callback) { + if (options.uri == null) { + return callback(new Error('uri required')) + } + if (options.method == null) { + options.method = 'GET' + } + options.auth = { bearer: token } + return v1OauthRequest(options, (error, response, body) => + V1Api._responseHandler(options, error, response, body, callback) + ) + }, + + _responseHandler(options, error, response, body, callback) { + if (error != null) { + return callback( + new Errors.V1ConnectionError('error from V1 API').withCause(error) + ) + } + if (response && response.statusCode >= 500) { + return callback( + new Errors.V1ConnectionError({ + message: 'error from V1 API', + info: { status: response.statusCode, body: body }, + }) + ) + } + if ( + (response.statusCode >= 200 && response.statusCode < 300) || + Array.from(options.expectedStatusCodes || []).includes( + response.statusCode + ) + ) { + return callback(null, response, body) + } else if (response.statusCode === 403) { + error = new Errors.ForbiddenError('overleaf v1 returned forbidden') + error.statusCode = response.statusCode + return callback(error) + } else if (response.statusCode === 404) { + error = new Errors.NotFoundError( + `overleaf v1 returned non-success code: ${response.statusCode} ${options.method} ${options.uri}` + ) + error.statusCode = response.statusCode + return callback(error) + } else { + error = new Error( + `overleaf v1 returned non-success code: ${response.statusCode} ${options.method} ${options.uri}` + ) + error.statusCode = response.statusCode + return callback(error) + } + }, +} + +V1Api.promises = promisifyAll(V1Api, { + multiResult: { + request: ['response', 'body'], + oauthRequest: ['response', 'body'], + }, +}) +module.exports = V1Api diff --git a/services/web/app/src/Features/V1/V1Handler.js b/services/web/app/src/Features/V1/V1Handler.js new file mode 100644 index 0000000000..e5e33f51dd --- /dev/null +++ b/services/web/app/src/Features/V1/V1Handler.js @@ -0,0 +1,109 @@ +/* eslint-disable + camelcase, + node/handle-callback-err, + max-len, + no-unused-vars, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * DS103: Rewrite code to no longer use __guard__ + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +let V1Handler +const OError = require('@overleaf/o-error') +const V1Api = require('./V1Api') +const Settings = require('@overleaf/settings') +const logger = require('logger-sharelatex') + +module.exports = V1Handler = { + authWithV1(email, password, callback) { + if (callback == null) { + callback = function (err, isValid, v1Profile) {} + } + return V1Api.request( + { + method: 'POST', + url: '/api/v1/sharelatex/login', + json: { email, password }, + expectedStatusCodes: [403], + }, + function (err, response, body) { + if (err != null) { + OError.tag(err, '[V1Handler] error while talking to v1 login api', { + email, + }) + return callback(err) + } + if ([200, 403].includes(response.statusCode)) { + const isValid = body.valid + const userProfile = body.user_profile + logger.log( + { + email, + isValid, + v1UserId: __guard__( + body != null ? body.user_profile : undefined, + x => x.id + ), + }, + '[V1Handler] got response from v1 login api' + ) + return callback(null, isValid, userProfile) + } else { + err = new Error( + `Unexpected status from v1 login api: ${response.statusCode}` + ) + return callback(err) + } + } + ) + }, + + doPasswordReset(v1_user_id, password, callback) { + if (callback == null) { + callback = function (err, created) {} + } + + return V1Api.request( + { + method: 'POST', + url: '/api/v1/sharelatex/reset_password', + json: { + user_id: v1_user_id, + password, + }, + expectedStatusCodes: [200], + }, + function (err, response, body) { + if (err != null) { + OError.tag(err, 'error while talking to v1 password reset api', { + v1_user_id, + }) + return callback(err, false) + } + if ([200].includes(response.statusCode)) { + logger.log( + { v1_user_id, changed: true }, + 'got success response from v1 password reset api' + ) + return callback(null, true) + } else { + err = new Error( + `Unexpected status from v1 password reset api: ${response.statusCode}` + ) + return callback(err, false) + } + } + ) + }, +} + +function __guard__(value, transform) { + return typeof value !== 'undefined' && value !== null + ? transform(value) + : undefined +} diff --git a/services/web/app/src/infrastructure/BodyParserWrapper.js b/services/web/app/src/infrastructure/BodyParserWrapper.js new file mode 100644 index 0000000000..def1148ceb --- /dev/null +++ b/services/web/app/src/infrastructure/BodyParserWrapper.js @@ -0,0 +1,35 @@ +const bodyParser = require('body-parser') +const HttpErrorHandler = require('../Features/Errors/HttpErrorHandler') + +function isBodyParserError(nextArg) { + if (nextArg instanceof Error) { + return ( + nextArg.statusCode && + nextArg.statusCode >= 400 && + nextArg.statusCode < 600 + ) + } + return false +} + +const wrapBodyParser = method => opts => { + const middleware = bodyParser[method](opts) + return (req, res, next) => { + middleware(req, res, nextArg => { + if (isBodyParserError(nextArg)) { + return HttpErrorHandler.handleErrorByStatusCode( + req, + res, + nextArg, + nextArg.statusCode + ) + } + next(nextArg) + }) + } +} + +module.exports = { + urlencoded: wrapBodyParser('urlencoded'), + json: wrapBodyParser('json'), +} diff --git a/services/web/app/src/infrastructure/CSP.js b/services/web/app/src/infrastructure/CSP.js new file mode 100644 index 0000000000..284a782f90 --- /dev/null +++ b/services/web/app/src/infrastructure/CSP.js @@ -0,0 +1,66 @@ +const crypto = require('crypto') +const path = require('path') + +module.exports = function ({ + reportUri, + reportPercentage, + reportOnly = false, + exclude = [], + percentage, +}) { + return function (req, res, next) { + const originalRender = res.render + + res.render = (...args) => { + const view = relativeViewPath(args[0]) + + // enable the CSP header for a percentage of requests + const belowCutoff = Math.random() * 100 <= percentage + + if (belowCutoff && !exclude.includes(view)) { + res.locals.cspEnabled = true + + const scriptNonce = crypto.randomBytes(16).toString('base64') + + res.locals.scriptNonce = scriptNonce + + const directives = [ + `script-src 'nonce-${scriptNonce}' 'unsafe-inline' 'strict-dynamic' https: 'report-sample'`, + `object-src 'none'`, + `base-uri 'none'`, + ] + + // enable the report URI for a percentage of CSP-enabled requests + const belowReportCutoff = Math.random() * 100 <= reportPercentage + + if (reportUri && belowReportCutoff) { + directives.push(`report-uri ${reportUri}`) + // NOTE: implement report-to once it's more widely supported + } + + const policy = directives.join('; ') + + // Note: https://csp-evaluator.withgoogle.com/ is useful for checking the policy + + const header = reportOnly + ? 'Content-Security-Policy-Report-Only' + : 'Content-Security-Policy' + + res.set(header, policy) + } + + originalRender.apply(res, args) + } + + next() + } +} + +const webRoot = path.resolve(__dirname, '..', '..', '..') + +// build the view path relative to the web root +function relativeViewPath(view) { + return path.isAbsolute(view) + ? path.relative(webRoot, view) + : path.join('app', 'views', view) +} diff --git a/services/web/app/src/infrastructure/Csrf.js b/services/web/app/src/infrastructure/Csrf.js new file mode 100644 index 0000000000..8d83a58328 --- /dev/null +++ b/services/web/app/src/infrastructure/Csrf.js @@ -0,0 +1,99 @@ +/* eslint-disable + max-len, + no-return-assign, + no-unused-vars, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ + +const csurf = require('csurf') +const csrf = csurf() +const { promisify } = require('util') + +// Wrapper for `csurf` middleware that provides a list of routes that can be excluded from csrf checks. +// +// Include with `Csrf = require('./Csrf')` +// +// Add the middleware to the router with: +// myRouter.csrf = new Csrf() +// myRouter.use webRouter.csrf.middleware +// When building routes, specify a route to exclude from csrf checks with: +// myRouter.csrf.disableDefaultCsrfProtection "/path" "METHOD" +// +// To validate the csrf token in a request to ensure that it's valid, you can use `validateRequest`, which takes a +// request object and calls a callback with an error if invalid. + +class Csrf { + constructor() { + this.middleware = this.middleware.bind(this) + this.excluded_routes = {} + } + + disableDefaultCsrfProtection(route, method) { + if (!this.excluded_routes[route]) { + this.excluded_routes[route] = {} + } + return (this.excluded_routes[route][method] = 1) + } + + middleware(req, res, next) { + // We want to call the middleware for all routes, even if excluded, because csurf sets up a csrfToken() method on + // the request, to get a new csrf token for any rendered forms. For excluded routes we'll then ignore a 'bad csrf + // token' error from csurf and continue on... + + // check whether the request method is excluded for the specified route + if ( + (this.excluded_routes[req.path] != null + ? this.excluded_routes[req.path][req.method] + : undefined) === 1 + ) { + // ignore the error if it's due to a bad csrf token, and continue + return csrf(req, res, err => { + if (err && err.code !== 'EBADCSRFTOKEN') { + return next(err) + } else { + return next() + } + }) + } else { + return csrf(req, res, next) + } + } + + static validateRequest(req, cb) { + // run a dummy csrf check to see if it returns an error + if (cb == null) { + cb = function (valid) {} + } + return csrf(req, null, err => cb(err)) + } + + static validateToken(token, session, cb) { + if (token == null) { + return cb(new Error('missing token')) + } + // run a dummy csrf check to see if it returns an error + // use this to simulate a csrf check regardless of req method, headers &c. + const req = { + body: { + _csrf: token, + }, + headers: {}, + method: 'POST', + session, + } + return Csrf.validateRequest(req, cb) + } +} + +Csrf.promises = { + validateRequest: promisify(Csrf.validateRequest), +} + +module.exports = Csrf diff --git a/services/web/app/src/infrastructure/ExpressLocals.js b/services/web/app/src/infrastructure/ExpressLocals.js new file mode 100644 index 0000000000..96225241b7 --- /dev/null +++ b/services/web/app/src/infrastructure/ExpressLocals.js @@ -0,0 +1,371 @@ +const logger = require('logger-sharelatex') +const Settings = require('@overleaf/settings') +const querystring = require('querystring') +const _ = require('lodash') +const Url = require('url') +const Path = require('path') +const moment = require('moment') +const pug = require('pug-runtime') + +const IS_DEV_ENV = ['development', 'test'].includes(process.env.NODE_ENV) + +const Features = require('./Features') +const SessionManager = require('../Features/Authentication/SessionManager') +const PackageVersions = require('./PackageVersions') +const Modules = require('./Modules') +const SafeHTMLSubstitute = require('../Features/Helpers/SafeHTMLSubstitution') + +let webpackManifest +if (!IS_DEV_ENV) { + // Only load webpack manifest file in production. In dev, the web and webpack + // containers can't coordinate, so there no guarantee that the manifest file + // exists when the web server boots. We therefore ignore the manifest file in + // dev reload + webpackManifest = require(`../../../public/manifest.json`) +} + +const I18N_HTML_INJECTIONS = new Set() + +module.exports = function (webRouter, privateApiRouter, publicApiRouter) { + webRouter.use(function (req, res, next) { + res.locals.session = req.session + next() + }) + + function addSetContentDisposition(req, res, next) { + res.setContentDisposition = function (type, opts) { + const directives = _.map( + opts, + (v, k) => `${k}="${encodeURIComponent(v)}"` + ) + const contentDispositionValue = `${type}; ${directives.join('; ')}` + res.setHeader('Content-Disposition', contentDispositionValue) + } + next() + } + webRouter.use(addSetContentDisposition) + privateApiRouter.use(addSetContentDisposition) + publicApiRouter.use(addSetContentDisposition) + + webRouter.use(function (req, res, next) { + req.externalAuthenticationSystemUsed = + Features.externalAuthenticationSystemUsed + res.locals.externalAuthenticationSystemUsed = + Features.externalAuthenticationSystemUsed + req.hasFeature = res.locals.hasFeature = Features.hasFeature + next() + }) + + webRouter.use(function (req, res, next) { + let staticFilesBase + + const cdnAvailable = + Settings.cdn && Settings.cdn.web && !!Settings.cdn.web.host + const cdnBlocked = req.query.nocdn === 'true' || req.session.cdnBlocked + const userId = SessionManager.getLoggedInUserId(req.session) + if (cdnBlocked && req.session.cdnBlocked == null) { + logger.log( + { user_id: userId, ip: req != null ? req.ip : undefined }, + 'cdnBlocked for user, not using it and turning it off for future requets' + ) + req.session.cdnBlocked = true + } + const host = req.headers && req.headers.host + const isSmoke = host.slice(0, 5).toLowerCase() === 'smoke' + if (cdnAvailable && !isSmoke && !cdnBlocked) { + staticFilesBase = Settings.cdn.web.host + } else { + staticFilesBase = '' + } + + res.locals.buildBaseAssetPath = function () { + // Return the base asset path (including the CDN url) so that webpack can + // use this to dynamically fetch scripts (e.g. PDFjs worker) + return Url.resolve(staticFilesBase, '/') + } + + res.locals.buildJsPath = function (jsFile) { + let path + if (IS_DEV_ENV) { + // In dev: resolve path within JS asset directory + // We are *not* guaranteed to have a manifest file when the server + // starts up + path = Path.join('/js', jsFile) + } else { + // In production: resolve path from webpack manifest file + // We are guaranteed to have a manifest file since webpack compiles in + // the build + path = `/${webpackManifest[jsFile]}` + } + + return Url.resolve(staticFilesBase, path) + } + + // Temporary hack while jQuery/Angular dependencies are *not* bundled, + // instead copied into output directory + res.locals.buildCopiedJsAssetPath = function (jsFile) { + let path + if (IS_DEV_ENV) { + // In dev: resolve path to root directory + // We are *not* guaranteed to have a manifest file when the server + // starts up + path = Path.join('/', jsFile) + } else { + // In production: resolve path from webpack manifest file + // We are guaranteed to have a manifest file since webpack compiles in + // the build + path = `/${webpackManifest[jsFile]}` + } + + return Url.resolve(staticFilesBase, path) + } + + res.locals.mathJaxPath = `/js/libs/mathjax/MathJax.js?${querystring.stringify( + { + config: 'TeX-AMS_HTML,Safe', + v: require('mathjax/package.json').version, + } + )}` + + res.locals.lib = PackageVersions.lib + + res.locals.moment = moment + + const IEEE_BRAND_ID = 15 + res.locals.isIEEE = brandVariation => + (brandVariation != null ? brandVariation.brand_id : undefined) === + IEEE_BRAND_ID + + res.locals.getCssThemeModifier = function (userSettings, brandVariation) { + // Themes only exist in OL v2 + if (Settings.overleaf != null) { + // The IEEE theme takes precedence over the user personal setting, i.e. a user with + // a theme setting of "light" will still get the IEE theme in IEEE branded projects. + if (res.locals.isIEEE(brandVariation)) { + return 'ieee-' + } else if (userSettings && userSettings.overallTheme != null) { + return userSettings.overallTheme + } + } + } + + res.locals.buildStylesheetPath = function (cssFileName) { + let path + if (IS_DEV_ENV) { + // In dev: resolve path within CSS asset directory + // We are *not* guaranteed to have a manifest file when the server + // starts up + path = Path.join('/stylesheets/', cssFileName) + } else { + // In production: resolve path from webpack manifest file + // We are guaranteed to have a manifest file since webpack compiles in + // the build + path = `/${webpackManifest[cssFileName]}` + } + + return Url.resolve(staticFilesBase, path) + } + + res.locals.buildCssPath = function (themeModifier = '') { + return res.locals.buildStylesheetPath(`${themeModifier}style.css`) + } + + res.locals.buildImgPath = function (imgFile) { + const path = Path.join('/img/', imgFile) + return Url.resolve(staticFilesBase, path) + } + + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.translate = function (key, vars, components) { + vars = vars || {} + + if (Settings.i18n.checkForHTMLInVars) { + Object.entries(vars).forEach(([field, value]) => { + if (pug.escape(value) !== value) { + const violationsKey = key + field + // do not flood the logs, log one sample per pod + key + field + if (!I18N_HTML_INJECTIONS.has(violationsKey)) { + logger.warn( + { key, field, value }, + 'html content in translations context vars' + ) + I18N_HTML_INJECTIONS.add(violationsKey) + } + } + }) + } + + vars.appName = Settings.appName + const locale = req.i18n.translate(key, vars) + if (components) { + return SafeHTMLSubstitute.render(locale, components) + } else { + return locale + } + } + // Don't include the query string parameters, otherwise Google + // treats ?nocdn=true as the canonical version + const parsedOriginalUrl = Url.parse(req.originalUrl) + res.locals.currentUrl = parsedOriginalUrl.pathname + res.locals.currentUrlWithQueryParams = parsedOriginalUrl.path + res.locals.capitalize = function (string) { + if (string.length === 0) { + return '' + } + return string.charAt(0).toUpperCase() + string.slice(1) + } + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.getUserEmail = function () { + const user = SessionManager.getSessionUser(req.session) + const email = (user != null ? user.email : undefined) || '' + return email + } + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.StringHelper = require('../Features/Helpers/StringHelper') + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.buildReferalUrl = function (referalMedium) { + let url = Settings.siteUrl + const currentUser = SessionManager.getSessionUser(req.session) + if ( + currentUser != null && + (currentUser != null ? currentUser.referal_id : undefined) != null + ) { + url += `?r=${currentUser.referal_id}&rm=${referalMedium}&rs=b` // Referal source = bonus + } + return url + } + res.locals.getReferalId = function () { + const currentUser = SessionManager.getSessionUser(req.session) + if ( + currentUser != null && + (currentUser != null ? currentUser.referal_id : undefined) != null + ) { + return currentUser.referal_id + } + } + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.csrfToken = req != null ? req.csrfToken() : undefined + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.gaToken = + Settings.analytics && Settings.analytics.ga && Settings.analytics.ga.token + res.locals.gaOptimizeId = _.get(Settings, ['analytics', 'gaOptimize', 'id']) + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.getReqQueryParam = field => + req.query != null ? req.query[field] : undefined + next() + }) + + webRouter.use(function (req, res, next) { + const currentUser = SessionManager.getSessionUser(req.session) + if (currentUser != null) { + res.locals.user = { + email: currentUser.email, + first_name: currentUser.first_name, + last_name: currentUser.last_name, + } + } + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.getLoggedInUserId = () => + SessionManager.getLoggedInUserId(req.session) + res.locals.getSessionUser = () => SessionManager.getSessionUser(req.session) + next() + }) + + webRouter.use(function (req, res, next) { + // Clone the nav settings so they can be modified for each request + res.locals.nav = {} + for (const key in Settings.nav) { + res.locals.nav[key] = _.clone(Settings.nav[key]) + } + res.locals.templates = Settings.templateLinks + next() + }) + + webRouter.use(function (req, res, next) { + if (Settings.reloadModuleViewsOnEachRequest) { + Modules.loadViewIncludes() + } + res.locals.moduleIncludes = Modules.moduleIncludes + res.locals.moduleIncludesAvailable = Modules.moduleIncludesAvailable + next() + }) + + webRouter.use(function (req, res, next) { + // TODO + if (Settings.overleaf != null) { + res.locals.overallThemes = [ + { + name: 'Default', + val: '', + path: res.locals.buildCssPath(), + }, + { + name: 'Light', + val: 'light-', + path: res.locals.buildCssPath('light-'), + }, + ] + } + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.settings = Settings + next() + }) + + webRouter.use(function (req, res, next) { + res.locals.ExposedSettings = { + isOverleaf: Settings.overleaf != null, + appName: Settings.appName, + hasSamlBeta: req.session.samlBeta, + hasSamlFeature: Features.hasFeature('saml'), + samlInitPath: _.get(Settings, ['saml', 'ukamf', 'initPath']), + hasLinkUrlFeature: Features.hasFeature('link-url'), + hasLinkedProjectFileFeature: Features.hasFeature('linked-project-file'), + hasLinkedProjectOutputFileFeature: Features.hasFeature( + 'linked-project-output-file' + ), + siteUrl: Settings.siteUrl, + emailConfirmationDisabled: Settings.emailConfirmationDisabled, + maxEntitiesPerProject: Settings.maxEntitiesPerProject, + maxUploadSize: Settings.maxUploadSize, + recaptchaSiteKeyV3: + Settings.recaptcha != null ? Settings.recaptcha.siteKeyV3 : undefined, + recaptchaDisabled: + Settings.recaptcha != null ? Settings.recaptcha.disabled : undefined, + textExtensions: Settings.textExtensions, + validRootDocExtensions: Settings.validRootDocExtensions, + sentryAllowedOriginRegex: Settings.sentry.allowedOriginRegex, + sentryDsn: Settings.sentry.publicDSN, + sentryEnvironment: Settings.sentry.environment, + sentryRelease: Settings.sentry.release, + enableSubscriptions: Settings.enableSubscriptions, + } + next() + }) +} diff --git a/services/web/app/src/infrastructure/Features.js b/services/web/app/src/infrastructure/Features.js new file mode 100644 index 0000000000..72c10472fe --- /dev/null +++ b/services/web/app/src/infrastructure/Features.js @@ -0,0 +1,111 @@ +const _ = require('lodash') +const Settings = require('@overleaf/settings') + +const publicRegistrationModuleAvailable = Settings.moduleImportSequence.includes( + 'public-registration' +) + +const supportModuleAvailable = Settings.moduleImportSequence.includes('support') + +const historyV1ModuleAvailable = Settings.moduleImportSequence.includes( + 'history-v1' +) + +const trackChangesModuleAvailable = Settings.moduleImportSequence.includes( + 'track-changes' +) + +/** + * @typedef {Object} Settings + * @property {Object | undefined} apis + * @property {Object | undefined} apis.linkedUrlProxy + * @property {string | undefined} apis.linkedUrlProxy.url + * @property {Object | undefined} apis.references + * @property {string | undefined} apis.references.url + * @property {boolean | undefined} enableGithubSync + * @property {boolean | undefined} enableGitBridge + * @property {boolean | undefined} enableHomepage + * @property {boolean | undefined} enableSaml + * @property {boolean | undefined} ldap + * @property {boolean | undefined} oauth + * @property {Object | undefined} overleaf + * @property {Object | undefined} overleaf.oauth + * @property {boolean | undefined} saml + */ + +const Features = { + /** + * @returns {boolean} + */ + externalAuthenticationSystemUsed() { + return ( + (Boolean(Settings.ldap) && Boolean(Settings.ldap.enable)) || + (Boolean(Settings.saml) && Boolean(Settings.saml.enable)) || + Boolean(_.get(Settings, ['overleaf', 'oauth'])) + ) + }, + + /** + * Whether a feature is enabled in the appliation's configuration + * + * @param {string} feature + * @returns {boolean} + */ + hasFeature(feature) { + switch (feature) { + case 'saas': + return Boolean(Settings.overleaf) + case 'homepage': + return Boolean(Settings.enableHomepage) + case 'registration-page': + return ( + !Features.externalAuthenticationSystemUsed() || + Boolean(Settings.overleaf) + ) + case 'registration': + return publicRegistrationModuleAvailable || Boolean(Settings.overleaf) + case 'github-sync': + return Boolean(Settings.enableGithubSync) + case 'git-bridge': + return Boolean(Settings.enableGitBridge) + case 'custom-togglers': + return Boolean(Settings.overleaf) + case 'oauth': + return Boolean(Settings.oauth) + case 'templates-server-pro': + return !Settings.overleaf + case 'history-v1': + return historyV1ModuleAvailable + case 'affiliations': + case 'analytics': + return Boolean(_.get(Settings, ['apis', 'v1', 'url'])) + case 'overleaf-integration': + return Boolean(Settings.overleaf) + case 'references': + return Boolean(_.get(Settings, ['apis', 'references', 'url'])) + case 'saml': + return Boolean(Settings.enableSaml) + case 'linked-project-file': + return Boolean(Settings.enabledLinkedFileTypes.includes('project_file')) + case 'linked-project-output-file': + return Boolean( + Settings.enabledLinkedFileTypes.includes('project_output_file') + ) + case 'link-url': + return Boolean( + _.get(Settings, ['apis', 'linkedUrlProxy', 'url']) && + Settings.enabledLinkedFileTypes.includes('url') + ) + case 'public-registration': + return publicRegistrationModuleAvailable + case 'support': + return supportModuleAvailable + case 'track-changes': + return trackChangesModuleAvailable + default: + throw new Error(`unknown feature: ${feature}`) + } + }, +} + +module.exports = Features diff --git a/services/web/app/src/infrastructure/FileWriter.js b/services/web/app/src/infrastructure/FileWriter.js new file mode 100644 index 0000000000..55e5faba8f --- /dev/null +++ b/services/web/app/src/infrastructure/FileWriter.js @@ -0,0 +1,198 @@ +/* eslint-disable + node/handle-callback-err, + max-len, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +const fs = require('fs') +const OError = require('@overleaf/o-error') +const logger = require('logger-sharelatex') +const uuid = require('uuid') +const _ = require('underscore') +const Settings = require('@overleaf/settings') +const request = require('request') +const { Transform, pipeline } = require('stream') +const { FileTooLargeError } = require('../Features/Errors/Errors') +const { promisifyAll } = require('../util/promises') + +class SizeLimitedStream extends Transform { + constructor(options) { + options.autoDestroy = true + super(options) + + this.bytes = 0 + this.maxSizeBytes = options.maxSizeBytes + this.drain = false + this.on('error', () => { + this.drain = true + this.resume() + }) + } + + _transform(chunk, encoding, done) { + if (this.drain) { + // mechanism to drain the source stream on error, to avoid leaks + // we consume the rest of the incoming stream and don't push it anywhere + return done() + } + + this.bytes += chunk.length + if (this.maxSizeBytes && this.bytes > this.maxSizeBytes) { + return done( + new FileTooLargeError({ + message: 'stream size limit reached', + info: { size: this.bytes }, + }) + ) + } + this.push(chunk) + done() + } +} + +const FileWriter = { + ensureDumpFolderExists(callback) { + if (callback == null) { + callback = function (error) {} + } + return fs.mkdir(Settings.path.dumpFolder, function (error) { + if (error != null && error.code !== 'EEXIST') { + // Ignore error about already existing + return callback(error) + } + return callback(null) + }) + }, + + writeLinesToDisk(identifier, lines, callback) { + if (callback == null) { + callback = function (error, fsPath) {} + } + return FileWriter.writeContentToDisk(identifier, lines.join('\n'), callback) + }, + + writeContentToDisk(identifier, content, callback) { + if (callback == null) { + callback = function (error, fsPath) {} + } + callback = _.once(callback) + const fsPath = `${Settings.path.dumpFolder}/${identifier}_${uuid.v4()}` + return FileWriter.ensureDumpFolderExists(function (error) { + if (error != null) { + return callback(error) + } + return fs.writeFile(fsPath, content, function (error) { + if (error != null) { + return callback(error) + } + return callback(null, fsPath) + }) + }) + }, + + writeStreamToDisk(identifier, stream, options, callback) { + if (typeof options === 'function') { + callback = options + options = {} + } + if (callback == null) { + callback = function (error, fsPath) {} + } + options = options || {} + + const fsPath = `${Settings.path.dumpFolder}/${identifier}_${uuid.v4()}` + + stream.pause() + + FileWriter.ensureDumpFolderExists(function (error) { + const writeStream = fs.createWriteStream(fsPath) + + if (error != null) { + return callback(error) + } + stream.resume() + + const passThrough = new SizeLimitedStream({ + maxSizeBytes: options.maxSizeBytes, + }) + + // if writing fails, we want to consume the bytes from the source, to avoid leaks + for (const evt of ['error', 'close']) { + writeStream.on(evt, function () { + passThrough.unpipe(writeStream) + passThrough.resume() + }) + } + + pipeline(stream, passThrough, writeStream, function (err) { + if ( + options.maxSizeBytes && + passThrough.bytes >= options.maxSizeBytes && + !(err instanceof FileTooLargeError) + ) { + err = new FileTooLargeError({ + message: 'stream size limit reached', + info: { size: passThrough.bytes }, + }).withCause(err || {}) + } + if (err) { + OError.tag( + err, + '[writeStreamToDisk] something went wrong writing the stream to disk', + { + identifier, + fsPath, + } + ) + return callback(err) + } + + logger.log( + { identifier, fsPath }, + '[writeStreamToDisk] write stream finished' + ) + callback(null, fsPath) + }) + }) + }, + + writeUrlToDisk(identifier, url, options, callback) { + if (typeof options === 'function') { + callback = options + options = {} + } + if (callback == null) { + callback = function (error, fsPath) {} + } + options = options || {} + callback = _.once(callback) + + const stream = request.get(url) + stream.on('error', function (err) { + logger.warn( + { err, identifier, url }, + '[writeUrlToDisk] something went wrong with writing to disk' + ) + callback(err) + }) + stream.on('response', function (response) { + if (response.statusCode >= 200 && response.statusCode < 300) { + FileWriter.writeStreamToDisk(identifier, stream, options, callback) + } else { + const err = new Error(`bad response from url: ${response.statusCode}`) + logger.warn({ err, identifier, url }, `[writeUrlToDisk] ${err.message}`) + return callback(err) + } + }) + }, +} + +module.exports = FileWriter +module.exports.promises = promisifyAll(FileWriter) +module.exports.SizeLimitedStream = SizeLimitedStream diff --git a/services/web/app/src/infrastructure/GeoIpLookup.js b/services/web/app/src/infrastructure/GeoIpLookup.js new file mode 100644 index 0000000000..94bb5a0d66 --- /dev/null +++ b/services/web/app/src/infrastructure/GeoIpLookup.js @@ -0,0 +1,99 @@ +const request = require('request') +const settings = require('@overleaf/settings') +const _ = require('underscore') +const logger = require('logger-sharelatex') +const URL = require('url') +const { promisify, promisifyMultiResult } = require('../util/promises') + +const currencyMappings = { + GB: 'GBP', + US: 'USD', + CH: 'CHF', + NZ: 'NZD', + AU: 'AUD', + DK: 'DKK', + NO: 'NOK', + CA: 'CAD', + SE: 'SEK', +} + +// Countries which would likely prefer Euro's +const EuroCountries = [ + 'AT', + 'BE', + 'BG', + 'HR', + 'CY', + 'CZ', + 'EE', + 'FI', + 'FR', + 'DE', + 'EL', + 'HU', + 'IE', + 'IT', + 'LV', + 'LT', + 'LU', + 'MT', + 'NL', + 'PL', + 'PT', + 'RO', + 'SK', + 'SI', + 'ES', +] + +_.each(EuroCountries, country => (currencyMappings[country] = 'EUR')) + +function getDetails(ip, callback) { + if (!ip) { + return callback(new Error('no ip passed')) + } + ip = ip.trim().split(' ')[0] + const opts = { + url: URL.resolve(settings.apis.geoIpLookup.url, ip), + timeout: 1000, + json: true, + } + logger.log({ ip, opts }, 'getting geo ip details') + request.get(opts, function (err, res, ipDetails) { + if (err) { + logger.warn({ err, ip }, 'error getting ip details') + } + callback(err, ipDetails) + }) +} + +function getCurrencyCode(ip, callback) { + getDetails(ip, function (err, ipDetails) { + if (err || !ipDetails) { + logger.err( + { err, ip }, + 'problem getting currencyCode for ip, defaulting to USD' + ) + return callback(null, 'USD') + } + const countryCode = + ipDetails && ipDetails.country_code + ? ipDetails.country_code.toUpperCase() + : undefined + const currencyCode = currencyMappings[countryCode] || 'USD' + logger.log({ ip, currencyCode, ipDetails }, 'got currencyCode for ip') + callback(err, currencyCode, countryCode) + }) +} + +module.exports = { + getDetails, + getCurrencyCode, + promises: { + getDetails: promisify(getDetails), + getCurrencyCode: promisifyMultiResult(getCurrencyCode, [ + 'currencyCode', + 'countryCode', + ]), + }, +} diff --git a/services/web/app/src/infrastructure/JsonWebToken.js b/services/web/app/src/infrastructure/JsonWebToken.js new file mode 100644 index 0000000000..0a49e97062 --- /dev/null +++ b/services/web/app/src/infrastructure/JsonWebToken.js @@ -0,0 +1,22 @@ +const { callbackify, promisify } = require('util') +const JWT = require('jsonwebtoken') +const Settings = require('@overleaf/settings') + +const jwtSign = promisify(JWT.sign) + +async function sign(payload, options = {}) { + const key = Settings.jwt.key + const algorithm = Settings.jwt.algorithm + if (!key || !algorithm) { + throw new Error('missing JWT configuration') + } + const token = await jwtSign(payload, key, { ...options, algorithm }) + return token +} + +module.exports = { + sign: callbackify(sign), + promises: { + sign, + }, +} diff --git a/services/web/app/src/infrastructure/Keys.js b/services/web/app/src/infrastructure/Keys.js new file mode 100644 index 0000000000..cd177b90bc --- /dev/null +++ b/services/web/app/src/infrastructure/Keys.js @@ -0,0 +1,8 @@ +// TODO: This file was created by bulk-decaffeinate. +// Sanity-check the conversion and remove this comment. +module.exports = { + queue: { + web_to_tpds_http_requests: 'web_to_tpds_http_requests', + tpds_to_web_http_requests: 'tpds_to_web_http_requests', + }, +} diff --git a/services/web/app/src/infrastructure/LockManager.js b/services/web/app/src/infrastructure/LockManager.js new file mode 100644 index 0000000000..4e8adfc98f --- /dev/null +++ b/services/web/app/src/infrastructure/LockManager.js @@ -0,0 +1,204 @@ +const { callbackify, promisify } = require('util') +const metrics = require('@overleaf/metrics') +const RedisWrapper = require('./RedisWrapper') +const rclient = RedisWrapper.client('lock') +const logger = require('logger-sharelatex') +const os = require('os') +const crypto = require('crypto') +const async = require('async') +const settings = require('@overleaf/settings') + +const HOST = os.hostname() +const PID = process.pid +const RND = crypto.randomBytes(4).toString('hex') +let COUNT = 0 + +const LOCK_QUEUES = new Map() // queue lock requests for each name/id so they get the lock on a first-come first-served basis + +logger.log( + { lockManagerSettings: settings.lockManager }, + 'LockManager initialising' +) + +const LockManager = { + // ms between each test of the lock + LOCK_TEST_INTERVAL: settings.lockManager.lockTestInterval || 50, + // back off to ms between each test of the lock + MAX_TEST_INTERVAL: settings.lockManager.maxTestInterval || 1000, + // ms maximum time to spend trying to get the lock + MAX_LOCK_WAIT_TIME: settings.lockManager.maxLockWaitTime || 10000, + // seconds. Time until lock auto expires in redis + REDIS_LOCK_EXPIRY: settings.lockManager.redisLockExpiry || 30, + // ms, if execution takes longer than this then log + SLOW_EXECUTION_THRESHOLD: settings.lockManager.slowExecutionThreshold || 5000, + + // Use a signed lock value as described in + // http://redis.io/topics/distlock#correct-implementation-with-a-single-instance + // to prevent accidental unlocking by multiple processes + randomLock() { + const time = Date.now() + return `locked:host=${HOST}:pid=${PID}:random=${RND}:time=${time}:count=${COUNT++}` + }, + + unlockScript: + 'if redis.call("get", KEYS[1]) == ARGV[1] then return redis.call("del", KEYS[1]) else return 0 end', + + runWithLock(namespace, id, runner, callback) { + // runner must be a function accepting a callback, e.g. runner = (cb) -> + + // This error is defined here so we get a useful stacktrace + const slowExecutionError = new Error('slow execution during lock') + + const timer = new metrics.Timer(`lock.${namespace}`) + const key = `lock:web:${namespace}:${id}` + LockManager._getLock(key, namespace, (error, lockValue) => { + if (error != null) { + return callback(error) + } + + // The lock can expire in redis but the process carry on. This setTimeout call + // is designed to log if this happens. + function countIfExceededLockTimeout() { + metrics.inc(`lock.${namespace}.exceeded_lock_timeout`) + logger.log('exceeded lock timeout', { + namespace, + id, + slowExecutionError, + }) + } + const exceededLockTimeout = setTimeout( + countIfExceededLockTimeout, + LockManager.REDIS_LOCK_EXPIRY * 1000 + ) + + runner((error1, ...values) => + LockManager._releaseLock(key, lockValue, error2 => { + clearTimeout(exceededLockTimeout) + + const timeTaken = new Date() - timer.start + if (timeTaken > LockManager.SLOW_EXECUTION_THRESHOLD) { + logger.log('slow execution during lock', { + namespace, + id, + timeTaken, + slowExecutionError, + }) + } + + timer.done() + error = error1 || error2 + if (error != null) { + return callback(error) + } + callback(null, ...values) + }) + ) + }) + }, + + _tryLock(key, namespace, callback) { + const lockValue = LockManager.randomLock() + rclient.set( + key, + lockValue, + 'EX', + LockManager.REDIS_LOCK_EXPIRY, + 'NX', + (err, gotLock) => { + if (err != null) { + return callback(err) + } + if (gotLock === 'OK') { + metrics.inc(`lock.${namespace}.try.success`) + callback(err, true, lockValue) + } else { + metrics.inc(`lock.${namespace}.try.failed`) + logger.log({ key, redis_response: gotLock }, 'lock is locked') + callback(err, false) + } + } + ) + }, + + // it's sufficient to serialize within a process because that is where the parallel operations occur + _getLock(key, namespace, callback) { + // this is what we need to do for each lock we want to request + const task = next => + LockManager._getLockByPolling(key, namespace, (error, lockValue) => { + // tell the queue to start trying to get the next lock (if any) + next() + // we have got a lock result, so we can continue with our own execution + callback(error, lockValue) + }) + // create a queue for this key if needed + const queueName = `${key}:${namespace}` + let queue = LOCK_QUEUES.get(queueName) + if (queue == null) { + const handler = (fn, cb) => fn(cb) + // set up a new queue for this key + queue = async.queue(handler, 1) + queue.push(task) + // remove the queue object when queue is empty + queue.drain = () => LOCK_QUEUES.delete(queueName) + // store the queue in our global map + LOCK_QUEUES.set(queueName, queue) + } else { + // queue the request to get the lock + queue.push(task) + } + }, + + _getLockByPolling(key, namespace, callback) { + const startTime = Date.now() + const testInterval = LockManager.LOCK_TEST_INTERVAL + let attempts = 0 + function attempt() { + if (Date.now() - startTime > LockManager.MAX_LOCK_WAIT_TIME) { + metrics.inc(`lock.${namespace}.get.failed`) + return callback(new Error('Timeout')) + } + + attempts += 1 + LockManager._tryLock(key, namespace, (error, gotLock, lockValue) => { + if (error != null) { + return callback(error) + } + if (gotLock) { + metrics.gauge(`lock.${namespace}.get.success.tries`, attempts) + callback(null, lockValue) + } else { + setTimeout(attempt, testInterval) + } + }) + } + attempt() + }, + + _releaseLock(key, lockValue, callback) { + rclient.eval(LockManager.unlockScript, 1, key, lockValue, (err, result) => { + if (err != null) { + callback(err) + } else if (result != null && result !== 1) { + // successful unlock should release exactly one key + logger.warn( + { key, lockValue, redis_err: err, redis_result: result }, + 'unlocking error' + ) + metrics.inc('unlock-error') + callback(new Error('tried to release timed out lock')) + } else { + callback(null, result) + } + }) + }, +} + +module.exports = LockManager + +const promisifiedRunWithLock = promisify(LockManager.runWithLock) +LockManager.promises = { + runWithLock(namespace, id, runner) { + const cbRunner = callbackify(runner) + return promisifiedRunWithLock(namespace, id, cbRunner) + }, +} diff --git a/services/web/app/src/infrastructure/LoggerSerializers.js b/services/web/app/src/infrastructure/LoggerSerializers.js new file mode 100644 index 0000000000..09d274aa82 --- /dev/null +++ b/services/web/app/src/infrastructure/LoggerSerializers.js @@ -0,0 +1,57 @@ +// TODO: This file was created by bulk-decaffeinate. +// Sanity-check the conversion and remove this comment. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +module.exports = { + user(user) { + if (user == null) { + return null + } + if (user._id == null) { + user = { _id: user } + } + return { + id: user._id, + email: user.email, + first_name: user.name, + last_name: user.name, + } + }, + + project(project) { + if (project == null) { + return null + } + if (project._id == null) { + project = { _id: project } + } + return { + id: project._id, + name: project.name, + } + }, + + docs(docs) { + if ((docs != null ? docs.map : undefined) == null) { + return + } + return docs.map(doc => ({ + path: doc.path, + id: doc.doc, + })) + }, + + files(files) { + if ((files != null ? files.map : undefined) == null) { + return + } + return files.map(file => ({ + path: file.path, + id: file.file, + })) + }, +} diff --git a/services/web/app/src/infrastructure/Metrics.js b/services/web/app/src/infrastructure/Metrics.js new file mode 100644 index 0000000000..2185c3c6dd --- /dev/null +++ b/services/web/app/src/infrastructure/Metrics.js @@ -0,0 +1,7 @@ +const Metrics = require('@overleaf/metrics') + +exports.analyticsQueue = new Metrics.prom.Counter({ + name: 'analytics_queue', + help: 'Number of events sent to the analytics queue', + labelNames: ['status', 'event_type'], +}) diff --git a/services/web/app/src/infrastructure/Modules.js b/services/web/app/src/infrastructure/Modules.js new file mode 100644 index 0000000000..a010fd39f9 --- /dev/null +++ b/services/web/app/src/infrastructure/Modules.js @@ -0,0 +1,158 @@ +const fs = require('fs') +const Path = require('path') +const pug = require('pug') +const async = require('async') +const { promisify } = require('util') +const Settings = require('@overleaf/settings') + +const MODULE_BASE_PATH = Path.resolve(__dirname + '/../../../modules') + +const _modules = [] +const _hooks = {} +let _viewIncludes = {} + +function loadModules() { + const settingsCheckModule = Path.join( + MODULE_BASE_PATH, + 'settings-check', + 'index.js' + ) + if (fs.existsSync(settingsCheckModule)) { + require(settingsCheckModule) + } + + for (const moduleName of Settings.moduleImportSequence) { + const loadedModule = require(Path.join( + MODULE_BASE_PATH, + moduleName, + 'index.js' + )) + loadedModule.name = moduleName + _modules.push(loadedModule) + } + attachHooks() +} + +function applyRouter(webRouter, privateApiRouter, publicApiRouter) { + for (const module of _modules) { + if (module.router && module.router.apply) { + module.router.apply(webRouter, privateApiRouter, publicApiRouter) + } + } +} + +function applyNonCsrfRouter(webRouter, privateApiRouter, publicApiRouter) { + for (const module of _modules) { + if (module.nonCsrfRouter != null) { + module.nonCsrfRouter.apply(webRouter, privateApiRouter, publicApiRouter) + } + if (module.router && module.router.applyNonCsrfRouter) { + module.router.applyNonCsrfRouter( + webRouter, + privateApiRouter, + publicApiRouter + ) + } + } +} + +function loadViewIncludes(app) { + _viewIncludes = {} + for (const module of _modules) { + const object = module.viewIncludes || {} + for (const view in object) { + const partial = object[view] + if (!_viewIncludes[view]) { + _viewIncludes[view] = [] + } + const filePath = Path.join( + MODULE_BASE_PATH, + module.name, + 'app/views', + partial + '.pug' + ) + _viewIncludes[view].push( + pug.compileFile(filePath, { + doctype: 'html', + compileDebug: Settings.debugPugTemplates, + }) + ) + } + } +} + +function moduleIncludes(view, locals) { + const compiledPartials = _viewIncludes[view] || [] + let html = '' + for (const compiledPartial of compiledPartials) { + html += compiledPartial(locals) + } + return html +} + +function moduleIncludesAvailable(view) { + return (_viewIncludes[view] || []).length > 0 +} + +function linkedFileAgentsIncludes() { + const agents = {} + for (const module of _modules) { + for (const name in module.linkedFileAgents) { + const agentFunction = module.linkedFileAgents[name] + agents[name] = agentFunction() + } + } + return agents +} + +function attachHooks() { + for (var module of _modules) { + if (module.hooks != null) { + for (const hook in module.hooks) { + const method = module.hooks[hook] + attachHook(hook, method) + } + } + } +} + +function attachHook(name, method) { + if (_hooks[name] == null) { + _hooks[name] = [] + } + _hooks[name].push(method) +} + +function fireHook(name, ...rest) { + const adjustedLength = Math.max(rest.length, 1) + const args = rest.slice(0, adjustedLength - 1) + const callback = rest[adjustedLength - 1] + const methods = _hooks[name] || [] + const callMethods = methods.map(method => cb => method(...args, cb)) + async.series(callMethods, function (error, results) { + if (error) { + return callback(error) + } + callback(null, results) + }) +} + +module.exports = { + applyNonCsrfRouter, + applyRouter, + linkedFileAgentsIncludes, + loadViewIncludes, + moduleIncludes, + moduleIncludesAvailable, + hooks: { + attach: attachHook, + fire: fireHook, + }, + promises: { + hooks: { + fire: promisify(fireHook), + }, + }, +} + +loadModules() diff --git a/services/web/app/src/infrastructure/Mongoose.js b/services/web/app/src/infrastructure/Mongoose.js new file mode 100644 index 0000000000..f680abe94c --- /dev/null +++ b/services/web/app/src/infrastructure/Mongoose.js @@ -0,0 +1,61 @@ +const mongoose = require('mongoose') +const Settings = require('@overleaf/settings') +const logger = require('logger-sharelatex') + +if ( + typeof global.beforeEach === 'function' && + process.argv.join(' ').match(/unit/) +) { + throw new Error( + 'It looks like unit tests are running, but you are connecting to Mongo. Missing a stub?' + ) +} + +const connectionPromise = mongoose.connect( + Settings.mongo.url, + Object.assign( + { + // mongoose specific config + config: { autoIndex: false }, + // mongoose defaults to false, native driver defaults to true + useNewUrlParser: true, + // use the equivalent `findOneAndUpdate` methods of the native driver + useFindAndModify: false, + }, + Settings.mongo.options + ) +) + +mongoose.connection.on('connected', () => + logger.log('mongoose default connection open') +) + +mongoose.connection.on('error', err => + logger.err({ err }, 'mongoose error on default connection') +) + +mongoose.connection.on('disconnected', () => + logger.log('mongoose default connection disconnected') +) + +if (process.env.MONGOOSE_DEBUG) { + mongoose.set('debug', (collectionName, method, query, doc) => + logger.debug({ collectionName, method, query, doc }, 'mongoose debug') + ) +} + +mongoose.plugin(schema => { + schema.options.usePushEach = true +}) + +mongoose.Promise = global.Promise + +async function getNativeDb() { + const mongooseInstance = await connectionPromise + return mongooseInstance.connection.db +} + +mongoose.getNativeDb = getNativeDb +mongoose.connectionPromise = connectionPromise + +module.exports = mongoose diff --git a/services/web/app/src/infrastructure/PackageVersions.js b/services/web/app/src/infrastructure/PackageVersions.js new file mode 100644 index 0000000000..3509d0b22d --- /dev/null +++ b/services/web/app/src/infrastructure/PackageVersions.js @@ -0,0 +1,25 @@ +// TODO: This file was created by bulk-decaffeinate. +// Sanity-check the conversion and remove this comment. +/* + * decaffeinate suggestions: + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +const ACE_VERSION = require('ace-builds/version') +const version = { + // Upgrade instructions: https://github.com/overleaf/write_latex/wiki/Upgrading-Ace + ace: ACE_VERSION, + fineuploader: '5.15.4', +} + +module.exports = { + version, + + lib(name) { + if (version[name] != null) { + return `${name}-${version[name]}` + } else { + return `${name}` + } + }, +} diff --git a/services/web/app/src/infrastructure/ProxyManager.js b/services/web/app/src/infrastructure/ProxyManager.js new file mode 100644 index 0000000000..a5afff292b --- /dev/null +++ b/services/web/app/src/infrastructure/ProxyManager.js @@ -0,0 +1,90 @@ +/* eslint-disable + max-len, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * DS205: Consider reworking code to avoid use of IIFEs + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +let ProxyManager +const settings = require('@overleaf/settings') +const logger = require('logger-sharelatex') +const request = require('request') +const URL = require('url') + +module.exports = ProxyManager = { + apply(publicApiRouter) { + return (() => { + const result = [] + for (var proxyUrl in settings.proxyUrls) { + const target = settings.proxyUrls[proxyUrl] + result.push( + (function (target) { + const method = + (target.options != null ? target.options.method : undefined) || + 'get' + return publicApiRouter[method]( + proxyUrl, + ProxyManager.createProxy(target) + ) + })(target) + ) + } + return result + })() + }, + + createProxy(target) { + return function (req, res, next) { + const targetUrl = makeTargetUrl(target, req) + logger.log({ targetUrl, reqUrl: req.url }, 'proxying url') + + const options = { url: targetUrl } + if (req.headers != null ? req.headers.cookie : undefined) { + options.headers = { Cookie: req.headers.cookie } + } + if ((target != null ? target.options : undefined) != null) { + Object.assign(options, target.options) + } + if (['post', 'put'].includes(options.method)) { + options.form = req.body + } + const upstream = request(options) + upstream.on('error', error => + logger.error({ err: error }, 'error in ProxyManager') + ) + + // TODO: better handling of status code + // see https://github.com/overleaf/write_latex/wiki/Streams-and-pipes-in-Node.js + return upstream.pipe(res) + } + }, +} + +// make a URL from a proxy target. +// if the query is specified, set/replace the target's query with the given query +var makeTargetUrl = function (target, req) { + const targetUrl = URL.parse(parseSettingUrl(target, req)) + if (req.query != null && Object.keys(req.query).length > 0) { + targetUrl.query = req.query + targetUrl.search = null // clear `search` as it takes precedence over `query` + } + return targetUrl.format() +} + +var parseSettingUrl = function (target, { params }) { + let path + if (typeof target === 'string') { + return target + } + if (typeof target.path === 'function') { + path = target.path(params) + } else { + ;({ path } = target) + } + return `${target.baseUrl}${path || ''}` +} diff --git a/services/web/app/src/infrastructure/Queues.js b/services/web/app/src/infrastructure/Queues.js new file mode 100644 index 0000000000..d22d0ac61a --- /dev/null +++ b/services/web/app/src/infrastructure/Queues.js @@ -0,0 +1,62 @@ +const Queue = require('bull') +const Settings = require('@overleaf/settings') + +// Bull will keep a fixed number of the most recently completed jobs. This is +// useful to inspect recently completed jobs. The bull prometheus exporter also +// uses the completed job records to report on job duration. +const MAX_COMPLETED_JOBS_RETAINED = 10000 +const MAX_FAILED_JOBS_RETAINED = 50000 + +const queues = {} + +function getAnalyticsEventsQueue() { + if (Settings.analytics.enabled) { + return getOrCreateQueue('analytics-events') + } +} + +function getAnalyticsEditingSessionsQueue() { + if (Settings.analytics.enabled) { + return getOrCreateQueue('analytics-editing-sessions') + } +} + +function getAnalyticsUserPropertiesQueue() { + if (Settings.analytics.enabled) { + return getOrCreateQueue('analytics-user-properties') + } +} + +function getOnboardingEmailsQueue() { + return getOrCreateQueue('emails-onboarding') +} + +function getPostRegistrationAnalyticsQueue() { + return getOrCreateQueue('post-registration-analytics') +} + +function getOrCreateQueue(queueName, defaultJobOptions) { + if (!queues[queueName]) { + queues[queueName] = new Queue(queueName, { + redis: Settings.redis.queues, + defaultJobOptions: { + removeOnComplete: MAX_COMPLETED_JOBS_RETAINED, + removeOnFail: MAX_FAILED_JOBS_RETAINED, + attempts: 11, + backoff: { + type: 'exponential', + delay: 3000, + }, + }, + }) + } + return queues[queueName] +} + +module.exports = { + getAnalyticsEventsQueue, + getAnalyticsEditingSessionsQueue, + getAnalyticsUserPropertiesQueue, + getOnboardingEmailsQueue, + getPostRegistrationAnalyticsQueue, +} diff --git a/services/web/app/src/infrastructure/RandomLogging.js b/services/web/app/src/infrastructure/RandomLogging.js new file mode 100644 index 0000000000..a7967ccd04 --- /dev/null +++ b/services/web/app/src/infrastructure/RandomLogging.js @@ -0,0 +1,21 @@ +/* eslint-disable + max-len, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +let trackOpenSockets +const _ = require('underscore') +const metrics = require('@overleaf/metrics') +;(trackOpenSockets = function () { + metrics.gauge( + 'http.open-sockets', + _.size(require('http').globalAgent.sockets.length), + 0.5 + ) + return setTimeout(trackOpenSockets, 1000) +})() diff --git a/services/web/app/src/infrastructure/RateLimiter.js b/services/web/app/src/infrastructure/RateLimiter.js new file mode 100644 index 0000000000..6691edb820 --- /dev/null +++ b/services/web/app/src/infrastructure/RateLimiter.js @@ -0,0 +1,42 @@ +const settings = require('@overleaf/settings') +const Metrics = require('@overleaf/metrics') +const RedisWrapper = require('./RedisWrapper') +const rclient = RedisWrapper.client('ratelimiter') +const { RedisRateLimiter } = require('rolling-rate-limiter') +const { callbackify } = require('util') + +async function addCount(opts) { + if (settings.disableRateLimits) { + return true + } + const namespace = `RateLimit:${opts.endpointName}:` + const k = `{${opts.subjectName}}` + const limiter = new RedisRateLimiter({ + client: rclient, + namespace, + interval: opts.timeInterval * 1000, + maxInInterval: opts.throttle, + }) + const rateLimited = await limiter.limit(k) + if (rateLimited) { + Metrics.inc('rate-limit-hit', 1, { + path: opts.endpointName, + }) + } + return !rateLimited +} + +async function clearRateLimit(endpointName, subject) { + // same as the key which will be built by RollingRateLimiter (namespace+k) + const keyName = `RateLimit:${endpointName}:{${subject}}` + await rclient.del(keyName) +} + +module.exports = { + addCount: callbackify(addCount), + clearRateLimit: callbackify(clearRateLimit), + promises: { + addCount, + clearRateLimit, + }, +} diff --git a/services/web/app/src/infrastructure/RedirectManager.js b/services/web/app/src/infrastructure/RedirectManager.js new file mode 100644 index 0000000000..6f0d3c3ec2 --- /dev/null +++ b/services/web/app/src/infrastructure/RedirectManager.js @@ -0,0 +1,85 @@ +/* eslint-disable + max-len, + no-unused-vars, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS101: Remove unnecessary use of Array.from + * DS102: Remove unnecessary code created because of implicit returns + * DS205: Consider reworking code to avoid use of IIFEs + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +let RedirectManager +const settings = require('@overleaf/settings') +const logger = require('logger-sharelatex') +const URL = require('url') +const querystring = require('querystring') + +module.exports = RedirectManager = { + apply(webRouter) { + return (() => { + const result = [] + for (var redirectUrl in settings.redirects) { + var target = settings.redirects[redirectUrl] + result.push( + Array.from(target.methods || ['get']).map(method => + webRouter[method]( + redirectUrl, + RedirectManager.createRedirect(target) + ) + ) + ) + } + return result + })() + }, + + createRedirect(target) { + return function (req, res, next) { + let url + if ( + (req.headers != null ? req.headers['x-skip-redirects'] : undefined) != + null + ) { + return next() + } + let code = 302 + if (typeof target === 'string') { + url = target + } else { + if (req.method !== 'GET') { + code = 307 + } + + if (typeof target.url === 'function') { + url = target.url(req.params) + if (!url) { + return next() + } + } else { + ;({ url } = target) + } + + if (target.baseUrl != null) { + url = `${target.baseUrl}${url}` + } + } + return res.redirect(code, url + getQueryString(req)) + } + }, +} + +// Naively get the query params string. Stringifying the req.query object may +// have differences between Express and Rails, so safer to just pass the raw +// string +var getQueryString = function (req) { + const { search } = URL.parse(req.url) + if (search) { + return search + } else { + return '' + } +} diff --git a/services/web/app/src/infrastructure/RedisWrapper.js b/services/web/app/src/infrastructure/RedisWrapper.js new file mode 100644 index 0000000000..9f6df9a5a2 --- /dev/null +++ b/services/web/app/src/infrastructure/RedisWrapper.js @@ -0,0 +1,24 @@ +const Settings = require('@overleaf/settings') +const redis = require('@overleaf/redis-wrapper') + +if ( + typeof global.beforeEach === 'function' && + process.argv.join(' ').match(/unit/) +) { + throw new Error( + 'It looks like unit tests are running, but you are connecting to Redis. Missing a stub?' + ) +} + +// A per-feature interface to Redis, +// looks up the feature in `settings.redis` +// and returns an appropriate client. +// Necessary because we don't want to migrate web over +// to redis-cluster all at once. +module.exports = { + // feature = 'websessions' | 'ratelimiter' | ... + client(feature) { + const redisFeatureSettings = Settings.redis[feature] || Settings.redis.web + return redis.createClient(redisFeatureSettings) + }, +} diff --git a/services/web/app/src/infrastructure/RequestContentTypeDetection.js b/services/web/app/src/infrastructure/RequestContentTypeDetection.js new file mode 100644 index 0000000000..6c8c587de6 --- /dev/null +++ b/services/web/app/src/infrastructure/RequestContentTypeDetection.js @@ -0,0 +1,5 @@ +module.exports = { + acceptsJson(req) { + return req.accepts(['html', 'json']) === 'json' + }, +} diff --git a/services/web/app/src/infrastructure/Server.js b/services/web/app/src/infrastructure/Server.js new file mode 100644 index 0000000000..7e30f77237 --- /dev/null +++ b/services/web/app/src/infrastructure/Server.js @@ -0,0 +1,278 @@ +const Path = require('path') +const express = require('express') +const Settings = require('@overleaf/settings') +const logger = require('logger-sharelatex') +const metrics = require('@overleaf/metrics') +const expressLocals = require('./ExpressLocals') +const Validation = require('./Validation') +const csp = require('./CSP') +const Router = require('../router') +const helmet = require('helmet') +const UserSessionsRedis = require('../Features/User/UserSessionsRedis') +const Csrf = require('./Csrf') + +const sessionsRedisClient = UserSessionsRedis.client() + +const SessionAutostartMiddleware = require('./SessionAutostartMiddleware') +const SessionStoreManager = require('./SessionStoreManager') +const session = require('express-session') +const RedisStore = require('connect-redis')(session) +const bodyParser = require('./BodyParserWrapper') +const methodOverride = require('method-override') +const cookieParser = require('cookie-parser') +const bearerToken = require('express-bearer-token') + +const passport = require('passport') +const LocalStrategy = require('passport-local').Strategy + +const oneDayInMilliseconds = 86400000 +const ReferalConnect = require('../Features/Referal/ReferalConnect') +const RedirectManager = require('./RedirectManager') +const ProxyManager = require('./ProxyManager') +const translations = require('./Translations') +const Modules = require('./Modules') +const Views = require('./Views') + +const ErrorController = require('../Features/Errors/ErrorController') +const HttpErrorHandler = require('../Features/Errors/HttpErrorHandler') +const UserSessionsManager = require('../Features/User/UserSessionsManager') +const AuthenticationController = require('../Features/Authentication/AuthenticationController') +const SessionManager = require('../Features/Authentication/SessionManager') + +const STATIC_CACHE_AGE = Settings.cacheStaticAssets + ? oneDayInMilliseconds * 365 + : 0 + +// Init the session store +const sessionStore = new RedisStore({ client: sessionsRedisClient }) + +const app = express() + +const webRouter = express.Router() +const privateApiRouter = express.Router() +const publicApiRouter = express.Router() + +if (Settings.behindProxy) { + app.set('trust proxy', Settings.trustedProxyIps || true) + /** + * Handle the X-Original-Forwarded-For header. + * + * The nginx ingress sends us the contents of X-Forwarded-For it received in + * X-Original-Forwarded-For. Express expects all proxy IPs to be in a comma + * separated list in X-Forwarded-For. + */ + app.use((req, res, next) => { + if ( + req.headers['x-original-forwarded-for'] && + req.headers['x-forwarded-for'] + ) { + req.headers['x-forwarded-for'] = + req.headers['x-original-forwarded-for'] + + ', ' + + req.headers['x-forwarded-for'] + } + next() + }) +} +if (Settings.exposeHostname) { + const HOSTNAME = require('os').hostname() + app.use((req, res, next) => { + res.setHeader('X-Served-By', HOSTNAME) + next() + }) +} + +webRouter.get( + '/serviceWorker.js', + express.static(Path.join(__dirname, '/../../../public'), { + maxAge: oneDayInMilliseconds, + }) +) +webRouter.use( + express.static(Path.join(__dirname, '/../../../public'), { + maxAge: STATIC_CACHE_AGE, + }) +) +app.set('views', Path.join(__dirname, '/../../views')) +app.set('view engine', 'pug') +Modules.loadViewIncludes(app) + +app.use(bodyParser.urlencoded({ extended: true, limit: '2mb' })) +app.use(bodyParser.json({ limit: Settings.max_json_request_size })) +app.use(methodOverride()) +app.use(bearerToken()) + +app.use(metrics.http.monitor(logger)) +RedirectManager.apply(webRouter) +ProxyManager.apply(publicApiRouter) + +webRouter.use(cookieParser(Settings.security.sessionSecret)) +SessionAutostartMiddleware.applyInitialMiddleware(webRouter) +webRouter.use( + session({ + resave: false, + saveUninitialized: false, + secret: Settings.security.sessionSecret, + proxy: Settings.behindProxy, + cookie: { + domain: Settings.cookieDomain, + maxAge: Settings.cookieSessionLength, // in milliseconds, see https://github.com/expressjs/session#cookiemaxage + secure: Settings.secureCookie, + sameSite: Settings.sameSiteCookie, + }, + store: sessionStore, + key: Settings.cookieName, + rolling: true, + }) +) + +// patch the session store to generate a validation token for every new session +SessionStoreManager.enableValidationToken(sessionStore) +// use middleware to reject all requests with invalid tokens +webRouter.use(SessionStoreManager.validationMiddleware) + +// passport +webRouter.use(passport.initialize()) +webRouter.use(passport.session()) + +passport.use( + new LocalStrategy( + { + passReqToCallback: true, + usernameField: 'email', + passwordField: 'password', + }, + AuthenticationController.doPassportLogin + ) +) +passport.serializeUser(AuthenticationController.serializeUser) +passport.deserializeUser(AuthenticationController.deserializeUser) + +Modules.hooks.fire('passportSetup', passport, function (err) { + if (err != null) { + logger.err({ err }, 'error setting up passport in modules') + } +}) + +Modules.applyNonCsrfRouter(webRouter, privateApiRouter, publicApiRouter) + +webRouter.csrf = new Csrf() +webRouter.use(webRouter.csrf.middleware) +webRouter.use(translations.i18nMiddleware) +webRouter.use(translations.setLangBasedOnDomainMiddleware) + +// Measure expiry from last request, not last login +webRouter.use(function (req, res, next) { + if (!req.session.noSessionCallback) { + req.session.touch() + if (SessionManager.isUserLoggedIn(req.session)) { + UserSessionsManager.touch( + SessionManager.getSessionUser(req.session), + err => { + if (err) { + logger.err({ err }, 'error extending user session') + } + } + ) + } + } + next() +}) + +webRouter.use(ReferalConnect.use) +expressLocals(webRouter, privateApiRouter, publicApiRouter) + +webRouter.use(SessionAutostartMiddleware.invokeCallbackMiddleware) + +webRouter.use(function (req, res, next) { + if (Settings.siteIsOpen) { + next() + } else if ( + SessionManager.getSessionUser(req.session) && + SessionManager.getSessionUser(req.session).isAdmin + ) { + next() + } else { + HttpErrorHandler.maintenance(req, res) + } +}) + +webRouter.use(function (req, res, next) { + if (Settings.editorIsOpen) { + next() + } else if (req.url.indexOf('/admin') === 0) { + next() + } else { + HttpErrorHandler.maintenance(req, res) + } +}) + +webRouter.use(AuthenticationController.validateAdmin) + +// add security headers using Helmet +const noCacheMiddleware = require('nocache')() +webRouter.use(function (req, res, next) { + const isLoggedIn = SessionManager.isUserLoggedIn(req.session) + const isProjectPage = !!req.path.match('^/project/[a-f0-9]{24}$') + if (isLoggedIn || isProjectPage) { + noCacheMiddleware(req, res, next) + } else { + next() + } +}) +webRouter.use( + helmet({ + // note that more headers are added by default + dnsPrefetchControl: false, + referrerPolicy: { policy: 'origin-when-cross-origin' }, + hsts: false, + }) +) + +// add CSP header to HTML-rendering routes, if enabled +if (Settings.csp && Settings.csp.enabled) { + logger.info('adding CSP header to rendered routes', Settings.csp) + webRouter.use(csp(Settings.csp)) +} + +logger.info('creating HTTP server'.yellow) +const server = require('http').createServer(app) + +// provide settings for separate web and api processes +if (Settings.enabledServices.includes('api')) { + logger.info('providing api router') + app.use(privateApiRouter) + app.use(Validation.errorMiddleware) + app.use(ErrorController.handleApiError) +} + +if (Settings.enabledServices.includes('web')) { + logger.info('providing web router') + + if (Settings.precompilePugTemplatesAtBootTime) { + logger.info('precompiling views for web in production environment') + Views.precompileViews(app) + } + if (app.get('env') === 'test') { + logger.info('enabling view cache for acceptance tests') + app.enable('view cache') + } + + app.use(publicApiRouter) // public API goes with web router for public access + app.use(Validation.errorMiddleware) + app.use(ErrorController.handleApiError) + + app.use(webRouter) + app.use(Validation.errorMiddleware) + app.use(ErrorController.handleError) +} + +metrics.injectMetricsRoute(webRouter) +metrics.injectMetricsRoute(privateApiRouter) + +Router.initialize(webRouter, privateApiRouter, publicApiRouter) + +module.exports = { + app, + server, +} diff --git a/services/web/app/src/infrastructure/SessionAutostartMiddleware.js b/services/web/app/src/infrastructure/SessionAutostartMiddleware.js new file mode 100644 index 0000000000..ca883db483 --- /dev/null +++ b/services/web/app/src/infrastructure/SessionAutostartMiddleware.js @@ -0,0 +1,122 @@ +const Settings = require('@overleaf/settings') +const OError = require('@overleaf/o-error') + +const botUserAgents = [ + 'kube-probe', + 'GoogleStackdriverMonitoring', + 'GoogleHC', + 'Googlebot', + 'bingbot', + 'facebookexternal', +].map(agent => { + return agent.toLowerCase() +}) +// SessionAutostartMiddleware provides a mechanism to force certain routes not +// to get an automatic session where they don't have one already. This allows us +// to work around issues where we might overwrite a user's login cookie with one +// that is hidden by a `SameSite` setting. +// +// When registering a route with disableSessionAutostartForRoute, a callback +// should be provided that handles the case that a session is not available. +// This will be called as a standard middleware with (req, res, next) - calling +// next will continue and sett up a session as normal, otherwise the app can +// perform a different operation as usual + +class SessionAutostartMiddleware { + constructor() { + this.middleware = this.middleware.bind(this) + this._cookieName = Settings.cookieName + this._noAutostartCallbacks = new Map() + } + + static applyInitialMiddleware(router) { + const middleware = new SessionAutostartMiddleware() + router.sessionAutostartMiddleware = middleware + router.use(middleware.middleware) + } + + disableSessionAutostartForRoute(route, method, callback) { + if (typeof callback !== 'function') { + throw new Error('callback not provided when disabling session autostart') + } + + if (!this._noAutostartCallbacks[route]) { + this._noAutostartCallbacks[route] = new Map() + } + + this._noAutostartCallbacks[route][method] = callback + } + + applyDefaultPostGatewayForRoute(route) { + this.disableSessionAutostartForRoute( + route, + 'POST', + SessionAutostartMiddleware.genericPostGatewayMiddleware + ) + } + + autostartCallbackForRequest(req) { + return ( + this._noAutostartCallbacks[req.path] && + this._noAutostartCallbacks[req.path][req.method] + ) + } + + reqIsBot(req) { + const agent = (req.headers['user-agent'] || '').toLowerCase() + + const foundMatch = botUserAgents.find(botAgent => { + return agent.includes(botAgent) + }) + + if (foundMatch) { + return true + } else { + return false + } + } + + middleware(req, _res, next) { + if (!req.signedCookies[this._cookieName]) { + const callback = this.autostartCallbackForRequest(req) + if (callback) { + req.session = { + noSessionCallback: callback, + } + } else if (this.reqIsBot(req)) { + req.session = { + noSessionCallback: (_req, _res, next) => { + next() + }, + } + } + } + next() + } + + static invokeCallbackMiddleware(req, res, next) { + if (req.session.noSessionCallback) { + return req.session.noSessionCallback(req, res, next) + } + next() + } + + static genericPostGatewayMiddleware(req, res, next) { + if (req.method !== 'POST') { + return next( + new OError('post gateway invoked for non-POST request', { + path: req.path, + method: req.method, + }) + ) + } + + if (req.body.viaGateway) { + return next() + } + + res.render('general/post-gateway', { form_data: req.body }) + } +} + +module.exports = SessionAutostartMiddleware diff --git a/services/web/app/src/infrastructure/SessionStoreManager.js b/services/web/app/src/infrastructure/SessionStoreManager.js new file mode 100644 index 0000000000..a9ef6bdd21 --- /dev/null +++ b/services/web/app/src/infrastructure/SessionStoreManager.js @@ -0,0 +1,74 @@ +const Metrics = require('@overleaf/metrics') +const logger = require('logger-sharelatex') + +function computeValidationToken(req) { + // this should be a deterministic function of the client-side sessionID, + // prepended with a version number in case we want to change it later + return 'v1:' + req.sessionID.slice(-4) +} + +function checkValidationToken(req) { + if (req.session) { + const sessionToken = req.session.validationToken + if (sessionToken) { + const clientToken = computeValidationToken(req) + // Reject invalid sessions. If you change the method for computing the + // token (above) then you need to either check or ignore previous + // versions of the token. + if (sessionToken === clientToken) { + Metrics.inc('security.session', 1, { status: 'ok' }) + return true + } else { + logger.error( + { + sessionToken: sessionToken, + clientToken: clientToken, + }, + 'session token validation failed' + ) + Metrics.inc('security.session', 1, { status: 'error' }) + return false + } + } else { + Metrics.inc('security.session', 1, { status: 'missing' }) + } + } + return true // fallback to allowing session +} + +module.exports = { + enableValidationToken(sessionStore) { + // generate an identifier from the sessionID for every new session + const originalGenerate = sessionStore.generate + sessionStore.generate = function (req) { + originalGenerate(req) + // add the validation token as a property that cannot be overwritten + Object.defineProperty(req.session, 'validationToken', { + value: computeValidationToken(req), + enumerable: true, + writable: false, + }) + Metrics.inc('security.session', 1, { status: 'new' }) + } + }, + + validationMiddleware(req, res, next) { + if (!req.session.noSessionCallback) { + if (!checkValidationToken(req)) { + // the session must exist for it to fail validation + return req.session.destroy(() => { + return next(new Error('invalid session')) + }) + } + } + next() + }, + + hasValidationToken(req) { + if (req && req.session && req.session.validationToken) { + return true + } else { + return false + } + }, +} diff --git a/services/web/app/src/infrastructure/Translations.js b/services/web/app/src/infrastructure/Translations.js new file mode 100644 index 0000000000..af92ca5f08 --- /dev/null +++ b/services/web/app/src/infrastructure/Translations.js @@ -0,0 +1,99 @@ +const i18n = require('i18next') +const fsBackend = require('i18next-fs-backend') +const middleware = require('i18next-http-middleware') +const path = require('path') +const Settings = require('@overleaf/settings') +const { URL } = require('url') + +const fallbackLanguageCode = Settings.i18n.defaultLng || 'en' +const availableLanguageCodes = [] +const availableHosts = new Map() +const subdomainConfigs = new Map() +Object.values(Settings.i18n.subdomainLang || {}).forEach(function (spec) { + availableLanguageCodes.push(spec.lngCode) + // prebuild a host->lngCode mapping for the usage at runtime in the + // middleware + availableHosts.set(new URL(spec.url).host, spec.lngCode) + + // prebuild a lngCode -> language config mapping; some subdomains should + // not appear in the language picker + if (!spec.hide) { + subdomainConfigs.set(spec.lngCode, spec) + } +}) +if (!availableLanguageCodes.includes(fallbackLanguageCode)) { + // always load the fallback locale + availableLanguageCodes.push(fallbackLanguageCode) +} + +i18n + .use(fsBackend) + .use(middleware.LanguageDetector) + .init({ + backend: { + loadPath: path.join(__dirname, '../../../locales/__lng__.json'), + }, + + // Load translation files synchronously: https://www.i18next.com/overview/configuration-options#initimmediate + initImmediate: false, + + // We use the legacy v1 JSON format, so configure interpolator to use + // underscores instead of curly braces + interpolation: { + prefix: '__', + suffix: '__', + unescapeSuffix: 'HTML', + // Disable escaping of interpolated values for backwards compatibility. + // We escape the value after it's translated in web, so there's no + // security risk + escapeValue: Settings.i18n.escapeHTMLInVars, + // Disable nesting in interpolated values, preventing user input + // injection via another nested value + skipOnVariables: true, + }, + + preload: availableLanguageCodes, + supportedLngs: availableLanguageCodes, + fallbackLng: fallbackLanguageCode, + }) + +// Make custom language detector for Accept-Language header +const headerLangDetector = new middleware.LanguageDetector(i18n.services, { + order: ['header'], +}) + +function setLangBasedOnDomainMiddleware(req, res, next) { + // Determine language from subdomain + const lang = availableHosts.get(req.headers.host) + if (lang) { + req.i18n.changeLanguage(lang) + } + + // expose the language code to pug + res.locals.currentLngCode = req.language + + // If the set language is different from the language detection (based on + // the Accept-Language header), then set flag which will show a banner + // offering to switch to the appropriate library + const detectedLanguageCode = headerLangDetector.detect(req, res) + if (req.language !== detectedLanguageCode) { + res.locals.suggestedLanguageSubdomainConfig = subdomainConfigs.get( + detectedLanguageCode + ) + } + + // Decorate req.i18n with translate function alias for backwards + // compatibility usage in requests + req.i18n.translate = req.i18n.t + next() +} + +// Decorate i18n with translate function alias for backwards compatibility +// in direct usage +i18n.translate = i18n.t + +module.exports = { + i18nMiddleware: middleware.handle(i18n), + setLangBasedOnDomainMiddleware, + i18n, +} diff --git a/services/web/app/src/infrastructure/UnsupportedBrowserMiddleware.js b/services/web/app/src/infrastructure/UnsupportedBrowserMiddleware.js new file mode 100644 index 0000000000..d7cf9db39e --- /dev/null +++ b/services/web/app/src/infrastructure/UnsupportedBrowserMiddleware.js @@ -0,0 +1,45 @@ +const Bowser = require('bowser') +const Settings = require('@overleaf/settings') +const Url = require('url') +const { getSafeRedirectPath } = require('../Features/Helpers/UrlHelper') + +function unsupportedBrowserMiddleware(req, res, next) { + if (!Settings.unsupportedBrowsers) return next() + + const userAgent = req.headers['user-agent'] + + if (!userAgent) return next() + + const parser = Bowser.getParser(userAgent) + + // Allow bots through by only ignoring bots or unrecognised UA strings + const isBot = parser.isPlatform('bot') || !parser.getBrowserName() + if (isBot) return next() + + const isUnsupported = parser.satisfies(Settings.unsupportedBrowsers) + if (isUnsupported) { + return res.redirect( + Url.format({ + pathname: '/unsupported-browser', + query: { fromURL: req.originalUrl }, + }) + ) + } + + next() +} + +function renderUnsupportedBrowserPage(req, res) { + let fromURL + if (typeof req.query.fromURL === 'string') { + try { + fromURL = Settings.siteUrl + getSafeRedirectPath(req.query.fromURL) + } catch (e) {} + } + res.render('general/unsupported-browser', { fromURL }) +} + +module.exports = { + renderUnsupportedBrowserPage, + unsupportedBrowserMiddleware, +} diff --git a/services/web/app/src/infrastructure/Validation.js b/services/web/app/src/infrastructure/Validation.js new file mode 100644 index 0000000000..49f4c6d8a4 --- /dev/null +++ b/services/web/app/src/infrastructure/Validation.js @@ -0,0 +1,32 @@ +const { Joi: CelebrateJoi, celebrate, errors } = require('celebrate') +const { ObjectId } = require('mongodb') + +const objectIdValidator = { + name: 'objectId', + language: { + invalid: 'needs to be a valid ObjectId', + }, + pre(value, state, options) { + if (!ObjectId.isValid(value)) { + return this.createError('objectId.invalid', { value }, state, options) + } + + if (options.convert) { + return new ObjectId(value) + } + + return value + }, +} + +const Joi = CelebrateJoi.extend(objectIdValidator) +const errorMiddleware = errors() + +module.exports = { Joi, validate, errorMiddleware } + +/** + * Validation middleware + */ +function validate(schema) { + return celebrate(schema, { allowUnknown: true }) +} diff --git a/services/web/app/src/infrastructure/Views.js b/services/web/app/src/infrastructure/Views.js new file mode 100644 index 0000000000..e1323a823d --- /dev/null +++ b/services/web/app/src/infrastructure/Views.js @@ -0,0 +1,53 @@ +const logger = require('logger-sharelatex') +const pug = require('pug') +const globby = require('globby') +const Settings = require('@overleaf/settings') +const path = require('path') + +// Generate list of view names from app/views + +const viewList = globby + .sync('app/views/**/*.pug', { + onlyFiles: true, + concurrency: 1, + ignore: '**/_*.pug', + }) + .concat( + globby.sync('modules/*/app/views/**/*.pug', { + onlyFiles: true, + concurrency: 1, + ignore: '**/_*.pug', + }) + ) + .map(x => { + return x.replace(/\.pug$/, '') // strip trailing .pug extension + }) + .filter(x => { + return !/^_/.test(x) + }) + +module.exports = { + precompileViews(app) { + const startTime = Date.now() + let success = 0 + let failures = 0 + viewList.forEach(view => { + const filename = path.resolve(view + '.pug') // express views are cached using the absolute path + try { + pug.compileFile(filename, { + cache: true, + compileDebug: Settings.debugPugTemplates, + }) + logger.log({ filename }, 'compiled') + success++ + } catch (err) { + logger.error({ filename, err: err.message }, 'error compiling') + failures++ + } + }) + logger.log( + { timeTaken: Date.now() - startTime, failures, success }, + 'compiled templates' + ) + }, +} diff --git a/services/web/app/src/infrastructure/mongodb.js b/services/web/app/src/infrastructure/mongodb.js new file mode 100644 index 0000000000..408f174906 --- /dev/null +++ b/services/web/app/src/infrastructure/mongodb.js @@ -0,0 +1,93 @@ +const Settings = require('@overleaf/settings') +const { MongoClient, ObjectId } = require('mongodb') + +if ( + typeof global.beforeEach === 'function' && + process.argv.join(' ').match(/unit/) +) { + throw new Error( + 'It looks like unit tests are running, but you are connecting to Mongo. Missing a stub?' + ) +} + +const clientPromise = MongoClient.connect( + Settings.mongo.url, + Settings.mongo.options +) + +let setupDbPromise +async function waitForDb() { + if (!setupDbPromise) { + setupDbPromise = setupDb() + } + await setupDbPromise +} + +const db = {} +async function setupDb() { + const internalDb = (await clientPromise).db() + + db.contacts = internalDb.collection('contacts') + db.deletedFiles = internalDb.collection('deletedFiles') + db.deletedProjects = internalDb.collection('deletedProjects') + db.deletedSubscriptions = internalDb.collection('deletedSubscriptions') + db.deletedUsers = internalDb.collection('deletedUsers') + db.docHistory = internalDb.collection('docHistory') + db.docHistoryIndex = internalDb.collection('docHistoryIndex') + db.docOps = internalDb.collection('docOps') + db.docSnapshots = internalDb.collection('docSnapshots') + db.docs = internalDb.collection('docs') + db.githubSyncEntityVersions = internalDb.collection( + 'githubSyncEntityVersions' + ) + db.githubSyncProjectStates = internalDb.collection('githubSyncProjectStates') + db.githubSyncUserCredentials = internalDb.collection( + 'githubSyncUserCredentials' + ) + db.institutions = internalDb.collection('institutions') + db.messages = internalDb.collection('messages') + db.migrations = internalDb.collection('migrations') + db.notifications = internalDb.collection('notifications') + db.oauthAccessTokens = internalDb.collection('oauthAccessTokens') + db.oauthApplications = internalDb.collection('oauthApplications') + db.oauthAuthorizationCodes = internalDb.collection('oauthAuthorizationCodes') + db.projectHistoryFailures = internalDb.collection('projectHistoryFailures') + db.projectHistoryLabels = internalDb.collection('projectHistoryLabels') + db.projectHistoryMetaData = internalDb.collection('projectHistoryMetaData') + db.projectHistorySyncState = internalDb.collection('projectHistorySyncState') + db.projectInvites = internalDb.collection('projectInvites') + db.projects = internalDb.collection('projects') + db.publishers = internalDb.collection('publishers') + db.rooms = internalDb.collection('rooms') + db.samlCache = internalDb.collection('samlCache') + db.samlLogs = internalDb.collection('samlLogs') + db.spellingPreferences = internalDb.collection('spellingPreferences') + db.subscriptions = internalDb.collection('subscriptions') + db.systemmessages = internalDb.collection('systemmessages') + db.tags = internalDb.collection('tags') + db.teamInvites = internalDb.collection('teamInvites') + db.templates = internalDb.collection('templates') + db.tokens = internalDb.collection('tokens') + db.users = internalDb.collection('users') + db.userstubs = internalDb.collection('userstubs') +} +async function addCollection(name) { + await waitForDb() + const internalDb = (await clientPromise).db() + + db[name] = internalDb.collection(name) +} +async function getCollectionNames() { + const internalDb = (await clientPromise).db() + + const collections = await internalDb.collections() + return collections.map(collection => collection.collectionName) +} + +module.exports = { + db, + ObjectId, + addCollection, + getCollectionNames, + waitForDb, +} diff --git a/services/web/app/src/models/DeletedFile.js b/services/web/app/src/models/DeletedFile.js new file mode 100644 index 0000000000..b7f56bee05 --- /dev/null +++ b/services/web/app/src/models/DeletedFile.js @@ -0,0 +1,21 @@ +const mongoose = require('../infrastructure/Mongoose') +const { Schema } = mongoose + +const DeletedFileSchema = new Schema( + { + name: String, + projectId: Schema.ObjectId, + created: { + type: Date, + }, + linkedFileData: { type: Schema.Types.Mixed }, + hash: { + type: String, + }, + deletedAt: { type: Date }, + }, + { collection: 'deletedFiles' } +) + +exports.DeletedFile = mongoose.model('DeletedFile', DeletedFileSchema) +exports.DeletedFileSchema = DeletedFileSchema diff --git a/services/web/app/src/models/DeletedProject.js b/services/web/app/src/models/DeletedProject.js new file mode 100644 index 0000000000..8f1070a06b --- /dev/null +++ b/services/web/app/src/models/DeletedProject.js @@ -0,0 +1,33 @@ +const mongoose = require('../infrastructure/Mongoose') +const { ProjectSchema } = require('./Project') + +const { Schema } = mongoose +const { ObjectId } = Schema + +const DeleterDataSchema = new Schema({ + deleterId: { type: ObjectId, ref: 'User' }, + deleterIpAddress: { type: String }, + deletedAt: { type: Date }, + deletedProjectId: { type: ObjectId }, + deletedProjectOwnerId: { type: ObjectId, ref: 'User' }, + deletedProjectCollaboratorIds: [{ type: ObjectId, ref: 'User' }], + deletedProjectReadOnlyIds: [{ type: ObjectId, ref: 'User' }], + deletedProjectReadWriteTokenAccessIds: [{ type: ObjectId, ref: 'User' }], + deletedProjectReadOnlyTokenAccessIds: [{ type: ObjectId, ref: 'User' }], + deletedProjectReadWriteToken: { type: String }, + deletedProjectReadOnlyToken: { type: String }, + deletedProjectLastUpdatedAt: { type: Date }, + deletedProjectOverleafId: { type: Number }, + deletedProjectOverleafHistoryId: { type: Number }, +}) + +const DeletedProjectSchema = new Schema( + { + deleterData: DeleterDataSchema, + project: ProjectSchema, + }, + { collection: 'deletedProjects' } +) + +exports.DeletedProject = mongoose.model('DeletedProject', DeletedProjectSchema) +exports.DeletedProjectSchema = DeletedProjectSchema diff --git a/services/web/app/src/models/DeletedSubscription.js b/services/web/app/src/models/DeletedSubscription.js new file mode 100644 index 0000000000..0aa387255b --- /dev/null +++ b/services/web/app/src/models/DeletedSubscription.js @@ -0,0 +1,34 @@ +const mongoose = require('../infrastructure/Mongoose') +const { SubscriptionSchema } = require('./Subscription') + +const { Schema } = mongoose +const { ObjectId } = Schema + +const DeleterDataSchema = new Schema( + { + deleterId: { type: ObjectId, ref: 'User' }, + deleterIpAddress: { type: String }, + deletedAt: { + type: Date, + default() { + return new Date() + }, + }, + }, + { _id: false } +) + +const DeletedSubscriptionSchema = new Schema( + { + deleterData: DeleterDataSchema, + subscription: SubscriptionSchema, + }, + { collection: 'deletedSubscriptions' } +) + +exports.DeletedSubscription = mongoose.model( + 'DeletedSubscription', + DeletedSubscriptionSchema +) + +exports.DeletedSubscriptionSchema = DeletedSubscriptionSchema diff --git a/services/web/app/src/models/DeletedUser.js b/services/web/app/src/models/DeletedUser.js new file mode 100644 index 0000000000..579862819f --- /dev/null +++ b/services/web/app/src/models/DeletedUser.js @@ -0,0 +1,31 @@ +const mongoose = require('../infrastructure/Mongoose') +const { UserSchema } = require('./User') + +const { Schema } = mongoose +const { ObjectId } = Schema + +const DeleterDataSchema = new Schema({ + deleterId: { type: ObjectId, ref: 'User' }, + deleterIpAddress: { type: String }, + deletedAt: { type: Date }, + deletedUserId: { type: ObjectId }, + deletedUserLastLoggedIn: { type: Date }, + deletedUserSignUpDate: { type: Date }, + deletedUserLoginCount: { type: Number }, + deletedUserReferralId: { type: String }, + deletedUserReferredUsers: [{ type: ObjectId, ref: 'User' }], + deletedUserReferredUserCount: { type: Number }, + deletedUserOverleafId: { type: Number }, +}) + +const DeletedUserSchema = new Schema( + { + deleterData: DeleterDataSchema, + user: UserSchema, + }, + { collection: 'deletedUsers' } +) + +exports.DeletedUser = mongoose.model('DeletedUser', DeletedUserSchema) + +exports.DeletedUserSchema = DeletedUserSchema diff --git a/services/web/app/src/models/Doc.js b/services/web/app/src/models/Doc.js new file mode 100644 index 0000000000..0653d410a8 --- /dev/null +++ b/services/web/app/src/models/Doc.js @@ -0,0 +1,11 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose + +const DocSchema = new Schema({ + name: { type: String, default: 'new doc' }, +}) + +exports.Doc = mongoose.model('Doc', DocSchema) + +exports.DocSchema = DocSchema diff --git a/services/web/app/src/models/DocSnapshot.js b/services/web/app/src/models/DocSnapshot.js new file mode 100644 index 0000000000..0c25a367df --- /dev/null +++ b/services/web/app/src/models/DocSnapshot.js @@ -0,0 +1,18 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose + +const DocSnapshotSchema = new Schema( + { + project_id: Schema.Types.ObjectId, + doc_id: Schema.Types.ObjectId, + version: Number, + lines: [String], + pathname: String, + ranges: Schema.Types.Mixed, + ts: Date, + }, + { collection: 'docSnapshots' } +) + +exports.DocSnapshot = mongoose.model('DocSnapshot', DocSnapshotSchema) diff --git a/services/web/app/src/models/File.js b/services/web/app/src/models/File.js new file mode 100644 index 0000000000..5bc5d523fe --- /dev/null +++ b/services/web/app/src/models/File.js @@ -0,0 +1,24 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose + +const FileSchema = new Schema({ + name: { + type: String, + default: '', + }, + created: { + type: Date, + default() { + return new Date() + }, + }, + rev: { type: Number, default: 0 }, + linkedFileData: { type: Schema.Types.Mixed }, + hash: { + type: String, + }, +}) + +exports.File = mongoose.model('File', FileSchema) +exports.FileSchema = FileSchema diff --git a/services/web/app/src/models/Folder.js b/services/web/app/src/models/Folder.js new file mode 100644 index 0000000000..989f3fde5e --- /dev/null +++ b/services/web/app/src/models/Folder.js @@ -0,0 +1,18 @@ +const mongoose = require('../infrastructure/Mongoose') +const { DocSchema } = require('./Doc') +const { FileSchema } = require('./File') + +const { Schema } = mongoose + +const FolderSchema = new Schema({ + name: { type: String, default: 'new folder' }, +}) + +FolderSchema.add({ + docs: [DocSchema], + fileRefs: [FileSchema], + folders: [FolderSchema], +}) + +exports.Folder = mongoose.model('Folder', FolderSchema) +exports.FolderSchema = FolderSchema diff --git a/services/web/app/src/models/Institution.js b/services/web/app/src/models/Institution.js new file mode 100644 index 0000000000..7b44012405 --- /dev/null +++ b/services/web/app/src/models/Institution.js @@ -0,0 +1,41 @@ +const mongoose = require('../infrastructure/Mongoose') +const { Schema } = mongoose +const { ObjectId } = Schema +const settings = require('@overleaf/settings') +const logger = require('logger-sharelatex') +const request = require('request') + +const InstitutionSchema = new Schema({ + v1Id: { type: Number, required: true }, + managerIds: [{ type: ObjectId, ref: 'User' }], + metricsEmail: { + optedOutUserIds: [{ type: ObjectId, ref: 'User' }], + lastSent: { type: Date }, + }, +}) + +// fetch institution's data from v1 API. Errors are ignored +InstitutionSchema.method('fetchV1Data', function (callback) { + const url = `${settings.apis.v1.url}/universities/list/${this.v1Id}` + request.get(url, (error, response, body) => { + let parsedBody + try { + parsedBody = JSON.parse(body) + } catch (error1) { + // log error and carry on without v1 data + error = error1 + logger.err( + { model: 'Institution', v1Id: this.v1Id, error }, + '[fetchV1DataError]' + ) + } + this.name = parsedBody != null ? parsedBody.name : undefined + this.countryCode = parsedBody != null ? parsedBody.country_code : undefined + this.departments = parsedBody != null ? parsedBody.departments : undefined + this.portalSlug = parsedBody != null ? parsedBody.portal_slug : undefined + callback(null, this) + }) +}) + +exports.Institution = mongoose.model('Institution', InstitutionSchema) +exports.InstitutionSchema = InstitutionSchema diff --git a/services/web/app/src/models/OauthAccessToken.js b/services/web/app/src/models/OauthAccessToken.js new file mode 100644 index 0000000000..6caa4d1c17 --- /dev/null +++ b/services/web/app/src/models/OauthAccessToken.js @@ -0,0 +1,26 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose +const { ObjectId } = Schema + +const OauthAccessTokenSchema = new Schema( + { + accessToken: String, + accessTokenExpiresAt: Date, + oauthApplication_id: { type: ObjectId, ref: 'OauthApplication' }, + refreshToken: String, + refreshTokenExpiresAt: Date, + scope: String, + user_id: { type: ObjectId, ref: 'User' }, + }, + { + collection: 'oauthAccessTokens', + } +) + +exports.OauthAccessToken = mongoose.model( + 'OauthAccessToken', + OauthAccessTokenSchema +) + +exports.OauthAccessTokenSchema = OauthAccessTokenSchema diff --git a/services/web/app/src/models/OauthApplication.js b/services/web/app/src/models/OauthApplication.js new file mode 100644 index 0000000000..cd7e4dccdb --- /dev/null +++ b/services/web/app/src/models/OauthApplication.js @@ -0,0 +1,24 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose + +const OauthApplicationSchema = new Schema( + { + id: String, + clientSecret: String, + grants: [String], + name: String, + redirectUris: [String], + scopes: [String], + }, + { + collection: 'oauthApplications', + } +) + +exports.OauthApplication = mongoose.model( + 'OauthApplication', + OauthApplicationSchema +) + +exports.OauthApplicationSchema = OauthApplicationSchema diff --git a/services/web/app/src/models/OauthAuthorizationCode.js b/services/web/app/src/models/OauthAuthorizationCode.js new file mode 100644 index 0000000000..d67b920f2c --- /dev/null +++ b/services/web/app/src/models/OauthAuthorizationCode.js @@ -0,0 +1,25 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose +const { ObjectId } = Schema + +const OauthAuthorizationCodeSchema = new Schema( + { + authorizationCode: String, + expiresAt: Date, + oauthApplication_id: { type: ObjectId, ref: 'OauthApplication' }, + redirectUri: String, + scope: String, + user_id: { type: ObjectId, ref: 'User' }, + }, + { + collection: 'oauthAuthorizationCodes', + } +) + +exports.OauthAuthorizationCode = mongoose.model( + 'OauthAuthorizationCode', + OauthAuthorizationCodeSchema +) + +exports.OauthAuthorizationCodeSchema = OauthAuthorizationCodeSchema diff --git a/services/web/app/src/models/Project.js b/services/web/app/src/models/Project.js new file mode 100644 index 0000000000..c27801c9f0 --- /dev/null +++ b/services/web/app/src/models/Project.js @@ -0,0 +1,141 @@ +const mongoose = require('../infrastructure/Mongoose') +const _ = require('underscore') +const { FolderSchema } = require('./Folder') +const Errors = require('../Features/Errors/Errors') + +const concreteObjectId = mongoose.Types.ObjectId +const { Schema } = mongoose +const { ObjectId } = Schema + +const DeletedDocSchema = new Schema({ + name: String, + deletedAt: { type: Date }, +}) + +const DeletedFileSchema = new Schema({ + name: String, + created: { + type: Date, + }, + linkedFileData: { type: Schema.Types.Mixed }, + hash: { + type: String, + }, + deletedAt: { type: Date }, +}) + +const AuditLogEntrySchema = new Schema({ + _id: false, + operation: { type: String }, + initiatorId: { type: Schema.Types.ObjectId }, + timestamp: { type: Date }, + info: { type: Object }, +}) + +const ProjectSchema = new Schema({ + name: { type: String, default: 'new project' }, + lastUpdated: { + type: Date, + default() { + return new Date() + }, + }, + lastUpdatedBy: { type: ObjectId, ref: 'User' }, + lastOpened: { type: Date }, + active: { type: Boolean, default: true }, + owner_ref: { type: ObjectId, ref: 'User' }, + collaberator_refs: [{ type: ObjectId, ref: 'User' }], + readOnly_refs: [{ type: ObjectId, ref: 'User' }], + rootDoc_id: { type: ObjectId }, + rootFolder: [FolderSchema], + version: { type: Number }, // incremented for every change in the project structure (folders and filenames) + publicAccesLevel: { type: String, default: 'private' }, + compiler: { type: String, default: 'pdflatex' }, + spellCheckLanguage: { type: String, default: 'en' }, + deletedByExternalDataSource: { type: Boolean, default: false }, + description: { type: String, default: '' }, + archived: { type: Schema.Types.Mixed }, + trashed: [{ type: ObjectId, ref: 'User' }], + deletedDocs: [DeletedDocSchema], + deletedFiles: [DeletedFileSchema], + imageName: { type: String }, + brandVariationId: { type: String }, + track_changes: { type: Object }, + tokens: { + readOnly: { + type: String, + index: { + unique: true, + partialFilterExpression: { 'tokens.readOnly': { $exists: true } }, + }, + }, + readAndWrite: { + type: String, + index: { + unique: true, + partialFilterExpression: { 'tokens.readAndWrite': { $exists: true } }, + }, + }, + readAndWritePrefix: { + type: String, + index: { + unique: true, + partialFilterExpression: { + 'tokens.readAndWritePrefix': { $exists: true }, + }, + }, + }, + }, + tokenAccessReadOnly_refs: [{ type: ObjectId, ref: 'User' }], + tokenAccessReadAndWrite_refs: [{ type: ObjectId, ref: 'User' }], + fromV1TemplateId: { type: Number }, + fromV1TemplateVersionId: { type: Number }, + overleaf: { + id: { type: Number }, + imported_at_ver_id: { type: Number }, + token: { type: String }, + read_token: { type: String }, + history: { + id: { type: Number }, + display: { type: Boolean }, + upgradedAt: { type: Date }, + }, + }, + collabratecUsers: [ + { + user_id: { type: ObjectId, ref: 'User' }, + collabratec_document_id: { type: String }, + collabratec_privategroup_id: { type: String }, + added_at: { + type: Date, + default() { + return new Date() + }, + }, + }, + ], + auditLog: [AuditLogEntrySchema], + deferredTpdsFlushCounter: { type: Number }, +}) + +ProjectSchema.statics.getProject = function (projectOrId, fields, callback) { + if (projectOrId._id != null) { + callback(null, projectOrId) + } else { + try { + concreteObjectId(projectOrId.toString()) + } catch (e) { + return callback(new Errors.NotFoundError(e.message)) + } + this.findById(projectOrId, fields, callback) + } +} + +function applyToAllFilesRecursivly(folder, fun) { + _.each(folder.fileRefs, file => fun(file)) + _.each(folder.folders, folder => applyToAllFilesRecursivly(folder, fun)) +} +ProjectSchema.statics.applyToAllFilesRecursivly = applyToAllFilesRecursivly + +exports.Project = mongoose.model('Project', ProjectSchema) +exports.ProjectSchema = ProjectSchema diff --git a/services/web/app/src/models/ProjectHistoryFailure.js b/services/web/app/src/models/ProjectHistoryFailure.js new file mode 100644 index 0000000000..b28fb07c87 --- /dev/null +++ b/services/web/app/src/models/ProjectHistoryFailure.js @@ -0,0 +1,24 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose + +const ProjectHistoryFailureSchema = new Schema( + { + project_id: Schema.Types.ObjectId, + ts: Date, + queueSize: Number, + error: String, + stack: String, + attempts: Number, + history: Schema.Types.Mixed, + resyncStartedAt: Date, + resyncAttempts: Number, + requestCount: Number, + }, + { collection: 'projectHistoryFailures' } +) + +exports.ProjectHistoryFailure = mongoose.model( + 'ProjectHistoryFailure', + ProjectHistoryFailureSchema +) diff --git a/services/web/app/src/models/ProjectInvite.js b/services/web/app/src/models/ProjectInvite.js new file mode 100644 index 0000000000..3dc792848c --- /dev/null +++ b/services/web/app/src/models/ProjectInvite.js @@ -0,0 +1,35 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose +const { ObjectId } = Schema + +const EXPIRY_IN_SECONDS = 60 * 60 * 24 * 30 + +const ExpiryDate = function () { + const timestamp = new Date() + timestamp.setSeconds(timestamp.getSeconds() + EXPIRY_IN_SECONDS) + return timestamp +} + +const ProjectInviteSchema = new Schema( + { + email: String, + token: String, + sendingUserId: ObjectId, + projectId: ObjectId, + privileges: String, + createdAt: { type: Date, default: Date.now }, + expires: { + type: Date, + default: ExpiryDate, + index: { expireAfterSeconds: 10 }, + }, + }, + { + collection: 'projectInvites', + } +) + +exports.ProjectInvite = mongoose.model('ProjectInvite', ProjectInviteSchema) +exports.ProjectInviteSchema = ProjectInviteSchema +exports.EXPIRY_IN_SECONDS = EXPIRY_IN_SECONDS diff --git a/services/web/app/src/models/Publisher.js b/services/web/app/src/models/Publisher.js new file mode 100644 index 0000000000..b19a0b4cac --- /dev/null +++ b/services/web/app/src/models/Publisher.js @@ -0,0 +1,46 @@ +const mongoose = require('../infrastructure/Mongoose') +const { Schema } = mongoose +const { ObjectId } = Schema +const settings = require('@overleaf/settings') +const logger = require('logger-sharelatex') +const request = require('request') + +const PublisherSchema = new Schema({ + slug: { type: String, required: true }, + managerIds: [{ type: ObjectId, ref: 'User' }], +}) + +// fetch publisher's (brand on v1) data from v1 API. Errors are ignored +PublisherSchema.method('fetchV1Data', function (callback) { + request( + { + baseUrl: settings.apis.v1.url, + url: `/api/v2/brands/${this.slug}`, + method: 'GET', + auth: { + user: settings.apis.v1.user, + pass: settings.apis.v1.pass, + sendImmediately: true, + }, + }, + (error, response, body) => { + let parsedBody + try { + parsedBody = JSON.parse(body) + } catch (error1) { + // log error and carry on without v1 data + error = error1 + logger.err( + { model: 'Publisher', slug: this.slug, error }, + '[fetchV1DataError]' + ) + } + this.name = parsedBody != null ? parsedBody.name : undefined + this.partner = parsedBody != null ? parsedBody.partner : undefined + callback(null, this) + } + ) +}) + +exports.Publisher = mongoose.model('Publisher', PublisherSchema) +exports.PublisherSchema = PublisherSchema diff --git a/services/web/app/src/models/SamlCache.js b/services/web/app/src/models/SamlCache.js new file mode 100644 index 0000000000..9c3bf642c7 --- /dev/null +++ b/services/web/app/src/models/SamlCache.js @@ -0,0 +1,15 @@ +const mongoose = require('../infrastructure/Mongoose') +const { Schema } = mongoose + +const SamlCacheSchema = new Schema( + { + createdAt: { type: Date }, + requestId: { type: String }, + }, + { + collection: 'samlCache', + } +) + +exports.SamlCache = mongoose.model('SamlCache', SamlCacheSchema) +exports.SamlCacheSchema = SamlCacheSchema diff --git a/services/web/app/src/models/SamlLog.js b/services/web/app/src/models/SamlLog.js new file mode 100644 index 0000000000..234a25da8b --- /dev/null +++ b/services/web/app/src/models/SamlLog.js @@ -0,0 +1,18 @@ +const mongoose = require('../infrastructure/Mongoose') +const { Schema } = mongoose + +const SamlLogSchema = new Schema( + { + createdAt: { type: Date, default: () => new Date() }, + data: { type: Object }, + jsonData: { type: String }, + providerId: { type: String, default: '' }, + sessionId: { type: String, default: '' }, + }, + { + collection: 'samlLogs', + } +) + +exports.SamlLog = mongoose.model('SamlLog', SamlLogSchema) +exports.SamlLogSchema = SamlLogSchema diff --git a/services/web/app/src/models/SplitTest.js b/services/web/app/src/models/SplitTest.js new file mode 100644 index 0000000000..dc998f6d4d --- /dev/null +++ b/services/web/app/src/models/SplitTest.js @@ -0,0 +1,111 @@ +const mongoose = require('../infrastructure/Mongoose') +const { Schema } = mongoose +const _ = require('lodash') + +const MIN_NAME_LENGTH = 3 +const MAX_NAME_LENGTH = 200 +const MIN_VARIANT_NAME_LENGTH = 3 +const MAX_VARIANT_NAME_LENGTH = 255 +const NAME_REGEX = /^[a-zA-Z0-9\-_]+$/ + +const RolloutPercentType = { + type: Number, + default: 0, + min: [0, 'Rollout percentage must be between 0 and 100, got {VALUE}'], + max: [100, 'Rollout percentage must be between 0 and 100, got {VALUE}'], + required: true, +} + +const VariantSchema = new Schema( + { + name: { + type: String, + minLength: MIN_VARIANT_NAME_LENGTH, + maxLength: MAX_VARIANT_NAME_LENGTH, + required: true, + validate: { + validator: function (input) { + return input !== null && input !== 'default' && NAME_REGEX.test(input) + }, + message: `invalid, cannot be 'default' and must match: ${NAME_REGEX}, got {VALUE}`, + }, + }, + active: { + type: Boolean, + default: true, + required: true, + }, + rolloutPercent: RolloutPercentType, + rolloutStripes: [ + { + start: RolloutPercentType, + end: RolloutPercentType, + }, + ], + }, + { _id: false } +) + +const VersionSchema = new Schema( + { + versionNumber: { + type: Number, + default: 1, + min: [1, 'must be 1 or higher, got {VALUE}'], + required: true, + }, + phase: { + type: String, + default: 'alpha', + enum: ['alpha', 'beta', 'release'], + required: true, + }, + active: { + type: Boolean, + default: true, + required: true, + }, + variants: [VariantSchema], + }, + { _id: false } +) + +const SplitTestSchema = new Schema({ + name: { + type: String, + minLength: MIN_NAME_LENGTH, + maxlength: MAX_NAME_LENGTH, + required: true, + unique: true, + validate: { + validator: function (input) { + return input !== null && NAME_REGEX.test(input) + }, + message: `invalid, must match: ${NAME_REGEX}`, + }, + }, + versions: [VersionSchema], + forbidReleasePhase: { + type: Boolean, + required: false, + }, +}) + +SplitTestSchema.methods.getCurrentVersion = function () { + if (this.versions && this.versions.length > 0) { + return _.maxBy(this.versions, 'versionNumber') + } else { + return undefined + } +} + +SplitTestSchema.methods.getVersion = function (versionNumber) { + return _.find(this.versions || [], { + versionNumber, + }) +} + +module.exports = { + SplitTest: mongoose.model('SplitTest', SplitTestSchema), + SplitTestSchema, +} diff --git a/services/web/app/src/models/Subscription.js b/services/web/app/src/models/Subscription.js new file mode 100644 index 0000000000..f8f6459484 --- /dev/null +++ b/services/web/app/src/models/Subscription.js @@ -0,0 +1,49 @@ +const mongoose = require('../infrastructure/Mongoose') +const { TeamInviteSchema } = require('./TeamInvite') + +const { Schema } = mongoose +const { ObjectId } = Schema + +const SubscriptionSchema = new Schema({ + admin_id: { + type: ObjectId, + ref: 'User', + index: { unique: true, dropDups: true }, + }, + manager_ids: { + type: [ObjectId], + ref: 'User', + required: true, + validate: function (managers) { + // require at least one manager + return !!managers.length + }, + }, + member_ids: [{ type: ObjectId, ref: 'User' }], + invited_emails: [String], + teamInvites: [TeamInviteSchema], + recurlySubscription_id: String, + teamName: { type: String }, + teamNotice: { type: String }, + planCode: { type: String }, + groupPlan: { type: Boolean, default: false }, + membersLimit: { type: Number, default: 0 }, + customAccount: Boolean, + overleaf: { + id: { + type: Number, + index: { + unique: true, + partialFilterExpression: { 'overleaf.id': { $exists: true } }, + }, + }, + }, +}) + +// Subscriptions have no v1 data to fetch +SubscriptionSchema.method('fetchV1Data', function (callback) { + callback(null, this) +}) + +exports.Subscription = mongoose.model('Subscription', SubscriptionSchema) +exports.SubscriptionSchema = SubscriptionSchema diff --git a/services/web/app/src/models/SystemMessage.js b/services/web/app/src/models/SystemMessage.js new file mode 100644 index 0000000000..af263fafc8 --- /dev/null +++ b/services/web/app/src/models/SystemMessage.js @@ -0,0 +1,9 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose + +const SystemMessageSchema = new Schema({ + content: { type: String, default: '' }, +}) + +exports.SystemMessage = mongoose.model('SystemMessage', SystemMessageSchema) diff --git a/services/web/app/src/models/Tag.js b/services/web/app/src/models/Tag.js new file mode 100644 index 0000000000..0f4b23db30 --- /dev/null +++ b/services/web/app/src/models/Tag.js @@ -0,0 +1,14 @@ +const mongoose = require('../infrastructure/Mongoose') +const { Schema } = mongoose + +// Note that for legacy reasons, user_id and project_ids are plain strings, +// not ObjectIds. + +const TagSchema = new Schema({ + user_id: { type: String, required: true }, + name: { type: String, required: true }, + project_ids: [String], +}) + +exports.Tag = mongoose.model('Tag', TagSchema) +exports.TagSchema = TagSchema diff --git a/services/web/app/src/models/TeamInvite.js b/services/web/app/src/models/TeamInvite.js new file mode 100644 index 0000000000..9600e2054f --- /dev/null +++ b/services/web/app/src/models/TeamInvite.js @@ -0,0 +1,13 @@ +const mongoose = require('../infrastructure/Mongoose') + +const { Schema } = mongoose + +const TeamInviteSchema = new Schema({ + email: { type: String, required: true }, + token: { type: String }, + inviterName: { type: String }, + sentAt: { type: Date }, +}) + +exports.TeamInvite = mongoose.model('TeamInvite', TeamInviteSchema) +exports.TeamInviteSchema = TeamInviteSchema diff --git a/services/web/app/src/models/User.js b/services/web/app/src/models/User.js new file mode 100644 index 0000000000..4ba8a810f2 --- /dev/null +++ b/services/web/app/src/models/User.js @@ -0,0 +1,172 @@ +const Settings = require('@overleaf/settings') +const mongoose = require('../infrastructure/Mongoose') +const TokenGenerator = require('../Features/TokenGenerator/TokenGenerator') +const { Schema } = mongoose +const { ObjectId } = Schema + +// See https://stackoverflow.com/questions/386294/what-is-the-maximum-length-of-a-valid-email-address/574698#574698 +const MAX_EMAIL_LENGTH = 254 + +const AuditLogEntrySchema = new Schema({ + _id: false, + info: { type: Object }, + initiatorId: { type: Schema.Types.ObjectId }, + ipAddress: { type: String }, + operation: { type: String }, + userId: { type: Schema.Types.ObjectId }, + timestamp: { type: Date }, +}) + +const UserSchema = new Schema({ + email: { type: String, default: '', maxlength: MAX_EMAIL_LENGTH }, + emails: [ + { + email: { type: String, default: '', maxlength: MAX_EMAIL_LENGTH }, + reversedHostname: { type: String, default: '' }, + createdAt: { + type: Date, + default() { + return new Date() + }, + }, + confirmedAt: { type: Date }, + samlProviderId: { type: String }, + affiliationUnchecked: { type: Boolean }, + reconfirmedAt: { type: Date }, + }, + ], + first_name: { type: String, default: '' }, + last_name: { type: String, default: '' }, + role: { type: String, default: '' }, + institution: { type: String, default: '' }, + hashedPassword: String, + isAdmin: { type: Boolean, default: false }, + staffAccess: { + publisherMetrics: { type: Boolean, default: false }, + publisherManagement: { type: Boolean, default: false }, + institutionMetrics: { type: Boolean, default: false }, + institutionManagement: { type: Boolean, default: false }, + groupMetrics: { type: Boolean, default: false }, + groupManagement: { type: Boolean, default: false }, + adminMetrics: { type: Boolean, default: false }, + }, + signUpDate: { + type: Date, + default() { + return new Date() + }, + }, + lastLoggedIn: { type: Date }, + lastLoginIp: { type: String, default: '' }, + loginCount: { type: Number, default: 0 }, + holdingAccount: { type: Boolean, default: false }, + ace: { + mode: { type: String, default: 'none' }, + theme: { type: String, default: 'textmate' }, + overallTheme: { type: String, default: '' }, + fontSize: { type: Number, default: '12' }, + autoComplete: { type: Boolean, default: true }, + autoPairDelimiters: { type: Boolean, default: true }, + spellCheckLanguage: { type: String, default: 'en' }, + pdfViewer: { type: String, default: 'pdfjs' }, + syntaxValidation: { type: Boolean }, + fontFamily: { type: String }, + lineHeight: { type: String }, + }, + features: { + collaborators: { + type: Number, + default: Settings.defaultFeatures.collaborators, + }, + versioning: { type: Boolean, default: Settings.defaultFeatures.versioning }, + dropbox: { type: Boolean, default: Settings.defaultFeatures.dropbox }, + github: { type: Boolean, default: Settings.defaultFeatures.github }, + gitBridge: { type: Boolean, default: Settings.defaultFeatures.gitBridge }, + compileTimeout: { + type: Number, + default: Settings.defaultFeatures.compileTimeout, + }, + compileGroup: { + type: String, + default: Settings.defaultFeatures.compileGroup, + }, + templates: { type: Boolean, default: Settings.defaultFeatures.templates }, + references: { type: Boolean, default: Settings.defaultFeatures.references }, + trackChanges: { + type: Boolean, + default: Settings.defaultFeatures.trackChanges, + }, + mendeley: { type: Boolean, default: Settings.defaultFeatures.mendeley }, + zotero: { type: Boolean, default: Settings.defaultFeatures.zotero }, + referencesSearch: { + type: Boolean, + default: Settings.defaultFeatures.referencesSearch, + }, + }, + featuresOverrides: [ + { + createdAt: { + type: Date, + default() { + return new Date() + }, + }, + expiresAt: { type: Date }, + note: { type: String }, + features: { + collaborators: { type: Number }, + versioning: { type: Boolean }, + dropbox: { type: Boolean }, + github: { type: Boolean }, + gitBridge: { type: Boolean }, + compileTimeout: { type: Number }, + compileGroup: { type: String }, + templates: { type: Boolean }, + trackChanges: { type: Boolean }, + mendeley: { type: Boolean }, + zotero: { type: Boolean }, + referencesSearch: { type: Boolean }, + }, + }, + ], + featuresUpdatedAt: { type: Date }, + // when auto-merged from SL and must-reconfirm is set, we may end up using + // `sharelatexHashedPassword` to recover accounts... + sharelatexHashedPassword: String, + must_reconfirm: { type: Boolean, default: false }, + referal_id: { + type: String, + default() { + return TokenGenerator.generateReferralId() + }, + }, + refered_users: [{ type: ObjectId, ref: 'User' }], + refered_user_count: { type: Number, default: 0 }, + refProviders: { + // The actual values are managed by third-party-references. + mendeley: Schema.Types.Mixed, + zotero: Schema.Types.Mixed, + }, + alphaProgram: { type: Boolean, default: false }, // experimental features + betaProgram: { type: Boolean, default: false }, + overleaf: { + id: { type: Number }, + accessToken: { type: String }, + refreshToken: { type: String }, + }, + awareOfV2: { type: Boolean, default: false }, + samlIdentifiers: { type: Array, default: [] }, + thirdPartyIdentifiers: { type: Array, default: [] }, + migratedAt: { type: Date }, + twoFactorAuthentication: { + createdAt: { type: Date }, + enrolledAt: { type: Date }, + secret: { type: String }, + }, + onboardingEmailSentAt: { type: Date }, + auditLog: [AuditLogEntrySchema], + splitTests: Schema.Types.Mixed, +}) + +exports.User = mongoose.model('User', UserSchema) +exports.UserSchema = UserSchema diff --git a/services/web/app/src/router.js b/services/web/app/src/router.js new file mode 100644 index 0000000000..88c4f423a9 --- /dev/null +++ b/services/web/app/src/router.js @@ -0,0 +1,1179 @@ +const AdminController = require('./Features/ServerAdmin/AdminController') +const ErrorController = require('./Features/Errors/ErrorController') +const ProjectController = require('./Features/Project/ProjectController') +const ProjectApiController = require('./Features/Project/ProjectApiController') +const SpellingController = require('./Features/Spelling/SpellingController') +const EditorRouter = require('./Features/Editor/EditorRouter') +const Settings = require('@overleaf/settings') +const TpdsController = require('./Features/ThirdPartyDataStore/TpdsController') +const SubscriptionRouter = require('./Features/Subscription/SubscriptionRouter') +const UploadsRouter = require('./Features/Uploads/UploadsRouter') +const metrics = require('@overleaf/metrics') +const ReferalController = require('./Features/Referal/ReferalController') +const AuthenticationController = require('./Features/Authentication/AuthenticationController') +const SessionManager = require('./Features/Authentication/SessionManager') +const TagsController = require('./Features/Tags/TagsController') +const NotificationsController = require('./Features/Notifications/NotificationsController') +const CollaboratorsRouter = require('./Features/Collaborators/CollaboratorsRouter') +const UserInfoController = require('./Features/User/UserInfoController') +const UserController = require('./Features/User/UserController') +const UserEmailsController = require('./Features/User/UserEmailsController') +const UserPagesController = require('./Features/User/UserPagesController') +const DocumentController = require('./Features/Documents/DocumentController') +const CompileManager = require('./Features/Compile/CompileManager') +const CompileController = require('./Features/Compile/CompileController') +const ClsiCookieManager = require('./Features/Compile/ClsiCookieManager')( + Settings.apis.clsi != null ? Settings.apis.clsi.backendGroupName : undefined +) +const HealthCheckController = require('./Features/HealthCheck/HealthCheckController') +const ProjectDownloadsController = require('./Features/Downloads/ProjectDownloadsController') +const FileStoreController = require('./Features/FileStore/FileStoreController') +const HistoryController = require('./Features/History/HistoryController') +const ExportsController = require('./Features/Exports/ExportsController') +const PasswordResetRouter = require('./Features/PasswordReset/PasswordResetRouter') +const StaticPagesRouter = require('./Features/StaticPages/StaticPagesRouter') +const ChatController = require('./Features/Chat/ChatController') +const Modules = require('./infrastructure/Modules') +const RateLimiterMiddleware = require('./Features/Security/RateLimiterMiddleware') +const InactiveProjectController = require('./Features/InactiveData/InactiveProjectController') +const ContactRouter = require('./Features/Contacts/ContactRouter') +const ReferencesController = require('./Features/References/ReferencesController') +const AuthorizationMiddleware = require('./Features/Authorization/AuthorizationMiddleware') +const BetaProgramController = require('./Features/BetaProgram/BetaProgramController') +const AnalyticsRouter = require('./Features/Analytics/AnalyticsRouter') +const MetaController = require('./Features/Metadata/MetaController') +const TokenAccessController = require('./Features/TokenAccess/TokenAccessController') +const Features = require('./infrastructure/Features') +const LinkedFilesRouter = require('./Features/LinkedFiles/LinkedFilesRouter') +const TemplatesRouter = require('./Features/Templates/TemplatesRouter') +const InstitutionsController = require('./Features/Institutions/InstitutionsController') +const UserMembershipRouter = require('./Features/UserMembership/UserMembershipRouter') +const SystemMessageController = require('./Features/SystemMessages/SystemMessageController') +const AnalyticsRegistrationSourceMiddleware = require('./Features/Analytics/AnalyticsRegistrationSourceMiddleware') +const { Joi, validate } = require('./infrastructure/Validation') +const { + renderUnsupportedBrowserPage, + unsupportedBrowserMiddleware, +} = require('./infrastructure/UnsupportedBrowserMiddleware') + +const logger = require('logger-sharelatex') +const _ = require('underscore') + +module.exports = { initialize } + +function initialize(webRouter, privateApiRouter, publicApiRouter) { + if (!Settings.allowPublicAccess) { + webRouter.all('*', AuthenticationController.requireGlobalLogin) + } + + webRouter.get('*', AnalyticsRegistrationSourceMiddleware.setInbound()) + + webRouter.get('/login', UserPagesController.loginPage) + AuthenticationController.addEndpointToLoginWhitelist('/login') + + webRouter.post('/login', AuthenticationController.passportLogin) + + if (Settings.enableLegacyLogin) { + AuthenticationController.addEndpointToLoginWhitelist('/login/legacy') + webRouter.get('/login/legacy', UserPagesController.loginPage) + webRouter.post('/login/legacy', AuthenticationController.passportLogin) + } + + webRouter.get( + '/read-only/one-time-login', + UserPagesController.oneTimeLoginPage + ) + AuthenticationController.addEndpointToLoginWhitelist( + '/read-only/one-time-login' + ) + + webRouter.get('/logout', UserPagesController.logoutPage) + webRouter.post('/logout', UserController.logout) + + webRouter.get('/restricted', AuthorizationMiddleware.restricted) + + if (Features.hasFeature('registration-page')) { + webRouter.get('/register', UserPagesController.registerPage) + AuthenticationController.addEndpointToLoginWhitelist('/register') + } + + EditorRouter.apply(webRouter, privateApiRouter) + CollaboratorsRouter.apply(webRouter, privateApiRouter) + SubscriptionRouter.apply(webRouter, privateApiRouter, publicApiRouter) + UploadsRouter.apply(webRouter, privateApiRouter) + PasswordResetRouter.apply(webRouter, privateApiRouter) + StaticPagesRouter.apply(webRouter, privateApiRouter) + ContactRouter.apply(webRouter, privateApiRouter) + AnalyticsRouter.apply(webRouter, privateApiRouter, publicApiRouter) + LinkedFilesRouter.apply(webRouter, privateApiRouter, publicApiRouter) + TemplatesRouter.apply(webRouter) + UserMembershipRouter.apply(webRouter) + + Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter) + + if (Settings.enableSubscriptions) { + webRouter.get( + '/user/bonus', + AuthenticationController.requireLogin(), + ReferalController.bonus + ) + } + + // .getMessages will generate an empty response for anonymous users. + webRouter.get('/system/messages', SystemMessageController.getMessages) + + webRouter.get( + '/user/settings', + AuthenticationController.requireLogin(), + UserPagesController.settingsPage + ) + webRouter.post( + '/user/settings', + AuthenticationController.requireLogin(), + UserController.updateUserSettings + ) + webRouter.post( + '/user/password/update', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'change-password', + maxRequests: 10, + timeInterval: 60, + }), + UserController.changePassword + ) + webRouter.get( + '/user/emails', + AuthenticationController.requireLogin(), + UserController.promises.ensureAffiliationMiddleware, + UserEmailsController.list + ) + webRouter.get('/user/emails/confirm', UserEmailsController.showConfirm) + webRouter.post( + '/user/emails/confirm', + RateLimiterMiddleware.rateLimit({ + endpointName: 'confirm-email', + maxRequests: 10, + timeInterval: 60, + }), + UserEmailsController.confirm + ) + webRouter.post( + '/user/emails/resend_confirmation', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'resend-confirmation', + maxRequests: 10, + timeInterval: 60, + }), + UserEmailsController.resendConfirmation + ) + + if (Features.hasFeature('affiliations')) { + webRouter.post( + '/user/emails', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'add-email', + maxRequests: 10, + timeInterval: 60, + }), + UserEmailsController.add + ) + webRouter.post( + '/user/emails/delete', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'delete-email', + maxRequests: 10, + timeInterval: 60, + }), + UserEmailsController.remove + ) + webRouter.post( + '/user/emails/default', + AuthenticationController.requireLogin(), + UserEmailsController.setDefault + ) + webRouter.post( + '/user/emails/endorse', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'endorse-email', + maxRequests: 30, + timeInterval: 60, + }), + UserEmailsController.endorse + ) + } + + webRouter.get( + '/user/sessions', + AuthenticationController.requireLogin(), + UserPagesController.sessionsPage + ) + webRouter.post( + '/user/sessions/clear', + AuthenticationController.requireLogin(), + UserController.clearSessions + ) + + webRouter.delete( + '/user/newsletter/unsubscribe', + AuthenticationController.requireLogin(), + UserController.unsubscribe + ) + webRouter.post( + '/user/delete', + RateLimiterMiddleware.rateLimit({ + endpointName: 'delete-user', + maxRequests: 10, + timeInterval: 60, + }), + AuthenticationController.requireLogin(), + UserController.tryDeleteUser + ) + + webRouter.get( + '/user/personal_info', + AuthenticationController.requireLogin(), + UserInfoController.getLoggedInUsersPersonalInfo + ) + privateApiRouter.get( + '/user/:user_id/personal_info', + AuthenticationController.requirePrivateApiAuth(), + UserInfoController.getPersonalInfo + ) + + webRouter.get( + '/user/reconfirm', + UserPagesController.renderReconfirmAccountPage + ) + // for /user/reconfirm POST, see password router + + webRouter.get( + '/user/tpds/queues', + AuthenticationController.requireLogin(), + TpdsController.getQueues + ) + + webRouter.get( + '/user/projects', + AuthenticationController.requireLogin(), + ProjectController.userProjectsJson + ) + webRouter.get( + '/project/:Project_id/entities', + AuthenticationController.requireLogin(), + AuthorizationMiddleware.ensureUserCanReadProject, + ProjectController.projectEntitiesJson + ) + + webRouter.get( + '/project', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'open-dashboard', + maxRequests: 30, + timeInterval: 60, + }), + unsupportedBrowserMiddleware, + ProjectController.projectListPage + ) + webRouter.post( + '/project/new', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'create-project', + maxRequests: 20, + timeInterval: 60, + }), + ProjectController.newProject + ) + + webRouter.get( + '/Project/:Project_id', + RateLimiterMiddleware.rateLimit({ + endpointName: 'open-project', + params: ['Project_id'], + maxRequests: 15, + timeInterval: 60, + }), + unsupportedBrowserMiddleware, + AuthenticationController.validateUserSession(), + AuthorizationMiddleware.ensureUserCanReadProject, + ProjectController.loadEditor + ) + webRouter.head( + '/Project/:Project_id/file/:File_id', + AuthorizationMiddleware.ensureUserCanReadProject, + FileStoreController.getFileHead + ) + webRouter.get( + '/Project/:Project_id/file/:File_id', + AuthorizationMiddleware.ensureUserCanReadProject, + FileStoreController.getFile + ) + webRouter.post( + '/project/:Project_id/settings', + AuthorizationMiddleware.ensureUserCanWriteProjectSettings, + ProjectController.updateProjectSettings + ) + webRouter.post( + '/project/:Project_id/settings/admin', + AuthenticationController.requireLogin(), + AuthorizationMiddleware.ensureUserCanAdminProject, + ProjectController.updateProjectAdminSettings + ) + + webRouter.post( + '/project/:Project_id/compile', + RateLimiterMiddleware.rateLimit({ + endpointName: 'compile-project-http', + params: ['Project_id'], + maxRequests: 800, + timeInterval: 60 * 60, + }), + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.compile + ) + + webRouter.post( + '/project/:Project_id/compile/stop', + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.stopCompile + ) + + // LEGACY: Used by the web download buttons, adds filename header, TODO: remove at some future date + webRouter.get( + '/project/:Project_id/output/output.pdf', + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.downloadPdf + ) + + // PDF Download button + webRouter.get( + /^\/download\/project\/([^/]*)\/output\/output\.pdf$/, + function (req, res, next) { + const params = { Project_id: req.params[0] } + req.params = params + next() + }, + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.downloadPdf + ) + + // PDF Download button for specific build + webRouter.get( + /^\/download\/project\/([^/]*)\/build\/([0-9a-f-]+)\/output\/output\.pdf$/, + function (req, res, next) { + const params = { + Project_id: req.params[0], + build_id: req.params[1], + } + req.params = params + next() + }, + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.downloadPdf + ) + + // Align with limits defined in CompileController.downloadPdf + const rateLimiterMiddlewareOutputFiles = RateLimiterMiddleware.rateLimit({ + endpointName: 'misc-output-download', + params: ['Project_id'], + maxRequests: 1000, + timeInterval: 60 * 60, + }) + + // Used by the pdf viewers + webRouter.get( + /^\/project\/([^/]*)\/output\/(.*)$/, + function (req, res, next) { + const params = { + Project_id: req.params[0], + file: req.params[1], + } + req.params = params + next() + }, + rateLimiterMiddlewareOutputFiles, + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.getFileFromClsi + ) + // direct url access to output files for a specific build (query string not required) + webRouter.get( + /^\/project\/([^/]*)\/build\/([0-9a-f-]+)\/output\/(.*)$/, + function (req, res, next) { + const params = { + Project_id: req.params[0], + build_id: req.params[1], + file: req.params[2], + } + req.params = params + next() + }, + rateLimiterMiddlewareOutputFiles, + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.getFileFromClsi + ) + + // direct url access to output files for user but no build, to retrieve files when build fails + webRouter.get( + /^\/project\/([^/]*)\/user\/([0-9a-f-]+)\/output\/(.*)$/, + function (req, res, next) { + const params = { + Project_id: req.params[0], + user_id: req.params[1], + file: req.params[2], + } + req.params = params + next() + }, + rateLimiterMiddlewareOutputFiles, + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.getFileFromClsi + ) + + // direct url access to output files for a specific user and build (query string not required) + webRouter.get( + /^\/project\/([^/]*)\/user\/([0-9a-f]+)\/build\/([0-9a-f-]+)\/output\/(.*)$/, + function (req, res, next) { + const params = { + Project_id: req.params[0], + user_id: req.params[1], + build_id: req.params[2], + file: req.params[3], + } + req.params = params + next() + }, + rateLimiterMiddlewareOutputFiles, + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.getFileFromClsi + ) + + webRouter.delete( + '/project/:Project_id/output', + validate({ query: { clsiserverid: Joi.string() } }), + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.deleteAuxFiles + ) + webRouter.get( + '/project/:Project_id/sync/code', + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.proxySyncCode + ) + webRouter.get( + '/project/:Project_id/sync/pdf', + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.proxySyncPdf + ) + webRouter.get( + '/project/:Project_id/wordcount', + validate({ query: { clsiserverid: Joi.string() } }), + AuthorizationMiddleware.ensureUserCanReadProject, + CompileController.wordCount + ) + + webRouter.post( + '/Project/:Project_id/archive', + AuthorizationMiddleware.ensureUserCanReadProject, + ProjectController.archiveProject + ) + webRouter.delete( + '/Project/:Project_id/archive', + AuthorizationMiddleware.ensureUserCanReadProject, + ProjectController.unarchiveProject + ) + webRouter.post( + '/project/:project_id/trash', + AuthorizationMiddleware.ensureUserCanReadProject, + ProjectController.trashProject + ) + webRouter.delete( + '/project/:project_id/trash', + AuthorizationMiddleware.ensureUserCanReadProject, + ProjectController.untrashProject + ) + + webRouter.delete( + '/Project/:Project_id', + AuthenticationController.requireLogin(), + AuthorizationMiddleware.ensureUserCanAdminProject, + ProjectController.deleteProject + ) + + webRouter.post( + '/Project/:Project_id/restore', + AuthenticationController.requireLogin(), + AuthorizationMiddleware.ensureUserCanAdminProject, + ProjectController.restoreProject + ) + webRouter.post( + '/Project/:Project_id/clone', + AuthorizationMiddleware.ensureUserCanReadProject, + ProjectController.cloneProject + ) + + webRouter.post( + '/project/:Project_id/rename', + AuthenticationController.requireLogin(), + AuthorizationMiddleware.ensureUserCanAdminProject, + ProjectController.renameProject + ) + webRouter.get( + '/project/:Project_id/updates', + AuthorizationMiddleware.ensureUserCanReadProject, + HistoryController.selectHistoryApi, + HistoryController.proxyToHistoryApiAndInjectUserDetails + ) + webRouter.get( + '/project/:Project_id/doc/:doc_id/diff', + AuthorizationMiddleware.ensureUserCanReadProject, + HistoryController.selectHistoryApi, + HistoryController.proxyToHistoryApi + ) + webRouter.get( + '/project/:Project_id/diff', + AuthorizationMiddleware.ensureUserCanReadProject, + HistoryController.selectHistoryApi, + HistoryController.proxyToHistoryApiAndInjectUserDetails + ) + webRouter.get( + '/project/:Project_id/filetree/diff', + AuthorizationMiddleware.ensureUserCanReadProject, + HistoryController.selectHistoryApi, + HistoryController.proxyToHistoryApi + ) + webRouter.post( + '/project/:Project_id/doc/:doc_id/version/:version_id/restore', + AuthorizationMiddleware.ensureUserCanWriteProjectContent, + HistoryController.selectHistoryApi, + HistoryController.proxyToHistoryApi + ) + webRouter.post( + '/project/:project_id/doc/:doc_id/restore', + AuthorizationMiddleware.ensureUserCanWriteProjectContent, + HistoryController.restoreDocFromDeletedDoc + ) + webRouter.post( + '/project/:project_id/restore_file', + AuthorizationMiddleware.ensureUserCanWriteProjectContent, + HistoryController.restoreFileFromV2 + ) + webRouter.get( + '/project/:project_id/version/:version/zip', + RateLimiterMiddleware.rateLimit({ + endpointName: 'download-project-revision', + maxRequests: 30, + timeInterval: 60 * 60, + }), + AuthorizationMiddleware.ensureUserCanReadProject, + HistoryController.downloadZipOfVersion + ) + privateApiRouter.post( + '/project/:Project_id/history/resync', + AuthenticationController.requirePrivateApiAuth(), + HistoryController.resyncProjectHistory + ) + + webRouter.get( + '/project/:Project_id/labels', + AuthorizationMiddleware.ensureUserCanReadProject, + HistoryController.selectHistoryApi, + HistoryController.ensureProjectHistoryEnabled, + HistoryController.getLabels + ) + webRouter.post( + '/project/:Project_id/labels', + AuthorizationMiddleware.ensureUserCanWriteProjectContent, + HistoryController.selectHistoryApi, + HistoryController.ensureProjectHistoryEnabled, + HistoryController.createLabel + ) + webRouter.delete( + '/project/:Project_id/labels/:label_id', + AuthorizationMiddleware.ensureUserCanWriteProjectContent, + HistoryController.selectHistoryApi, + HistoryController.ensureProjectHistoryEnabled, + HistoryController.deleteLabel + ) + + webRouter.post( + '/project/:project_id/export/:brand_variation_id', + AuthorizationMiddleware.ensureUserCanWriteProjectContent, + ExportsController.exportProject + ) + webRouter.get( + '/project/:project_id/export/:export_id', + AuthorizationMiddleware.ensureUserCanWriteProjectContent, + ExportsController.exportStatus + ) + webRouter.get( + '/project/:project_id/export/:export_id/:type', + AuthorizationMiddleware.ensureUserCanWriteProjectContent, + ExportsController.exportDownload + ) + + webRouter.get( + '/Project/:Project_id/download/zip', + AuthorizationMiddleware.ensureUserCanReadProject, + ProjectDownloadsController.downloadProject + ) + webRouter.get( + '/project/download/zip', + AuthorizationMiddleware.ensureUserCanReadMultipleProjects, + ProjectDownloadsController.downloadMultipleProjects + ) + + webRouter.get( + '/project/:project_id/metadata', + AuthorizationMiddleware.ensureUserCanReadProject, + Settings.allowAnonymousReadAndWriteSharing + ? (req, res, next) => { + next() + } + : AuthenticationController.requireLogin(), + MetaController.getMetadata + ) + webRouter.post( + '/project/:project_id/doc/:doc_id/metadata', + AuthorizationMiddleware.ensureUserCanReadProject, + Settings.allowAnonymousReadAndWriteSharing + ? (req, res, next) => { + next() + } + : AuthenticationController.requireLogin(), + MetaController.broadcastMetadataForDoc + ) + privateApiRouter.post( + '/internal/expire-deleted-projects-after-duration', + AuthenticationController.requirePrivateApiAuth(), + ProjectController.expireDeletedProjectsAfterDuration + ) + privateApiRouter.post( + '/internal/expire-deleted-users-after-duration', + AuthenticationController.requirePrivateApiAuth(), + UserController.expireDeletedUsersAfterDuration + ) + privateApiRouter.post( + '/internal/project/:projectId/expire-deleted-project', + AuthenticationController.requirePrivateApiAuth(), + ProjectController.expireDeletedProject + ) + privateApiRouter.post( + '/internal/users/:userId/expire', + AuthenticationController.requirePrivateApiAuth(), + UserController.expireDeletedUser + ) + + privateApiRouter.get( + '/user/:userId/tag', + AuthenticationController.requirePrivateApiAuth(), + TagsController.apiGetAllTags + ) + webRouter.get( + '/tag', + AuthenticationController.requireLogin(), + TagsController.getAllTags + ) + webRouter.post( + '/tag', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'create-tag', + maxRequests: 30, + timeInterval: 60, + }), + TagsController.createTag + ) + webRouter.post( + '/tag/:tagId/rename', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'rename-tag', + maxRequests: 30, + timeInterval: 60, + }), + TagsController.renameTag + ) + webRouter.delete( + '/tag/:tagId', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'delete-tag', + maxRequests: 30, + timeInterval: 60, + }), + TagsController.deleteTag + ) + webRouter.post( + '/tag/:tagId/project/:projectId', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'add-project-to-tag', + maxRequests: 30, + timeInterval: 60, + }), + TagsController.addProjectToTag + ) + webRouter.delete( + '/tag/:tagId/project/:projectId', + AuthenticationController.requireLogin(), + RateLimiterMiddleware.rateLimit({ + endpointName: 'remove-project-from-tag', + maxRequests: 30, + timeInterval: 60, + }), + TagsController.removeProjectFromTag + ) + + webRouter.get( + '/notifications', + AuthenticationController.requireLogin(), + NotificationsController.getAllUnreadNotifications + ) + webRouter.delete( + '/notifications/:notificationId', + AuthenticationController.requireLogin(), + NotificationsController.markNotificationAsRead + ) + + // Deprecated in favour of /internal/project/:project_id but still used by versioning + privateApiRouter.get( + '/project/:project_id/details', + AuthenticationController.requirePrivateApiAuth(), + ProjectApiController.getProjectDetails + ) + + // New 'stable' /internal API end points + privateApiRouter.get( + '/internal/project/:project_id', + AuthenticationController.requirePrivateApiAuth(), + ProjectApiController.getProjectDetails + ) + privateApiRouter.get( + '/internal/project/:Project_id/zip', + AuthenticationController.requirePrivateApiAuth(), + ProjectDownloadsController.downloadProject + ) + privateApiRouter.get( + '/internal/project/:project_id/compile/pdf', + AuthenticationController.requirePrivateApiAuth(), + CompileController.compileAndDownloadPdf + ) + + privateApiRouter.post( + '/internal/deactivateOldProjects', + AuthenticationController.requirePrivateApiAuth(), + InactiveProjectController.deactivateOldProjects + ) + privateApiRouter.post( + '/internal/project/:project_id/deactivate', + AuthenticationController.requirePrivateApiAuth(), + InactiveProjectController.deactivateProject + ) + + privateApiRouter.get( + /^\/internal\/project\/([^/]*)\/output\/(.*)$/, + function (req, res, next) { + const params = { + Project_id: req.params[0], + file: req.params[1], + } + req.params = params + next() + }, + AuthenticationController.requirePrivateApiAuth(), + CompileController.getFileFromClsi + ) + + privateApiRouter.get( + '/project/:Project_id/doc/:doc_id', + AuthenticationController.requirePrivateApiAuth(), + DocumentController.getDocument + ) + privateApiRouter.post( + '/project/:Project_id/doc/:doc_id', + AuthenticationController.requirePrivateApiAuth(), + DocumentController.setDocument + ) + + privateApiRouter.post( + '/user/:user_id/update/*', + AuthenticationController.requirePrivateApiAuth(), + TpdsController.mergeUpdate + ) + privateApiRouter.delete( + '/user/:user_id/update/*', + AuthenticationController.requirePrivateApiAuth(), + TpdsController.deleteUpdate + ) + + privateApiRouter.post( + '/project/:project_id/contents/*', + AuthenticationController.requirePrivateApiAuth(), + TpdsController.updateProjectContents + ) + privateApiRouter.delete( + '/project/:project_id/contents/*', + AuthenticationController.requirePrivateApiAuth(), + TpdsController.deleteProjectContents + ) + + webRouter.post( + '/spelling/check', + AuthenticationController.requireLogin(), + SpellingController.proxyRequestToSpellingApi + ) + webRouter.post( + '/spelling/learn', + AuthenticationController.requireLogin(), + SpellingController.proxyRequestToSpellingApi + ) + + webRouter.get( + '/project/:project_id/messages', + AuthorizationMiddleware.blockRestrictedUserFromProject, + AuthorizationMiddleware.ensureUserCanReadProject, + ChatController.getMessages + ) + webRouter.post( + '/project/:project_id/messages', + AuthorizationMiddleware.blockRestrictedUserFromProject, + AuthorizationMiddleware.ensureUserCanReadProject, + RateLimiterMiddleware.rateLimit({ + endpointName: 'send-chat-message', + maxRequests: 100, + timeInterval: 60, + }), + ChatController.sendMessage + ) + + webRouter.post( + '/project/:Project_id/references/index', + AuthorizationMiddleware.ensureUserCanReadProject, + RateLimiterMiddleware.rateLimit({ + endpointName: 'index-project-references', + maxRequests: 30, + timeInterval: 60, + }), + ReferencesController.index + ) + webRouter.post( + '/project/:Project_id/references/indexAll', + AuthorizationMiddleware.ensureUserCanReadProject, + RateLimiterMiddleware.rateLimit({ + endpointName: 'index-all-project-references', + maxRequests: 30, + timeInterval: 60, + }), + ReferencesController.indexAll + ) + + // disable beta program while v2 is in beta + webRouter.get( + '/beta/participate', + AuthenticationController.requireLogin(), + BetaProgramController.optInPage + ) + webRouter.post( + '/beta/opt-in', + AuthenticationController.requireLogin(), + BetaProgramController.optIn + ) + webRouter.post( + '/beta/opt-out', + AuthenticationController.requireLogin(), + BetaProgramController.optOut + ) + + // New "api" endpoints. Started as a way for v1 to call over to v2 (for + // long-term features, as opposed to the nominally temporary ones in the + // overleaf-integration module), but may expand beyond that role. + publicApiRouter.post( + '/api/clsi/compile/:submission_id', + AuthenticationController.requirePrivateApiAuth(), + CompileController.compileSubmission + ) + publicApiRouter.get( + /^\/api\/clsi\/compile\/([^/]*)\/build\/([0-9a-f-]+)\/output\/(.*)$/, + function (req, res, next) { + const params = { + submission_id: req.params[0], + build_id: req.params[1], + file: req.params[2], + } + req.params = params + next() + }, + AuthenticationController.requirePrivateApiAuth(), + CompileController.getFileFromClsiWithoutUser + ) + publicApiRouter.post( + '/api/institutions/confirm_university_domain', + RateLimiterMiddleware.rateLimit({ + endpointName: 'confirm-university-domain', + maxRequests: 1, + timeInterval: 60, + }), + AuthenticationController.requirePrivateApiAuth(), + InstitutionsController.confirmDomain + ) + + webRouter.get('/chrome', function (req, res, next) { + // Match v1 behaviour - this is used for a Chrome web app + if (SessionManager.isUserLoggedIn(req.session)) { + res.redirect('/project') + } else { + res.redirect('/register') + } + }) + + // Admin Stuff + webRouter.get( + '/admin', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.index + ) + webRouter.get( + '/admin/user', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + (req, res) => res.redirect('/admin/register') + ) // this gets removed by admin-panel addon + webRouter.get( + '/admin/register', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.registerNewUser + ) + webRouter.post( + '/admin/register', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + UserController.register + ) + if (!Features.hasFeature('saas')) { + webRouter.post( + '/admin/openEditor', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.openEditor + ) + webRouter.post( + '/admin/closeEditor', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.closeEditor + ) + webRouter.post( + '/admin/disconnectAllUsers', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.disconnectAllUsers + ) + } + webRouter.post( + '/admin/flushProjectToTpds', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.flushProjectToTpds + ) + webRouter.post( + '/admin/pollDropboxForUser', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.pollDropboxForUser + ) + webRouter.post( + '/admin/messages', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.createMessage + ) + webRouter.post( + '/admin/messages/clear', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.clearMessages + ) + webRouter.post( + '/admin/unregisterServiceWorker', + AuthorizationMiddleware.ensureUserIsSiteAdmin, + AdminController.unregisterServiceWorker + ) + + privateApiRouter.post( + '/disconnectAllUsers', + AdminController.disconnectAllUsers + ) + + privateApiRouter.get('/perfTest', (req, res) => res.send('hello')) + + publicApiRouter.get('/status', (req, res) => { + if (!Settings.siteIsOpen) { + res.send('web site is closed (web)') + } else if (!Settings.editorIsOpen) { + res.send('web editor is closed (web)') + } else { + res.send('web sharelatex is alive (web)') + } + }) + privateApiRouter.get('/status', (req, res) => + res.send('web sharelatex is alive (api)') + ) + + // used by kubernetes health-check and acceptance tests + webRouter.get('/dev/csrf', (req, res) => res.send(res.locals.csrfToken)) + + publicApiRouter.get( + '/health_check', + HealthCheckController.checkActiveHandles, + HealthCheckController.check + ) + privateApiRouter.get( + '/health_check', + HealthCheckController.checkActiveHandles, + HealthCheckController.checkApi + ) + publicApiRouter.get( + '/health_check/api', + HealthCheckController.checkActiveHandles, + HealthCheckController.checkApi + ) + privateApiRouter.get( + '/health_check/api', + HealthCheckController.checkActiveHandles, + HealthCheckController.checkApi + ) + publicApiRouter.get( + '/health_check/full', + HealthCheckController.checkActiveHandles, + HealthCheckController.check + ) + privateApiRouter.get( + '/health_check/full', + HealthCheckController.checkActiveHandles, + HealthCheckController.check + ) + + publicApiRouter.get('/health_check/redis', HealthCheckController.checkRedis) + privateApiRouter.get('/health_check/redis', HealthCheckController.checkRedis) + + publicApiRouter.get('/health_check/mongo', HealthCheckController.checkMongo) + privateApiRouter.get('/health_check/mongo', HealthCheckController.checkMongo) + + webRouter.get( + '/status/compiler/:Project_id', + RateLimiterMiddleware.rateLimit({ + endpointName: 'status-compiler', + maxRequests: 10, + timeInterval: 60, + }), + AuthorizationMiddleware.ensureUserCanReadProject, + function (req, res) { + const projectId = req.params.Project_id + const sendRes = _.once(function (statusCode, message) { + res.status(statusCode) + res.send(message) + ClsiCookieManager.clearServerId(projectId) + }) // force every compile to a new server + // set a timeout + var handler = setTimeout(function () { + sendRes(500, 'Compiler timed out') + handler = null + }, 10000) + // use a valid user id for testing + const testUserId = '123456789012345678901234' + // run the compile + CompileManager.compile( + projectId, + testUserId, + {}, + function (error, status) { + if (handler) { + clearTimeout(handler) + } + if (error) { + sendRes(500, `Compiler returned error ${error.message}`) + } else if (status === 'success') { + sendRes(200, 'Compiler returned in less than 10 seconds') + } else { + sendRes(500, `Compiler returned failure ${status}`) + } + } + ) + } + ) + + webRouter.get('/no-cache', function (req, res, next) { + res.header('Cache-Control', 'max-age=0') + res.sendStatus(404) + }) + + webRouter.get('/oops-express', (req, res, next) => + next(new Error('Test error')) + ) + webRouter.get('/oops-internal', function (req, res, next) { + throw new Error('Test error') + }) + webRouter.get('/oops-mongo', (req, res, next) => + require('./models/Project').Project.findOne({}, function () { + throw new Error('Test error') + }) + ) + + privateApiRouter.get('/opps-small', function (req, res, next) { + logger.err('test error occured') + res.sendStatus(200) + }) + + webRouter.post('/error/client', function (req, res, next) { + logger.warn( + { err: req.body.error, meta: req.body.meta }, + 'client side error' + ) + metrics.inc('client-side-error') + res.sendStatus(204) + }) + + webRouter.get( + `/read/:token(${TokenAccessController.READ_ONLY_TOKEN_PATTERN})`, + RateLimiterMiddleware.rateLimit({ + endpointName: 'read-only-token', + maxRequests: 15, + timeInterval: 60, + }), + AnalyticsRegistrationSourceMiddleware.setSource('link-sharing'), + TokenAccessController.tokenAccessPage, + AnalyticsRegistrationSourceMiddleware.clearSource() + ) + + webRouter.get( + `/:token(${TokenAccessController.READ_AND_WRITE_TOKEN_PATTERN})`, + RateLimiterMiddleware.rateLimit({ + endpointName: 'read-and-write-token', + maxRequests: 15, + timeInterval: 60, + }), + AnalyticsRegistrationSourceMiddleware.setSource('link-sharing'), + TokenAccessController.tokenAccessPage, + AnalyticsRegistrationSourceMiddleware.clearSource() + ) + + webRouter.post( + `/:token(${TokenAccessController.READ_AND_WRITE_TOKEN_PATTERN})/grant`, + RateLimiterMiddleware.rateLimit({ + endpointName: 'grant-token-access-read-write', + maxRequests: 10, + timeInterval: 60, + }), + TokenAccessController.grantTokenAccessReadAndWrite + ) + + webRouter.post( + `/read/:token(${TokenAccessController.READ_ONLY_TOKEN_PATTERN})/grant`, + RateLimiterMiddleware.rateLimit({ + endpointName: 'grant-token-access-read-only', + maxRequests: 10, + timeInterval: 60, + }), + TokenAccessController.grantTokenAccessReadOnly + ) + + webRouter.get('/unsupported-browser', renderUnsupportedBrowserPage) + + webRouter.get('*', ErrorController.notFound) +} diff --git a/services/web/app/src/util/promises.js b/services/web/app/src/util/promises.js new file mode 100644 index 0000000000..c1a68784ea --- /dev/null +++ b/services/web/app/src/util/promises.js @@ -0,0 +1,139 @@ +const { promisify, callbackify } = require('util') +const pLimit = require('p-limit') + +module.exports = { + promisify, + promisifyAll, + promisifyMultiResult, + callbackify, + callbackifyMultiResult, + expressify, + promiseMapWithLimit, +} + +/** + * Promisify all functions in a module. + * + * This is meant to be used only when all functions in the module are async + * callback-style functions. + * + * It's very much tailored to our current module structure. In particular, it + * binds `this` to the module when calling the function in order not to break + * modules that call sibling functions using `this`. + * + * This will not magically fix all modules. Special cases should be promisified + * manually. + * + * The second argument is a bag of options: + * + * - without: an array of function names that shouldn't be promisified + * + * - multiResult: an object whose keys are function names and values are lists + * of parameter names. This is meant for functions that invoke their callbacks + * with more than one result in separate parameters. The promisifed function + * will return these results as a single object, with each result keyed under + * the corresponding parameter name. + */ +function promisifyAll(module, opts = {}) { + const { without = [], multiResult = {} } = opts + const promises = {} + for (const propName of Object.getOwnPropertyNames(module)) { + if (without.includes(propName)) { + continue + } + const propValue = module[propName] + if (typeof propValue !== 'function') { + continue + } + if (multiResult[propName] != null) { + promises[propName] = promisifyMultiResult( + propValue, + multiResult[propName] + ).bind(module) + } else { + promises[propName] = promisify(propValue).bind(module) + } + } + return promises +} + +/** + * Promisify a function that returns multiple results via additional callback + * parameters. + * + * The promisified function returns the results in a single object whose keys + * are the names given in the array `resultNames`. + * + * Example: + * + * function f(callback) { + * return callback(null, 1, 2, 3) + * } + * + * const g = promisifyMultiResult(f, ['a', 'b', 'c']) + * + * const result = await g() // returns {a: 1, b: 2, c: 3} + */ +function promisifyMultiResult(fn, resultNames) { + function promisified(...args) { + return new Promise((resolve, reject) => { + try { + fn(...args, (err, ...results) => { + if (err != null) { + return reject(err) + } + const promiseResult = {} + for (let i = 0; i < resultNames.length; i++) { + promiseResult[resultNames[i]] = results[i] + } + resolve(promiseResult) + }) + } catch (err) { + reject(err) + } + }) + } + return promisified +} + +/** + * Reverse the effect of `promisifyMultiResult`. + * + * This is meant for providing a temporary backward compatible callback + * interface while we migrate to promises. + */ +function callbackifyMultiResult(fn, resultNames) { + function callbackified(...args) { + const [callback] = args.splice(-1) + fn(...args) + .then(result => { + const cbResults = resultNames.map(resultName => result[resultName]) + callback(null, ...cbResults) + }) + .catch(err => { + callback(err) + }) + } + return callbackified +} + +/** + * Transform an async function into an Express middleware + * + * Any error will be passed to the error middlewares via `next()` + */ +function expressify(fn) { + return (req, res, next) => { + fn(req, res, next).catch(next) + } +} + +/** + * Map values in `array` with the async function `fn` + * + * Limit the number of unresolved promises to `concurrency`. + */ +function promiseMapWithLimit(concurrency, array, fn) { + const limit = pLimit(concurrency) + return Promise.all(array.map(x => limit(() => fn(x)))) +} diff --git a/services/web/app/templates/plans/groups.json b/services/web/app/templates/plans/groups.json new file mode 100644 index 0000000000..f7556afd0e --- /dev/null +++ b/services/web/app/templates/plans/groups.json @@ -0,0 +1,122 @@ +{ + "enterprise": { + "collaborator": { + "USD": { + "2": 252, + "3": 376, + "4": 495, + "5": 615, + "10": 1170, + "20": 2160, + "50": 4950 + }, + "EUR": { + "2": 235, + "3": 352, + "4": 468, + "5": 584, + "10": 1090, + "20": 2015, + "50": 4620 + }, + "GBP": { + "2": 198, + "3": 296, + "4": 394, + "5": 492, + "10": 935, + "20": 1730, + "50": 3960 + } + }, + "professional": { + "USD": { + "2": 504, + "3": 752, + "4": 990, + "5": 1230, + "10": 2340, + "20": 4320, + "50": 9900 + }, + "EUR": { + "2": 470, + "3": 704, + "4": 936, + "5": 1168, + "10": 2185, + "20": 4030, + "50": 9240 + }, + "GBP": { + "2": 396, + "3": 592, + "4": 788, + "5": 984, + "10": 1870, + "20": 3455, + "50": 7920 + } + } + }, + "educational": { + "collaborator": { + "USD": { + "2": 252, + "3": 376, + "4": 495, + "5": 615, + "10": 695, + "20": 1295, + "50": 2970 + }, + "EUR": { + "2": 235, + "3": 352, + "4": 468, + "5": 584, + "10": 655, + "20": 1210, + "50": 2770 + }, + "GBP": { + "2": 198, + "3": 296, + "4": 394, + "5": 492, + "10": 560, + "20": 1035, + "50": 2375 + } + }, + "professional": { + "USD": { + "2": 504, + "3": 752, + "4": 990, + "5": 1230, + "10": 1390, + "20": 2590, + "50": 5940 + }, + "EUR": { + "2": 470, + "3": 704, + "4": 936, + "5": 1168, + "10": 1310, + "20": 2420, + "50": 5545 + }, + "GBP": { + "2": 396, + "3": 592, + "4": 788, + "5": 984, + "10": 1125, + "20": 2075, + "50": 4750 + } + } + } +} \ No newline at end of file diff --git a/services/web/app/templates/project_files/main.tex b/services/web/app/templates/project_files/main.tex new file mode 100644 index 0000000000..a0e2bff21d --- /dev/null +++ b/services/web/app/templates/project_files/main.tex @@ -0,0 +1,31 @@ +\documentclass{article} +\usepackage[utf8]{inputenc} + +\title{<%= project_name %>} +\author{<%= user.first_name %> <%= user.last_name %>} +\date{<%= month %> <%= year %>} + +\usepackage{natbib} +\usepackage{graphicx} + +\begin{document} + +\maketitle + +\section{Introduction} +There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable. +There is another theory which states that this has already happened. + +\begin{figure}[h!] +\centering +\includegraphics[scale=1.7]{universe} +\caption{The Universe} +\label{fig:universe} +\end{figure} + +\section{Conclusion} +``I always thought something was fundamentally wrong with the universe'' \citep{adams1995hitchhiker} + +\bibliographystyle{plain} +\bibliography{references} +\end{document} diff --git a/services/web/app/templates/project_files/mainbasic.tex b/services/web/app/templates/project_files/mainbasic.tex new file mode 100644 index 0000000000..12198ef625 --- /dev/null +++ b/services/web/app/templates/project_files/mainbasic.tex @@ -0,0 +1,14 @@ +\documentclass{article} +\usepackage[utf8]{inputenc} + +\title{<%= project_name %>} +\author{<%= user.first_name %> <%= user.last_name %>} +\date{<%= month %> <%= year %>} + +\begin{document} + +\maketitle + +\section{Introduction} + +\end{document} diff --git a/services/web/app/templates/project_files/references.bib b/services/web/app/templates/project_files/references.bib new file mode 100644 index 0000000000..1758b10f6f --- /dev/null +++ b/services/web/app/templates/project_files/references.bib @@ -0,0 +1,8 @@ +@book{adams1995hitchhiker, + title={The Hitchhiker's Guide to the Galaxy}, + author={Adams, D.}, + isbn={9781417642595}, + url={http://books.google.com/books?id=W-xMPgAACAAJ}, + year={1995}, + publisher={San Val} +} diff --git a/services/web/app/templates/project_files/test-example-project/frog.jpg b/services/web/app/templates/project_files/test-example-project/frog.jpg new file mode 100644 index 0000000000..5b889ef3cf Binary files /dev/null and b/services/web/app/templates/project_files/test-example-project/frog.jpg differ diff --git a/services/web/app/templates/project_files/test-example-project/main.tex b/services/web/app/templates/project_files/test-example-project/main.tex new file mode 100644 index 0000000000..617005bfbf --- /dev/null +++ b/services/web/app/templates/project_files/test-example-project/main.tex @@ -0,0 +1,119 @@ +\documentclass{article} + +% Language setting +% Replace `english' with e.g. `spanish' to change the document language +\usepackage[english]{babel} + +% Set page size and margins +% Replace `letterpaper' with`a4paper' for UK/EU standard size +\usepackage[letterpaper,top=2cm,bottom=2cm,left=3cm,right=3cm,marginparwidth=1.75cm]{geometry} + +% Useful packages +\usepackage{amsmath} +\usepackage{graphicx} +\usepackage[colorlinks=true, allcolors=blue]{hyperref} + +\title{Your Paper} +\author{You} + +\begin{document} +\maketitle + +\begin{abstract} +Your abstract. +\end{abstract} + +\section{Introduction} + +Your introduction goes here! Simply start writing your document and use the Recompile button to view the updated PDF preview. Examples of commonly used commands and features are listed below, to help you get started. + +Once you're familiar with the editor, you can find various project setting in the Overleaf menu, accessed via the button in the very top left of the editor. To view tutorials, user guides, and further documentation, please visit our \href{https://www.overleaf.com/learn}{help library}, or head to our plans page to \href{https://www.overleaf.com/user/subscription/plans}{choose your plan}. + +\section{Some examples to get started} + +\subsection{How to create Sections and Subsections} + +Simply use the section and subsection commands, as in this example document! With Overleaf, all the formatting and numbering is handled automatically according to the template you've chosen. If you're using Rich Text mode, you can also create new section and subsections via the buttons in the editor toolbar. + +\subsection{How to include Figures} + +First you have to upload the image file from your computer using the upload link in the file-tree menu. Then use the includegraphics command to include it in your document. Use the figure environment and the caption command to add a number and a caption to your figure. See the code for Figure \ref{fig:frog} in this section for an example. + +Note that your figure will automatically be placed in the most appropriate place for it, given the surrounding text and taking into account other figures or tables that may be close by. You can find out more about adding images to your documents in this help article on \href{https://www.overleaf.com/learn/how-to/Including_images_on_Overleaf}{including images on Overleaf}. + +\begin{figure} +\centering +\includegraphics[width=0.3\textwidth]{frog.jpg} +\caption{\label{fig:frog}This frog was uploaded via the file-tree menu.} +\end{figure} + +\subsection{How to add Tables} + +Use the table and tabular environments for basic tables --- see Table~\ref{tab:widgets}, for example. For more information, please see this help article on \href{https://www.overleaf.com/learn/latex/tables}{tables}. + +\begin{table} +\centering +\begin{tabular}{l|r} +Item & Quantity \\\hline +Widgets & 42 \\ +Gadgets & 13 +\end{tabular} +\caption{\label{tab:widgets}An example table.} +\end{table} + +\subsection{How to add Comments and Track Changes} + +Comments can be added to your project by highlighting some text and clicking ``Add comment'' in the top right of the editor pane. To view existing comments, click on the Review menu in the toolbar above. To reply to a comment, click on the Reply button in the lower right corner of the comment. You can close the Review pane by clicking its name on the toolbar when you're done reviewing for the time being. + +Track changes are available on all our \href{https://www.overleaf.com/user/subscription/plans}{premium plans}, and can be toggled on or off using the option at the top of the Review pane. Track changes allow you to keep track of every change made to the document, along with the person making the change. + +\subsection{How to add Lists} + +You can make lists with automatic numbering \dots + +\begin{enumerate} +\item Like this, +\item and like this. +\end{enumerate} +\dots or bullet points \dots +\begin{itemize} +\item Like this, +\item and like this. +\end{itemize} + +\subsection{How to write Mathematics} + +\LaTeX{} is great at typesetting mathematics. Let $X_1, X_2, \ldots, X_n$ be a sequence of independent and identically distributed random variables with $\text{E}[X_i] = \mu$ and $\text{Var}[X_i] = \sigma^2 < \infty$, and let +\[S_n = \frac{X_1 + X_2 + \cdots + X_n}{n} + = \frac{1}{n}\sum_{i}^{n} X_i\] +denote their mean. Then as $n$ approaches infinity, the random variables $\sqrt{n}(S_n - \mu)$ converge in distribution to a normal $\mathcal{N}(0, \sigma^2)$. + + +\subsection{How to change the margins and paper size} + +Usually the template you're using will have the page margins and paper size set correctly for that use-case. For example, if you're using a journal article template provided by the journal publisher, that template will be formatted according to their requirements. In these cases, it's best not to alter the margins directly. + +If however you're using a more general template, such as this one, and would like to alter the margins, a common way to do so is via the geometry package. You can find the geometry package loaded in the preamble at the top of this example file, and if you'd like to learn more about how to adjust the settings, please visit this help article on \href{https://www.overleaf.com/learn/latex/page_size_and_margins}{page size and margins}. + +\subsection{How to change the document language and spell check settings} + +Overleaf supports many different languages, including multiple different languages within one document. + +To configure the document language, simply edit the option provided to the babel package in the preamble at the top of this example project. To learn more about the different options, please visit this help article on \href{https://www.overleaf.com/learn/latex/International_language_support}{international language support}. + +To change the spell check language, simply open the Overleaf menu at the top left of the editor window, scroll down to the spell check setting, and adjust accordingly. + +\subsection{How to add Citations and a References List} + +You can simply upload a \verb|.bib| file containing your BibTeX entries, created with a tool such as JabRef. You can then cite entries from it, like this: \cite{greenwade93}. Just remember to specify a bibliography style, as well as the filename of the \verb|.bib|. You can find a \href{https://www.overleaf.com/help/97-how-to-include-a-bibliography-using-bibtex}{video tutorial here} to learn more about BibTeX. + +If you have an \href{https://www.overleaf.com/user/subscription/plans}{upgraded account}, you can also import your Mendeley or Zotero library directly as a \verb|.bib| file, via the upload menu in the file-tree. + +\subsection{Good luck!} + +We hope you find Overleaf useful, and do take a look at our \href{https://www.overleaf.com/learn}{help library} for more tutorials and user guides! Please also let us know if you have any feedback using the Contact Us link at the bottom of the Overleaf menu --- or use the contact form at \url{https://www.overleaf.com/contact}. + +\bibliographystyle{alpha} +\bibliography{sample} + +\end{document} \ No newline at end of file diff --git a/services/web/app/templates/project_files/test-example-project/sample.bib b/services/web/app/templates/project_files/test-example-project/sample.bib new file mode 100644 index 0000000000..a0e21c740c --- /dev/null +++ b/services/web/app/templates/project_files/test-example-project/sample.bib @@ -0,0 +1,9 @@ +@article{greenwade93, + author = "George D. Greenwade", + title = "The {C}omprehensive {T}ex {A}rchive {N}etwork ({CTAN})", + year = "1993", + journal = "TUGBoat", + volume = "14", + number = "3", + pages = "342--351" +} diff --git a/services/web/app/templates/project_files/universe.jpg b/services/web/app/templates/project_files/universe.jpg new file mode 100644 index 0000000000..ed19e7d677 Binary files /dev/null and b/services/web/app/templates/project_files/universe.jpg differ diff --git a/services/web/app/views/_metadata.pug b/services/web/app/views/_metadata.pug new file mode 100644 index 0000000000..14f84c85d1 --- /dev/null +++ b/services/web/app/views/_metadata.pug @@ -0,0 +1,115 @@ + +//- Title +if (metadata && metadata.title) + title= metadata.title + ' - ' + settings.appName + ', ' + translate("online_latex_editor") + meta(name="twitter:title", content=metadata.title) + meta(name="og:title", content=metadata.title) +else if (typeof(title) == "undefined") + title= settings.appName + ', '+ translate("online_latex_editor") + meta(name="twitter:title", content=settings.appName + ', '+ translate("online_latex_editor")) + meta(name="og:title", content=settings.appName + ', '+ translate("online_latex_editor")) +else + title= translate(title) + ' - ' + settings.appName + ', ' + translate("online_latex_editor") + //- to do - not translate? + meta(name="twitter:title", content=translate(title)) + meta(name="og:title", content=translate(title)) + +//- Description +if (metadata && metadata.description) + meta(name="description" , content=metadata.description) + meta(itemprop="description" , content=metadata.description) + //-twitter and og descriptions handeled in their sections below +else + meta(name="description", content=translate("site_description")) + meta(itemprop="description", content=translate("site_description")) + +//- Image +if (metadata && metadata.image && metadata.image.fields) + //- from the CMS + meta(itemprop="image", content=metadata.image.fields.file.url) + meta(name="image", content=metadata.image.fields.file.url) +else if (metadata && metadata.image_src) + //- pages with custom metadata images, metadata.image_src is the full image URL + meta(itemprop="image", content=metadata.image_src) + meta(name="image", content=metadata.image_src) +else if (settings.overleaf) + //- the default image for Overleaf + meta(itemprop="image", content=buildImgPath('ol-brand/overleaf_og_logo.png')) + meta(name="image", content=buildImgPath('ol-brand/overleaf_og_logo.png')) +else + //- the default image for ShareLaTeX + meta(itemprop="image", content='/touch-icon-192x192.png') + meta(name="image", content='/touch-icon-192x192.png') + +//- Keywords +if (metadata && metadata.keywords) + meta(name="keywords" content=metadata.keywords) + +//- Misc +meta(itemprop="name", content=settings.appName + ", the Online LaTeX Editor") + +if (metadata && metadata.robotsNoindexNofollow) + meta(name="robots" content="noindex, nofollow") + +//- Twitter +meta(name="twitter:card", content=metadata && metadata.twitterCardType ? metadata.twitterCardType : 'summary') +if (settings.social && settings.social.twitter && settings.social.twitter.handle) + meta(name="twitter:site", content="@" + settings.social.twitter.handle) +if (metadata && metadata.twitterDescription) + meta(name="twitter:description", content=metadata.twitterDescription) +else + meta(name="twitter:description", content=translate("site_description")) +if (metadata && metadata.twitterImage && metadata.twitterImage.fields) + //- from the CMS + meta(name="twitter:image", content=metadata.twitterImage.fields.file.url) + meta(name="twitter:image:alt", content=metadata.twitterImage.fields.title) +else if (settings.overleaf) + //- the default image for Overleaf + meta(name="twitter:image", content=buildImgPath('ol-brand/overleaf_og_logo.png')) +else + //- the default image for ShareLaTeX + meta(name="twitter:image", content='/touch-icon-192x192.png') + +//- Open Graph +//- to do - add og:url +if (settings.social && settings.social.facebook && settings.social.facebook.appId) + meta(property="fb:app_id", content=settings.social.facebook.appId) + +if (metadata && metadata.openGraphDescription) + meta(property="og:description", content=metadata.openGraphDescription) +else + meta(property="og:description", content=translate("site_description")) + +if (metadata && metadata.openGraphImage && metadata.openGraphImage.fields) + //- from the CMS + meta(property="og:image", content=metadata.openGraphImage.fields.file.url) +else if (settings.overleaf) + //- the default image for Overleaf + meta(property="og:image", content=buildImgPath('ol-brand/overleaf_og_logo.png')) +else + //- the default image for ShareLaTeX + meta(property="og:image", content='/touch-icon-192x192.png') + +if (metadata && metadata.openGraphType) + meta(property="og:type", metadata.openGraphType) +else + meta(property="og:type", content="website") + +if (metadata && metadata.openGraphVideo) + //- from the CMS + meta(property="og:video", content=metadata.openGraphVideo) + +//- Viewport +if metadata && metadata.viewport + meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes") + +//- Noindex +if settings.robotsNoindex + meta(name="robots" content="noindex") + + +//- Icons +link(rel="icon", href="/favicon.ico") +link(rel="icon", sizes="192x192", href="/touch-icon-192x192.png") +link(rel="apple-touch-icon-precomposed", href="/apple-touch-icon-precomposed.png") +link(rel="mask-icon", href="/mask-favicon.svg", color="#138A07") diff --git a/services/web/app/views/_mixins/faq_search.pug b/services/web/app/views/_mixins/faq_search.pug new file mode 100644 index 0000000000..ca51cb29c2 --- /dev/null +++ b/services/web/app/views/_mixins/faq_search.pug @@ -0,0 +1,32 @@ +mixin faq_search(headerText, headerClass) + if (typeof(settings.algolia) != "undefined" && typeof(settings.algolia.indexes) != "undefined" && typeof(settings.algolia.indexes.wiki) != "undefined") + if headerText + div(class=headerClass, ng-non-bindable) #{headerText} + .wiki(ng-controller="SearchWikiController") + form.project-search.form-horizontal(role="search") + .form-group.has-feedback.has-feedback-left + .col-sm-12 + input.form-control(type='text', ng-model='searchQueryText', ng-keyup='search()', placeholder="Search help library…") + i.fa.fa-search.form-control-feedback-left(aria-hidden="true") + i.fa.fa-times.form-control-feedback( + ng-click="clearSearchText()", + style="cursor: pointer;", + ng-show="searchQueryText.length > 0" + aria-hidden="true" + ) + button.sr-only( + type="button" + ng-click="clearSearchText()", + ng-show="searchQueryText.length > 0" + ) #{translate('clear_search')} + + .row(role="region" aria-label="search results") + .col-md-12(ng-cloak) + span.sr-only(ng-show="searchQueryText.length > 0" aria-live="polite") + span(ng-if="hits_total > config_hits_per_page") Showing first {{hits.length}} results of {{hits_total}} for {{searchQueryText}} + span(ng-if="hits_total <= config_hits_per_page") {{hits.length}} results for {{searchQueryText}} + a(ng-href='{{hit.url}}',ng-repeat='hit in hits').search-result.card.card-thin + span(ng-bind-html='hit.name') + div.search-result-content(ng-show="hit.content != ''", ng-bind-html='hit.content') + .row-spaced-small.search-result.card.card-thin(ng-if="!processingSearch && searchQueryText.length > 1 && hits.length === 0") + p #{translate("no_search_results")} diff --git a/services/web/app/views/_mixins/links.pug b/services/web/app/views/_mixins/links.pug new file mode 100644 index 0000000000..24ba1d0288 --- /dev/null +++ b/services/web/app/views/_mixins/links.pug @@ -0,0 +1,118 @@ +mixin linkAdvisors(linkText, linkClass, track) + //- To Do: verify path + - var gaCategory = track && track.category ? track.category : 'All' + - var gaAction = track && track.action ? track.action : null + - var gaLabel = track && track.label ? track.label : null + - var mb = track && track.mb ? 'true' : null + - var mbSegmentation = track && track.segmentation ? track.segmentation : null + - var trigger = track && track.trigger ? track.trigger : null + a(href="/advisors" + class=linkClass ? linkClass : '' + event-tracking-ga=gaCategory + event-tracking=gaAction + event-tracking-label=gaLabel + event-tracking-trigger=trigger + event-tracking-mb=mb + event-segmentation=mbSegmentation + ) + span(ng-non-bindable) #{linkText ? linkText : 'advisor programme'} + +mixin linkBenefits(linkText, linkClass) + a(href=(settings.siteUrl ? settings.siteUrl : '') + "/for/authors" class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'benefits'} + +mixin linkBlog(linkText, linkClass, slug) + if slug + a(href=(settings.siteUrl ? settings.siteUrl : '') + "/blog/" + slug class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'blog'} + +mixin linkContact(linkText, linkClass) + a(href=(settings.siteUrl ? settings.siteUrl : '') + "/contact" class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'contact'} + +mixin linkDash(linkText, linkClass) + a(href="/project" class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'project dashboard'} + +mixin linkEducation(linkText, linkClass) + a(href=(settings.siteUrl ? settings.siteUrl : '') + "/for/edu" class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'teaching toolkit'} + +mixin linkInvite(linkText, linkClass, track) + - var gaCategory = track && track.category ? track.category : 'All' + - var gaAction = track && track.action ? track.action : null + - var gaLabel = track && track.label ? track.label : null + - var mb = track && track.mb ? 'true' : null + - var mbSegmentation = track && track.segmentation ? track.segmentation : null + - var trigger = track && track.trigger ? track.trigger : null + + a(href="/user/bonus" + class=linkClass ? linkClass : '' + event-tracking-ga=gaCategory + event-tracking=gaAction + event-tracking-label=gaLabel + event-tracking-trigger=trigger + event-tracking-mb=mb + event-segmentation=mbSegmentation + ) + span(ng-non-bindable) #{linkText ? linkText : 'invite your friends'} + +mixin linkPlansAndPricing(linkText, linkClass) + a(href="/user/subscription/plans" class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'plans and pricing'} + +mixin linkPrintNewTab(linkText, linkClass, icon, track) + - var gaCategory = track && track.category ? track.category : null + - var gaAction = track && track.action ? track.action : null + - var gaLabel = track && track.label ? track.label : null + - var mb = track && track.mb ? 'true' : null + - var mbSegmentation = track && track.segmentation ? track.segmentation : null + - var trigger = track && track.trigger ? track.trigger : null + + a(href='?media=print' + class=linkClass ? linkClass : '' + event-tracking-ga=gaCategory + event-tracking=gaAction + event-tracking-label=gaLabel + event-tracking-trigger=trigger + event-tracking-mb=mb + event-segmentation=mbSegmentation + target="_BLANK", + rel="noopener noreferrer" + ) + if icon + i(class="fa fa-print") + | + span(ng-non-bindable) #{linkText ? linkText : 'print'} + +mixin linkSignIn(linkText, linkClass, redirect) + a(href=`/login${redirect ? '?redir=' + redirect : ''}` class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'sign in'} + +mixin linkSignUp(linkText, linkClass, redirect) + a(href=`/register${redirect ? '?redir=' + redirect : ''}` class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'sign up'} + +mixin linkTweet(linkText, linkClass, tweetText, track) + //- twitter-share-button is required by twitter + - var gaCategory = track && track.category ? track.category : 'All' + - var gaAction = track && track.action ? track.action : null + - var gaLabel = track && track.label ? track.label : null + - var mb = track && track.mb ? 'true' : null + - var mbSegmentation = track && track.segmentation ? track.segmentation : null + - var trigger = track && track.trigger ? track.trigger : null + a(class="twitter-share-button " + linkClass + event-tracking-ga=gaCategory + event-tracking=gaAction + event-tracking-label=gaLabel + event-tracking-trigger=trigger + event-tracking-mb=mb + event-segmentation=mbSegmentation + href="https://twitter.com/intent/tweet?text=" + tweetText + target="_BLANK", + rel="noopener noreferrer" + ) #{linkText ? linkText : 'tweet'} + +mixin linkUniversities(linkText, linkClass) + a(href=(settings.siteUrl ? settings.siteUrl : '') + "/for/universities" class=linkClass ? linkClass : '', ng-non-bindable) + | #{linkText ? linkText : 'universities'} diff --git a/services/web/app/views/_mixins/pagination.pug b/services/web/app/views/_mixins/pagination.pug new file mode 100644 index 0000000000..717cf0d5e2 --- /dev/null +++ b/services/web/app/views/_mixins/pagination.pug @@ -0,0 +1,74 @@ +mixin pagination(pages, page_path, max_btns) + //- @param pages.current_page the current page viewed + //- @param pages.total_pages previously calculated, + //- based on total entries and entries per page + //- @param page_path the relative path, minus a trailing slash and page param + //- @param max_btns max number of buttons on either side of the current page + //- button and excludes first, prev, next, last + + if pages && pages.current_page && pages.total_pages && pages.total_pages > 1 + - var max_btns = max_btns || 4 + - var prev_page = Math.max(parseInt(pages.current_page, 10) - max_btns, 1) + - var next_page = parseInt(pages.current_page, 10) + 1 + - var next_index = 0; + - var full_page_path = page_path + "/page/" + + nav(role="navigation" aria-label="Pagination Navigation") + ul.pagination + if pages.current_page > 1 + li + a( + aria-label="Go to first page" + href=page_path + ) « First + li + a( + aria-label="Go to previous page" + href=full_page_path + (parseInt(pages.current_page, 10) - 1) + rel="prev" + ) ‹ Prev + + if pages.current_page - max_btns > 1 + li + span … + + while prev_page < pages.current_page + li + a( + aria-label="Go to page " + prev_page + href=full_page_path + prev_page + ) #{prev_page} + - prev_page++ + + li(class="active") + span( + aria-label="Current Page, Page " + pages.current_page + aria-current="true" + ) #{pages.current_page} + + if pages.current_page < pages.total_pages + while next_page <= pages.total_pages && next_index < max_btns + li + a( + aria-label="Go to page " + next_page + href=full_page_path + next_page + ) #{next_page} + - next_page++ + - next_index++ + + if next_page <= pages.total_pages + li + span … + + li + a( + aria-label="Go to next page" + href=full_page_path + (parseInt(pages.current_page, 10) + 1) + rel="next" + ) Next › + + li + a( + aria-label="Go to last page" + href=full_page_path + pages.total_pages + ) Last » diff --git a/services/web/app/views/_mixins/reconfirm_affiliation.pug b/services/web/app/views/_mixins/reconfirm_affiliation.pug new file mode 100644 index 0000000000..7f9443e231 --- /dev/null +++ b/services/web/app/views/_mixins/reconfirm_affiliation.pug @@ -0,0 +1,38 @@ +mixin reconfirmAffiliationNotification(location) + .reconfirm-notification(ng-controller="UserAffiliationsReconfirmController") + div(ng-if="!reconfirm[userEmail.email].reconfirmationSent" style="width:100%;") + i.fa.fa-warning + + button.btn-reconfirm.btn.btn-sm.btn-info( + data-location=location + ng-if="!ui.sentReconfirmation" + ng-click="requestReconfirmation($event, userEmail)" + ng-disabled="ui.isMakingRequest" + ) #{translate("confirm_affiliation")} + + | !{translate("are_you_still_at", {institutionName: '{{userEmail.affiliation.institution.name}}'}, ['strong'])} + + if location == '/user/settings' + | !{translate('please_reconfirm_institutional_email', {}, [{ name: 'span' }])} + span(ng-if="userEmail.default") #{translate('need_to_add_new_primary_before_remove')} + else + | !{translate("please_reconfirm_institutional_email", {}, [{name: 'a', attrs: {href: '/user/settings?remove={{userEmail.email}}' }}])} + + | + a(href="/learn/how-to/Institutional_Email_Reconfirmation") #{translate("learn_more")} + + div(ng-if="reconfirm[userEmail.email].reconfirmationSent") + | !{translate("please_check_your_inbox_to_confirm", {institutionName: '{{userEmail.affiliation.institution.name}}'}, ['strong'])} + | + button( + class="btn-inline-link" + ng-click="requestReconfirmation($event, userEmail)" + ng-disabled="ui.isMakingRequest" + ) #{translate('resend_confirmation_email')} + +mixin reconfirmedAffiliationNotification() + .alert.alert-info + .reconfirm-notification + div(style="width:100%;") + //- extra div for flex styling + | !{translate("your_affiliation_is_confirmed", {institutionName: '{{userEmail.affiliation.institution.name}}'}, ['strong'])} #{translate('thank_you_exclamation')} diff --git a/services/web/app/views/admin/index.pug b/services/web/app/views/admin/index.pug new file mode 100644 index 0000000000..a2dd4a8d1b --- /dev/null +++ b/services/web/app/views/admin/index.pug @@ -0,0 +1,86 @@ +extends ../layout + +block content + .content.content-alt + .container + .row + .col-xs-12 + .card + .page-header + h1 Admin Panel + tabset(bookmarkable-tabset ng-cloak) + tab(heading="System Messages" bookmarkable-tab="system-messages") + each message in systemMessages + .alert.alert-info.row-spaced(ng-non-bindable) #{message.content} + hr + form(method='post', action='/admin/messages') + input(name="_csrf", type="hidden", value=csrfToken) + .form-group + label(for="content") + input.form-control(name="content", type="text", placeholder="Message…", required) + button.btn.btn-primary(type="submit") Post Message + hr + form(method='post', action='/admin/messages/clear') + input(name="_csrf", type="hidden", value=csrfToken) + button.btn.btn-danger(type="submit") Clear all messages + + + tab(heading="Open Sockets" bookmarkable-tab="open-sockets") + .row-spaced + ul + each agents, url in openSockets + li(ng-non-bindable) #{url} - total : #{agents.length} + ul + each agent in agents + li(ng-non-bindable) #{agent} + + tab(heading="Open/Close Editor" bookmarkable-tab="open-close-editor") + if hasFeature('saas') + | The "Open/Close Editor" feature is not available in SAAS. + else + .row-spaced + form(method='post',action='/admin/closeEditor') + input(name="_csrf", type="hidden", value=csrfToken) + button.btn.btn-danger(type="submit") Close Editor + p.small Will stop anyone opening the editor. Will NOT disconnect already connected users. + + .row-spaced + form(method='post',action='/admin/disconnectAllUsers') + input(name="_csrf", type="hidden", value=csrfToken) + button.btn.btn-danger(type="submit") Disconnect all users + p.small Will force disconnect all users with the editor open. Make sure to close the editor first to avoid them reconnecting. + + .row-spaced + form(method='post',action='/admin/openEditor') + input(name="_csrf", type="hidden", value=csrfToken) + button.btn.btn-danger(type="submit") Reopen Editor + p.small Will reopen the editor after closing. + + if hasFeature('saas') + tab(heading="TPDS/Dropbox Management" bookmarkable-tab="tpds") + h3 Flush project to TPDS + .row + form.col-xs-6(method='post',action='/admin/flushProjectToTpds') + input(name="_csrf", type="hidden", value=csrfToken) + .form-group + label(for='project_id') project_id + input.form-control(type='text', name='project_id', placeholder='project_id', required) + .form-group + button.btn-primary.btn(type='submit') Flush + hr + h3 Poll Dropbox for user + .row + form.col-xs-6(method='post',action='/admin/pollDropboxForUser') + input(name="_csrf", type="hidden", value=csrfToken) + .form-group + label(for='user_id') user_id + input.form-control(type='text', name='user_id', placeholder='user_id', required) + .form-group + button.btn-primary.btn(type='submit') Poll + + tab(heading="Advanced" bookmarkable-tab="advanced") + .row-spaced + form(method='post',action='/admin/unregisterServiceWorker') + input(name="_csrf", type="hidden", value=csrfToken) + button.btn.btn-danger(type="submit") Unregister service worker + p.small Will force service worker reload for all users with the editor open. diff --git a/services/web/app/views/admin/register.pug b/services/web/app/views/admin/register.pug new file mode 100644 index 0000000000..4078c49484 --- /dev/null +++ b/services/web/app/views/admin/register.pug @@ -0,0 +1,40 @@ +extends ../layout + +block content + .content.content-alt + .container + .row + .col-md-12 + .card(ng-controller="RegisterUsersController") + .page-header + h1 Register New Users + form.form + .row + .col-md-4.col-xs-8 + input.form-control( + name="email", + type="text", + placeholder="jane@example.com, joe@example.com", + ng-model="inputs.emails", + on-enter="registerUsers()" + ) + .col-md-8.col-xs-4 + button.btn.btn-primary(ng-click="registerUsers()") #{translate("register")} + + .row-spaced(ng-show="error").ng-cloak.text-danger + p Sorry, an error occured + + .row-spaced(ng-show="users.length > 0").ng-cloak.text-success + p We've sent out welcome emails to the registered users. + p You can also manually send them URLs below to allow them to reset their password and log in for the first time. + p (Password reset tokens will expire after one week and the user will need registering again). + + hr(ng-show="users.length > 0").ng-cloak + table(ng-show="users.length > 0").table.table-striped.ng-cloak + tr + th #{translate("email")} + th Set Password Url + tr(ng-repeat="user in users") + td {{ user.email }} + td(style="word-break: break-all;") {{ user.setNewPasswordUrl }} + \ No newline at end of file diff --git a/services/web/app/views/beta_program/opt_in.pug b/services/web/app/views/beta_program/opt_in.pug new file mode 100644 index 0000000000..3e08d27643 --- /dev/null +++ b/services/web/app/views/beta_program/opt_in.pug @@ -0,0 +1,56 @@ +extends ../layout + +block content + main.content.content-alt#main-content + .container.beta-opt-in-wrapper + .row + .col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + .card + .page-header.text-centered + h1 + | #{translate("sharelatex_beta_program")} + .beta-opt-in + .container-fluid + .row + .col-md-12 + if user.betaProgram + p #{translate("beta_program_already_participating")}. + p #{translate("thank_you_for_being_part_of_our_beta_program")}. + else + p #{translate("beta_program_benefits")} + + p #[strong How it works:] + ul + li #{translate("beta_program_badge_description")} #[span(aria-label=translate("beta_feature_badge") role="img").beta-badge] + li #{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback")}. + li #{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey")}. + li #{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page")}. + + .row.text-centered + .col-md-12 + if user.betaProgram + form(id="beta-program-opt-out", method="post", action="/beta/opt-out", novalidate) + input(type="hidden", name="_csrf", value=csrfToken) + .form-group + a( + href="https://forms.gle/CFEsmvZQTAwHCd3X9" + target="_blank" + rel="noopener noreferrer" + ).btn.btn-primary.btn-lg #{translate("give_feedback")} + .form-group + button.btn.btn-info.btn-sm( + type="submit" + ) + span #{translate("beta_program_opt_out_action")} + .form-group + a(href="/project").btn.btn-link.btn-sm #{translate("back_to_your_projects")} + else + form(id="beta-program-opt-in", method="post", action="/beta/opt-in", novalidate) + input(type="hidden", name="_csrf", value=csrfToken) + .form-group + button.btn.btn-primary( + type="submit" + ) + span #{translate("beta_program_opt_in_action")} + .form-group + a(href="/project").btn.btn-link.btn-sm #{translate("back_to_your_projects")} diff --git a/services/web/app/views/blog/blog_holder.pug b/services/web/app/views/blog/blog_holder.pug new file mode 100644 index 0000000000..d9a89d4c4b --- /dev/null +++ b/services/web/app/views/blog/blog_holder.pug @@ -0,0 +1,6 @@ +extends ../layout + +block content + .content.content-alt + .blog + | !{content} \ No newline at end of file diff --git a/services/web/app/views/general/400.pug b/services/web/app/views/general/400.pug new file mode 100644 index 0000000000..74f0182c33 --- /dev/null +++ b/services/web/app/views/general/400.pug @@ -0,0 +1,26 @@ +extends ../layout/layout-no-js + +block vars + - metadata = { title: 'Something went wrong', viewport: true } + +block body + body.full-height + main.content.content-alt.full-height#main-content + .container.full-height + .error-container.full-height + .error-details + p.error-status I'm sorry, Dave. I'm afraid I can't do that. + p.error-description There was a problem with your latest request + if(message) + |: #{message} + |. + br + | Please go back and try again. + p.error-description + | If the problem persists, please contact us at + | + a(href="mailto:" + settings.adminEmail) #{settings.adminEmail} + | . + a.error-btn(href="javascript:history.back()") Back + | + a.btn.btn-default(href="/") Home diff --git a/services/web/app/views/general/404.pug b/services/web/app/views/general/404.pug new file mode 100644 index 0000000000..aa749166af --- /dev/null +++ b/services/web/app/views/general/404.pug @@ -0,0 +1,10 @@ +extends ../layout + +block content + main.content.content-alt#main-content + .container + .error-container + .error-details + p.error-status Not found + p.error-description #{translate("cant_find_page")} + a.error-btn(href="/") Home diff --git a/services/web/app/views/general/500.pug b/services/web/app/views/general/500.pug new file mode 100644 index 0000000000..a2f66d0a4f --- /dev/null +++ b/services/web/app/views/general/500.pug @@ -0,0 +1,22 @@ +extends ../layout/layout-no-js + +block vars + - metadata = { title: 'Something went wrong', viewport: true } + +block body + body.full-height + main.content.content-alt.full-height#main-content + .container.full-height + .error-container.full-height + .error-details + p.error-status Something went wrong, sorry. + p.error-description Our staff are probably looking into this, but if it continues, please check our status page at + | + | + a(href="http://" + settings.statusPageUrl) #{settings.statusPageUrl} + | + | or contact us at + | + a(href="mailto:" + settings.adminEmail) #{settings.adminEmail} + | . + a.error-btn(href="/") Home diff --git a/services/web/app/views/general/account-merge-error.pug b/services/web/app/views/general/account-merge-error.pug new file mode 100644 index 0000000000..44ee6b1511 --- /dev/null +++ b/services/web/app/views/general/account-merge-error.pug @@ -0,0 +1,11 @@ +extends ../layout + +block content + main.content.content-alt#main-content + .container + .row + .col-md-6.col-md-offset-3 + .card + .page-header + h1 Account Access Error + p.text-danger Sorry, an error occurred accessing your account. Please #[a(href="" ng-controller="ContactModal" ng-click="contactUsModal()") contact support] and provide any email addresses that you have used to sign in to Overleaf and/or ShareLaTeX for assistance. diff --git a/services/web/app/views/general/closed.pug b/services/web/app/views/general/closed.pug new file mode 100644 index 0000000000..ee56d89097 --- /dev/null +++ b/services/web/app/views/general/closed.pug @@ -0,0 +1,19 @@ +extends ../layout + +block content + main.content#main-content + .container + .row + .col-md-8.col-md-offset-2.text-center + .page-header + h1 Maintenance + p(ng-non-bindable) + if settings.statusPageUrl + | #{settings.appName} is currently down for maintenance. + | Please check our #[a(href='http://' + settings.statusPageUrl) status page] + | for updates. + else + | #{settings.appName} is currently down for maintenance. + | We should be back within minutes, but if not, or you have + | an urgent request, please contact us at + | #{settings.adminEmail} diff --git a/services/web/app/views/general/post-gateway.pug b/services/web/app/views/general/post-gateway.pug new file mode 100644 index 0000000000..8be63d516d --- /dev/null +++ b/services/web/app/views/general/post-gateway.pug @@ -0,0 +1,21 @@ +extends ../layout + +block vars + - var suppressNavbar = true + - var suppressFooter = true + - var suppressSkipToContent = true + +block content + script(type="template", id="gateway-data")!= StringHelper.stringifyJsonForScript({ params: form_data }) + + .content.content-alt + .container + .row + .col-md-6.col-md-offset-3 + .card + p.text-center #{translate('processing_your_request')} + + form( + ng-controller="PostGatewayController", + ng-init="handleGateway();" + id='gateway' method='POST') diff --git a/services/web/app/views/general/unsupported-browser.pug b/services/web/app/views/general/unsupported-browser.pug new file mode 100644 index 0000000000..1d36d30fdf --- /dev/null +++ b/services/web/app/views/general/unsupported-browser.pug @@ -0,0 +1,22 @@ +extends ../layout/layout-no-js + +block vars + - metadata = { title: 'Unsupported browser', viewport: true } + +block body + body.full-height + main.content.content-alt.full-height#main-content + .container.full-height + .error-container.full-height + .error-details + h1.error-status Unsupported Browser + p.error-description + | Sorry, we don't support your browser anymore. Find out more about #[a(href="https://www.overleaf.com/learn/how-to/What_browsers_do_you_support") what browsers we support]. + br + | If you think you're seeing this message in error, please #[a(href="/contact") let us know]. + + if fromURL + p + | URL: + | + a(href=fromURL) #{fromURL} diff --git a/services/web/app/views/layout.pug b/services/web/app/views/layout.pug new file mode 100644 index 0000000000..aa73207736 --- /dev/null +++ b/services/web/app/views/layout.pug @@ -0,0 +1,142 @@ + +doctype html +html( + lang=(currentLngCode || 'en') +) + - metadata = metadata || {} + + block vars + + head + include ./_metadata.pug + + if (typeof(gaExperiments) != "undefined") + |!{gaExperiments} + + //- Stylesheet + link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation)), id="main-stylesheet") + link(rel='stylesheet', href=buildStylesheetPath("libraries.css")) + + block _headLinks + + if settings.i18n.subdomainLang + each subdomainDetails in settings.i18n.subdomainLang + if !subdomainDetails.hide + link(rel="alternate", href=subdomainDetails.url+currentUrl, hreflang=subdomainDetails.lngCode) + + //- Scripts + + //- Google Analytics + if (typeof(gaToken) != "undefined") + script(type="text/javascript", nonce=scriptNonce). + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + script(type="text/javascript", nonce=scriptNonce). + ga('create', '#{gaToken}', '#{settings.cookieDomain.replace(/^\./, "")}'); + ga('set', 'anonymizeIp', true); + ga('send', 'pageview'); + + try { + ga.isBlocked = localStorage.getItem('gaBlocked') === 'true' + if (!ga.isBlocked) { + window.addEventListener('load', function () { + setTimeout(function () { + if (!ga.loaded) localStorage.setItem('gaBlocked', 'true') + }, 4000) + }) + } + } catch (e) {} + if gaOptimize === true && typeof(gaOptimizeId) != "undefined" + //- Anti-flicker snippet + style(type='text/css') .async-hide { opacity: 0 !important} + script(type="text/javascript", nonce=scriptNonce). + if (!ga.isBlocked) { + ga('require', '#{gaOptimizeId}'); + ga('send', 'event', 'pageview', document.title.substring(0, 499), window.location.href.substring(0, 499)); + (function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; + h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; + (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; + })(window,document.documentElement,'async-hide','dataLayer',4000, + {'#{gaOptimizeId}':true}); + } + + else + script(type="text/javascript", nonce=scriptNonce). + window.ga = function() { console.log("would send to GA", arguments) }; + + block meta + meta(name="ol-csrfToken" content=csrfToken) + //- Configure dynamically loaded assets (via webpack) to be downloaded from CDN + //- See: https://webpack.js.org/guides/public-path/#on-the-fly + meta(name="ol-baseAssetPath" content=buildBaseAssetPath()) + + meta(name="ol-usersEmail" content=getUserEmail()) + meta(name="ol-sharelatex" data-type="json" content={ + siteUrl: settings.siteUrl, + wsUrl, + }) + meta(name="ol-ab" data-type="json" content={}) + meta(name="ol-user_id" content=getLoggedInUserId()) + //- Internationalisation settings + meta(name="ol-i18n" data-type="json" content={ + currentLangCode: currentLngCode + }) + //- Expose some settings globally to the frontend + meta(name="ol-ExposedSettings" data-type="json" content=ExposedSettings) + + if (typeof(settings.algolia) != "undefined") + meta(name="ol-algolia" data-type="json" content={ + appId: settings.algolia.app_id, + apiKey: settings.algolia.read_only_api_key, + indexes: settings.algolia.indexes + }) + + if (typeof(settings.templates) != "undefined") + meta(name="ol-sharelatex.templates" data-type="json" content={ + user_id : settings.templates.user_id, + cdnDomain : settings.templates.cdnDomain, + indexName : settings.templates.indexName + }) + + block head-scripts + + + body(ng-csp=(cspEnabled ? "no-unsafe-eval" : false)) + if(settings.recaptcha && settings.recaptcha.siteKeyV3) + script(type="text/javascript", nonce=scriptNonce, src="https://www.recaptcha.net/recaptcha/api.js?render="+settings.recaptcha.siteKeyV3) + + if (typeof(suppressSkipToContent) == "undefined") + a(class="skip-to-content" href="#main-content") #{translate('skip_to_content')} + + if (typeof(suppressNavbar) == "undefined") + include layout/navbar + + block content + + if (typeof(suppressFooter) == "undefined") + include layout/footer + + != moduleIncludes("contactModal", locals) + + block foot-scripts + script(type="text/javascript", nonce=scriptNonce, src=buildJsPath('libraries.js')) + script(type="text/javascript", nonce=scriptNonce, src=buildJsPath('main.js')) + script(type="text/javascript", nonce=scriptNonce). + //- Look for bundle + var cdnBlocked = typeof Frontend === 'undefined' + //- Prevent loops + var noCdnAlreadyInUrl = window.location.href.indexOf("nocdn=true") != -1 + if (cdnBlocked && !noCdnAlreadyInUrl && navigator.userAgent.indexOf("Googlebot") == -1) { + //- Set query param, server will not set CDN url + window.location.search += "&nocdn=true"; + } + if hasFeature('saas') + script(type="text/javascript", nonce=scriptNonce). + //- Test for CDN availability and report to sentry if loading failed + var cdnLoadTest = document.createElement('img') + cdnLoadTest.addEventListener('error', function () { + throw new Error('CDN test image load error (cdn.overleaf.net)') + }) + cdnLoadTest.src = 'https://cdn.overleaf.net/img/1p.gif' diff --git a/services/web/app/views/layout/footer.pug b/services/web/app/views/layout/footer.pug new file mode 100644 index 0000000000..518e3e1caf --- /dev/null +++ b/services/web/app/views/layout/footer.pug @@ -0,0 +1,44 @@ + + +footer.site-footer + .site-footer-content.hidden-print + .row + ul.col-md-9 + + if Object.keys(settings.i18n.subdomainLang).length > 1 + li.dropdown.dropup.subdued(dropdown) + a.dropdown-toggle( + href="#", + dropdown-toggle, + data-toggle="dropdown", + aria-haspopup="true", + aria-expanded="false", + aria-label="Select " + translate('language') + tooltip=translate('language') + ) + figure(class="sprite-icon sprite-icon-lang sprite-icon-"+currentLngCode alt=translate(currentLngCode)) + + ul.dropdown-menu(role="menu") + li.dropdown-header #{translate("language")} + each subdomainDetails, subdomain in settings.i18n.subdomainLang + if !subdomainDetails.hide + li.lngOption + a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams) + figure(class="sprite-icon sprite-icon-lang sprite-icon-"+subdomainDetails.lngCode alt=translate(subdomainDetails.lngCode)) + | #{translate(subdomainDetails.lngCode)} + //- img(src="/img/flags/24/.png") + each item in nav.left_footer + li + if item.url + a(href=item.url, class=item.class) !{translate(item.text)} + else + | !{item.text} + + ul.col-md-3.text-right + + each item in nav.right_footer + li(ng-non-bindable) + if item.url + a(href=item.url, class=item.class, aria-label=item.label) !{item.text} + else + | !{item.text} diff --git a/services/web/app/views/layout/layout-no-js.pug b/services/web/app/views/layout/layout-no-js.pug new file mode 100644 index 0000000000..c86721a810 --- /dev/null +++ b/services/web/app/views/layout/layout-no-js.pug @@ -0,0 +1,18 @@ +doctype html +html(lang="en") + + - metadata = metadata || {} + block vars + + head + if (metadata && metadata.title) + title= metadata.title + if metadata && metadata.viewport + meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes") + + link(rel="icon", href="/favicon.ico") + + if buildCssPath + link(rel="stylesheet", href=buildCssPath()) + +block body diff --git a/services/web/app/views/layout/navbar.pug b/services/web/app/views/layout/navbar.pug new file mode 100644 index 0000000000..67215f06b3 --- /dev/null +++ b/services/web/app/views/layout/navbar.pug @@ -0,0 +1,96 @@ +nav.navbar.navbar-default.navbar-main + .container-fluid + .navbar-header + button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}", aria-label="Toggle " + translate('navigation')) + i.fa.fa-bars(aria-hidden="true") + if settings.nav.custom_logo + a(href='/', aria-label=settings.appName, style='background-image:url("'+settings.nav.custom_logo+'")').navbar-brand + else if (nav.title) + a(href='/', aria-label=settings.appName, ng-non-bindable).navbar-title #{nav.title} + else + a(href='/', aria-label=settings.appName).navbar-brand + + .navbar-collapse.collapse(collapse="navCollapsed") + + ul.nav.navbar-nav.navbar-right + if (getSessionUser() && getSessionUser().isAdmin) + li.dropdown(class="subdued", dropdown) + a.dropdown-toggle(href, dropdown-toggle) + | Admin + b.caret + ul.dropdown-menu + li + a(href="/admin") Manage Site + li + a(href="/admin/user") Manage Users + + + // loop over header_extras + each item in nav.header_extras + - + if ((item.only_when_logged_in && getSessionUser()) + || (item.only_when_logged_out && (!getSessionUser())) + || (!item.only_when_logged_out && !item.only_when_logged_in && !item.only_content_pages) + || (item.only_content_pages && (typeof(suppressNavContentLinks) == "undefined" || !suppressNavContentLinks)) + ){ + var showNavItem = true + } else { + var showNavItem = false + } + + if showNavItem + if item.dropdown + li.dropdown(class=item.class, dropdown) + a.dropdown-toggle(href, dropdown-toggle) + | !{translate(item.text)} + b.caret + ul.dropdown-menu + each child in item.dropdown + if child.divider + li.divider + else + li + if child.url + a(href=child.url, class=child.class) !{translate(child.text)} + else + | !{translate(child.text)} + else + li(class=item.class) + if item.url + a(href=item.url, class=item.class) !{translate(item.text)} + else + | !{translate(item.text)} + + // logged out + if !getSessionUser() + // register link + if hasFeature('registration-page') + li + a(href="/register") #{translate('register')} + + // login link + li + a(href="/login") #{translate('log_in')} + + // projects link and account menu + if getSessionUser() + li + a(href="/project") #{translate('Projects')} + li.dropdown(dropdown) + a.dropdown-toggle(href, dropdown-toggle) + | #{translate('Account')} + b.caret + ul.dropdown-menu + li + div.subdued {{ usersEmail }} + li.divider.hidden-xs.hidden-sm + li + a(href="/user/settings") #{translate('Account Settings')} + if nav.showSubscriptionLink + li + a(href="/user/subscription") #{translate('subscription')} + li.divider.hidden-xs.hidden-sm + li + form(method="POST" action="/logout") + input(name='_csrf', type='hidden', value=csrfToken) + button.btn-link.text-left.dropdown-menu-button #{translate('log_out')} diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug new file mode 100644 index 0000000000..36b87d1bc7 --- /dev/null +++ b/services/web/app/views/project/editor.pug @@ -0,0 +1,204 @@ +extends ../layout + +block vars + - var suppressNavbar = true + - var suppressFooter = true + - var suppressSkipToContent = true + - metadata.robotsNoindexNofollow = true + +block _headLinks + link(rel='stylesheet', href=buildStylesheetPath("ide.css")) + +block content + .editor(ng-controller="IdeController").full-size + //- required by react2angular-shared-context, must be rendered as a top level component + shared-context-react() + .loading-screen(ng-if="state.loading") + .loading-screen-brand-container + .loading-screen-brand( + style="height: 20%;" + ng-style="{ 'height': state.load_progress + '%' }" + ) + h3.loading-screen-label(ng-if="!state.error") #{translate("loading")} + span.loading-screen-ellip . + span.loading-screen-ellip . + span.loading-screen-ellip . + p.loading-screen-error(ng-if="state.error").ng-cloak + span(ng-bind-html="state.error") + + .global-alerts(ng-cloak ng-hide="editor.error_state") + .alert.alert-danger.small(ng-if="connection.forced_disconnect") + strong #{translate("disconnected")} + + .alert.alert-warning.small(ng-if="connection.reconnection_countdown") + strong #{translate("lost_connection")}. + | #{translate("reconnecting_in_x_secs", {seconds:"{{ connection.reconnection_countdown }}"})}. + a#try-reconnect-now-button.alert-link-as-btn.pull-right(href, ng-click="tryReconnectNow()") #{translate("try_now")} + + .alert.alert-warning.small(ng-if="connection.reconnecting && connection.stillReconnecting") + strong #{translate("reconnecting")}… + + .alert.alert-warning.small(ng-if="sync_tex_error") + strong #{translate("synctex_failed")}. + a#synctex-more-info-button.alert-link-as-btn.pull-right( + href="/learn/how-to/SyncTeX_Errors" + target="_blank" + ) #{translate("more_info")} + + .alert.alert-warning.small(ng-if="connection.inactive_disconnect") + strong #{translate("editor_disconected_click_to_reconnect")} + + .alert.alert-warning.small(ng-if="connection.debug") {{ connection.state }} + + .div(ng-controller="SavingNotificationController") + .alert.alert-warning.small(ng-repeat="(doc_id, state) in docSavingStatus" ng-if="state.unsavedSeconds > 8") #{translate("saving_notification_with_seconds", {docname:"{{ state.doc.name }}", seconds:"{{ state.unsavedSeconds }}"})} + + .div(ng-controller="SystemMessagesController") + .alert.alert-warning.system-message( + ng-repeat="message in messages" + ng-controller="SystemMessageController" + ng-hide="hidden" + ) + button(ng-hide="protected",ng-click="hide()").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + .system-message-content(ng-bind-html="htmlContent") + + include ./editor/left-menu + + #chat-wrapper.full-size( + layout="chat", + spacing-open="{{ui.chatResizerSizeOpen}}", + spacing-closed="{{ui.chatResizerSizeClosed}}", + initial-size-east="250", + init-closed-east="true", + open-east="ui.chatOpen", + ng-hide="state.loading", + ng-cloak + ) + .ui-layout-center + if showNewNavigationUI + include ./editor/header-react + else + include ./editor/header + + != moduleIncludes("publish:body", locals) + + include ./editor/history/toolbarV2.pug + + main#ide-body( + ng-cloak, + role="main", + ng-class="{ 'ide-history-open' : (ui.view == 'history' && history.isV2) }", + layout="main", + ng-hide="state.loading", + resize-on="layout:chat:resize,history:toggle", + minimum-restore-size-west="130" + custom-toggler-pane=hasFeature('custom-togglers') ? "west" : false + custom-toggler-msg-when-open=hasFeature('custom-togglers') ? translate("tooltip_hide_filetree") : false + custom-toggler-msg-when-closed=hasFeature('custom-togglers') ? translate("tooltip_show_filetree") : false + ) + .ui-layout-west + include ./editor/file-tree-react + include ./editor/file-tree-history + include ./editor/history/fileTreeV2 + + .ui-layout-center + include ./editor/editor + + if showNewFileViewUI + include ./editor/file-view + else + include ./editor/binary-file + include ./editor/history + + if !isRestrictedTokenMember + .ui-layout-east + aside.chat( + ng-controller="ReactChatController" + ) + chat() + + script(type="text/ng-template", id="genericMessageModalTemplate") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="done()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 {{ title }} + .modal-body(ng-bind-html="message") + .modal-footer + button.btn.btn-info(ng-click="done()") #{translate("ok")} + + script(type="text/ng-template", id="outOfSyncModalTemplate") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="done()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 {{ title }} + .modal-body(ng-bind-html="message") + + .modal-body + button.btn.btn-info( + ng-init="showFileContents = false" + ng-click="showFileContents = !showFileContents" + ) + | {{showFileContents ? "Hide" : "Show"}} Local File Contents + .text-preview(ng-show="showFileContents") + textarea.scroll-container(readonly="readonly" rows="{{editorContentRows}}") + | {{editorContent}} + + .modal-footer + button.btn.btn-info(ng-click="done()") #{translate("reload_editor")} + + script(type="text/ng-template", id="lockEditorModalTemplate") + .modal-header + h3 {{ title }} + .modal-body(ng-bind-html="message") + +block append meta + meta(name="ol-useV2History" data-type="boolean" content=useV2History) + meta(name="ol-project_id" content=project_id) + meta(name="ol-userSettings" data-type="json" content=userSettings) + meta(name="ol-user" data-type="json" content=user) + meta(name="ol-anonymous" data-type="boolean" content=anonymous) + meta(name="ol-brandVariation" data-type="json" content=brandVariation) + meta(name="ol-anonymousAccessToken" content=anonymousAccessToken) + meta(name="ol-isTokenMember" data-type="boolean" content=isTokenMember) + meta(name="ol-isRestrictedTokenMember" data-type="boolean" content=isRestrictedTokenMember) + meta(name="ol-maxDocLength" data-type="json" content=maxDocLength) + meta(name="ol-wikiEnabled" data-type="boolean" content=!!(settings.apis.wiki && settings.apis.wiki.url)) + meta(name="ol-gitBridgePublicBaseUrl" content=gitBridgePublicBaseUrl) + //- Set base path for Ace scripts loaded on demand/workers and don't use cdn + meta(name="ol-aceBasePath" content="/js/" + lib('ace')) + //- Set path for PDFjs CMaps + meta(name="ol-pdfCMapsPath" content="/js/cmaps/") + //- enable doc hash checking for all projects + //- used in public/js/libs/sharejs.js + meta(name="ol-useShareJsHash" data-type="boolean" content=true) + meta(name="ol-wsRetryHandshake" data-type="json" content=settings.wsRetryHandshake) + meta(name="ol-showNewLogsUI" data-type="boolean" content=showNewLogsUI) + meta(name="ol-logsUISubvariant" content=logsUISubvariant) + meta(name="ol-showSymbolPalette" data-type="boolean" content=showSymbolPalette) + meta(name="ol-enablePdfCaching" data-type="boolean" content=enablePdfCaching) + meta(name="ol-trackPdfDownload" data-type="boolean" content=trackPdfDownload) + meta(name="ol-resetServiceWorker" data-type="boolean" content=resetServiceWorker) + + - var fileActionI18n = ['edited', 'renamed', 'created', 'deleted'].reduce((acc, i) => {acc[i] = translate('file_action_' + i); return acc}, {}) + meta(name="ol-fileActionI18n" data-type="json" content=fileActionI18n) + + if (settings.overleaf != null) + meta(name="ol-overallThemes" data-type="json" content=overallThemes) + +block foot-scripts + script(type="text/javascript", nonce=scriptNonce, src=(wsUrl || '/socket.io') + '/socket.io.js') + script(type="text/javascript", nonce=scriptNonce, src=mathJaxPath) + script(type="text/javascript", nonce=scriptNonce, src=buildJsPath('libraries.js')) + script(type="text/javascript", nonce=scriptNonce, src=buildJsPath('ide.js')) diff --git a/services/web/app/views/project/editor/binary-file-header.pug b/services/web/app/views/project/editor/binary-file-header.pug new file mode 100644 index 0000000000..3b26632191 --- /dev/null +++ b/services/web/app/views/project/editor/binary-file-header.pug @@ -0,0 +1,67 @@ +div.binary-file-header + // Linked Files: URL + div(ng-if="openFile.linkedFileData.provider == 'url'") + p + i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon + | Imported from + | + a(ng-href='{{openFile.linkedFileData.url}}') {{ displayUrl(openFile.linkedFileData.url) }} + | + | at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }} + + // Linked Files: Project File + div(ng-if="openFile.linkedFileData.provider == 'project_file'") + p + i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon + | Imported from + | + a(ng-if='!openFile.linkedFileData.v1_source_doc_id' + ng-href='/project/{{openFile.linkedFileData.source_project_id}}' target="_blank") + | Another project + span(ng-if='openFile.linkedFileData.v1_source_doc_id') + | Another project + | /{{ openFile.linkedFileData.source_entity_path.slice(1) }}, + | + | at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }} + + // Linked Files: Project Output File + div(ng-if="openFile.linkedFileData.provider == 'project_output_file'") + p + i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon + | Imported from the output of + | + a(ng-if='!openFile.linkedFileData.v1_source_doc_id' + ng-href='/project/{{openFile.linkedFileData.source_project_id}}' target="_blank") + | Another project + span(ng-if='openFile.linkedFileData.v1_source_doc_id') + | Another project + | : {{ openFile.linkedFileData.source_output_file_path }}, + | + | at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }} + + != moduleIncludes("binaryFile:linkedFileInfo", locals) + + // Bottom Controls + span(ng-if="openFile.linkedFileData.provider") + button.btn.btn-success( + href, ng-click="refreshFile(openFile)", + ng-disabled="refreshing" + ) + i.fa.fa-fw.fa-refresh(ng-class={'fa-spin': refreshing}) + | + span(ng-show="!refreshing") Refresh + span(ng-show="refreshing") Refreshing… + | + a.btn.btn-info( + ng-href="/project/{{ project_id }}/file/{{ openFile.id }}" + ) + i.fa.fa-fw.fa-download + | + | #{translate("download")} + + // Refresh Error + div(ng-if="refreshError").row + br + .alert.alert-danger.col-md-6.col-md-offset-3 + | Error: {{ refreshError}} + != moduleIncludes("binaryFile:linkedFileRefreshError", locals) diff --git a/services/web/app/views/project/editor/binary-file.pug b/services/web/app/views/project/editor/binary-file.pug new file mode 100644 index 0000000000..ce4147c083 --- /dev/null +++ b/services/web/app/views/project/editor/binary-file.pug @@ -0,0 +1,41 @@ +div.binary-file.full-size( + ng-controller="BinaryFileController" + ng-show="ui.view == 'file'" + ng-if="openFile" +) + + include ./binary-file-header + + img( + ng-show="!failedLoad" + ng-src="/project/{{ project_id }}/file/{{ openFile.id }}" + ng-if="isImageFile()" + ng-class="{'img-preview': !imgLoaded}" + onerror="sl_binaryFilePreviewError()" + onabort="sl_binaryFilePreviewError()" + onload="sl_binaryFilePreviewLoaded()" + ) + + img( + ng-show="!failedLoad" + ng-src="/project/{{ project_id }}/file/{{ openFile.id }}?format=png" + ng-if="isPreviewableFile()" + ng-class="{'img-preview': !imgLoaded}" + onerror="sl_binaryFilePreviewError()" + onabort="sl_binaryFilePreviewError()" + onload="sl_binaryFilePreviewLoaded()" + ) + + div(ng-if="isTextFile() && !textPreview.error") + div.text-loading(ng-show="textPreview.loading && !textPreview.error") + | #{translate('loading')}… + div.text-preview(ng-show="textPreview.data && !textPreview.loading && !textPreview.error") + div.scroll-container + p + | {{ textPreview.data }} + p(ng-show="textPreview.shouldShowDots") + | … + + p.no-preview( + ng-if="failedLoad || textPreview.error || isUnpreviewableFile()" + ) #{translate("no_preview_available")} diff --git a/services/web/app/views/project/editor/editor-no-symbol-palette.pug b/services/web/app/views/project/editor/editor-no-symbol-palette.pug new file mode 100644 index 0000000000..d858481736 --- /dev/null +++ b/services/web/app/views/project/editor/editor-no-symbol-palette.pug @@ -0,0 +1,40 @@ +.ui-layout-center( + ng-controller="ReviewPanelController", + ng-class="{\ + 'rp-unsupported': editor.showRichText,\ + 'rp-state-current-file': (reviewPanel.subView === SubViews.CUR_FILE),\ + 'rp-state-current-file-expanded': (reviewPanel.subView === SubViews.CUR_FILE && ui.reviewPanelOpen),\ + 'rp-state-current-file-mini': (reviewPanel.subView === SubViews.CUR_FILE && !ui.reviewPanelOpen),\ + 'rp-state-overview': (reviewPanel.subView === SubViews.OVERVIEW),\ + 'rp-size-mini': ui.miniReviewPanelVisible,\ + 'rp-size-expanded': ui.reviewPanelOpen,\ + 'rp-layout-left': reviewPanel.layoutToLeft,\ + 'rp-loading-threads': reviewPanel.loadingThreads,\ + }" + ) + .loading-panel( + ng-show="(!editor.sharejs_doc || editor.opening) && !editor.error_state", + style=showRichText ? "top: 32px" : "", + ) + span(ng-show="editor.open_doc_id") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… + span(ng-show="!editor.open_doc_id") + i.fa.fa-arrow-left + | #{translate("open_a_file_on_the_left")} + + if moduleIncludesAvailable('editor:main') + != moduleIncludes('editor:main', locals) + else + .toolbar.toolbar-editor + + .multi-selection-ongoing( + ng-show="multiSelectedCount > 0" + ) + .multi-selection-message + h4 {{ multiSelectedCount }} #{translate('files_selected')} + + include ./source-editor + + if !isRestrictedTokenMember + include ./review-panel diff --git a/services/web/app/views/project/editor/editor-with-symbol-palette.pug b/services/web/app/views/project/editor/editor-with-symbol-palette.pug new file mode 100644 index 0000000000..32fb59b0ac --- /dev/null +++ b/services/web/app/views/project/editor/editor-with-symbol-palette.pug @@ -0,0 +1,55 @@ +.ui-layout-center( + ng-controller="ReviewPanelController", + ng-class="{\ + 'rp-unsupported': editor.showRichText,\ + 'rp-state-current-file': (reviewPanel.subView === SubViews.CUR_FILE),\ + 'rp-state-current-file-expanded': (reviewPanel.subView === SubViews.CUR_FILE && ui.reviewPanelOpen),\ + 'rp-state-current-file-mini': (reviewPanel.subView === SubViews.CUR_FILE && !ui.reviewPanelOpen),\ + 'rp-state-overview': (reviewPanel.subView === SubViews.OVERVIEW),\ + 'rp-size-mini': ui.miniReviewPanelVisible,\ + 'rp-size-expanded': ui.reviewPanelOpen,\ + 'rp-layout-left': reviewPanel.layoutToLeft,\ + 'rp-loading-threads': reviewPanel.loadingThreads,\ + }" + ) + + .editor-container.full-size( + vertical-resizable-panes="symbol-palette-resizer" + vertical-resizable-panes-hidden-externally-on="symbol-palette-toggled" + vertical-resizable-panes-hidden-initially="true" + vertical-resizable-panes-default-size="196" + vertical-resizable-panes-min-size="144" + vertical-resizable-panes-max-size="336" + vertical-resizable-panes-resize-on="left-pane-resize-all" + ) + .div(vertical-resizable-top) + + .loading-panel( + ng-show="(!editor.sharejs_doc || editor.opening) && !editor.error_state", + style=showRichText ? "top: 32px" : "", + ) + span(ng-show="editor.open_doc_id") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… + span(ng-show="!editor.open_doc_id") + i.fa.fa-arrow-left + | #{translate("open_a_file_on_the_left")} + + if moduleIncludesAvailable('editor:main') + != moduleIncludes('editor:main', locals) + else + .toolbar.toolbar-editor + + .multi-selection-ongoing( + ng-show="multiSelectedCount > 0" + ) + .multi-selection-message + h4 {{ multiSelectedCount }} #{translate('files_selected')} + + include ./source-editor + + if !isRestrictedTokenMember + include ./review-panel + + .div(vertical-resizable-bottom) + include ./symbol-palette diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug new file mode 100644 index 0000000000..a6a364fe2e --- /dev/null +++ b/services/web/app/views/project/editor/editor.pug @@ -0,0 +1,74 @@ +div.full-size( + ng-show="ui.view == 'editor'" + layout="pdf" + layout-disabled="ui.pdfLayout != 'sideBySide'" + mask-iframes-on-resize="true" + resize-on="layout:main:resize" + resize-proportionally="true" + initial-size-east="'50%'" + minimum-restore-size-east="300" + allow-overflow-on="'center'" + custom-toggler-pane=hasFeature('custom-togglers') ? "east" : false + custom-toggler-msg-when-open=hasFeature('custom-togglers') ? translate("tooltip_hide_pdf") : false + custom-toggler-msg-when-closed=hasFeature('custom-togglers') ? translate("tooltip_show_pdf") : false +) + if showSymbolPalette + include ./editor-with-symbol-palette + else + include ./editor-no-symbol-palette + + .ui-layout-east + div(ng-if="ui.pdfLayout == 'sideBySide'") + include ./pdf + + .ui-layout-resizer-controls.synctex-controls( + ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'" + ng-controller="PdfSynctexController" + ) + a.btn.btn-default.btn-xs.synctex-control.synctex-control-goto-pdf( + tooltip=translate('go_to_code_location_in_pdf') + tooltip-placement="right" + tooltip-append-to-body="true" + ng-click="syncToPdf()" + ng-disabled="syncToPdfInFlight" + ) + i.synctex-control-icon(ng-show="!syncToPdfInFlight") + i.synctex-spin-icon.fa.fa-refresh.fa-spin(ng-show="syncToPdfInFlight") + a.btn.btn-default.btn-xs.synctex-control.synctex-control-goto-code( + tooltip=translate('go_to_pdf_location_in_code') + tooltip-placement="right" + tooltip-append-to-body="true" + ng-click="syncToCode()" + ng-disabled="syncToCodeInFlight" + ) + i.synctex-control-icon(ng-show="!syncToCodeInFlight") + i.synctex-spin-icon.fa.fa-refresh.fa-spin(ng-show="syncToCodeInFlight") + +div.full-size( + ng-if="ui.pdfLayout == 'flat'" + ng-show="ui.view == 'pdf'" +) + include ./pdf + +// fallback, shown when no file/view is selected +div.full-size.no-file-selection( + ng-if="!ui.view" +) + .no-file-selection-message( + ng-if="rootFolder.children && rootFolder.children.length > 0" + ) + h3 + | #{translate('no_selection_select_file')} + .no-file-selection-message( + ng-if="rootFolder.children && rootFolder.children.length === 0" + ) + h3 + | #{translate('no_selection_create_new_file')} + div( + ng-controller="FileTreeController" + ) + button.btn.btn-primary( + ng-click="openNewDocModal()" + ) + | #{translate('new_file')} + diff --git a/services/web/app/views/project/editor/file-tree-history.pug b/services/web/app/views/project/editor/file-tree-history.pug new file mode 100644 index 0000000000..3d45489b2e --- /dev/null +++ b/services/web/app/views/project/editor/file-tree-history.pug @@ -0,0 +1,114 @@ +aside.editor-sidebar.full-size( + ng-controller="FileTreeController" + ng-class="{ 'multi-selected': multiSelectedCount > 0 }" + ng-show="ui.view == 'history' && !history.isV2" +) + .file-tree + .file-tree-inner( + ng-if="rootFolder", + ng-class="no-toolbar" + ) + ul.list-unstyled.file-tree-list + + file-entity( + entity="entity", + ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']" + ) + + li(ng-show="deletedDocs.length > 0 && ui.view == 'history'") + h3 #{translate("deleted_files")} + li( + ng-class="{ 'selected': entity.selected }", + ng-repeat="entity in deletedDocs | orderBy:'name'", + ng-controller="FileTreeEntityController", + ng-show="ui.view == 'history'" + ) + .entity + .entity-name( + ng-click="select($event)" + ) + //- Just a spacer to align with folders + i.fa.fa-fw.toggle + i.fa.fa-fw.fa-file + + span {{ entity.name }} + + +script(type='text/ng-template', id='entityListItemTemplate') + li( + ng-class="{ 'selected': entity.selected, 'multi-selected': entity.multiSelected }", + ng-controller="FileTreeEntityController" + ) + .entity(ng-if="entity.type != 'folder'") + .entity-name( + ng-click="select($event)" + context-menu + data-target="context-menu-{{ entity.id }}" + context-menu-container="body" + context-menu-disabled="true" + ) + //- Just a spacer to align with folders + i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'") + + i.fa.fa-fw(ng-if="entity.type != 'folder'", ng-class="'fa-' + iconTypeFromName(entity.name)") + i.fa.fa-external-link-square.fa-rotate-180.linked-file-highlight( + ng-if="entity.linkedFileData.provider" + ) + span( + ng-hide="entity.renaming" + ) {{ entity.renamingToName || entity.name }} + + .entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController") + .entity-name( + ng-click="select($event)" + ) + div( + context-menu + data-target="context-menu-{{ entity.id }}" + context-menu-container="body" + context-menu-disabled="true" + ) + i.fa.fa-fw.toggle( + ng-if="entity.type == 'folder'" + ng-class="{'fa-angle-right': !expanded, 'fa-angle-down': expanded}" + ng-click="toggleExpanded()" + ) + + i.fa.fa-fw( + ng-if="entity.type == 'folder'" + ng-class="{\ + 'fa-folder': !expanded, \ + 'fa-folder-open': expanded \ + }" + ng-click="select($event)" + ) + + span( + ng-hide="entity.renaming" + ) {{ entity.renamingToName || entity.name }} + + ul.list-unstyled( + ng-if="entity.type == 'folder' && (depth == null || depth < MAX_DEPTH)" + ng-show="expanded" + ) + file-entity( + entity="child", + ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']" + depth="(depth || 0) + 1" + ) + + .entity-limit-hit( + ng-if="depth === MAX_DEPTH" + ng-show="expanded" + ) + i.fa.fa-fw + span.entity-limit-hit-message + | Some files might be hidden + | + i.fa.fa-question-circle.entity-limit-hit-tooltip-trigger( + tooltip="Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible." + tooltip-append-to-body="true" + aria-hidden="true" + ) + span.sr-only + | Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible. diff --git a/services/web/app/views/project/editor/file-tree-react.pug b/services/web/app/views/project/editor/file-tree-react.pug new file mode 100644 index 0000000000..21372664a2 --- /dev/null +++ b/services/web/app/views/project/editor/file-tree-react.pug @@ -0,0 +1,41 @@ +aside.editor-sidebar.full-size( + ng-show="ui.view != 'history'" + vertical-resizable-panes="outline-resizer" + vertical-resizable-panes-toggled-externally-on="outline-toggled" + vertical-resizable-panes-min-size="32" + vertical-resizable-panes-max-size="75%" + vertical-resizable-panes-resize-on="left-pane-resize-all" +) + + .file-tree( + ng-controller="ReactFileTreeController" + vertical-resizable-top + ) + file-tree-root( + project-id="projectId" + root-folder="rootFolder" + root-doc-id="rootDocId" + has-write-permissions="hasWritePermissions" + on-select="onSelect" + on-init="onInit" + is-connected="isConnected" + user-has-feature="userHasFeature" + ref-providers="refProviders" + reindex-references="reindexReferences" + set-ref-provider-enabled="setRefProviderEnabled" + set-started-free-trial="setStartedFreeTrial" + ) + + .outline-container( + vertical-resizable-bottom + ng-controller="OutlineController" + ) + outline-pane( + is-tex-file="isTexFile" + outline="outline" + project-id="project_id" + jump-to-line="jumpToLine" + on-toggle="onToggle" + event-tracking="eventTracking" + highlighted-line="highlightedLine" + ) diff --git a/services/web/app/views/project/editor/file-view.pug b/services/web/app/views/project/editor/file-view.pug new file mode 100644 index 0000000000..d16be07b50 --- /dev/null +++ b/services/web/app/views/project/editor/file-view.pug @@ -0,0 +1,9 @@ +div( + ng-controller="FileViewController" + ng-show="ui.view == 'file'" + ng-if="openFile" +) + file-view( + file='file' + store-references-keys='storeReferencesKeys' + ) diff --git a/services/web/app/views/project/editor/header-react.pug b/services/web/app/views/project/editor/header-react.pug new file mode 100644 index 0000000000..1382120b56 --- /dev/null +++ b/services/web/app/views/project/editor/header-react.pug @@ -0,0 +1,13 @@ +div(ng-controller="ReactShareProjectModalController") + share-project-modal( + handle-hide="handleHide" + show="show" + is-admin="isAdmin" + ) + + div(ng-controller="EditorNavigationToolbarController") + editor-navigation-toolbar-root( + open-doc="openDoc" + online-users-array="onlineUsersArray" + open-share-project-modal="openShareProjectModal" + ) diff --git a/services/web/app/views/project/editor/header.pug b/services/web/app/views/project/editor/header.pug new file mode 100644 index 0000000000..e6951a16e0 --- /dev/null +++ b/services/web/app/views/project/editor/header.pug @@ -0,0 +1,155 @@ +header.toolbar.toolbar-header.toolbar-with-labels( + ng-cloak, + ng-hide="state.loading" +) + .toolbar-left + a.btn.btn-full-height( + href, + ng-click="ui.leftMenuShown = true;", + ) + i.fa.fa-fw.fa-bars.editor-menu-icon + p.toolbar-label #{translate("menu")} + a.btn.btn-full-height.header-cobranding-logo-container( + ng-if="::(cobranding.isProjectCobranded && cobranding.logoImgUrl)" + ng-href="{{ ::cobranding.brandVariationHomeUrl }}" + target="_blank" + rel="noreferrer noopener" + ) + img.header-cobranding-logo( + ng-src="{{ ::cobranding.logoImgUrl }}" + alt="{{ ::cobranding.brandVariationName }}" + ) + + a.toolbar-header-back-projects( + href="/project" + ) + i.fa.fa-fw.fa-level-up + + span(ng-controller="PdfViewToggleController") + a.btn.btn-full-height.btn-full-height-no-border( + href, + ng-show="ui.pdfLayout == 'flat'", + tooltip="PDF", + tooltip-placement="bottom", + tooltip-append-to-body="true", + ng-click="togglePdfView()", + ng-class="{ 'active': ui.view == 'pdf' }" + ) + i.fa.fa-file-pdf-o + + .toolbar-center.project-name(ng-controller="ProjectNameController") + span.name( + ng-dblclick="!permissions.admin || startRenaming()", + ng-show="!state.renaming" + tooltip="{{ project.name }}", + tooltip-class="project-name-tooltip" + tooltip-placement="bottom", + tooltip-append-to-body="true", + tooltip-enable="state.overflowed" + ) {{ project.name }} + + input.form-control( + type="text" + ng-model="inputs.name", + ng-show="state.renaming", + on-enter="finishRenaming()", + ng-blur="finishRenaming()", + select-name-when="state.renaming" + ) + + a.rename( + ng-if="permissions.admin", + href='#', + tooltip-placement="bottom", + tooltip=translate('rename'), + tooltip-append-to-body="true", + ng-click="startRenaming()", + ng-show="!state.renaming" + ) + i.fa.fa-pencil + + .toolbar-right + .online-users( + ng-if="onlineUsersArray.length < 4" + ng-controller="OnlineUsersController" + ) + span.online-user( + ng-repeat="user in onlineUsersArray", + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }", + popover="{{ user.name }}" + popover-placement="bottom" + popover-append-to-body="true" + popover-trigger="mouseenter" + ng-click="gotoUser(user)" + ) {{ userInitial(user) }} + + .online-users.dropdown( + dropdown + ng-if="onlineUsersArray.length >= 4" + ng-controller="OnlineUsersController" + ) + span.online-user.online-user-multi( + dropdown-toggle, + tooltip=translate('connected_users'), + tooltip-placement="left" + ) + strong {{ onlineUsersArray.length }} + i.fa.fa-fw.fa-users + ul.dropdown-menu.pull-right + li.dropdown-header #{translate('connected_users')} + li(ng-repeat="user in onlineUsersArray") + a(href, ng-click="gotoUser(user)") + span.online-user( + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }" + ) {{ user.name.slice(0,1) }} + | {{ user.name }} + + if !isRestrictedTokenMember + a.btn.btn-full-height( + href, + ng-if="project.features.trackChangesVisible", + ng-class="{ active: ui.reviewPanelOpen && ui.view !== 'history' }" + ng-disabled="ui.view === 'history'" + ng-click="toggleReviewPanel()" + ) + i.review-icon + p.toolbar-label + | #{translate("review")} + + a.btn.btn-full-height( + href + ng-click="openShareProjectModal(permissions.admin);" + ng-controller="ReactShareProjectModalController" + ) + i.fa.fa-fw.fa-group + p.toolbar-label #{translate("share")} + + share-project-modal( + handle-hide="handleHide" + show="show" + is-admin="isAdmin" + ) + != moduleIncludes('publish:button', locals) + + if !isRestrictedTokenMember + a.btn.btn-full-height( + href, + ng-click="toggleHistory();", + ng-class="{ active: (ui.view == 'history') }", + ) + i.fa.fa-fw.fa-history + p.toolbar-label #{translate("history")} + a.btn.btn-full-height( + href, + ng-class="{ active: ui.chatOpen }", + ng-click="toggleChat();", + ng-controller="ChatButtonController", + ng-show="!anonymous", + ) + i.fa.fa-fw.fa-comment( + ng-class="{ 'bounce': unreadMessages > 0 }" + ) + span.label.label-info( + ng-show="unreadMessages > 0" + ) {{ unreadMessages }} + p.toolbar-label #{translate("chat")} diff --git a/services/web/app/views/project/editor/history.pug b/services/web/app/views/project/editor/history.pug new file mode 100644 index 0000000000..c72c47135d --- /dev/null +++ b/services/web/app/views/project/editor/history.pug @@ -0,0 +1,89 @@ +div#history(ng-show="ui.view == 'history' && history.updates.length > 0") + include ./history/entriesListV1 + include ./history/entriesListV2 + + include ./history/diffPanelV1 + include ./history/previewPanelV2 + +.full-size(ng-if="ui.view == 'history' && history.updates.length === 0 && !isHistoryLoading()") + .no-history-available + h3 + | #{translate('no_history_available')} +script(type="text/ng-template", id="historyRestoreDiffModalTemplate") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("restore")} {{diff.doc.name}} + .modal-body.modal-body-share + p !{translate("sure_you_want_to_restore_before", {filename: "{{diff.doc.name}}", date:"{{diff.start_ts | formatDate}}"}, ['strong'])} + .modal-footer + button.btn.btn-default( + ng-click="cancel()", + ng-disabled="state.inflight" + ) #{translate("cancel")} + button.btn.btn-danger( + ng-click="restore()", + ng-disabled="state.inflight" + ) + span(ng-show="!state.inflight") #{translate("restore")} + span(ng-show="state.inflight") #{translate("restoring")} … + + +script(type="text/ng-template", id="historyLabelTpl") + .history-label( + ng-class="{\ + 'history-label-own' : $ctrl.isOwnedByCurrentUser,\ + 'history-label-pseudo-current-state': $ctrl.isPseudoCurrentStateLabel,\ + }" + ) + span.history-label-comment( + tooltip-append-to-body="true" + tooltip-template="'historyLabelTooltipTpl'" + tooltip-placement="left" + tooltip-enable="$ctrl.showTooltip" + ) + i.fa.fa-tag + | {{ ::$ctrl.isPseudoCurrentStateLabel ? '#{translate("history_label_project_current_state")}' : $ctrl.labelText }} + button.history-label-delete-btn( + ng-if="$ctrl.isOwnedByCurrentUser && !$ctrl.isPseudoCurrentStateLabel" + stop-propagation="click" + ng-click="$ctrl.onLabelDelete()" + aria-label=translate("delete") + ) + span(aria-hidden="true") × + +script(type="text/ng-template", id="historyLabelTooltipTpl") + .history-label-tooltip + p.history-label-tooltip-title + i.fa.fa-tag + | {{ $ctrl.labelText }} + p.history-label-tooltip-owner #{translate("history_label_created_by")} {{ $ctrl.labelOwnerName }} + time.history-label-tooltip-datetime {{ $ctrl.labelCreationDateTime | formatDate }} + + +script(type="text/ng-template", id="historyV2DeleteLabelModalTemplate") + .modal-header + h3 #{translate("history_delete_label")} + .modal-body + .alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} + .alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")} + p(ng-if="labelDetails") + | #{translate("history_are_you_sure_delete_label")} + strong "{{ labelDetails.comment }}" + | ? + .modal-footer + button.btn.btn-default( + type="button" + ng-disabled="state.inflight" + ng-click="$dismiss()" + ) #{translate("cancel")} + button.btn.btn-primary( + type="button" + ng-click="deleteLabel()" + ng-disabled="state.inflight" + ) {{ state.inflight ? '#{translate("history_deleting_label")}' : '#{translate("history_delete_label")}' }} diff --git a/services/web/app/views/project/editor/history/diffPanelV1.pug b/services/web/app/views/project/editor/history/diffPanelV1.pug new file mode 100644 index 0000000000..14af4b2f47 --- /dev/null +++ b/services/web/app/views/project/editor/history/diffPanelV1.pug @@ -0,0 +1,58 @@ +.diff-panel.full-size(ng-if="!history.isV2", ng-controller="HistoryDiffController") + .diff( + ng-if="!!history.diff && !history.diff.loading && !history.diff.deleted && !history.diff.error && !history.diff.binary" + ) + .toolbar.toolbar-alt + span.name + | {{history.diff.highlights.length}} + ng-pluralize( + count="history.diff.highlights.length", + when="{\ + 'one': 'change',\ + 'other': 'changes'\ + }" + ) + | in {{history.diff.pathname}} + .toolbar-right(ng-if="permissions.write") + a.btn.btn-danger.btn-xs( + href, + ng-click="openRestoreDiffModal()" + ) #{translate("restore_to_before_these_changes")} + .diff-editor.hide-ace-cursor( + ace-editor="history", + theme="settings.editorTheme", + font-size="settings.fontSize", + text="history.diff.text", + highlights="history.diff.highlights", + read-only="true", + resize-on="layout:main:resize", + navigate-highlights="true" + ) + + .diff-deleted.text-centered( + ng-show="history.diff.deleted && !history.diff.restoreDeletedSuccess" + ) + p.text-serif #{translate("file_has_been_deleted", {filename:"{{ history.diff.doc.name }} "})} + p + a.btn.btn-primary.btn-lg( + href, + ng-click="restoreDeletedDoc()", + ng-disabled="history.diff.restoreInProgress" + ) #{translate("restore")} + + .diff-deleted.text-centered( + ng-show="history.diff.deleted && history.diff.restoreDeletedSuccess" + ) + p.text-serif #{translate("file_restored", {filename:"{{ history.diff.doc.name }} "})} + p.text-serif #{translate("file_restored_back_to_editor")} + p + a.btn.btn-default( + href, + ng-click="backToEditorAfterRestore()", + ) #{translate("file_restored_back_to_editor_btn")} + + .loading-panel(ng-show="history.diff.loading") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… + .error-panel(ng-show="history.diff.error") + .alert.alert-danger #{translate("generic_something_went_wrong")} diff --git a/services/web/app/views/project/editor/history/entriesListV1.pug b/services/web/app/views/project/editor/history/entriesListV1.pug new file mode 100644 index 0000000000..3071de0bcb --- /dev/null +++ b/services/web/app/views/project/editor/history/entriesListV1.pug @@ -0,0 +1,82 @@ +aside.change-list( + ng-if="!history.isV2" + ng-controller="HistoryListController" + infinite-scroll="loadMore()" + infinite-scroll-disabled="history.loading || history.atEnd" + infinite-scroll-initialize="ui.view == 'history'" + ) + .infinite-scroll-inner + ul.list-unstyled( + ng-class="{\ + 'hover-state': history.hoveringOverListSelectors\ + }" + ) + li.change( + ng-repeat="update in history.updates" + ng-class="{\ + 'first-in-day': update.meta.first_in_day,\ + 'selected': update.inSelection,\ + 'selected-to': update.selectedTo,\ + 'selected-from': update.selectedFrom,\ + 'hover-selected': update.inHoverSelection,\ + 'hover-selected-to': update.hoverSelectedTo,\ + 'hover-selected-from': update.hoverSelectedFrom,\ + }" + ng-controller="HistoryListItemController" + ) + + div.day(ng-show="update.meta.first_in_day") {{ update.meta.end_ts | relativeDate }} + + div.selectors + div.range + form + input.selector-from( + type="radio" + name="fromVersion" + ng-model="update.selectedFrom" + ng-value="true" + ng-mouseover="mouseOverSelectedFrom()" + ng-mouseout="mouseOutSelectedFrom()" + ng-show="update.afterSelection || update.inSelection" + ) + form + input.selector-to( + type="radio" + name="toVersion" + ng-model="update.selectedTo" + ng-value="true" + ng-mouseover="mouseOverSelectedTo()" + ng-mouseout="mouseOutSelectedTo()" + ng-show="update.beforeSelection || update.inSelection" + ) + + div.description(ng-click="select()") + div.time {{ update.meta.end_ts | formatDate:'h:mm a' }} + div.action.action-edited(ng-if="history.isV2 && update.pathnames.length > 0") + | #{translate("file_action_edited")} + div.docs(ng-repeat="pathname in update.pathnames") + .doc {{ pathname }} + div.docs(ng-repeat="project_op in update.project_ops") + div(ng-if="project_op.rename") + .action #{translate("file_action_renamed")} + .doc {{ project_op.rename.pathname }} → {{ project_op.rename.newPathname }} + div(ng-if="project_op.add") + .action #{translate("file_action_created")} + .doc {{ project_op.add.pathname }} + div(ng-if="project_op.remove") + .action #{translate("file_action_deleted")} + .doc {{ project_op.remove.pathname }} + div.users + div.user(ng-repeat="update_user in update.meta.users") + .color-square(ng-if="update_user != null", ng-style="{'background-color': 'hsl({{ update_user.hue }}, 70%, 50%)'}") + .color-square(ng-if="update_user == null", ng-style="{'background-color': 'hsl(100, 70%, 50%)'}") + .name(ng-if="update_user && update_user.id != user.id" ng-bind="displayName(update_user)") + .name(ng-if="update_user && update_user.id == user.id") You + .name(ng-if="update_user == null") #{translate("anonymous")} + div.user(ng-if="update.meta.users.length == 0") + .color-square(style="background-color: hsl(100, 100%, 50%)") + span #{translate("anonymous")} + + .loading(ng-show="history.loading") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… diff --git a/services/web/app/views/project/editor/history/entriesListV2.pug b/services/web/app/views/project/editor/history/entriesListV2.pug new file mode 100644 index 0000000000..300bfde368 --- /dev/null +++ b/services/web/app/views/project/editor/history/entriesListV2.pug @@ -0,0 +1,252 @@ +aside.change-list( + ng-if="history.isV2" + ng-controller="HistoryV2ListController" +) + history-entries-list( + ng-if="!history.showOnlyLabels && !history.error" + entries="history.updates" + range-selection-enabled="history.viewMode === HistoryViewModes.COMPARE" + selected-history-version="history.selection.range.toV" + selected-history-range="history.selection.range" + current-user="user" + current-user-is-owner="project.owner._id === user.id" + users="projectUsers" + load-entries="loadMore()" + load-disabled="history.loading || history.atEnd" + load-initialize="ui.view == 'history'" + is-loading="history.loading" + free-history-limit-hit="history.freeHistoryLimitHit" + on-version-select="handleVersionSelect(version)" + on-range-select="handleRangeSelect(selectedToV, selectedFromV)" + on-label-delete="handleLabelDelete(label)" + ) + history-labels-list( + ng-if="history.showOnlyLabels && !history.error" + labels="history.labels" + range-selection-enabled="history.viewMode === HistoryViewModes.COMPARE" + selected-history-version="history.selection.range.toV" + selected-history-range="history.selection.range" + current-user="user" + users="projectUsers" + is-loading="history.loading" + on-version-select="handleVersionSelect(version)" + on-range-select="handleRangeSelect(selectedToV, selectedFromV)" + on-label-delete="handleLabelDelete(label)" + ) + +script(type="text/ng-template", id="historyEntriesListTpl") + .history-entries( + infinite-scroll="$ctrl.loadEntries()" + infinite-scroll-disabled="$ctrl.loadDisabled" + infinite-scroll-initialize="$ctrl.loadInitialize" + ) + .infinite-scroll-inner + history-entry( + ng-repeat="entry in $ctrl.entries" + range-selection-enabled="$ctrl.rangeSelectionEnabled" + is-dragging="$ctrl.isDragging" + selected-history-version="$ctrl.selectedHistoryVersion" + selected-history-range="$ctrl.selectedHistoryRange" + hovered-history-range="$ctrl.hoveredHistoryRange" + entry="entry" + current-user="$ctrl.currentUser" + users="$ctrl.users" + on-select="$ctrl.handleEntrySelect(selectedEntry)" + on-label-delete="$ctrl.onLabelDelete({ label: label })" + ) + .loading(ng-show="$ctrl.isLoading") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… + .history-entries-list-upgrade-prompt( + ng-if="$ctrl.freeHistoryLimitHit && $ctrl.currentUserIsOwner" + ng-controller="FreeTrialModalController" + ) + p #{translate("currently_seeing_only_24_hrs_history")} + p: strong #{translate("upgrade_to_get_feature", {feature:"full Project History"})} + ul.list-unstyled + li + i.fa.fa-check + | #{translate("unlimited_projects")} + + li + i.fa.fa-check + | #{translate("collabs_per_proj", {collabcount:'Multiple'})} + + li + i.fa.fa-check + | #{translate("full_doc_history")} + + li + i.fa.fa-check + | #{translate("sync_to_dropbox")} + + li + i.fa.fa-check + | #{translate("sync_to_github")} + + li + i.fa.fa-check + |#{translate("compile_larger_projects")} + p.text-center + a.btn.btn-success( + href + ng-class="buttonClass" + ng-click="startFreeTrial('history')" + ) #{translate("start_free_trial")} + p.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")} + .history-entries-list-upgrade-prompt( + ng-if="$ctrl.freeHistoryLimitHit && !$ctrl.currentUserIsOwner" + ) + p #{translate("currently_seeing_only_24_hrs_history")} + strong #{translate("ask_proj_owner_to_upgrade_for_full_history")} + +script(type="text/ng-template", id="historyEntryTpl") + time.history-entry-day(ng-if="::$ctrl.entry.meta.first_in_day") {{ ::$ctrl.entry.meta.end_ts | relativeDate }} + + .history-entry( + ng-class="{\ + 'history-entry-first-in-day': $ctrl.entry.meta.first_in_day,\ + 'history-entry-selected': !$ctrl.isDragging && $ctrl.isEntrySelected(),\ + 'history-entry-selected-to': $ctrl.rangeSelectionEnabled && !$ctrl.isDragging && $ctrl.selectedHistoryRange.toV === $ctrl.entry.toV,\ + 'history-entry-selected-from': $ctrl.rangeSelectionEnabled && !$ctrl.isDragging && $ctrl.selectedHistoryRange.fromV === $ctrl.entry.fromV,\ + 'history-entry-hover-selected': $ctrl.rangeSelectionEnabled && $ctrl.isDragging && $ctrl.isEntryHoverSelected(),\ + 'history-entry-hover-selected-to': $ctrl.rangeSelectionEnabled && $ctrl.isDragging && $ctrl.hoveredHistoryRange.toV === $ctrl.entry.toV,\ + 'history-entry-hover-selected-from': $ctrl.rangeSelectionEnabled && $ctrl.isDragging && $ctrl.hoveredHistoryRange.fromV === $ctrl.entry.fromV,\ + }" + history-droppable-area + history-droppable-area-on-drop="$ctrl.onDrop(boundary)" + history-droppable-area-on-over="$ctrl.onOver(boundary)" + ) + .history-entry-details( + ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })" + ) + .history-entry-toV-handle( + ng-show="$ctrl.rangeSelectionEnabled && $ctrl.selectedHistoryRange && ((!$ctrl.isDragging && $ctrl.selectedHistoryRange.toV === $ctrl.entry.toV) || ($ctrl.isDragging && $ctrl.hoveredHistoryRange.toV === $ctrl.entry.toV))" + history-draggable-boundary="toV" + history-draggable-boundary-on-drag-start="$ctrl.onDraggingStart()" + history-draggable-boundary-on-drag-stop="$ctrl.onDraggingStop(isValidDrop, boundary)" + ) + + history-label( + ng-repeat="label in $ctrl.entry.labels | orderBy : '-created_at'" + ng-init="user = $ctrl.buildUserView(label)" + label-text="label.comment" + label-owner-name="$ctrl.displayNameById(label.user_id) || 'Anonymous'" + label-creation-date-time="label.created_at" + is-owned-by-current-user="label.user_id === $ctrl.currentUser.id" + on-label-delete="$ctrl.onLabelDelete({ label: label })" + ) + + ol.history-entry-changes + li.history-entry-change( + ng-repeat="pathname in ::$ctrl.entry.pathnames" + ) + span.history-entry-change-action #{translate("file_action_edited")} + span.history-entry-change-doc {{ ::pathname }} + li.history-entry-change( + ng-repeat="project_op in ::$ctrl.entry.project_ops" + ) + span.history-entry-change-action( + ng-if="::project_op.rename" + ) #{translate("file_action_renamed")} + span.history-entry-change-action( + ng-if="::project_op.add" + ) #{translate("file_action_created")} + span.history-entry-change-action( + ng-if="::project_op.remove" + ) #{translate("file_action_deleted")} + span.history-entry-change-doc {{ ::$ctrl.getProjectOpDoc(project_op) }} + .history-entry-metadata + time.history-entry-metadata-time {{ ::$ctrl.entry.meta.end_ts | formatDate:'h:mm a' }} + span + | + | • + | + ol.history-entry-metadata-users + li.history-entry-metadata-user(ng-repeat="update_user in ::$ctrl.entry.meta.users") + span.name( + ng-if="::update_user && update_user.id != $ctrl.currentUser.id" + ng-style="$ctrl.getUserCSSStyle(update_user);" + ) {{ ::$ctrl.displayName(update_user) }} + span.name( + ng-if="::update_user && update_user.id == $ctrl.currentUser.id" + ng-style="$ctrl.getUserCSSStyle(update_user);" + ) You + span.name( + ng-if="::update_user == null" + ng-style="$ctrl.getUserCSSStyle(update_user);" + ) #{translate("anonymous")} + li.history-entry-metadata-user(ng-if="::$ctrl.entry.meta.users.length == 0") + span.name( + ng-style="$ctrl.getUserCSSStyle();" + ) #{translate("anonymous")} + + .history-entry-fromV-handle( + ng-show="$ctrl.rangeSelectionEnabled && $ctrl.selectedHistoryRange && ((!$ctrl.isDragging && $ctrl.selectedHistoryRange.fromV === $ctrl.entry.fromV) || ($ctrl.isDragging && $ctrl.hoveredHistoryRange.fromV === $ctrl.entry.fromV))" + history-draggable-boundary="fromV" + history-draggable-boundary-on-drag-start="$ctrl.onDraggingStart()" + history-draggable-boundary-on-drag-stop="$ctrl.onDraggingStop(isValidDrop, boundary)" + ) + +script(type="text/ng-template", id="historyLabelsListTpl") + .history-labels-list + .history-version-with-label( + ng-repeat="versionWithLabel in $ctrl.versionsWithLabels | orderBy:'-version' track by versionWithLabel.version" + ng-class="{\ + 'history-version-with-label-selected': !$ctrl.isDragging && $ctrl.isVersionSelected(versionWithLabel.version),\ + 'history-version-with-label-selected-to': !$ctrl.isDragging && $ctrl.selectedHistoryRange.toV === versionWithLabel.version,\ + 'history-version-with-label-selected-from': !$ctrl.isDragging && $ctrl.selectedHistoryRange.fromV === versionWithLabel.version,\ + 'history-version-with-label-hover-selected': $ctrl.isDragging && $ctrl.isVersionHoverSelected(versionWithLabel.version),\ + 'history-version-with-label-hover-selected-to': $ctrl.isDragging && $ctrl.hoveredHistoryRange.toV === versionWithLabel.version,\ + 'history-version-with-label-hover-selected-from': $ctrl.isDragging && $ctrl.hoveredHistoryRange.fromV === versionWithLabel.version,\ + }" + ng-click="$ctrl.handleVersionSelect(versionWithLabel)" + history-droppable-area + history-droppable-area-on-drop="$ctrl.onDrop(boundary, versionWithLabel)" + history-droppable-area-on-over="$ctrl.onOver(boundary, versionWithLabel)" + ) + .history-entry-toV-handle( + ng-show="$ctrl.rangeSelectionEnabled && $ctrl.selectedHistoryRange && ((!$ctrl.isDragging && $ctrl.selectedHistoryRange.toV === versionWithLabel.version) || ($ctrl.isDragging && $ctrl.hoveredHistoryRange.toV === versionWithLabel.version))" + history-draggable-boundary="toV" + history-draggable-boundary-on-drag-start="$ctrl.onDraggingStart()" + history-draggable-boundary-on-drag-stop="$ctrl.onDraggingStop(isValidDrop, boundary)" + ) + div( + ng-repeat="label in versionWithLabel.labels track by label.id" + ) + history-label( + show-tooltip="false" + label-text="label.comment" + is-owned-by-current-user="label.user_id === $ctrl.currentUser.id" + on-label-delete="$ctrl.onLabelDelete({ label: label })" + is-pseudo-current-state-label="label.isPseudoCurrentStateLabel" + ) + .history-entry-label-metadata + .history-entry-label-metadata-user( + ng-if="!label.isPseudoCurrentStateLabel" + ng-init="user = $ctrl.buildUserView(label)" + ) + | Saved by + span.name( + ng-if="user && user._id !== $ctrl.currentUser.id" + ng-style="$ctrl.getUserCSSStyle(user, versionWithLabel);" + ) {{ ::user.displayName }} + span.name( + ng-if="user && user._id == $ctrl.currentUser.id" + ng-style="$ctrl.getUserCSSStyle(user, versionWithLabel);" + ) You + span.name( + ng-if="user == null" + ng-style="$ctrl.getUserCSSStyle(user, versionWithLabel);" + ) #{translate("anonymous")} + time.history-entry-label-metadata-time {{ ::label.created_at | formatDate }} + .history-entry-fromV-handle( + ng-show="$ctrl.rangeSelectionEnabled && $ctrl.selectedHistoryRange && ((!$ctrl.isDragging && $ctrl.selectedHistoryRange.fromV === versionWithLabel.version) || ($ctrl.isDragging && $ctrl.hoveredHistoryRange.fromV === versionWithLabel.version))" + history-draggable-boundary="fromV" + history-draggable-boundary-on-drag-start="$ctrl.onDraggingStart()" + history-draggable-boundary-on-drag-stop="$ctrl.onDraggingStop(isValidDrop, boundary)" + ) + + .loading(ng-show="$ctrl.isLoading") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… diff --git a/services/web/app/views/project/editor/history/fileTreeV2.pug b/services/web/app/views/project/editor/history/fileTreeV2.pug new file mode 100644 index 0000000000..f9eef7cf0d --- /dev/null +++ b/services/web/app/views/project/editor/history/fileTreeV2.pug @@ -0,0 +1,57 @@ +aside.editor-sidebar.full-size( + ng-controller="HistoryV2FileTreeController" + ng-if="ui.view == 'history' && history.isV2" +) + .history-file-tree-inner + history-file-tree( + files="history.selection.files" + selected-pathname="history.selection.pathname" + on-selected-file-change="handleFileSelection(file)" + is-loading="history.loadingFileTree" + ) + +script(type="text/ng-template", id="historyFileTreeTpl") + .history-file-tree + history-file-entity( + ng-repeat="fileEntity in $ctrl._fileTree | orderBy : [ '-type', 'operation', 'name' ]" + file-entity="fileEntity" + ng-show="!$ctrl.isLoading" + ) + +script(type="text/ng-template", id="historyFileEntityTpl") + .history-file-entity-wrapper + a.history-file-entity-link( + href + ng-click="$ctrl.isSelected ? '' : $ctrl.handleClick()" + ng-class="{ 'history-file-entity-link-selected': $ctrl.isSelected }" + ) + span.history-file-entity-name-container + i.history-file-entity-icon.history-file-entity-icon-folder-state.fa.fa-fw( + ng-class="{\ + 'fa-chevron-down': ($ctrl.fileEntity.type === 'folder' && $ctrl.isOpen),\ + 'fa-chevron-right': ($ctrl.fileEntity.type === 'folder' && !$ctrl.isOpen)\ + }" + ) + i.history-file-entity-icon.fa( + ng-class="::$ctrl.entityTypeIconClass" + ) + span.history-file-entity-name( + ng-class="::$ctrl.entityOpTextClass" + ) {{ ::$ctrl.fileEntity.name }} + span.history-file-entity-operation-badge( + ng-if="::$ctrl.hasOperation && $ctrl.fileEntity.operation !== 'renamed' && $ctrl.fileEntity.operation !== 'removed'" + ) {{ ::$ctrl.getFileOperationName() }} + span.history-file-entity-operation-badge( + ng-if="::$ctrl.hasOperation && $ctrl.fileEntity.operation === 'renamed'" + tooltip-append-to-body="true" + tooltip-placement="right" + tooltip-class="tooltip-history-file-tree" + tooltip-html=`::$ctrl.getRenameTooltip()` + ) {{ ::$ctrl.getFileOperationName() }} + div( + ng-show="$ctrl.isOpen" + ) + history-file-entity( + ng-repeat="childEntity in $ctrl.fileEntity.children" + file-entity="childEntity" + ) diff --git a/services/web/app/views/project/editor/history/previewPanelV2.pug b/services/web/app/views/project/editor/history/previewPanelV2.pug new file mode 100644 index 0000000000..e8bc1213fa --- /dev/null +++ b/services/web/app/views/project/editor/history/previewPanelV2.pug @@ -0,0 +1,62 @@ +.diff-panel.full-size( + ng-if="history.isV2 && history.viewMode === HistoryViewModes.COMPARE && history.updates.length !== 0" +) + .diff( + ng-show="!!history.selection.diff && !isHistoryLoading() && !history.selection.diff.error", + ng-class="{ 'diff-binary': history.selection.diff.binary }" + ) + .diff-editor-v2.hide-ace-cursor( + ng-if="!history.selection.diff.binary" + ace-editor="history", + theme="settings.editorTheme", + font-size="settings.fontSize", + text="history.selection.diff.text", + highlights="history.selection.diff.highlights", + read-only="true", + resize-on="layout:main:resize,history:toggle", + navigate-highlights="true" + ) + .alert.alert-info(ng-if="history.selection.diff.binary") + | We're still working on showing image and binary changes, sorry. Stay tuned! + + .loading-panel(ng-show="isHistoryLoading()") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… + .error-panel(ng-show="history.selection.diff.error && !isHistoryLoading()") + .alert.alert-danger #{translate("generic_something_went_wrong")} + +.point-in-time-panel.full-size( + ng-if="history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME && history.updates.length !== 0" +) + .point-in-time-editor-container( + ng-if="!!history.selection.file && !history.selection.file.loading && !history.selection.file.error" + ) + .hide-ace-cursor( + ng-if="!history.selection.file.binary" + ace-editor="history-pointintime", + theme="settings.editorTheme", + font-size="settings.fontSize", + text="history.selection.file.text", + read-only="true", + resize-on="layout:main:resize,history:toggle", + ) + .alert.alert-info(ng-if="history.selection.file.binary") + | We're still working on showing image and binary changes, sorry. Stay tuned! + .loading-panel(ng-show="isHistoryLoading()") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… + .error-panel(ng-show="history.error") + .alert.alert-danger + p + | #{translate("generic_history_error")} + a( + ng-href="mailto:#{settings.adminEmail}?Subject=Error%20loading%20history%20for%project%20{{ project_id }}", + ng-non-bindable + ) #{settings.adminEmail} + p.clearfix + a.alert-link-as-btn.pull-right( + href + ng-click="toggleHistory()" + ) #{translate("back_to_editor")} + .error-panel(ng-show="history.selection.file.error") + .alert.alert-danger #{translate("generic_something_went_wrong")} diff --git a/services/web/app/views/project/editor/history/toolbarV2.pug b/services/web/app/views/project/editor/history/toolbarV2.pug new file mode 100644 index 0000000000..1e42c08f21 --- /dev/null +++ b/services/web/app/views/project/editor/history/toolbarV2.pug @@ -0,0 +1,135 @@ +.history-toolbar( + ng-controller="HistoryV2ToolbarController" + ng-if="ui.view == 'history' && history.isV2" +) + span.history-toolbar-selected-version(ng-show="history.loadingFileTree") + i.fa.fa-spin.fa-refresh + | #{translate("loading")}… + + //- point-in-time mode info + span.history-toolbar-selected-version( + ng-show="!history.loadingFileTree && history.viewMode === HistoryViewModes.POINT_IN_TIME && !history.showOnlyLabels && currentUpdate && !history.error" + ) #{translate("browsing_project_as_of")} + time.history-toolbar-time {{ currentUpdate.meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }} + span.history-toolbar-selected-version( + ng-show="!history.loadingFileTree && history.viewMode === HistoryViewModes.POINT_IN_TIME && history.showOnlyLabels && currentUpdate && !history.error" + ) + span(ng-if="currentUpdate.labels.length > 0") + | #{translate("browsing_project_labelled")} + span.history-toolbar-selected-label( + ng-repeat="label in currentUpdate.labels" + ) + | {{ label.comment }} + span(ng-if="!$last") , + span.history-toolbar-selected-label(ng-if="currentUpdate.labels.length === 0 && history.labels[0].isPseudoCurrentStateLabel && currentUpdate.toV === history.labels[0].version") + | #{translate("browsing_project_latest_for_pseudo_label")} + + + + //- compare mode info + span.history-toolbar-selected-version(ng-if="history.viewMode === HistoryViewModes.COMPARE && history.selection.diff && !history.selection.diff.binary && !history.selection.diff.loading && !history.selection.diff.error && !history.loadingFileTree") + | {{history.selection.diff.highlights.length}} + ng-pluralize( + count="history.selection.diff.highlights.length", + when="{\ + 'one': 'change',\ + 'other': 'changes'\ + }" + ) + | in {{history.selection.diff.pathname}} + + //- point-in-time mode actions + div.history-toolbar-actions( + ng-if="history.viewMode === HistoryViewModes.POINT_IN_TIME && !history.error && history.updates.length > 0" + ) + button.history-toolbar-btn( + ng-click="showAddLabelDialog();" + ng-if="!history.showOnlyLabels && permissions.write" + ng-disabled="isHistoryLoading() || history.selection.range.toV == null || history.selection.range.fromV == null" + ) + i.fa.fa-tag + | #{translate("history_label_this_version")} + button.history-toolbar-btn( + ng-click="toggleHistoryViewMode();" + ng-disabled="isHistoryLoading()" + ) + i.fa.fa-exchange + | #{translate("compare_to_another_version")} + + a.history-toolbar-btn-danger.pull-right( + ng-hide="history.loadingFileTree || history.selection.range.toV == null" + ng-href="/project/{{ project_id }}/version/{{ history.selection.range.toV }}/zip" + target="_blank" + ) + i.fa.fa-download + | #{translate("download_project_at_this_version")} + + + + //- compare mode actions + div.history-toolbar-actions( + ng-if="history.viewMode === HistoryViewModes.COMPARE && !history.error && history.updates.length > 0" + ) + button.history-toolbar-btn( + ng-click="toggleHistoryViewMode();" + ng-disabled="isHistoryLoading()" + ) + i.fa + | #{translate("view_single_version")} + button.history-toolbar-btn-danger.pull-right( + ng-if="history.selection.file.deletedAtV" + ng-click="restoreDeletedFile()" + ng-show="!restoreState.error" + ng-disabled="restoreState.inflight" + ) + i.fa.fa-fw.fa-step-backward + span(ng-show="!restoreState.inflight") + | Restore this deleted file + span(ng-show="restoreState.inflight") + | Restoring… + span.text-danger(ng-show="restoreState.error") + | Error restoring, sorry + + .history-toolbar-entries-list( + ng-if="!history.error && history.updates.length > 0" + ) + toggle-switch( + ng-model="toolbarUIConfig.showOnlyLabels" + label-true=translate("history_view_labels") + label-false=translate("history_view_all") + description=translate("history_view_a11y_description") + ) + +script(type="text/ng-template", id="historyV2AddLabelModalTemplate") + form( + name="addLabelModalForm" + ng-submit="addLabelModalFormSubmit();" + novalidate + ) + .modal-header + h3 #{translate("history_add_label")} + .modal-body + .alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} + .alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")} + .form-group + input.form-control( + type="text" + placeholder=translate("history_new_label_name") + ng-model="inputs.labelName" + focus-on="open" + required + ) + p.help-block(ng-if="update") + | #{translate("history_new_label_added_at")} + strong {{ update.meta.end_ts | formatDate:'ddd Do MMM YYYY, h:mm a' }} + .modal-footer + button.btn.btn-default( + type="button" + ng-disabled="state.inflight" + ng-click="$dismiss()" + ) #{translate("cancel")} + input.btn.btn-primary( + ng-disabled="addLabelModalForm.$invalid || state.inflight" + ng-value="state.inflight ? '" + translate("history_adding_label") + "' : '" + translate("history_add_label") + "'" + type="submit" + ) diff --git a/services/web/app/views/project/editor/left-menu.pug b/services/web/app/views/project/editor/left-menu.pug new file mode 100644 index 0000000000..bb42f5ce9c --- /dev/null +++ b/services/web/app/views/project/editor/left-menu.pug @@ -0,0 +1,315 @@ +aside#left-menu.full-size( + ng-class="{ 'shown': ui.leftMenuShown }" + ng-cloak +) + h4 #{translate("download")} + + ul.list-unstyled.nav.nav-downloads.text-center + li + a( + ng-href="/project/{{project_id}}/download/zip" + target="_blank" + ) + i.fa.fa-file-archive-o.fa-2x + br + | #{translate("source")} + li + a( + ng-href="{{pdf.downloadUrl || pdf.url}}" + target="_blank" + ng-if="pdf.url" + ) + i.fa.fa-file-pdf-o.fa-2x + br + | PDF + div.link-disabled( + ng-if="!pdf.url" + tooltip=translate('please_compile_pdf_before_download') + tooltip-placement="bottom" + ) + i.fa.fa-file-pdf-o.fa-2x + br + | PDF + + span(ng-show="!anonymous") + h4 #{translate("actions")} + ul.list-unstyled.nav + li(ng-controller="LeftMenuCloneProjectModalController") + a( + href, + ng-click="openCloneProjectModal()" + ) + i.fa.fa-fw.fa-copy + | #{translate("copy_project")} + + clone-project-modal( + handle-hide="handleHide" + project-id="projectId" + project-name="projectName" + open-project="openProject" + show="show" + ) + + != moduleIncludes("editorLeftMenu:actions", locals) + li(ng-controller="WordCountModalController") + a(href, ng-if="pdf.url", ng-click="openWordCountModal()") + i.fa.fa-fw.fa-eye + span #{translate("word_count")} + a.link-disabled(href, ng-if="!pdf.url", tooltip=translate('please_compile_pdf_before_word_count')) + i.fa.fa-fw.fa-eye + span.link-disabled #{translate("word_count")} + + word-count-modal( + clsi-server-id="clsiServerId" + handle-hide="handleHide" + project-id="projectId" + show="show" + ) + + if (moduleIncludesAvailable("editorLeftMenu:sync")) + div(ng-show="!anonymous") + h4() #{translate("sync")} + != moduleIncludes("editorLeftMenu:sync", locals) + + if (moduleIncludesAvailable("editorLeftMenu:editing_services")) + span(ng-show="!anonymous") + h4 #{translate("services")} + != moduleIncludes("editorLeftMenu:editing_services", locals) + + h4(ng-show="!anonymous") #{translate("settings")} + form.settings(ng-controller="SettingsController", ng-show="!anonymous") + .containter-fluid + .form-controls(ng-show="permissions.write") + label(for="compiler") #{translate("compiler")} + select( + name="compiler" + ng-model="project.compiler" + ) + option(value='pdflatex') pdfLaTeX + option(value='latex') LaTeX + option(value='xelatex') XeLaTeX + option(value='lualatex') LuaLaTeX + + if (typeof(allowedImageNames) !== 'undefined' && allowedImageNames.length > 0) + .form-controls(ng-show="permissions.write") + label(for="imageName") #{translate("tex_live_version")} + select( + name="imageName" + ng-model="project.imageName" + ) + each image in allowedImageNames + option(value=image.imageName) #{image.imageDesc} + + .form-controls(ng-show="permissions.write") + label(for="rootDoc_id") #{translate("main_document")} + select( + name="rootDoc_id", + ng-model="project.rootDoc_id", + ng-options="doc.doc.id as doc.path for doc in getValidMainDocs()" + ) + + .form-controls + label(for="spellCheckLanguage") #{translate("spell_check")} + select( + name="spellCheckLanguage" + ng-model="project.spellCheckLanguage" + ) + option(value="") #{translate("off")} + optgroup(label="Language") + for language in languages + option( + value=language.code + )= language.name + + .form-controls + label(for="autoComplete") #{translate("auto_complete")} + select( + name="autoComplete" + ng-model="settings.autoComplete" + ng-options="o.v as o.n for o in [{ n: 'On', v: true }, { n: 'Off', v: false }]" + ) + + .form-controls + label(for="autoPairDelimiters") #{translate("auto_close_brackets")} + select( + name="autoPairDelimiters" + ng-model="settings.autoPairDelimiters" + ng-options="o.v as o.n for o in [{ n: 'On', v: true }, { n: 'Off', v: false }]" + ) + + .form-controls.code-check-setting + label(for="syntaxValidation") #{translate("syntax_validation")} + select( + name="syntaxValidation" + ng-model="settings.syntaxValidation" + ng-options="o.v as o.n for o in [{ n: 'On', v: true }, { n: 'Off', v: false }]" + ) + + .form-controls + label(for="editorTheme") #{translate("editor_theme")} + select( + name="editorTheme" + ng-model="settings.editorTheme" + ) + each editorTheme in editorThemes + option(value=editorTheme) #{editorTheme.replace(/_/g, ' ')} + + if (settings.overleaf != null && !isIEEE(brandVariation)) + .form-controls + label(for="overallTheme") #{translate("overall_theme")} + select( + name="overallTheme" + ng-if="!ui.loadingStyleSheet" + ng-model="settings.overallTheme" + ng-options="overallTheme.val as overallTheme.name for overallTheme in overallThemesList" + ) + p.loading.pull-right( + ng-if="ui.loadingStyleSheet" + ) + i.fa.fa-fw.fa-spin.fa-refresh + + .form-controls(ng-show="!anonymous") + label(for="mode") #{translate("keybindings")} + select( + name="mode" + ng-model="settings.mode" + ) + option(value='default') None + option(value='vim') Vim + option(value='emacs') Emacs + + .form-controls + label(for="fontSize") #{translate("font_size")} + select( + name="fontSize" + ng-model="fontSizeAsStr" + ng-model-options="{ getterSetter: true }" + ) + each size in ['10','11','12','13','14','16','18','20','22','24'] + option(value=size) #{size}px + + .form-controls + label(for="fontFamily") #{translate("font_family")} + select( + name="fontFamily" + ng-model="settings.fontFamily" + ) + option(value='monaco') Monaco / Menlo / Consolas + option(value='lucida') Lucida / Source Code Pro + .form-controls + label(for="lineHeight") #{translate("line_height")} + select( + name="lineHeight" + ng-model="settings.lineHeight" + ) + each lineHeight in ['compact', 'normal', 'wide'] + option(value=lineHeight) #{translate(lineHeight)} + + .form-controls + label(for="pdfViewer") #{translate("pdf_viewer")} + select( + name="pdfViewer" + ng-model="settings.pdfViewer" + ) + option(value="pdfjs") #{translate("built_in")} + option(value="native") #{translate("native")} + + h4 #{translate("help")} + ul.list-unstyled.nav + li(ng-controller="HotkeysModalController") + a(ng-click="openHotkeysModal()") + i.fa.fa-keyboard-o.fa-fw + | #{translate("show_hotkeys")} + + hotkeys-modal( + handle-hide="handleHide" + show="show" + track-changes-visible="trackChangesVisible" + is-mac="isMac" + ) + if showSupport + li + a(href='/learn', target="_blank") + i.fa.fa-book.fa-fw + | #{translate('documentation')} + li + a(ng-controller="ContactModal", ng-click="contactUsModal()") + i.fa.fa-question.fa-fw + | #{translate("contact_us")} + +#left-menu-mask( + ng-show="ui.leftMenuShown", + ng-click="ui.leftMenuShown = false" + ng-cloak +) + +script(type='text/ng-template', id='cloneProjectModalTemplate') + .modal-header + h3 #{translate("copy_project")} + .modal-body + .alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} + .alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")} + form(name="cloneProjectForm", novalidate) + .form-group + label #{translate("new_name")} + input.form-control( + type="text", + placeholder="New Project Name", + required, + ng-model="inputs.projectName", + on-enter="clone()", + focus-on="open" + ) + .modal-footer + button.btn.btn-default( + ng-disabled="state.inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-primary( + ng-disabled="cloneProjectForm.$invalid || state.inflight" + ng-click="clone()" + ) + span(ng-hide="state.inflight") #{translate("copy")} + span(ng-show="state.inflight") #{translate("copying")}… + +script(type='text/ng-template', id='wordCountModalTemplate') + .modal-header + h3 #{translate("word_count")} + .modal-body + div(ng-if="status.loading") + .loading(ng-show="!status.error && status.loading") + i.fa.fa-refresh.fa-spin.fa-fw + span #{translate("loading")}… + div.pdf-disabled( + ng-if="!pdf.url" + tooltip=translate('please_compile_pdf_before_word_count') + tooltip-placement="bottom" + ) + div(ng-if="!status.loading") + .container-fluid + .row(ng-show='data.messages.length > 0') + .col-xs-12 + .alert.alert-danger + p(style="white-space: pre-wrap") {{data.messages}} + .row + .col-xs-4 + .pull-right #{translate("total_words")} : + .col-xs-6 {{data.textWords}} + .row + .col-xs-4 + .pull-right #{translate("headers")} : + .col-xs-6 {{data.headers}} + .row + .col-xs-4 + .pull-right #{translate("math_inline")} : + .col-xs-6 {{data.mathInline}} + .row + .col-xs-4 + .pull-right #{translate("math_display")} : + .col-xs-6 {{data.mathDisplay}} + .modal-footer + button.btn.btn-default( + ng-disabled="state.inflight" + ng-click="cancel()" + ) #{translate("done")} + diff --git a/services/web/app/views/project/editor/new-file-modal.pug b/services/web/app/views/project/editor/new-file-modal.pug new file mode 100644 index 0000000000..9ab6832f12 --- /dev/null +++ b/services/web/app/views/project/editor/new-file-modal.pug @@ -0,0 +1,232 @@ +script(type='text/ng-template', id='newFileModalTemplate') + .modal-header + h3 Add Files + .modal-body.modal-new-file(ng-show="file_count < 2000") + table + tr + td.modal-new-file--list + ul.list-unstyled + li(ng-class="type == 'doc' ? 'active' : null") + a(href, ng-click="type = 'doc'") + i.fa.fa-fw.fa-file + | + | New File + li(ng-class="type == 'upload' ? 'active' : null") + a(href, ng-click="type = 'upload'") + i.fa.fa-fw.fa-upload + | + | Upload + li(ng-class="type == 'project' ? 'active' : null") + a(href, ng-click="type = 'project'") + i.fa.fa-fw.fa-folder-open + | + | From Another Project + if hasFeature('link-url') + li(ng-class="type == 'url' ? 'active' : null") + a(href, ng-click="type = 'url'") + i.fa.fa-fw.fa-globe + | + | From External URL + != moduleIncludes("newFileModal:selector", locals) + + td(class="modal-new-file--body modal-new-file--body-{{type}}") + div(ng-if="type == 'doc'", ng-controller="NewDocModalController") + form(novalidate, name="newDocForm") + label(for="name") File Name + input.form-control( + type="text", + placeholder="File Name", + required, + ng-model="inputs.name", + on-enter="create()", + select-name-on="open", + valid-file, + name="name" + ) + div.alert.alert-danger.row-spaced-small(ng-if="error") + div(ng-switch="error") + span(ng-switch-when="already exists") #{translate("file_already_exists")} + span(ng-switch-default) {{error}} + div.alert.alert-danger.row-spaced-small(ng-show="newDocForm.name.$error.validFile && newDocForm.name.$viewValue.length") + | #{translate('files_cannot_include_invalid_characters')} + div(ng-if="type == 'upload'", ng-controller="UploadFileModalController") + .alert.alert-warning.small(ng-if="tooManyFiles") #{translate("maximum_files_uploaded_together", {max:"{{max_files}}"})} + .alert.alert-warning.small(ng-if="rateLimitHit") #{translate("too_many_files_uploaded_throttled_short_period")} + .alert.alert-warning.small(ng-if="notLoggedIn") #{translate("session_expired_redirecting_to_login", {seconds:"{{secondsToRedirect}}"})} + .alert.alert-warning.small(ng-if="conflicts.length > 0") + p.text-center + | The following files already exist in this project: + ul.text-center.list-unstyled.row-spaced-small + li(ng-repeat="conflict in conflicts track by $index"): strong {{ conflict }} + p.text-center.row-spaced-small + | Do you want to overwrite them? + p.text-center + a(href, ng-click="doUpload()").btn.btn-primary Overwrite + | + a(href, ng-click="cancel()").btn.btn-default Cancel + div( + fine-upload + endpoint="/project/{{ project_id }}/upload" + template-id="qq-file-uploader-template" + multiple="true" + auto-upload="false" + on-complete-callback="onComplete" + on-upload-callback="onUpload" + on-validate-batch="onValidateBatch" + on-error-callback="onError" + on-submit-callback="onSubmit" + on-cancel-callback="onCancel" + control="control" + params="{'folder_id': parent_folder_id}" + ) + div(ng-if="type == 'project'", ng-controller="ProjectLinkedFileModalController") + div + form + .form-controls + label(for="project-select") Select a Project + span(ng-show="state.inFlight.projects") + | + i.fa.fa-spinner.fa-spin + select.form-control( + name="project-select" + ng-model="data.selectedProjectId" + ng-disabled="!shouldEnableProjectSelect()" + ) + option(value="" disabled selected) - Please Select a Project + option( + ng-repeat="project in data.projects" + value="{{ project._id }}" + ) {{ project.name }} + small(ng-if="hasNoProjects() && shouldEnableProjectSelect() ") + | No other projects found, please create another project first + + + .form-controls.row-spaced-small(ng-if="!state.isOutputFilesMode") + label(for="project-entity-select") Select a File + span(ng-show="state.inFlight.entities") + | + i.fa.fa-spinner.fa-spin + select.form-control( + name="project-entity-select" + ng-model="data.selectedProjectEntity" + ng-disabled="!shouldEnableProjectEntitySelect()" + ) + option(value="" disabled selected) - Please Select a File + option( + ng-repeat="projectEntity in data.projectEntities" + value="{{ projectEntity.path }}" + ) {{ projectEntity.path.slice(1) }} + + .form-controls.row-spaced-small(ng-if="state.isOutputFilesMode") + label(for="project-entity-select") Select an Output File + span(ng-show="state.inFlight.compile") + | + i.fa.fa-spinner.fa-spin + select.form-control( + name="project-output-file-select" + ng-model="data.selectedProjectOutputFile" + ng-disabled="!shouldEnableProjectOutputFileSelect()" + ) + option(value="" disabled selected) - Please Select an Output File + option( + ng-repeat="outputFile in data.projectOutputFiles" + value="{{ outputFile.path }}" + ) {{ outputFile.path }} + div.toggle-output-files-button + | or + a( + href="#" + ng-click="toggleOutputFilesMode()" + ) + span(ng-show="state.isOutputFilesMode") select from source files + span(ng-show="!state.isOutputFilesMode") select from output files + + .form-controls.row-spaced-small + label(for="name") #{translate("file_name_in_this_project")} + input.form-control( + type="text" + placeholder="example.tex" + required + ng-model="data.name" + name="name" + ) + div.alert.alert-danger.row-spaced-small(ng-if="error") + div(ng-switch="error") + span(ng-switch-when="already exists") #{translate("file_already_exists")} + span(ng-switch-when="too many files") #{translate("project_has_too_many_files")} + span(ng-switch-default) Error, something went wrong! + div(ng-if="type == 'url'", ng-controller="UrlLinkedFileModalController") + form(novalidate, name="newLinkedFileForm") + label(for="url") URL to fetch the file from + input.form-control( + type="text", + placeholder="www.example.com/my_file", + required, + ng-model="inputs.url", + focus-on="open", + on-enter="create()", + name="url" + ) + .row-spaced-small + label(for="name") #{translate("file_name_in_this_project")} + input.form-control( + type="text", + placeholder="my_file", + required, + ng-model="inputs.name", + ng-change="nameChangedByUser = true" + valid-file, + on-enter="create()", + name="name" + ) + .text-danger.row-spaced-small(ng-show="newDocForm.name.$error.validFile") + | #{translate('files_cannot_include_invalid_characters')} + div.alert.alert-danger.row-spaced-small(ng-if="error") + div(ng-switch="error") + span(ng-switch-when="already exists") #{translate("file_already_exists")} + span(ng-switch-when="too many files") #{translate("project_has_too_many_files")} + span(ng-switch-default) {{error}} + + != moduleIncludes("newFileModal:panel", locals) + + .modal-footer + .modal-footer-left.approaching-file-limit(ng-if="file_count > 1900 && file_count < 2000") + | #{translate("project_approaching_file_limit")} ({{file_count}}/2000) + .alert.alert-warning.at-file-limit(ng-if="file_count >= 2000") + | #{translate("project_has_too_many_files")} + button.btn.btn-default( + ng-disabled="state.inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-primary( + ng-disabled="state.inflight || !state.valid" + ng-click="create()" + ng-hide="type == 'upload'" + ) + span(ng-hide="state.inflight") #{translate("create")} + span(ng-show="state.inflight") #{translate("creating")}… + +script(type="text/template", id="qq-file-uploader-template") + div.qq-uploader-selector + div(qq-hide-dropzone="").qq-upload-drop-area-selector.qq-upload-drop-area + span.qq-upload-drop-area-text-selector #{translate('drop_files_here_to_upload')} + div Drag here + div.row-spaced-small.small #{translate('or')} + div.row-spaced-small + div.qq-upload-button-selector.btn.btn-primary + | Select from your computer + ul.qq-upload-list-selector + li + div.qq-progress-bar-container-selector + div( + role="progressbar" + aria-valuenow="0" + aria-valuemin="0" + aria-valuemax="100" + class="qq-progress-bar-selector qq-progress-bar" + ) + span.qq-upload-file-selector.qq-upload-file + span.qq-upload-size-selector.qq-upload-size + a(type="button").qq-btn.qq-upload-cancel-selector.qq-upload-cancel #{translate('cancel')} + button(type="button").qq-btn.qq-upload-retry-selector.qq-upload-retry #{translate('retry')} + span(role="status").qq-upload-status-text-selector.qq-upload-status-text diff --git a/services/web/app/views/project/editor/new_from_template.pug b/services/web/app/views/project/editor/new_from_template.pug new file mode 100644 index 0000000000..554b1048f8 --- /dev/null +++ b/services/web/app/views/project/editor/new_from_template.pug @@ -0,0 +1,31 @@ +extends ../../layout + +block content + .editor.full-size + .loading-screen() + .loading-screen-brand-container + .loading-screen-brand( + style="height: 20%;" + ) + + h3.loading-screen-label() #{translate("Opening template")} + span.loading-screen-ellip . + span.loading-screen-ellip . + span.loading-screen-ellip . + + form(id='create_form' method='POST' action='/project/new/template/' ng-non-bindable) + input(type="hidden", name="_csrf", value=csrfToken) + input(type="hidden" name="templateId" value=templateId) + input(type="hidden" name="templateVersionId" value=templateVersionId) + input(type="hidden" name="templateName" value=name) + input(type="hidden" name="compiler" value=compiler) + input(type="hidden" name="imageName" value=imageName) + input(type="hidden" name="mainFile" value=mainFile) + if brandVariationId + input(type="hidden" name="brandVariationId" value=brandVariationId) + +block append foot-scripts + script(type="text/javascript", nonce=scriptNonce). + $(document).ready(function(){ + $('#create_form').submit(); + }); diff --git a/services/web/app/views/project/editor/pdf.pug b/services/web/app/views/project/editor/pdf.pug new file mode 100644 index 0000000000..96718b6e0d --- /dev/null +++ b/services/web/app/views/project/editor/pdf.pug @@ -0,0 +1,430 @@ +div.full-size.pdf(ng-controller="PdfController") + if showNewLogsUI + preview-pane( + compiler-state=`{ + autoCompileHasChanges: changesToAutoCompile, + autoCompileHasLintingError: autoCompileLintingError, + isAutoCompileOn: autocompile_enabled, + isClearingCache: pdf.clearingCache, + isCompiling: pdf.compiling, + isDraftModeOn: draft, + isSyntaxCheckOn: stop_on_validation_error, + lastCompileTimestamp: pdf.lastCompileTimestamp, + logEntries: pdf.logEntries, + validationIssues: pdf.validation, + rawLog: pdf.rawLog, + compileFailed: pdf.compileFailed, + errors: { + error: pdf.error, + renderingError: pdf.renderingError, + clsiMaintenance: pdf.clsiMaintenance, + clsiUnavailable: pdf.clsiUnavailable, + tooRecentlyCompiled: pdf.tooRecentlyCompiled, + compileTerminated: pdf.compileTerminated, + rateLimited: pdf.rateLimited, + compileInProgress: pdf.compileInProgress, + timedout: pdf.timedout, + projectTooLarge: pdf.projectTooLarge, + autoCompileDisabled: pdf.autoCompileDisabled, + failure: pdf.failure + } + }` + on-clear-cache="clearCache" + on-recompile="recompile" + on-recompile-from-scratch="recompileFromScratch" + on-run-syntax-check-now="runSyntaxCheckNow" + on-set-auto-compile="setAutoCompile" + on-set-draft-mode="setDraftMode" + on-set-syntax-check="setSyntaxCheck" + on-toggle-logs="toggleLogs" + output-files="pdf.outputFiles" + pdf-download-url="pdf.downloadUrl" + split-layout="ui.pdfLayout === 'sideBySide'" + on-set-split-layout="setPdfSplitLayout" + on-set-full-layout="setPdfFullLayout" + on-stop-compilation="stop" + variant-with-first-error-popup="logsUISubvariant === 'new-logs-ui-with-popup'" + show-logs="shouldShowLogs" + on-log-entry-location-click="openInEditor" + ) + else + .toolbar.toolbar-pdf(ng-class="{ 'changes-to-autocompile': changesToAutoCompile && !autoCompileLintingError }") + .btn-group.btn-recompile-group#recompile( + dropdown, + tooltip-html="'"+translate('recompile_pdf')+" ({{modifierKey}} + Enter)'" + tooltip-class="keyboard-tooltip" + tooltip-popup-delay="500" + tooltip-append-to-body="true" + tooltip-placement="bottom" + ) + a.btn.btn-recompile( + href, + ng-disabled="pdf.compiling", + ng-click="recompile()" + ) + i.fa.fa-refresh( + ng-class="{'fa-spin': pdf.compiling }" + ) + span.btn-recompile-label(ng-show="!pdf.compiling") #{translate("recompile")} + span.btn-recompile-label(ng-show="pdf.compiling") #{translate("compiling")}… + + a.btn.btn-recompile.dropdown-toggle( + href, + ng-disabled="pdf.compiling", + dropdown-toggle + ) + span.caret + ul.dropdown-menu.dropdown-menu-left + li.dropdown-header #{translate("auto_compile")} + li + a(href, ng-click="autocompile_enabled = true") + i.fa.fa-fw(ng-class="{'fa-check': autocompile_enabled}") + | #{translate('on')} + li + a(href, ng-click="autocompile_enabled = false") + i.fa.fa-fw(ng-class="{'fa-check': !autocompile_enabled}") + | #{translate('off')} + li.dropdown-header #{translate("compile_mode")} + li + a(href, ng-click="draft = false") + i.fa.fa-fw(ng-class="{'fa-check': !draft}") + | #{translate("normal")} + li + a(href, ng-click="draft = true") + i.fa.fa-fw(ng-class="{'fa-check': draft}") + | #{translate("fast")} + span.subdued [draft] + li.dropdown-header #{translate("compile_time_checks")} + li + a(href, ng-click="stop_on_validation_error = true") + i.fa.fa-fw(ng-class="{'fa-check': stop_on_validation_error}") + | #{translate("stop_on_validation_error")} + li + a(href, ng-click="stop_on_validation_error = false") + i.fa.fa-fw(ng-class="{'fa-check': !stop_on_validation_error}") + | #{translate("ignore_validation_errors")} + li + a(href, ng-click="recompile({check:true})") + i.fa.fa-fw() + | #{translate("run_syntax_check_now")} + a( + href + ng-click="stop()" + ng-show="pdf.compiling", + tooltip=translate('stop_compile') + tooltip-placement="bottom" + ) + i.fa.fa-fw.fa-stop() + a.log-btn( + href + ng-click="toggleLogs()" + ng-class="{ 'active': shouldShowLogs == true }" + tooltip=translate('logs_and_output_files') + tooltip-placement="bottom" + ) + i.fa.fa-fw.fa-file-text-o + span.label( + ng-show="pdf.logEntries.warnings.length + pdf.logEntries.errors.length > 0" + ng-class="{\ + 'label-warning': pdf.logEntries.errors.length == 0,\ + 'label-danger': pdf.logEntries.errors.length > 0\ + }" + ) {{ pdf.logEntries.errors.length + pdf.logEntries.warnings.length }} + + a( + ng-if="!pdf.downloadUrl" + disabled + href="#" + tooltip=translate('please_compile_pdf_before_download') + tooltip-placement="bottom" + ) + i.fa.fa-fw.fa-download + a( + ng-href="{{pdf.downloadUrl || pdf.url}}" + target="_blank" + ng-if="pdf.url" + tooltip=translate('download_pdf') + tooltip-placement="bottom" + ) + i.fa.fa-fw.fa-download + + .toolbar-right + span.auto-compile-status.small( + ng-show="changesToAutoCompile && !compiling && !autoCompileLintingError" + ) #{translate('uncompiled_changes')} + span.auto-compile-status.auto-compile-error.small( + ng-show="autoCompileLintingError" + tooltip-placement="bottom" + tooltip=translate("code_check_failed_explanation") + tooltip-append-to-body="true" + ) + i.fa.fa-fw.fa-exclamation-triangle + | + | #{translate("code_check_failed")} + a( + href, + ng-click="switchToFlatLayout('pdf')" + ng-show="ui.pdfLayout == 'sideBySide'" + tooltip=translate('full_screen') + tooltip-placement="bottom" + tooltip-append-to-body="true" + ) + i.fa.fa-expand + a( + href, + ng-click="switchToSideBySideLayout('editor')" + ng-show="ui.pdfLayout == 'flat'" + tooltip=translate('split_screen') + tooltip-placement="bottom" + tooltip-append-to-body="true" + ) + i.fa.fa-compress + // end of toolbar + + // logs view + .pdf-logs(ng-show="shouldShowLogs") + .alert.alert-success(ng-show="pdf.logEntries.all.length == 0 && !pdf.failure") + | #{translate("no_errors_good_job")} + + .alert.alert-danger(ng-show="pdf.failure") + strong #{translate("compile_error")}. + span #{translate("generic_failed_compile_message")}. + + .alert.alert-danger(ng-show="pdf.failedCheck") + strong #{translate("failed_compile_check")}. + p + p.text-center(ng-show="!check") + a.text-info( + href, + ng-disabled="pdf.compiling", + ng-click="recompile({try:true})" + ) #{translate("failed_compile_check_try")} + | #{translate("failed_compile_option_or")} + a.text-info( + href, + ng-disabled="pdf.compiling", + ng-click="recompile({force:true})" + ) #{translate("failed_compile_check_ignore")} + | . + + div(ng-repeat="entry in pdf.logEntries.all") + .alert( + ng-class="{\ + 'alert-danger': entry.level == 'error',\ + 'alert-warning': entry.level == 'warning',\ + 'alert-info': entry.level == 'typesetting'\ + }" + ng-click="openInEditor(entry)" + ) + span.line-no + i.fa.fa-link(aria-hidden="true") + | + span(ng-show="entry.file") {{ entry.file }} + span(ng-show="entry.line") , line {{ entry.line }} + p.entry-message(ng-show="entry.message") + | {{ entry.type }} {{ entry.message }} + .card.card-hint( + ng-if="entry.humanReadableHint" + stop-propagation="click" + ) + figure.card-hint-icon-container + i.fa.fa-lightbulb-o(aria-hidden="true") + p.card-hint-text( + ng-show="entry.humanReadableHint", + ng-bind-html="entry.humanReadableHint") + .card-hint-footer.clearfix + .card-hint-ext-link(ng-if="entry.extraInfoURL") + a( + ng-href="{{ entry.extraInfoURL }}", + ng-click="trackLogHintsLearnMore()" + target="_blank" + ) + i.fa.fa-external-link + | #{translate("log_hint_extra_info")} + + p.entry-content(ng-show="entry.content") {{ entry.content.trim() }} + + div + .files-dropdown-container + a.btn.btn-default.btn-sm( + href, + tooltip=translate('clear_cached_files'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="openClearCacheModal()" + ) + i.fa.fa-trash-o + | + div.files-dropdown( + ng-class="shouldDropUp ? 'dropup' : 'dropdown'" + dropdown + ) + a.btn.btn-default.btn-sm( + href + dropdown-toggle + ) + | #{translate("other_logs_and_files")} + span.caret + ul.dropdown-menu.dropdown-menu-right + li(ng-repeat="file in pdf.outputFiles") + a( + ng-href="{{file.url}}" + target="_blank" + ) {{ file.name }} + a.btn.btn-info.btn-sm(href, ng-click="toggleRawLog()") + span(ng-show="!pdf.showRawLog") #{translate("view_raw_logs")} + span(ng-show="pdf.showRawLog") #{translate("hide_raw_logs")} + + pre(ng-bind="pdf.rawLog", ng-show="pdf.showRawLog") + + + // non-log views (pdf and errors) + div(ng-show="!shouldShowLogs", ng-switch on="pdf.view") + .pdf-uncompiled(ng-switch-when="uncompiled" ng-show="!pdf.compiling") + | + i.fa.fa-level-up.fa-flip-horizontal.fa-2x + | #{translate('click_here_to_preview_pdf')} + + .pdf-viewer(ng-switch-when="pdf") + div( + pdfng + ng-if="settings.pdfViewer == 'pdfjs'" + pdf-src="pdf.url" + key="{{ project_id }}" + resize-on="layout:main:resize,layout:pdf:resize" + highlights="pdf.highlights" + position="pdf.position" + first-render-done="pdf.firstRenderDone" + update-consumed-bandwidth="pdf.updateConsumedBandwidth" + dbl-click-callback="syncToCode" + ) + iframe( + ng-src="{{ pdf.url | trusted }}" + ng-if="settings.pdfViewer == 'native'" + ) + + if !showNewLogsUI + .pdf-validation-problems(ng-switch-when="validation-problems") + + .alert.alert-danger(ng-show="pdf.validation.sizeCheck") + strong #{translate("project_too_large")} + div #{translate("project_too_large_please_reduce")} + div + li(ng-repeat="entry in pdf.validation.sizeCheck.resources") {{ '/'+entry['path'] }} - {{entry['kbSize']}}kb + + .alert.alert-danger(ng-show="pdf.validation.conflictedPaths") + div + strong #{translate("conflicting_paths_found")} + div !{translate("following_paths_conflict")} + div + li(ng-repeat="entry in pdf.validation.conflictedPaths") {{ '/'+entry['path'] }} + + .alert.alert-danger(ng-show="pdf.validation.mainFile") + strong #{translate("main_file_not_found")} + span #{translate("please_set_main_file")} + + .pdf-errors(ng-switch-when="errors") + + .alert.alert-danger(ng-show="pdf.error") + strong #{translate("server_error")} + span #{translate("somthing_went_wrong_compiling")} + + .alert.alert-danger(ng-show="pdf.renderingError") + strong #{translate("pdf_rendering_error")} + span #{translate("something_went_wrong_rendering_pdf")} + + .alert.alert-danger(ng-show="pdf.clsiMaintenance") + strong #{translate("server_error")} + span #{translate("clsi_maintenance")} + + .alert.alert-danger(ng-show="pdf.clsiUnavailable") + strong #{translate("server_error")} + span #{translate("clsi_unavailable")} + + .alert.alert-danger(ng-show="pdf.tooRecentlyCompiled") + strong #{translate("server_error")} + span #{translate("too_recently_compiled")} + + .alert.alert-danger(ng-show="pdf.compileTerminated") + strong #{translate("terminated")}. + span #{translate("compile_terminated_by_user")} + + .alert.alert-danger(ng-show="pdf.rateLimited") + strong #{translate("pdf_compile_rate_limit_hit")} + span #{translate("project_flagged_too_many_compiles")} + + .alert.alert-danger(ng-show="pdf.compileInProgress") + strong #{translate("pdf_compile_in_progress_error")}. + span #{translate("pdf_compile_try_again")} + + .alert.alert-danger(ng-show="pdf.timedout") + p + strong #{translate("timedout")}. + span #{translate("proj_timed_out_reason")} + p + a.text-info(href="https://www.sharelatex.com/learn/Debugging_Compilation_timeout_errors", target="_blank") + | #{translate("learn_how_to_make_documents_compile_quickly")} + + if settings.enableSubscriptions + .alert.alert-success(ng-show="pdf.timedout && !hasPremiumCompile") + p(ng-if="project.owner._id == user.id") + strong #{translate("upgrade_for_longer_compiles")} + p(ng-if="project.owner._id != user.id") + strong #{translate("ask_proj_owner_to_upgrade_for_longer_compiles")} + p #{translate("free_accounts_have_timeout_upgrade_to_increase")} + p #{translate("plus_upgraded_accounts_receive")}: + div + ul.list-unstyled + li + i.fa.fa-check + | #{translate("unlimited_projects")} + li + i.fa.fa-check + | #{translate("collabs_per_proj", {collabcount:'Multiple'})} + li + i.fa.fa-check + | #{translate("full_doc_history")} + li + i.fa.fa-check + | #{translate("sync_to_dropbox")} + li + i.fa.fa-check + | #{translate("sync_to_github")} + li + i.fa.fa-check + |#{translate("compile_larger_projects")} + p(ng-controller="FreeTrialModalController", ng-if="project.owner._id == user.id") + a.btn.btn-success.row-spaced-small( + href + ng-class="buttonClass" + ng-click="startFreeTrial('compile-timeout')" + ) #{translate("start_free_trial")} + + .alert.alert-danger(ng-show="pdf.autoCompileDisabled") + p + strong #{translate("autocompile_disabled")}. + span #{translate("autocompile_disabled_reason")} + + .alert.alert-danger(ng-show="pdf.projectTooLarge") + strong #{translate("project_too_large")} + span #{translate("project_too_much_editable_text")} + + +script(type='text/ng-template', id='clearCacheModalTemplate') + .modal-header + h3 #{translate("clear_cache")}? + .modal-body + p #{translate("clear_cache_explanation")} + p #{translate("clear_cache_is_safe")} + .alert.alert-danger(ng-if="state.error") #{translate("generic_something_went_wrong")}. + .modal-footer + button.btn.btn-default( + ng-click="cancel()" + ng-disabled="state.inflight" + ) #{translate("cancel")} + button.btn.btn-info( + ng-click="clear()" + ng-disabled="state.inflight" + ) + span(ng-show="!state.inflight") #{translate("clear_cache")} + span(ng-show="state.inflight") #{translate("clearing")}… diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug new file mode 100644 index 0000000000..aa9cff0228 --- /dev/null +++ b/services/web/app/views/project/editor/review-panel.pug @@ -0,0 +1,628 @@ +#review-panel + .rp-in-editor-widgets + a.rp-track-changes-indicator( + href + ng-if="editor.wantTrackChanges" + ng-click="toggleReviewPanel();" + ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }" + ) !{translate("track_changes_is_on")} + a.rp-bulk-actions-btn( + href + ng-if="reviewPanel.nVisibleSelectedChanges > 1" + ng-click="showBulkAcceptDialog();" + ) + i.fa.fa-check + | #{translate("accept_all")} + | ({{ reviewPanel.nVisibleSelectedChanges }}) + a.rp-bulk-actions-btn( + href + ng-if="reviewPanel.nVisibleSelectedChanges > 1" + ng-click="showBulkRejectDialog();" + ) + i.fa.fa-times + | #{translate("reject_all")} + | ({{ reviewPanel.nVisibleSelectedChanges }}) + if hasFeature('track-changes') + a.rp-add-comment-btn( + href + ng-if="reviewPanel.entries[editor.open_doc_id]['add-comment'] != null && permissions.comment" + ng-click="addNewComment();" + ) + i.fa.fa-comment + | #{translate("add_comment")} + a.review-panel-toggler( + href + ng-click="handleTogglerClick($event);" + ) + .review-panel-toolbar + resolved-comments-dropdown( + class="rp-flex-block" + entries="reviewPanel.resolvedComments" + threads="reviewPanel.commentThreads" + resolved-ids="reviewPanel.resolvedThreadIds" + docs="docs" + on-open="refreshResolvedCommentsDropdown();" + on-unresolve="unresolveComment(threadId);" + on-delete="deleteThread(entryId, docId, threadId);" + is-loading="reviewPanel.dropdown.loading" + permissions="permissions" + ) + span.review-panel-toolbar-label + span.review-panel-toolbar-icon-on( + ng-if="editor.wantTrackChanges === true" + ) + i.fa.fa-circle + span(ng-click="toggleFullTCStateCollapse();") + span(ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")} + span(ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")} + span.rp-tc-state-collapse( + ng-class="{ 'rp-tc-state-collapse-on': reviewPanel.fullTCStateCollapsed }" + ) + i.fa.fa-angle-down + ul.rp-tc-state( + review-panel-collapse-height="reviewPanel.fullTCStateCollapsed" + ) + li.rp-tc-state-item.rp-tc-state-item-everyone + span.rp-tc-state-item-name( + tooltip=translate('tc_switch_everyone_tip') + tooltip-placement="left" + tooltip-append-to-body="true" + tooltip-popup-delay="1000" + ) !{translate("tc_everyone")} + review-panel-toggle( + description="Track changes for everyone" + ng-model="reviewPanel.trackChangesOnForEveryone" + on-toggle="toggleTrackChangesForEveryone(isOn);" + is-disabled="!project.features.trackChanges || !permissions.write" + ) + li.rp-tc-state-item( + ng-repeat="member in reviewPanel.formattedProjectMembers" + ) + span.rp-tc-state-item-name( + ng-class="{ 'rp-tc-state-item-name-disabled' : reviewPanel.trackChangesOnForEveryone}" + style="color: hsl({{ member.hue }}, 70%, 40%);" + tooltip=translate('tc_switch_user_tip') + tooltip-placement="left" + tooltip-append-to-body="true" + tooltip-popup-delay="1000" + ) {{ member.name }} + review-panel-toggle( + description="Track changes for {{ member.name }}" + ng-model="reviewPanel.trackChangesState[member.id].value" + on-toggle="toggleTrackChangesForUser(isOn, member.id);" + is-disabled="reviewPanel.trackChangesOnForEveryone || !project.features.trackChanges || !permissions.write" + ) + + li.rp-tc-state-separator + li.rp-tc-state-item.rp-tc-state-item-guests + span.rp-tc-state-item-name( + ng-class="{ 'rp-tc-state-item-name-disabled' : reviewPanel.trackChangesOnForEveryone}" + tooltip=translate('tc_switch_guests_tip') + tooltip-placement="left" + tooltip-append-to-body="true" + tooltip-popup-delay="1000" + ) !{translate("tc_guests")} + review-panel-toggle( + description="Track changes for guests" + ng-model="reviewPanel.trackChangesOnForGuests" + on-toggle="toggleTrackChangesForGuests(isOn);" + is-disabled="reviewPanel.trackChangesOnForEveryone || !project.features.trackChanges || !permissions.write || !reviewPanel.trackChangesForGuestsAvailable" + ) + + .rp-entry-list( + review-panel-sorted + ng-if="reviewPanel.subView === SubViews.CUR_FILE" + ) + .rp-entry-list-inner + .rp-entry-wrapper( + ng-repeat="(entry_id, entry) in reviewPanel.entries[editor.open_doc_id]" + ng-if="entry.visible" + ) + div(ng-if="entry.type === 'insert' || entry.type === 'delete'") + change-entry( + entry="entry" + user="users[entry.metadata.user_id]" + on-reject="rejectChanges(entry.entry_ids);" + on-accept="acceptChanges(entry.entry_ids);" + on-indicator-click="toggleReviewPanel();" + on-body-click="gotoEntry(editor.open_doc_id, entry)" + permissions="permissions" + ) + + div(ng-if="entry.type === 'aggregate-change'") + aggregate-change-entry( + entry="entry" + user="users[entry.metadata.user_id]" + on-reject="rejectChanges(entry.entry_ids);" + on-accept="acceptChanges(entry.entry_ids);" + on-indicator-click="toggleReviewPanel();" + on-body-click="gotoEntry(editor.open_doc_id, entry)" + permissions="permissions" + ) + + div(ng-if="entry.type === 'comment'") + comment-entry( + entry="entry" + threads="reviewPanel.commentThreads" + on-resolve="resolveComment(entry, entry_id)" + on-reply="submitReply(entry, entry_id);" + on-indicator-click="toggleReviewPanel();" + on-save-edit="saveEdit(entry.thread_id, comment)" + on-delete="deleteComment(entry.thread_id, comment)" + on-body-click="gotoEntry(editor.open_doc_id, entry)" + permissions="permissions" + ng-if="!reviewPanel.loadingThreads" + ) + + div(ng-if="entry.type === 'add-comment' && permissions.comment") + add-comment-entry( + on-start-new="startNewComment();" + on-submit="submitNewComment(content);" + on-cancel="cancelNewComment();" + ) + div(ng-if="entry.type === 'bulk-actions'") + bulk-actions-entry( + on-bulk-accept="showBulkAcceptDialog();" + on-bulk-reject="showBulkRejectDialog();" + n-entries="reviewPanel.nVisibleSelectedChanges" + ) + + .rp-entry-list( + ng-if="reviewPanel.subView === SubViews.OVERVIEW" + ) + .rp-loading(ng-if="reviewPanel.overview.loading") + i.fa.fa-spinner.fa-spin + .rp-overview-file( + ng-repeat="doc in docs" + ng-if="!reviewPanel.overview.loading" + ) + .rp-overview-file-header( + ng-if="(reviewPanel.entries[doc.doc.id] != null) && (reviewPanel.entries[doc.doc.id] | notEmpty)" + ng-click="reviewPanel.overview.docsCollapsedState[doc.doc.id] = ! reviewPanel.overview.docsCollapsedState[doc.doc.id]" + ) + span.rp-overview-file-header-collapse( + ng-class="{ 'rp-overview-file-header-collapse-on': reviewPanel.overview.docsCollapsedState[doc.doc.id] }" + ) + i.fa.fa-angle-down + | {{ doc.path }} + span.rp-overview-file-num-entries( + ng-show="reviewPanel.overview.docsCollapsedState[doc.doc.id]" + ) ({{ reviewPanel.entries[doc.doc.id] | numKeys }}) + + .rp-overview-file-entries( + review-panel-collapse-height="reviewPanel.overview.docsCollapsedState[doc.doc.id]" + ) + .rp-entry-wrapper( + ng-repeat="(entry_id, entry) in reviewPanel.entries[doc.doc.id] | orderOverviewEntries" + ng-if="!(entry.type === 'comment' && reviewPanel.commentThreads[entry.thread_id].resolved === true)" + ) + div(ng-if="entry.type === 'insert' || entry.type === 'delete'") + change-entry( + entry="entry" + user="users[entry.metadata.user_id]" + ng-click="gotoEntry(doc.doc.id, entry)" + permissions="permissions" + ) + + div(ng-if="entry.type === 'aggregate-change'") + aggregate-change-entry( + entry="entry" + user="users[entry.metadata.user_id]" + ng-click="gotoEntry(editor.open_doc_id, entry)" + permissions="permissions" + ) + + div(ng-if="entry.type === 'comment'") + comment-entry( + entry="entry" + threads="reviewPanel.commentThreads" + on-reply="submitReply(entry, entry_id);" + on-save-edit="saveEdit(entry.thread_id, comment)" + on-delete="deleteComment(entry.thread_id, comment)" + ng-click="gotoEntry(doc.doc.id, entry)" + permissions="permissions" + ) + + .rp-nav + a.rp-nav-item( + href + ng-click="setSubView(SubViews.CUR_FILE);" + ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.CUR_FILE }" + ) + i.fa.fa-file-text-o + span.rp-nav-label #{translate("current_file")} + a.rp-nav-item( + href + ng-click="setSubView(SubViews.OVERVIEW);" + ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.OVERVIEW }" + ) + i.fa.fa-list + span.rp-nav-label #{translate("overview")} + + .rp-unsupported-msg-wrapper + .rp-unsupported-msg + i.fa.fa-5x.fa-exclamation-triangle + p.rp-unsupported-msg-title Track Changes support in rich text mode is a work in progress. + p You can see tracked insertions and deletions, but you can't see comments and changes in this side bar yet. + p We're working hard to add them as soon as they're ready. + + +script(type='text/ng-template', id='changeEntryTemplate') + div + .rp-entry-callout( + ng-class="'rp-entry-callout-' + entry.type" + ) + .rp-entry-indicator( + ng-switch="entry.type" + ng-class="{ 'rp-entry-indicator-focused': entry.focused }" + ng-click="onIndicatorClick();" + ) + i.fa.fa-pencil(ng-switch-when="insert") + i.rp-icon-delete(ng-switch-when="delete") + .rp-entry( + ng-class="[ 'rp-entry-' + entry.type, (entry.focused ? 'rp-entry-focused' : '')]" + ) + .rp-entry-body + .rp-entry-action-icon(ng-switch="entry.type") + i.fa.fa-pencil(ng-switch-when="insert") + i.rp-icon-delete(ng-switch-when="delete") + .rp-entry-details + .rp-entry-description(ng-switch="entry.type") + span(ng-switch-when="insert") #{translate("tracked_change_added")} + ins.rp-content-highlight {{ entry.content | limitTo:(isCollapsed ? contentLimit : entry.content.length) }} + a.rp-collapse-toggle( + href + ng-if="needsCollapsing" + ng-click="toggleCollapse();" + ) {{ isCollapsed ? '… (#{translate("show_all")})' : ' (#{translate("show_less")})' }} + span(ng-switch-when="delete") #{translate("tracked_change_deleted")} + del.rp-content-highlight {{ entry.content | limitTo:(isCollapsed ? contentLimit : entry.content.length) }} + a.rp-collapse-toggle( + href + ng-if="needsCollapsing" + ng-click="toggleCollapse();" + ) {{ isCollapsed ? '… (#{translate("show_all")})' : ' (#{translate("show_less")})' }} + .rp-entry-metadata + | {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} • + span.rp-entry-user(ng-switch="user.name" style="color: hsl({{ user.hue }}, 70%, 40%);") + span(ng-switch-when="undefined") #{translate("anonymous")} + span(ng-switch-default) {{ user.name }} + .rp-entry-actions(ng-if="permissions.write") + a.rp-entry-button(href, ng-click="onReject();") + i.fa.fa-times + | #{translate("reject")} + a.rp-entry-button(href, ng-click="onAccept();") + i.fa.fa-check + | #{translate("accept")} + +script(type='text/ng-template', id='aggregateChangeEntryTemplate') + div + .rp-entry-callout.rp-entry-callout-aggregate + .rp-entry-indicator( + ng-class="{ 'rp-entry-indicator-focused': entry.focused }" + ng-click="onIndicatorClick();" + ) + i.fa.fa-pencil + .rp-entry.rp-entry-aggregate( + ng-class="{ 'rp-entry-focused': entry.focused }" + ) + .rp-entry-body + .rp-entry-action-icon + i.fa.fa-pencil + .rp-entry-details + .rp-entry-description + | #{translate("aggregate_changed")} + del.rp-content-highlight + | {{ entry.metadata.replaced_content | limitTo:(isDeletionCollapsed ? contentLimit : entry.metadata.replaced_contentlength) }} + a.rp-collapse-toggle( + href + ng-if="deletionNeedsCollapsing" + ng-click="toggleDeletionCollapse();" + ) {{ isDeletionCollapsed ? '… (#{translate("show_all")})' : ' (#{translate("show_less")})' }} + | #{translate("aggregate_to")} + ins.rp-content-highlight + | {{ entry.content | limitTo:(isInsertionCollapsed ? contentLimit : entry.contentlength) }} + a.rp-collapse-toggle( + href + ng-if="insertionNeedsCollapsing" + ng-click="toggleInsertionCollapse();" + ) {{ isInsertionCollapsed ? '… (#{translate("show_all")})' : ' (#{translate("show_less")})' }} + .rp-entry-metadata + | {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} • + span.rp-entry-user(ng-switch="user.name" style="color: hsl({{ user.hue }}, 70%, 40%);") + span(ng-switch-when="undefined") #{translate("anonymous")} + span(ng-switch-default) {{ user.name }} + .rp-entry-actions(ng-if="permissions.write") + a.rp-entry-button(href, ng-click="onReject();") + i.fa.fa-times + | #{translate("reject")} + a.rp-entry-button(href, ng-click="onAccept();") + i.fa.fa-check + | #{translate("accept")} + +script(type='text/ng-template', id='commentEntryTemplate') + .rp-comment-wrapper( + ng-class="{ 'rp-comment-wrapper-resolving': state.animating }" + ) + .rp-entry-callout.rp-entry-callout-comment + .rp-entry-indicator( + ng-class="{ 'rp-entry-indicator-focused': entry.focused }" + ng-click="onIndicatorClick();" + ) + i.fa.fa-comment + .rp-entry.rp-entry-comment( + ng-class="{ 'rp-entry-focused': entry.focused, 'rp-entry-comment-resolving': state.animating }" + ) + + .rp-loading(ng-if="!threads[entry.thread_id].submitting && (!threads[entry.thread_id] || threads[entry.thread_id].messages.length == 0)") + | #{translate("no_comments")} + .rp-comment-loaded + .rp-comment( + ng-repeat="comment in threads[entry.thread_id].messages track by comment.id" + ) + p.rp-comment-content + span(ng-if="!comment.editing") + span.rp-entry-user( + style="color: hsl({{ comment.user.hue }}, 70%, 40%);", + ) {{ comment.user.name }}: + span(ng-bind-html="comment.content | linky:'_blank':{rel: 'noreferrer noopener'}") + textarea.rp-comment-input( + expandable-text-area + ng-if="comment.editing" + ng-model="comment.content" + ng-keypress="saveEditOnEnter($event, comment);" + ng-blur="saveEdit(comment)" + autofocus + stop-propagation="click" + ) + .rp-entry-metadata(ng-if="!comment.editing") + span(ng-if="!comment.deleting") {{ comment.timestamp | date : 'MMM d, y h:mm a' }} + span.rp-comment-actions(ng-if="comment.user.isSelf && !comment.deleting") + | • + a(href, ng-click="startEditing(comment)") #{translate("edit")} + span(ng-if="threads[entry.thread_id].messages.length > 1") + | • + a(href, ng-click="confirmDelete(comment)") #{translate("delete")} + span.rp-confim-delete(ng-if="comment.user.isSelf && comment.deleting") + | #{translate("are_you_sure")} + | • + a(href, ng-click="doDelete(comment)") #{translate("delete")} + | • + a(href, ng-click="cancelDelete(comment)") #{translate("cancel")} + + .rp-loading(ng-if="threads[entry.thread_id].submitting") + i.fa.fa-spinner.fa-spin + .rp-comment-reply(ng-if="permissions.comment") + textarea.rp-comment-input( + expandable-text-area + ng-model="entry.replyContent" + ng-keypress="handleCommentReplyKeyPress($event);" + stop-propagation="click" + placeholder=translate("hit_enter_to_reply") + ) + .rp-entry-actions + button.rp-entry-button( + ng-click="animateAndCallOnResolve();" + ng-if="permissions.comment && permissions.write" + ) + i.fa.fa-inbox + | #{translate("resolve")} + button.rp-entry-button( + ng-click="onReply();" + ng-if="permissions.comment" + ng-disabled="!entry.replyContent.length" + ) + i.fa.fa-reply + | #{translate("reply")} + +script(type='text/ng-template', id='resolvedCommentEntryTemplate') + .rp-resolved-comment + div + .rp-resolved-comment-context + | #{translate("quoted_text_in")} + span.rp-resolved-comment-context-file {{ thread.docName }} + p.rp-resolved-comment-context-quote + span {{ thread.content | limitTo:(isCollapsed ? contentLimit : thread.content.length)}} + a.rp-collapse-toggle( + href + ng-if="needsCollapsing" + ng-click="toggleCollapse();" + ) {{ isCollapsed ? '… (#{translate("show_all")})' : ' (#{translate("show_less")})' }} + .rp-comment( + ng-repeat="comment in thread.messages track by comment.id" + ) + p.rp-comment-content + span.rp-entry-user( + style="color: hsl({{ comment.user.hue }}, 70%, 40%);" + ng-if="$first || comment.user.id !== thread.messages[$index - 1].user.id" + ) {{ comment.user.name }}: + span(ng-bind-html="comment.content | linky:'_blank':{rel: 'noreferrer noopener'}") + .rp-entry-metadata + | {{ comment.timestamp | date : 'MMM d, y h:mm a' }} + .rp-comment.rp-comment-resolver + p.rp-comment-resolver-content + span.rp-entry-user( + style="color: hsl({{ thread.resolved_by_user.hue }}, 70%, 40%);" + ) {{ thread.resolved_by_user.name }}: + | #{translate("mark_as_resolved")}. + .rp-entry-metadata + | {{ thread.resolved_at | date : 'MMM d, y h:mm a' }} + + .rp-entry-actions(ng-if="permissions.comment && permissions.write") + a.rp-entry-button( + href + ng-click="onUnresolve({ 'threadId': thread.threadId });" + ) + | #{translate("reopen")} + a.rp-entry-button( + href + ng-click="onDelete({ 'entryId': thread.entryId, 'docId': thread.docId, 'threadId': thread.threadId });" + ) + | #{translate("delete")} + + +script(type='text/ng-template', id='addCommentEntryTemplate') + div + .rp-entry-callout.rp-entry-callout-add-comment + .rp-entry.rp-entry-add-comment( + ng-class="[ (state.isAdding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]" + ) + a.rp-add-comment-btn( + href + ng-if="!state.isAdding" + ng-click="startNewComment();" + ) + i.fa.fa-comment + | #{translate("add_comment")} + div(ng-if="state.isAdding") + .rp-new-comment + textarea.rp-comment-input( + expandable-text-area + ng-model="state.content" + ng-keypress="handleCommentKeyPress($event);" + placeholder=translate("add_your_comment_here") + focus-on="comment:new:open" + ) + .rp-entry-actions + button.rp-entry-button.rp-entry-button-cancel( + ng-click="cancelNewComment();" + ) + i.fa.fa-times + | #{translate("cancel")} + button.rp-entry-button( + ng-click="submitNewComment()" + ng-disabled="!state.content.length" + ) + i.fa.fa-comment + | #{translate("comment")} + +script(type='text/ng-template', id='bulkActionsEntryTemplate') + div(ng-if="nEntries > 1") + .rp-entry-callout.rp-entry-callout-bulk-actions + .rp-entry.rp-entry-bulk-actions + a.rp-bulk-actions-btn( + href + ng-click="bulkReject();" + ) + i.fa.fa-times + | #{translate("reject_all")} + | ({{ nEntries }}) + a.rp-bulk-actions-btn( + href + ng-click="bulkAccept();" + ) + i.fa.fa-check + | #{translate("accept_all")} + | ({{ nEntries }}) + +script(type='text/ng-template', id='resolvedCommentsDropdownTemplate') + .resolved-comments + .resolved-comments-backdrop( + ng-class="{ 'resolved-comments-backdrop-visible' : state.isOpen }" + ng-click="state.isOpen = false" + ) + a.resolved-comments-toggle( + href + ng-click="toggleOpenState();" + tooltip=translate("resolved_comments") + tooltip-placement="bottom" + tooltip-append-to-body="true" + ) + i.fa.fa-inbox + .resolved-comments-dropdown( + ng-class="{ 'resolved-comments-dropdown-open' : state.isOpen }" + ) + .rp-loading(ng-if="isLoading") + i.fa.fa-spinner.fa-spin + .resolved-comments-scroller( + ng-if="!isLoading" + ) + resolved-comment-entry( + ng-repeat="thread in resolvedComments | orderBy:'resolved_at':true" + thread="thread" + on-unresolve="handleUnresolve(threadId);" + on-delete="handleDelete(entryId, docId, threadId);" + permissions="permissions" + ) + .rp-loading(ng-if="!resolvedComments.length") + | #{translate("no_resolved_threads")}. + +script(type="text/ng-template", id="trackChangesUpgradeModalTemplate") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("upgrade_to_track_changes")} + .modal-body + .teaser-video-container + video.teaser-video(autoplay, loop) + source(ng-src="{{ '/img/teasers/track-changes/teaser-track-changes.mp4' }}", type="video/mp4") + img(src="/img/teasers/track-changes/teaser-track-changes.gif") + + h4.teaser-title #{translate("see_changes_in_your_documents_live")} + + p.small(ng-show="startedFreeTrial") + | #{translate("refresh_page_after_starting_free_trial")} + + .row + .col-md-10.col-md-offset-1 + ul.list-unstyled + li + i.fa.fa-check + | #{translate("track_any_change_in_real_time")} + + li + i.fa.fa-check + | #{translate("review_your_peers_work")} + + li + i.fa.fa-check + | #{translate("accept_or_reject_each_changes_individually")} + + .row.text-center + div(ng-show="user.allowedFreeTrial" ng-controller="FreeTrialModalController") + a.btn.btn-success( + href + ng-click="startFreeTrial('track-changes')" + ng-show="project.owner._id == user.id" + ) #{translate("try_it_for_free")} + div(ng-show="!user.allowedFreeTrial" ng-controller="UpgradeModalController") + a.btn.btn-success( + href + ng-click="upgradePlan('project-sharing')" + ng-show="project.owner._id == user.id" + ) #{translate("upgrade")} + p(ng-show="project.owner._id != user.id"): strong #{translate("please_ask_the_project_owner_to_upgrade_to_track_changes")} + + .modal-footer() + button.btn.btn-default( + ng-click="cancel()" + ) + span #{translate("close")} + +script(type="text/ng-template", id="bulkActionsModalTemplate") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 {{ isAccept ? '#{translate("accept_all")}' : '#{translate("reject_all")}' }} + .modal-body + p(ng-if="isAccept") #{translate("bulk_accept_confirm", { nChanges: "{{ nChanges }}"})} + p(ng-if="!isAccept") #{translate("bulk_reject_confirm", { nChanges: "{{ nChanges }}"})} + .modal-footer() + button.btn.btn-default( + ng-click="cancel()" + ) + span #{translate("cancel")} + button.btn.btn-primary( + ng-click="confirm()" + ) + span #{translate("ok")} diff --git a/services/web/app/views/project/editor/source-editor.pug b/services/web/app/views/project/editor/source-editor.pug new file mode 100644 index 0000000000..7fc51ce40a --- /dev/null +++ b/services/web/app/views/project/editor/source-editor.pug @@ -0,0 +1,35 @@ +#editor( + ace-editor="editor", + ng-if="!editor.showRichText", + ng-show="!!editor.sharejs_doc && !editor.opening && multiSelectedCount === 0 && !editor.error_state", + theme="settings.editorTheme", + keybindings="settings.mode", + font-size="settings.fontSize", + auto-complete="settings.autoComplete", + auto-pair-delimiters="settings.autoPairDelimiters", + spell-check="!anonymous", + spell-check-language="project.spellCheckLanguage" + highlights="onlineUserCursorHighlights[editor.open_doc_id]" + show-print-margin="false", + sharejs-doc="editor.sharejs_doc", + last-updated="editor.last_updated", + cursor-position="editor.cursorPosition", + goto-line="editor.gotoLine", + resize-on="layout:main:resize,layout:pdf:resize,layout:review:resize,review-panel:toggle,layout:flat-screen:toggle", + annotations="pdf.logEntryAnnotations[editor.open_doc_id]", + read-only="!permissions.write", + file-name="editor.open_doc_name", + on-ctrl-enter="recompileViaKey", + on-save="recompileViaKey", + on-ctrl-j="toggleReviewPanel", + on-ctrl-shift-c="addNewCommentFromKbdShortcut", + on-ctrl-shift-a="toggleTrackChangesFromKbdShortcut", + syntax-validation="settings.syntaxValidation", + review-panel="reviewPanel", + events-bridge="reviewPanelEventsBridge" + track-changes= "editor.trackChanges", + doc-id="editor.open_doc_id" + renderer-data="reviewPanel.rendererData" + font-family="settings.fontFamily" + line-height="settings.lineHeight" +) diff --git a/services/web/app/views/project/editor/symbol-palette.pug b/services/web/app/views/project/editor/symbol-palette.pug new file mode 100644 index 0000000000..660aa78cc1 --- /dev/null +++ b/services/web/app/views/project/editor/symbol-palette.pug @@ -0,0 +1,2 @@ +if showSymbolPalette + symbol-palette(show="editor.showSymbolPalette" handle-select="editor.insertSymbol") diff --git a/services/web/app/views/project/importing.pug b/services/web/app/views/project/importing.pug new file mode 100644 index 0000000000..6d62114806 --- /dev/null +++ b/services/web/app/views/project/importing.pug @@ -0,0 +1,20 @@ +extends ../layout + +block vars + - var suppressNavbar = true + - var suppressFooter = true + - var suppressSkipToContent = true + - metadata.robotsNoindexNofollow = true + +block content + .editor(ng-controller="ImportingController").full-size + .loading-screen + .loading-screen-brand-container + .loading-screen-brand( + style="height: 20%;" + ng-style="{ 'height': state.load_progress + '%' }" + ) + h3.loading-screen-label #{translate("importing")} + span.loading-screen-ellip . + span.loading-screen-ellip . + span.loading-screen-ellip . diff --git a/services/web/app/views/project/invite/not-valid.pug b/services/web/app/views/project/invite/not-valid.pug new file mode 100644 index 0000000000..15f5599a85 --- /dev/null +++ b/services/web/app/views/project/invite/not-valid.pug @@ -0,0 +1,18 @@ +extends ../../layout + +block content + main.content.content-alt#main-content + .container + .row + .col-md-8.col-md-offset-2 + .card.project-invite-invalid + .page-header.text-centered + h1 #{translate("invite_not_valid")} + .row.text-center + .col-md-12 + p + | #{translate("invite_not_valid_description")}. + .row.text-center.actions + .col-md-12 + a.btn.btn-info(href="/project") #{translate("back_to_your_projects")} + diff --git a/services/web/app/views/project/invite/show.pug b/services/web/app/views/project/invite/show.pug new file mode 100644 index 0000000000..9b759bc76f --- /dev/null +++ b/services/web/app/views/project/invite/show.pug @@ -0,0 +1,30 @@ +extends ../../layout + +block content + main.content.content-alt#main-content + .container + .row + .col-md-8.col-md-offset-2 + .card.project-invite-accept + .page-header.text-centered + h1(ng-non-bindable) #{translate("user_wants_you_to_see_project", {username:owner.first_name, projectname:""})} + br + em(ng-non-bindable) #{project.name} + .row.text-center + .col-md-12 + p + | #{translate("accepting_invite_as")} + em(ng-non-bindable) #{user.email} + .row + .col-md-12 + form.form( + name="acceptForm", + method="POST", + action="/project/"+invite.projectId+"/invite/token/"+invite.token+"/accept" + ) + input(name='_csrf', type='hidden', value=csrfToken) + input(name='token', type='hidden', value=invite.token) + .form-group.text-center + button.btn.btn-lg.btn-primary(type="submit") + | #{translate("join_project")} + .form-group.text-center diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug new file mode 100644 index 0000000000..ea7cbc4b59 --- /dev/null +++ b/services/web/app/views/project/list.pug @@ -0,0 +1,57 @@ +extends ../layout + +block vars + - var suppressNavContentLinks = true + +block append meta + meta(name="ol-projects" data-type="json" content=projects) + meta(name="ol-tags" data-type="json" content=tags) + meta(name="ol-notifications" data-type="json" content=notifications) + meta(name="ol-notificationsInstitution" data-type="json" content=notificationsInstitution) + meta(name="ol-userAffiliations" data-type="json" content=userAffiliations) + meta(name="ol-userEmails" data-type="json" content=userEmails) + meta(name="ol-userHasNoSubscription" data-type="boolean" content=!!(settings.enableSubscriptions && !hasSubscription)) + meta(name="ol-allInReconfirmNotificationPeriods" data-type="json" content=allInReconfirmNotificationPeriods) + meta(name="ol-reconfirmedViaSAML" content=reconfirmedViaSAML) + +block content + + main.content.content-alt.project-list-page#main-content( + ng-controller="ProjectPageController" + role="main" + ) + .system-messages( + ng-cloak + ng-controller="SystemMessagesController" + ) + .system-message( + ng-repeat="message in messages" + ng-controller="SystemMessageController" + ng-hide="hidden" + ) + button(ng-hide="protected",ng-click="hide()").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + .system-message-content(ng-bind-html="htmlContent") + + include ../translations/translation_message + + .project-list-content(event-tracking=settings.overleaf ? "loads_v2_dash" : "", onboard=settings.overleaf ? "true" : "", event-tracking-trigger=settings.overleaf ? "load" : "", event-tracking-mb="true", event-segmentation="{location: 'dash', v2_onboard: true}") + .project-list-row(ng-cloak) + .project-list-container.row(ng-if="projects.length > 0") + .project-list-sidebar-wrapper.col-md-2.col-xs-3 + aside.project-list-sidebar + include ./list/side-bar + + .project-list-main.col-md-10.col-xs-9 + include ./list/notifications + include ./list/project-list + + .project-list-empty.row(ng-if="projects.length === 0") + .project-list-empty-col.col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8.col-xs-offset-2 + include ./list/empty-project-list + .row.row-spaced + .col-sm-12 + include ./list/notifications + + include ./list/modals diff --git a/services/web/app/views/project/list/empty-project-list.pug b/services/web/app/views/project/list/empty-project-list.pug new file mode 100644 index 0000000000..d5ce1dde0e --- /dev/null +++ b/services/web/app/views/project/list/empty-project-list.pug @@ -0,0 +1,46 @@ +.row.row-spaced + .col-xs-12 + .card.card-thin + div.welcome.text-centered(ng-cloak) + h2 #{translate("welcome_to_sl")} + p #{translate("new_to_latex_look_at")} + a(href="/templates") #{translate("templates").toLowerCase()} + | #{translate("or")} + a(href="/learn") #{translate("latex_help_guide")} + + + .row + .col-md-offset-4.col-md-4 + .dropdown.minimal-create-proj-dropdown(dropdown) + a.btn.btn-success.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle + ) + | Create First Project + + ul.dropdown-menu.minimal-create-proj-dropdown-menu(role="menu") + li + a( + href, + ng-click="openCreateProjectModal()" + ) #{translate("blank_project")} + li + a( + href, + ng-click="openCreateProjectModal('example')" + ) #{translate("example_project")} + li + a( + href, + ng-click="openUploadProjectModal()" + ) #{translate("upload_project")} + != moduleIncludes("newProjectMenu", locals) + if (templates) + li.divider + li.dropdown-header #{translate("templates")} + each item in templates + li + a.menu-indent(href=item.url) #{translate(item.name)} + + diff --git a/services/web/app/views/project/list/item.pug b/services/web/app/views/project/list/item.pug new file mode 100644 index 0000000000..d82a84e97c --- /dev/null +++ b/services/web/app/views/project/list/item.pug @@ -0,0 +1,136 @@ +td.project-list-table-name-cell + .project-list-table-name-container + input.project-list-table-select-item( + select-individual, + type="checkbox", + ng-model="project.selected" + stop-propagation="click" + aria-label=translate('select_project') + " '{{ project.name }}'" + ) + span.project-list-table-name + a.project-list-table-name-link( + ng-href="{{projectLink(project)}}" + stop-propagation="click" + ) {{project.name}} + span( + ng-controller="TagListController" + ) + .tag-label( + ng-repeat='tag in project.tags' + stop-propagation="click" + ) + button.label.label-default.tag-label-name( + ng-click="selectTag(tag)" + aria-label="Select tag {{ tag.name }}" + ) + i.fa.fa-circle( + aria-hidden="true" + ng-style="{ 'color': 'hsl({{ getHueForTagId(tag._id) }}, 70%, 45%)' }" + ) + | {{tag.name}} + button.label.label-default.tag-label-remove( + ng-click="removeProjectFromTag(project, tag)" + aria-label="Remove tag {{ tag.name }}" + ) + span(aria-hidden="true") × + +td.project-list-table-owner-cell + span.owner(ng-if='project.owner') {{getOwnerName(project)}} + | + i.fa.fa-question-circle.small( + ng-if="hasGenericOwnerName()" + tooltip="This project is owned by a user who hasn’t yet migrated their account to Overleaf v2" + tooltip-append-to-body="true" + aria-hidden="true" + ) + span(ng-if="isLinkSharingProject(project)") + | + i.fa.fa-link.small( + tooltip=translate("link_sharing") + tooltip-placement="right" + tooltip-append-to-body="true" + aria-label=translate("link_sharing") + ) + +td.project-list-table-lastupdated-cell + span.last-modified(tooltip="{{project.lastUpdated | formatDate}}") + | {{project.lastUpdated | fromNowDate}} + span(ng-show='project.lastUpdatedBy') + | + | #{translate('by')} + | {{getUserName(project.lastUpdatedBy)}} + + +td.project-list-table-actions-cell + div + button.btn.btn-link.action-btn( + ng-if="!(project.archived || project.trashed)" + aria-label=translate('copy'), + tooltip=translate('copy'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="openCloneProjectModal(project)" + ) + i.icon.fa.fa-files-o(aria-hidden="true") + button.btn.btn-link.action-btn( + aria-label=translate('download'), + tooltip=translate('download'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="download($event)" + ) + i.icon.fa.fa-cloud-download(aria-hidden="true") + button.btn.btn-link.action-btn( + ng-if="!project.archived" + aria-label=translate('archive'), + tooltip=translate('archive'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="archive($event)" + ) + i.icon.fa.fa-inbox(aria-hidden="true") + button.btn.btn-link.action-btn( + ng-if="!project.trashed" + aria-label=translate('trash'), + tooltip=translate('trash'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="trash($event)" + ) + i.icon.fa.fa-trash(aria-hidden="true") + button.btn.btn-link.action-btn( + ng-if="project.archived && !project.trashed" + aria-label=translate('unarchive'), + tooltip=translate('unarchive'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="unarchive($event)" + ) + i.icon.fa.fa-reply(aria-hidden="true") + button.btn.btn-link.action-btn( + ng-if="project.trashed && !project.archived" + aria-label=translate('untrash'), + tooltip=translate('untrash'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="untrash($event)" + ) + i.icon.fa.fa-reply(aria-hidden="true") + button.btn.btn-link.action-btn( + ng-if="project.trashed && !project.archived && !isOwner()" + aria-label=translate('leave'), + tooltip=translate('leave'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="leave($event)" + ) + i.icon.fa.fa-sign-out(aria-hidden="true") + button.btn.btn-link.action-btn( + ng-if="project.trashed && !project.archived && isOwner()" + aria-label=translate('delete'), + tooltip=translate('delete'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="delete($event)" + ) + i.icon.fa.fa-ban(aria-hidden="true") diff --git a/services/web/app/views/project/list/modals.pug b/services/web/app/views/project/list/modals.pug new file mode 100644 index 0000000000..e2d8465ed3 --- /dev/null +++ b/services/web/app/views/project/list/modals.pug @@ -0,0 +1,303 @@ +script(type='text/ng-template', id='newTagModalTemplate') + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("create_new_folder")} + .modal-body + form(name="newTagForm", novalidate) + input.form-control( + type="text", + placeholder="New Folder Name", + required, + ng-model="inputs.newTagName", + on-enter="create()", + focus-on="open", + stop-propagation="click" + ) + .modal-footer + .modal-footer-left + span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")} + //- We stop propagation to stop the clicks from closing the + //- 'move to folder' menu. + button.btn.btn-default( + ng-click="cancel()" + stop-propagation="click" + ) #{translate("cancel")} + button.btn.btn-primary( + ng-disabled="newTagForm.$invalid || state.inflight" + ng-click="create()" + stop-propagation="click" + ) + span(ng-show="!state.inflight") #{translate("create")} + span(ng-show="state.inflight") #{translate("creating")}… + +script(type='text/ng-template', id='deleteTagModalTemplate') + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("delete_folder")} + .modal-body + p #{translate("about_to_delete_folder")} + ul + li + strong {{tag.name}} + .modal-footer + .modal-footer-left + span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")} + button.btn.btn-default( + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-danger( + ng-click="delete()", + ng-disabled="state.inflight" + ) + span(ng-show="state.inflight") #{translate("deleting")}… + span(ng-show="!state.inflight") #{translate("delete")} + +script(type='text/ng-template', id='renameTagModalTemplate') + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("rename_folder")} + .modal-body + form(name="renameTagForm", novalidate) + input.form-control( + type="text", + placeholder="Tag Name", + ng-model="inputs.tagName", + required, + on-enter="rename()", + focus-on="open" + ) + .modal-footer + .modal-footer-left + span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")} + button.btn.btn-default(ng-click="cancel()") #{translate("cancel")} + button.btn.btn-primary( + ng-click="rename()", + ng-disabled="renameTagForm.$invalid || state.inflight" + ) + span(ng-show="!state.inflight") #{translate("rename")} + span(ng-show="state.inflight") #{translate("renaming")}… + +script(type='text/ng-template', id='renameProjectModalTemplate') + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("rename_project")} + .modal-body + .alert.alert-danger(ng-show="state.error.message") {{state.error.message}} + .alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")} + form(name="renameProjectForm", novalidate) + input.form-control( + type="text", + placeholder="Project Name", + ng-model="inputs.projectName", + required, + on-enter="rename()", + focus-on="open" + ) + .modal-footer + button.btn.btn-default(ng-click="cancel()") #{translate("cancel")} + button.btn.btn-primary( + ng-click="rename()", + ng-disabled="renameProjectForm.$invalid || state.inflight" + ) + span(ng-show="!state.inflight") #{translate("rename")} + span(ng-show="state.inflight") #{translate("renaming")}… + +script(type='text/ng-template', id='cloneProjectModalTemplate') + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("copy_project")} + .modal-body + .alert.alert-danger(ng-show="state.error.message") {{state.error.message === "invalid element name" ? "#{translate("invalid_element_name")}" : state.error.message}} + .alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")} + form(name="cloneProjectForm", novalidate) + .form-group + label #{translate("new_name")} + input.form-control( + type="text", + placeholder="New Project Name", + required, + ng-model="inputs.projectName", + on-enter="clone()", + focus-on="open" + ) + .modal-footer + button.btn.btn-default( + ng-disabled="state.inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-primary( + ng-disabled="cloneProjectForm.$invalid || state.inflight" + ng-click="clone()" + ) + span(ng-hide="state.inflight") #{translate("copy")} + span(ng-show="state.inflight") #{translate("copying")} … + +script(type='text/ng-template', id='newProjectModalTemplate') + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("new_project")} + .modal-body + .alert.alert-danger(ng-show="state.error.message") {{state.error.message}} + .alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")} + form(novalidate, name="newProjectForm") + input.form-control( + type="text", + placeholder="Project Name", + required, + ng-model="inputs.projectName", + on-enter="create()", + focus-on="open" + ) + .modal-footer + button.btn.btn-default( + ng-disabled="state.inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-primary( + ng-disabled="newProjectForm.$invalid || state.inflight" + ng-click="create()" + ) + span(ng-hide="state.inflight") #{translate("create")} + span(ng-show="state.inflight") #{translate("creating")} … + +script(type='text/ng-template', id='archiveTrashLeaveOrDeleteProjectsModalTemplate') + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3(ng-if="action === 'archive'") #{translate("archive_projects")} + h3(ng-if="action === 'trash'") #{translate("trash_projects")} + h3(ng-if="action === 'leave'") #{translate("leave_projects")} + h3(ng-if="action === 'delete'") #{translate("delete_projects")} + h3(ng-if="action === 'leaveOrDelete'") #{translate("delete_and_leave_projects")} + .modal-body + div(ng-if="action !== 'leaveOrDelete'") + p(ng-if="action === 'archive'") #{translate("about_to_archive_projects")} + p(ng-if="action === 'trash'") #{translate("about_to_trash_projects")} + p(ng-if="action === 'leave'") #{translate("about_to_leave_projects")} + p(ng-if="action === 'delete'") #{translate("about_to_delete_projects")} + ul + li(ng-repeat="project in projects | orderBy:'name'") + strong {{project.name}} + div(ng-if="action === 'archive'") + p #{translate("archiving_projects_wont_affect_collaborators")} + | + a( + href="https://www.overleaf.com/blog/new-feature-using-archive-and-trash-to-keep-your-projects-organized" + target="_blank" + ) #{translate("find_out_more_nt")} + div(ng-if="action === 'trash'") + p #{translate("trashing_projects_wont_affect_collaborators")} + | + a( + href="https://www.overleaf.com/blog/new-feature-using-archive-and-trash-to-keep-your-projects-organized" + target="_blank" + ) #{translate("find_out_more_nt")} + .project-action-alert.alert.alert-warning(ng-if="action === 'leave' || action === 'delete'") + i.fa.fa-fw.fa-exclamation-triangle + .project-action-alert-msg #{translate("this_action_cannot_be_undone")} + div(ng-if="action === 'leaveOrDelete'") + p #{translate("about_to_delete_projects")} + ul + li(ng-repeat="project in projects | filter:{accessLevel: 'owner'} | orderBy:'name'") + strong {{project.name}} + p #{translate("about_to_leave_projects")} + ul + li(ng-repeat="project in projects | filter:{accessLevel: '!owner'} | orderBy:'name'") + strong {{project.name}} + .project-action-alert.alert.alert-warning + i.fa.fa-fw.fa-exclamation-triangle + .project-action-alert-msg #{translate("this_action_cannot_be_undone")} + .modal-footer + button.btn.btn-default( + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-danger( + ng-click="confirm()" + ) #{translate("confirm")} + +script(type="text/template", id="qq-project-uploader-template") + div.qq-uploader-selector + div(qq-hide-dropzone="").qq-upload-drop-area-selector.qq-upload-drop-area + span.qq-upload-drop-area-text-selector #{translate('drop_files_here_to_upload')} + div.qq-upload-button-selector.btn.btn-primary.btn-lg + div #{translate('select_a_zip_file')} + span.or.btn-lg #{translate('or')} + span.drag-here.btn-lg #{translate('drag_a_zip_file')} + ul.qq-upload-list-selector + li + div.qq-progress-bar-container-selector + div( + role="progressbar" + aria-valuenow="0" + aria-valuemin="0" + aria-valuemax="100" + class="qq-progress-bar-selector qq-progress-bar" + ) + span.qq-upload-file-selector.qq-upload-file + span.qq-upload-size-selector.qq-upload-size + a(type="button").qq-btn.qq-upload-cancel-selector.qq-upload-cancel #{translate('cancel')} + button(type="button").qq-btn.qq-upload-retry-selector.qq-upload-retry #{translate('retry')} + span(role="status").qq-upload-status-text-selector.qq-upload-status-text + +script(type="text/ng-template", id="uploadProjectModalTemplate") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("upload_zipped_project")} + .modal-body( + fine-upload + endpoint="/project/new/upload" + template-id="qq-project-uploader-template" + multiple="false" + size-limit=zipFileSizeLimit + allowed-extensions="['zip']" + on-complete-callback="onComplete" + ) + .modal-footer + button.btn.btn-default(ng-click="cancel()") #{translate("cancel")} diff --git a/services/web/app/views/project/list/notifications.pug b/services/web/app/views/project/list/notifications.pug new file mode 100644 index 0000000000..bf47dbb655 --- /dev/null +++ b/services/web/app/views/project/list/notifications.pug @@ -0,0 +1,271 @@ +include ../../_mixins/reconfirm_affiliation + +.user-notifications(ng-controller="NotificationsController") + ul.list-unstyled( + ng-if="notifications.length > 0 && projects.length > 0", + ng-cloak + ) + li.notification-entry( + ng-repeat="notification in notifications" + ) + div(ng-switch="notification.templateKey" ng-hide="notification.hide") + .alert.alert-info( + ng-switch-when="notification_project_invite", + ng-controller="ProjectInviteNotificationController" + ) + .notification-body + span(ng-show="!notification.accepted") !{translate("notification_project_invite_message", { userName: "{{ userName }}", projectName: "{{ projectName }}" })} + span(ng-show="notification.accepted") !{translate("notification_project_invite_accepted_message", { projectName: "{{ projectName }}" })} + .notification-action + a.pull-right.btn.btn-sm.btn-info( + ng-show="notification.accepted", + href="/project/{{ notification.messageOpts.projectId }}" + ) #{translate("open_project")} + a.pull-right.btn.btn-sm.btn-info( + href, + ng-click="accept()", + ng-disabled="notification.inflight", + ng-show="!notification.accepted" + ) + span(ng-show="!notification.inflight") #{translate("join_project")} + span(ng-show="notification.inflight") + i.fa.fa-fw.fa-spinner.fa-spin(aria-hidden="true") + | + | #{translate("joining")}… + .notification-close + button(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + .alert.alert-info( + ng-switch-when="wfh_2020_upgrade_offer" + ) + .notification-body + span Important notice: Your free WFH2020 upgrade came to an end on June 30th 2020. We're still providing a number of special initiatives to help you continue collaborating throughout 2020. + .notification-action + a.pull-right.btn.btn-sm.btn-info(href="https://www.overleaf.com/events/wfh2020") View + .notification-close + button(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + .alert.alert-info( + ng-switch-when="notification_ip_matched_affiliation" + ng-if="notification.messageOpts.ssoEnabled" + ) + .notification-body + | !{translate("looks_like_youre_at", {institutionName: '{{notification.messageOpts.university_name}}'}, ['strong'])} + br + | !{translate("you_can_now_log_in_sso", {}, ['strong'])} + br + | #{translate("link_institutional_email_get_started", {}, ['strong'])} + a( + ng-href="{{notification.messageOpts.portalPath || 'https://www.overleaf.com/learn/how-to/Institutional_Login'}}" + ) #{translate("find_out_more_nt")} + .notification-action + a.pull-right.btn.btn-sm.btn-info( + ng-href=`{{samlInitPath}}?university_id={{notification.messageOpts.institutionId}}&auto=/project` + ) + | #{translate("link_account")} + .notification-close + button.btn-sm(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + .alert.alert-info( + ng-switch-when="notification_ip_matched_affiliation" + ng-if="!notification.messageOpts.ssoEnabled" + ) + .notification-body + | !{translate("looks_like_youre_at", {institutionName: '{{notification.messageOpts.university_name}}'}, ['strong'])} + br + | !{translate("did_you_know_institution_providing_professional", {institutionName: '{{notification.messageOpts.university_name}}'}, ['strong'])} + br + | #{translate("add_email_to_claim_features")} + .notification-action + a.pull-right.btn.btn-sm.btn-info( + href="/user/settings" + ) #{translate("add_affiliation")} + .notification-close + button.btn-sm(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + + .alert.alert-danger( + ng-switch-when="notification_tpds_file_limit" + ) + .notification-body + | Error: Your project + strong {{ notification.messageOpts.projectName }} + | has gone over the 2000 file limit using an integration (e.g. Dropbox or Github)
+ | Please decrease the size of your project to prevent further errors. + .notification-action + a.pull-right.btn.btn-sm.btn-info(href="/user/settings") + | Account Settings + .notification-close + button.btn-sm(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + + .alert.alert-warning( + ng-switch-when="notification_dropbox_duplicate_project_names" + ) + .notification-body + p() + | !{translate("dropbox_duplicate_project_names", { projectName: '{{notification.messageOpts.projectName}}'}, ['strong'])} + p() + | !{translate("dropbox_duplicate_project_names_suggestion", {}, ['strong'])} + | + a(href="/learn/how-to/Dropbox_Synchronization#Troubleshooting") #{translate("learn_more")} + |. + .notification-close + button.btn-sm(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + + .alert.alert-info( + ng-switch-when="notification_dropbox_unlinked_due_to_lapsed_reconfirmation" + ) + .notification-body + if user.features.dropbox + | !{translate("dropbox_unlinked_premium_feature", {}, ['strong'])} + | !{translate("can_now_relink_dropbox", {}, [{name: 'a', attrs: {href: '/user/settings#dropboxSettings' }}])} + else + | !{translate("dropbox_unlinked_premium_feature", {}, ['strong'])} + | !{translate("confirm_affiliation_to_relink_dropbox")} + | + a(href="/learn/how-to/Institutional_Email_Reconfirmation") #{translate("learn_more")} + .notification-close + button.btn-sm(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + .alert.alert-info( + ng-switch-default + ) + span(ng-bind-html="notification.html").notification-body + .notification-close + button(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + + ul.list-unstyled( + ng-if="notificationsInstitution.length > 0", + ng-cloak + ) + li.notification-entry( + ng-repeat="notification in notificationsInstitution" + ) + div(ng-switch="notification.templateKey" ng-hide="notification.hide") + .alert.alert-info( + ng-switch-when="notification_institution_sso_available" + ) + .notification-body + p !{translate("can_link_institution_email_acct_to_institution_acct", {appName: settings.appName, email: "{{notification.email}}", institutionName: "{{notification.institutionName}}"})} + div !{translate("doing_this_allow_log_in_through_institution", {appName: settings.appName})} + .notification-action + a.btn.btn-sm.btn-info(ng-href="{{samlInitPath}}?university_id={{notification.institutionId}}&auto=/project&email={{notification.email}}") + | #{translate('link_account')} + + .alert.alert-info( + ng-switch-when="notification_institution_sso_linked" + ) + .notification-body + div !{translate("account_has_been_link_to_institution_account", {appName: settings.appName, email: "{{notification.email}}", institutionName: "{{notification.institutionName}}"})} + .notification-close + button(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + + .alert.alert-warning( + ng-switch-when="notification_institution_sso_non_canonical" + ) + .notification-body + div + i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true") + | !{translate("tried_to_log_in_with_email", {email: "{{notification.requestedEmail}}"})} !{translate("in_order_to_match_institutional_metadata_associated", {email: "{{notification.institutionEmail}}"})} + .notification-close + button(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + + .alert.alert-info( + ng-switch-when="notification_institution_sso_already_registered" + ) + .notification-body + | !{translate("tried_to_register_with_email", {appName: settings.appName, email: "{{notification.email}}"})} + | #{translate("we_logged_you_in")} + .notification-action + a.btn.btn-sm.btn-info(href="/learn/how-to/Institutional_Login") + | #{translate("find_out_more")} + .notification-close + button(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + + .alert.alert-danger(ng-switch-when="notification_institution_sso_error") + .notification-body + div + i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true") + | #{translate("generic_something_went_wrong")}. + div(ng-if="notification.error.translatedMessage" ng-bind-html="notification.error.translatedMessage") + div(ng-else="notification.error.message") {{ notification.error.message}} + div(ng-if="notification.error.tryAgain") #{translate("try_again")}. + + .notification-close + button(ng-click="dismiss(notification)").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} + + ul.list-unstyled( + ng-controller="EmailNotificationController", + ng-cloak + ) + li.notification-entry( + ng-repeat="userEmail in userEmails", + ng-if="showConfirmEmail(userEmail) && projects.length > 0" + ) + .alert.alert-warning + .notification-body + div(ng-if="!userEmail.confirmationInflight") + | #{translate("please_confirm_email", {emailAddress: "{{ userEmail.email }}"})} + | + a( + href + ng-click="resendConfirmationEmail(userEmail)" + ) (#{translate('resend_confirmation_email')}) + div(ng-if="userEmail.confirmationInflight") + i.fa.fa-spinner.fa-spin(aria-hidden="true") + | + | #{translate('resending_confirmation_email')}… + div(ng-if="!userEmail.confirmationInflight && userEmail.error" aria-live="polite") + span(ng-if="userEmail.errorMessage") {{ userEmail.errorMessage }} + span(ng-if="!userEmail.errorMessage") #{translate('generic_something_went_wrong')} + + ui.list-unstyled(ng-controller="UserAffiliationsReconfirmController") + li.notification-entry( + ng-repeat="userEmail in allInReconfirmNotificationPeriods" + ) + .alert.alert-info() + +reconfirmAffiliationNotification('/project') + + li.notification-entry( + ng-repeat="userEmail in userEmails" + ng-if="userEmail.samlIdentifier && userEmail.samlIdentifier.providerId === reconfirmedViaSAML" + ) + +reconfirmedAffiliationNotification() + + - var hasPaidAffiliation = userAffiliations.some(affiliation => affiliation.licence && affiliation.licence !== 'free') + if settings.enableSubscriptions && !hasSubscription && !hasPaidAffiliation + ul.list-unstyled( + ng-controller="DismissableNotificationsController", + ng-cloak + ) + li.notification-entry( + ng-if="shouldShowNotification && projects.length > 0" + ) + .alert.alert-info + .notification-body + span To help you work from home throughout 2021, we're providing discounted plans and special initiatives. + .notification-action + a.pull-right.btn.btn-sm.btn-info(href="https://www.overleaf.com/events/wfh2021" event-tracking="Event-Pages" event-tracking-trigger="click" event-tracking-ga="WFH-Offer-Click" event-tracking-label="Dash-Banner") Upgrade + .notification-close + button(ng-click="dismiss()").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} diff --git a/services/web/app/views/project/list/project-list.pug b/services/web/app/views/project/list/project-list.pug new file mode 100644 index 0000000000..bfdb87871c --- /dev/null +++ b/services/web/app/views/project/list/project-list.pug @@ -0,0 +1,219 @@ +.row + .col-xs-12(ng-cloak) + form.project-search.form-horizontal(role="form") + .form-group.has-feedback.has-feedback-left.col-md-7.col-xs-12 + input.form-control.col-md-7.col-xs-12( + placeholder=translate('search_projects')+"…", + aria-label=translate('search_projects')+"…", + autofocus='autofocus', + ng-model="searchText.value", + focus-on='search:clear', + ng-keyup="searchProjects()" + ) + i.fa.fa-search.form-control-feedback-left(aria-hidden="true") + i.fa.fa-times.form-control-feedback( + ng-click="clearSearchText()", + style="cursor: pointer;", + ng-show="searchText.value.length > 0" + aria-hidden="true" + ) + button.sr-only( + type="button" + ng-click="clearSearchText()" + ng-show="searchText.value.length > 0" + ) #{translate('clear_search')} + + .project-tools(ng-cloak) + .btn-toolbar + .btn-group(ng-hide="selectedProjects.length < 1") + a.btn.btn-default( + href, + aria-label=translate('download'), + tooltip=translate('download'), + tooltip-placement="bottom", + tooltip-append-to-body="true", + ng-click="downloadSelectedProjects()" + ) + i.fa.fa-cloud-download(aria-hidden="true") + a.btn.btn-default( + href, + ng-if="filter !== 'archived'" + aria-label=translate("archive"), + tooltip=translate("archive"), + tooltip-placement="bottom", + tooltip-append-to-body="true", + ng-click="openArchiveProjectsModal()" + ) + i.fa.fa-inbox(aria-hidden="true") + a.btn.btn-default( + href, + ng-if="filter !== 'trashed'" + aria-label=translate("trash"), + tooltip=translate("trash"), + tooltip-placement="bottom", + tooltip-append-to-body="true", + ng-click="openTrashProjectsModal()" + ) + i.fa.fa-trash(aria-hidden="true") + .btn-group.dropdown( + ng-hide="selectedProjects.length < 1 || filter === 'archived' || filter === 'trashed'", + dropdown + ) + a.btn.btn-default.dropdown-toggle( + href, + data-toggle="dropdown", + dropdown-toggle, + tooltip=translate('add_to_folders'), + tooltip-append-to-body="true", + tooltip-placement="bottom" + ) + i.fa.fa-folder-open + | + span.caret + span.sr-only #{translate('add_to_folders')} + ul.dropdown-menu.dropdown-menu-right.js-tags-dropdown-menu.tags-dropdown-menu( + role="menu" + ng-controller="TagListController" + ) + li.dropdown-header #{translate("add_to_folder")} + li( + ng-repeat="tag in tags | orderBy:'name'", + ng-controller="TagDropdownItemController" + ) + a(href="#", ng-click="addOrRemoveProjectsFromTag()", stop-propagation="click") + i.fa( + ng-class="{\ + 'fa-check-square-o': areSelectedProjectsInTag == true,\ + 'fa-square-o': areSelectedProjectsInTag == false,\ + 'fa-minus-square-o': areSelectedProjectsInTag == 'partial'\ + }" + ) + span.sr-only Add or remove project from tag + | {{tag.name}} + li.divider + li + a(href, ng-click="openNewTagModal()", stop-propagation="click") #{translate("create_new_folder")} + + .btn-group.dropdown( + ng-hide="selectedProjects.length != 1 || filter === 'archived' || filter === 'trashed'", + dropdown + ) + a.btn.btn-default.dropdown-toggle( + href, + data-toggle="dropdown", + dropdown-toggle + ) #{translate("more")} + span.caret + ul.dropdown-menu.dropdown-menu-right(role="menu") + li(ng-show="getFirstSelectedProject().accessLevel == 'owner'") + a( + href, + ng-click="openRenameProjectModal()" + ) #{translate("rename")} + li + a( + href, + ng-click="openCloneProjectModal(getFirstSelectedProject())" + ) #{translate("make_copy")} + + .btn-group(ng-show="filter === 'archived' && selectedProjects.length > 0") + a.btn.btn-default( + href, + data-original-title=translate("unarchive"), + data-toggle="tooltip", + data-placement="bottom", + ng-click="unarchiveProjects(selectedProjects)" + ) #{translate("unarchive")} + + .btn-group(ng-show="filter === 'trashed' && selectedProjects.length > 0") + a.btn.btn-default( + href, + data-original-title=translate("untrash"), + data-toggle="tooltip", + data-placement="bottom", + ng-click="untrashProjects(selectedProjects)" + ) #{translate("untrash")} + + .btn-group(ng-show="filter === 'trashed' && selectedProjects.length > 0") + a.btn.btn-danger( + href, + ng-if="hasLeavableProjectsSelected() && !hasDeletableProjectsSelected()", + data-original-title=translate('leave'), + data-toggle="tooltip", + data-placement="bottom", + ng-click="openLeaveProjectsModal()" + ) #{translate("leave")} + + a.btn.btn-danger( + href, + ng-if="hasDeletableProjectsSelected() && !hasLeavableProjectsSelected()", + data-original-title=translate('delete'), + data-toggle="tooltip", + data-placement="bottom", + ng-click="openDeleteProjectsModal()" + ) #{translate("delete")} + + a.btn.btn-danger( + href, + ng-if="hasDeletableProjectsSelected() && hasLeavableProjectsSelected()", + data-original-title=translate('delete_and_leave'), + data-toggle="tooltip", + data-placement="bottom", + ng-click="openLeaveOrDeleteProjectsModal()" + ) #{translate("delete_and_leave")} + +.row.row-spaced + .col-xs-12 + .card.card-thin.project-list-card + ul.list-unstyled.project-list.structured-list( + select-all-list, + ng-if="projects.length > 0", + max-height="projectListHeight - 25", + ng-cloak + ) + table.project-list-table + tr.project-list-table-header-row + th.project-list-table-name-cell + .project-list-table-name-container + input.project-list-table-select-item( + select-all, + type="checkbox" + aria-label=translate('select_all_projects') + ) + span.header.clickable.project-list-table-name(ng-click="changePredicate('name')") #{translate("title")} + i.tablesort.fa(ng-class="getSortIconClass('name')" aria-hidden="true") + button.sr-only(ng-click="changePredicate('name')") Sort by #{translate("title")} + th.project-list-table-owner-cell + span.header.clickable(ng-click="changePredicate('ownerName')") #{translate("owner")} + i.tablesort.fa(ng-class="getSortIconClass('ownerName')" aria-hidden="true") + button.sr-only(ng-click="changePredicate('ownerName')") Sort by #{translate("owner")} + th.project-list-table-lastupdated-cell + span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")} + i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')" aria-hidden="true") + button.sr-only(ng-click="changePredicate('lastUpdated')") Sort by #{translate("last_modified")} + th.project-list-table-actions-cell + span.header #{translate("actions")} + tr.project-list-table-row( + ng-repeat="project in visibleProjects | orderBy:getValueForCurrentPredicate:reverse:comparator", + ng-controller="ProjectListItemController" + select-row + ) + include ./item + tr( + ng-if="visibleProjects.length == 0", + ng-cloak + ) + td(colspan="4").project-list-table-no-projects-cell + span.small #{translate("no_projects")} + + div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak) + h2 #{translate("welcome_to_sl")} + p #{translate("new_to_latex_look_at")} + a(href="/templates") #{translate("templates").toLowerCase()} + | #{translate("or")} + a(href="/learn") #{translate("latex_help_guide")} + | , + br + | #{translate("or_create_project_left")} + + diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug new file mode 100644 index 0000000000..9f9fb6668b --- /dev/null +++ b/services/web/app/views/project/list/side-bar.pug @@ -0,0 +1,149 @@ +.dropdown( + dropdown + dropdown-append-to-body +) + a.btn.btn-primary.sidebar-new-proj-btn.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle + ) + | #{translate("new_project")} + + ul.dropdown-menu(role="menu") + li + a( + href, + ng-click="openCreateProjectModal()" + ) #{translate("blank_project")} + li + a( + href, + ng-click="openCreateProjectModal('example')" + ) #{translate("example_project")} + li + a( + href, + ng-click="openUploadProjectModal()" + ) #{translate("upload_project")} + != moduleIncludes("newProjectMenu", locals) + + if portalTemplates.length > 0 + //- portalTemplates is set in ProjectController + li.divider + li.dropdown-header #{translate("institution")} #{translate("templates")} + for portal in portalTemplates + li + a.menu-indent( + href=portal.url + "#templates", + ng-non-bindable + ) #{portal.name} + + + + if (templates) + //- templates is an express local var, via settings.templateLinks + li.divider + li.dropdown-header #{translate("templates")} + each item in templates + li + a.menu-indent(href=item.url) #{translate(item.name)} + +.row-spaced(ng-if="projects.length > 0", ng-cloak) + ul.list-unstyled.folders-menu( + ng-controller="TagListController" + ) + li(ng-class="{active: (filter == 'all')}", ng-click="filterProjects('all')") + a(href) #{translate("all_projects")} + li(ng-class="{active: (filter == 'owned')}", ng-click="filterProjects('owned')") + a(href) #{translate("your_projects")} + li(ng-class="{active: (filter == 'shared')}", ng-click="filterProjects('shared')") + a(href) #{translate("shared_with_you")} + li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')") + a(href) #{settings.overleaf ? translate("archived_projects") : translate("deleted_projects")} + li(ng-class="{active: (filter == 'trashed')}", ng-click="filterProjects('trashed')") + a(href) #{translate("trashed_projects")} + li.separator + h2 #{translate("tags_slash_folders")} + li.tag(ng-cloak) + a.tag-name(href, ng-click="openNewTagModal()") + i.fa.fa-fw.fa-plus(aria-hidden="true") + span.name #{translate("new_folder")} + li.tag( + ng-repeat="tag in tags | orderBy:'name'", + ng-class="{active: tag.selected}", + ng-cloak, + ng-click="selectTag(tag)" + ) + a.tag-name(href) + i.icon.fa.fa-fw( + ng-class="{\ + 'fa-folder-open': tag.selected,\ + 'fa-folder': !tag.selected\ + }" + ng-style="{ 'color': 'hsl({{ getHueForTagId(tag._id) }}, 70%, 45%)' }" + aria-hidden="true" + ) + span.name {{tag.name}} + span.subdued ({{countProjectsForTag(tag)}}) + + span.dropdown.tag-menu(dropdown) + a.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle, + stop-propagation="click" + ) + span.caret + ul.dropdown-menu.dropdown-menu-right( + role="menu" + ) + li + a(href, ng-click="renameTag(tag)", stop-propagation="click") + | #{translate("rename")} + li + a(href, ng-click="deleteTag(tag)", stop-propagation="click") + | #{translate("delete")} + li.tag.untagged( + ng-if="tags.length", + ng-cloak, + ng-click="selectUntagged()" + ng-class="{active: filter === 'untagged'}", + ) + a.tag-name(href) + span.name + | #{translate("uncategorized")} + span.subdued ({{ nUntagged }}) + +.row-spaced(ng-if="projects.length == 0", ng-cloak) + .first-project + div + i.fa.fa-arrow-up.fa-2x(aria-hidden="true") + div + strong #{translate("create_your_first_project")} + +if (isOverleaf) + span(ng-controller="LeftHandMenuPromoController", ng-cloak) + + .row-spaced#userProfileInformation(ng-if="hasProjects") + div(ng-hide="withAffiliations", ng-cloak) + hr + .text-centered.user-profile + p Are you affiliated with an institution? + + a.btn.btn-info( + href="/user/settings" + ) Add Affiliation + + //- .row-spaced(ng-if="hasProjects && userHasNoSubscription && !userOnPayingUniversity", ng-cloak).text-centered + //- hr + //- p.small #{translate("on_free_sl")} + //- p + //- a(href="/user/subscription/plans" ng-click="upgradeSubscription()").btn.btn-primary #{translate("upgrade")} + //- p.small.text-centered + //- | #{translate("or_unlock_features_bonus")} + //- a(href="/user/bonus" ng-click="share()") #{translate("sharing_sl")}. + .row-spaced(ng-if="hasProjects && userHasNoSubscription && !userOnPayingUniversity", ng-cloak).text-centered + hr + p.small To help you work from home throughout 2021, we're providing discounted plans and special initiatives. + p + a(href="https://www.overleaf.com/events/wfh2021" event-tracking="Event-Pages" event-tracking-trigger="click" event-tracking-ga="WFH-Offer-Click" event-tracking-label="Dash-Sidebar").btn.btn-primary Upgrade diff --git a/services/web/app/views/project/token/access.pug b/services/web/app/views/project/token/access.pug new file mode 100644 index 0000000000..a269a5183c --- /dev/null +++ b/services/web/app/views/project/token/access.pug @@ -0,0 +1,100 @@ +extends ../../layout + +block vars + - metadata = { viewport: true } + +block content + + script(type="template", id="overleaf-token-access-data")!= StringHelper.stringifyJsonForScript({ postUrl: postUrl, csrfToken: csrfToken}) + + div( + ng-controller="TokenAccessPageController", + ng-init="post()" + ) + .editor.full-size + div + | + a(href="/project", style="font-size: 2rem; margin-left: 1rem; color: #ddd;") + i.fa.fa-arrow-left + + .loading-screen( + ng-show="mode == 'accessAttempt'" + ) + .loading-screen-brand-container + .loading-screen-brand() + + h3.loading-screen-label.text-center + | #{translate('join_project')} + span(ng-show="accessInFlight == true") + span.loading-screen-ellip . + span.loading-screen-ellip . + span.loading-screen-ellip . + + + .global-alerts.text-center(ng-cloak) + div(ng-show="accessError", ng-cloak) + br + div(ng-switch="accessError", ng-cloak) + div(ng-switch-when="not_found") + h4(aria-live="assertive") + | Project not found + + div(ng-switch-default) + .alert.alert-danger(aria-live="assertive") #{translate('token_access_failure')} + p + a(href="/") #{translate('home')} + + .loading-screen( + ng-show="mode == 'v1Import'" + ) + .container + .row + .col-sm-8.col-sm-offset-2 + h1.text-center + span(ng-if="v1ImportData.status != 'mustLogin'") Overleaf v1 Project + span(ng-if="v1ImportData.status == 'mustLogin'") Please Log In + img.v2-import__img( + src="/img/v1-import/v2-editor.png" + alt="The new V2 editor." + ) + + div(ng-if="v1ImportData.status == 'cannotImport'") + h2.text-center + | Cannot Access Overleaf v1 Project + p.text-center.row-spaced-small + | Please contact the project owner or + | + a(href="/contact") contact support + | + | for assistance. + + div(ng-if="v1ImportData.status == 'mustLogin'") + p.text-center.row-spaced-small + | You will need to log in to access this project. + + .row-spaced.text-center + a.btn.btn-primary( + href="/login?redir={{ currentPath() }}" + ) Log In To Access Project + + div(ng-if="v1ImportData.status == 'canDownloadZip'") + p.text-center.row-spaced.small + | #[strong() {{ getProjectName() }}] has not yet been moved into + | the new version of Overleaf. This project was created + | anonymously and therefore cannot be automatically imported. + | Please download a zip file of the project and upload that to + | continue editing it. If you would like to delete this project + | after you have made a copy, please contact support. + + .row-spaced.text-center + a.btn.btn-primary(ng-href="{{ buildZipDownloadPath(v1ImportData.projectId) }}") + | Download project zip file + + +block append foot-scripts + script(type="text/javascript", nonce=scriptNonce). + $(document).ready(function () { + setTimeout(function() { + $('.loading-screen-brand').css('height', '20%') + }, 500); + }); diff --git a/services/web/app/views/referal/bonus.pug b/services/web/app/views/referal/bonus.pug new file mode 100644 index 0000000000..67c202c471 --- /dev/null +++ b/services/web/app/views/referal/bonus.pug @@ -0,0 +1,169 @@ +extends ../layout + +block content + .content.content-alt + .container.bonus + .row + .col-md-8.col-md-offset-2 + .card + .container-fluid(ng-controller="BonusLinksController") + .row + .col-md-12 + .page-header + h1 #{translate("help_us_spread_word")}. + + + .row + .col-md-10.col-md-offset-1 + h2 #{translate("share_sl_to_get_rewards")} + + .row + .col-md-8.col-md-offset-2.bonus-banner + .bonus-top + + .row + .col-md-8.col-md-offset-2.bonus-banner + .title + a(href='https://twitter.com/share?text='+encodeURIComponent(translate("bonus_twitter_share_text"))+'&url='+encodeURIComponent(buildReferalUrl("t"))+'&counturl='+settings.social.twitter.counturl, target="_blank").twitter + i.fa.fa-fw.fa-2x.fa-twitter(aria-hidden="true") + | + | Tweet + + .row + .col-md-8.col-md-offset-2.bonus-banner + .title + a(href='#').facebook + i.fa.fa-fw.fa-2x.fa-facebook-square(aria-hidden="true") + | + | #{translate("post_on_facebook")} + + .row + .col-md-8.col-md-offset-2.bonus-banner + .title + a(href='mailto:?subject='+encodeURIComponent(translate("bonus_email_share_header"))+'&body='+encodeURIComponent(translate("bonus_email_share_body")+' ')+encodeURIComponent(buildReferalUrl("e")), title='Share by Email').email + i.fa.fa-fw.fa-2x.fa-envelope-open-o(aria-hidden="true") + | + | #{translate("email_us_to_your_friends")} + + .row + .col-md-8.col-md-offset-2.bonus-banner + .title + a(href='#link-modal', data-toggle="modal", ng-click="openLinkToUsModal()").link + i.fa.fa-fw.fa-2x.fa-globe(aria-hidden="true") + | + | #{translate("link_to_us")} + + .row + .col-md-10.col-md-offset-1.bonus-banner + h2.direct-link #{translate("direct_link")} + pre.text-centered #{buildReferalUrl("d")} + + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner + p.thanks !{translate("sl_gives_you_free_stuff_see_progress_below")} + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 30px; margin-top: 20px;") + - for (var i = 0; i <= 10; i++) { + if (refered_user_count == i) + .number(style="left: "+i+"0%").active #{i} + else + .number(style="left: "+i+"0%") #{i} + - } + + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner + .progress + if (refered_user_count == 0) + div(style="text-align: center; padding: 4px;") #{translate("spread_the_word_and_fill_bar")} + .progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%") + + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 110px;") + .perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")} + .perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")} + .perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")} + .perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("unlimited_collabs")} + .row + + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner.bonus-status + if (refered_user_count == 0) + p.thanks !{translate("you_not_introed_anyone_to_sl")} + else if (refered_user_count == 1) + p.thanks !{translate("you_introed_small_number", {numberOfPeople: refered_user_count}, ['strong'])} + else + p.thanks !{translate("you_introed_high_number", {numberOfPeople: refered_user_count}, ['strong'])} + + script(type="text/ng-template", id="BonusLinkToUsModal") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 #{translate("link_to_sl")} + .modal-body.modal-body-share.link-modal + + p #{translate("can_link_to_sl_with_html")} + p + textarea.col-md-12(readonly=true) + #{translate("bonus_share_link_text")} + + p #{translate("thanks")}! + + + .modal-footer() + button.btn.btn-default( + ng-click="cancel()", + ) + span #{translate("close")} + + +block append foot-scripts + script(type="text/javascript", nonce=scriptNonce). + $(document).ready(function () { + $.ajax({dataType: "script", cache: true, url: "//connect.facebook.net/en_US/all.js"}).done(function () { + window.fbAsyncInit = function() { + FB.init({appId: '#{settings.social.facebook.appId}', xfbml: true}); + } + }); + }); + + function postToFeed() { + // calling the API ... + var obj = { + method: 'feed', + redirect_uri: '#{settings.social.facebook.redirectUri}', + link: '!{buildReferalUrl("fb")}', + picture: '#{settings.social.facebook.picture}', + name: '#{translate("bonus_facebook_name").replace(/\'/g, "\\x27")}', + caption: '#{translate("bonus_facebook_caption").replace(/\'/g, "\\x27")}', + description: '#{translate("bonus_facebook_description").replace(/\'/g, "\\x27")}' + }; + + if (typeof FB !== "undefined" && FB !== null) { + FB.ui(obj); + } + } + + script(type="text/javascript", nonce=scriptNonce, src='//platform.twitter.com/widgets.js') + + script(type="text/javascript", nonce=scriptNonce). + $(function() { + $(".twitter").click(function() { + ga('send', 'event', 'referal-button', 'clicked', "twitter") + }); + $(".email").click(function() { + ga('send', 'event', 'referal-button', 'clicked', "email") + }); + $(".facebook").click(function(e) { + ga('send', 'event', 'referal-button', 'clicked', "facebook") + postToFeed() + e.preventDefault() + }); + $(".link").click(function() { + ga('send', 'event', 'referal-button', 'clicked', "direct-link") + }); + }); diff --git a/services/web/app/views/subscriptions/_modal_group_purchase.pug b/services/web/app/views/subscriptions/_modal_group_purchase.pug new file mode 100644 index 0000000000..e8da6d0b60 --- /dev/null +++ b/services/web/app/views/subscriptions/_modal_group_purchase.pug @@ -0,0 +1,56 @@ +script(type="text/ng-template", id="groupPlanModalPurchaseTemplate") + .modal-header + h3 Save 30% or more with a group license + .modal-body.plans + .container-fluid + .row + .col-md-6.text-center + .circle.circle-lg + | {{ displayPrice }} + span.small / year + br + span.circle-subtext For {{ selected.size }} users + ul.list-unstyled + li Each user will have access to: + li + li(ng-if="selected.plan_code == 'collaborator'") + strong #{translate("collabs_per_proj", {collabcount:10})} + li(ng-if="selected.plan_code == 'professional'") + strong #{translate("unlimited_collabs")} + +features_premium + .col-md-6 + form.form + .form-group + label(for='plan_code') + | Plan + select.form-control(id="plan_code", ng-model="selected.plan_code") + option(ng-repeat="plan_code in options.plan_codes", value="{{plan_code.code}}") {{ plan_code.display }} + .form-group + label(for='size') + | Number of users + select.form-control(id="size", ng-model="selected.size") + option(ng-repeat="size in options.sizes", value="{{size}}") {{ size }} + .form-group + label(for='currency') + | Currency + select.form-control(id="currency", ng-model="selected.currency") + option(ng-repeat="currency in options.currencies", value="{{currency.code}}") {{ currency.display }} + .form-group + label(for='usage') + | Usage + select.form-control(id="usage", ng-model="selected.usage") + option(ng-repeat="usage in options.usages", value="{{usage.code}}") {{ usage.display }} + p.small.text-center.row-spaced-small(ng-show="selected.usage == 'educational'") + | The 40% educational discount can be used by students or faculty using Overleaf for teaching + p.small.text-center.row-spaced-small(ng-show="selected.usage == 'enterprise'") + | Save an additional 40% on groups of 10 or more with our educational discount + .modal-footer + .text-center + button.btn.btn-primary.btn-lg(ng-click="purchase()") Purchase Now + hr.thin + a( + href + ng-controller="ContactGeneralModal" + ng-click="openModal()" + ) Need more than 50 licenses? Please get in touch + diff --git a/services/web/app/views/subscriptions/_plans_faq.pug b/services/web/app/views/subscriptions/_plans_faq.pug new file mode 100644 index 0000000000..4fc39e49f4 --- /dev/null +++ b/services/web/app/views/subscriptions/_plans_faq.pug @@ -0,0 +1,34 @@ +.faq + .row.row-spaced-large + .col-md-12 + .page-header.plans-header.plans-subheader.text-centered + h2 FAQ + .row + .col-md-6 + h3 #{translate("faq_how_free_trial_works_question")} + p #{translate('faq_how_does_free_trial_works_answer', { appName:'{{settings.appName}}', len:'{{trial_len}}' })} + .col-md-6 + h3 #{translate('faq_change_plans_question')} + p #{translate('faq_change_plans_answer')} + .row + .col-md-6 + h3 #{translate('faq_do_collab_need_premium_question')} + p #{translate('faq_do_collab_need_premium_answer')} + .col-md-6 + h3 #{translate('faq_need_more_collab_question')} + p !{translate('faq_need_more_collab_answer', { referFriendsLink: translate('referring_your_friends') })} + .row + .col-md-6 + h3 #{translate('faq_purchase_more_licenses_question')} + p !{translate('faq_purchase_more_licenses_answer', { groupLink: translate('discounted_group_accounts') })} + a(href='#groups', ng-click="openGroupPlanModal()") #{translate("get_in_touch_for_details")} + .col-md-6 + h3 #{translate('faq_monthly_or_annual_question')} + p #{translate('faq_monthly_or_annual_answer')} + .row + .col-md-6 + h3 #{translate('faq_how_to_pay_question')} + p #{translate('faq_how_to_pay_answer')} + .col-md-6 + h3 #{translate('faq_pay_by_invoice_question')} + p !{translate('faq_pay_by_invoice_answer', {}, [{ name: 'a', attrs: { href: "#pay-by-invoice", 'ng-controller': "ContactGeneralModal", 'ng-click': "openModal()" }}])} diff --git a/services/web/app/views/subscriptions/_plans_page_mixins.pug b/services/web/app/views/subscriptions/_plans_page_mixins.pug new file mode 100644 index 0000000000..7ed35769a9 --- /dev/null +++ b/services/web/app/views/subscriptions/_plans_page_mixins.pug @@ -0,0 +1,240 @@ +//- Buy Buttons +mixin btn_buy_collaborator(location) + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode={{ getCollaboratorPlanCode() }}¤cy={{currencyCode}}&itm_campaign=plans&itm_content=" + location, + ng-click="signUpNowClicked('collaborator','" + location + "')" + ) + span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")} + span(ng-show="ui.view == 'annual'") #{translate("buy_now")} +mixin btn_buy_personal(location) + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode={{ getPersonalPlanCode() }}¤cy={{currencyCode}}&itm_campaign=plans&itm_content=" + location, + ng-click="signUpNowClicked('personal','" + location + "')" + ) + span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")} + span(ng-show="ui.view == 'annual'") #{translate("buy_now")} +mixin btn_buy_free(location) + a.btn.btn-primary( + href="/register" + style=(getLoggedInUserId() === null ? "" : "visibility: hidden") + ng-click="signUpNowClicked('free','" + location + "')" + ) + span.text-capitalize #{translate('get_started_now')} +mixin btn_buy_professional(location) + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode=professional{{ ui.view == 'annual' && '-annual' || planQueryString}}¤cy={{currencyCode}}&itm_campaign=plans&itm_content=" + location, + ng-click="signUpNowClicked('professional','" + location + "')" + ) + span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")} + span(ng-show="ui.view == 'annual'") #{translate("buy_now")} +mixin btn_buy_student(location, plan) + if plan == 'annual' + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode=student-annual¤cy={{currencyCode}}&itm_campaign=plans&itm_content=" + location, + ng-click="signUpNowClicked('student-annual','" + location + "')" + ) #{translate("buy_now")} + else + //- planQueryString will contain _free_trial_7_days + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode=student{{planQueryString}}¤cy={{currencyCode}}&itm_campaign=plans&itm_content=" + location, + ng-click="signUpNowClicked('student-monthly','" + location + "')" + ) #{translate("start_free_trial")} + +//- Cards +mixin card_student_annual(location) + .best-value + strong #{translate('best_value')} + .card-header + h2 #{translate("student")} (#{translate("annual")}) + h5.tagline #{translate('tagline_student_annual')} + .circle + span + +price_student_annual + +features_student(location, 'annual') +mixin card_student_monthly(location) + .card-header + h2 #{translate("student")} + h5.tagline #{translate('tagline_student_monthly')} + .circle + span + +price_student_monthly + +features_student(location, 'monthly') + +//- Features Lists, used within cards +mixin features_collaborator(location) + ul.list-unstyled + li + strong #{translate("collabs_per_proj", {collabcount:10})} + +features_premium + li + br + +btn_buy_collaborator(location) +mixin features_free(location) + ul.list-unstyled + li #{translate("one_collaborator")} + li(class="hidden-xs hidden-sm") + li(class="hidden-xs hidden-sm") + li(class="hidden-xs hidden-sm") + li(class="hidden-xs hidden-sm") + li(class="hidden-xs hidden-sm") + li(class="hidden-xs hidden-sm") + li + br + +btn_buy_free(location) +mixin features_personal(location) + ul.list-unstyled + li #{translate("one_collaborator")} + li + li + strong #{translate('premium_features')} + li #{translate('sync_dropbox_github')} + li #{translate('full_doc_history')} + li + #{translate('more').toLowerCase()} + li(class="hidden-xs hidden-sm") + li + br + +btn_buy_personal(location) +mixin features_premium + li + li + strong #{translate('all_premium_features')} + li #{translate('sync_dropbox_github')} + li #{translate('full_doc_history')} + li #{translate('track_changes')} + li + #{translate('more').toLowerCase()} +mixin features_professional(location) + ul.list-unstyled + li + strong #{translate("unlimited_collabs")} + +features_premium + li + br + +btn_buy_professional(location) +mixin features_student(location, plan) + ul.list-unstyled + li + strong #{translate("collabs_per_proj", {collabcount:6})} + +features_premium + li + br + +btn_buy_student(location, plan) + +//- Prices +mixin price_personal + span(ng-if="ui.view == 'monthly'") + | {{plans[currencyCode]['personal']['monthly']}} + span.small /mo + span(ng-if="ui.view == 'annual'") + | {{plans[currencyCode]['personal']['annual']}} + span.small /yr +mixin price_collaborator + span(ng-if="ui.view == 'monthly'") + | {{plans[currencyCode]['collaborator']['monthly']}} + span.small /mo + span(ng-if="ui.view == 'annual'") + | {{plans[currencyCode]['collaborator']['annual']}} + span.small /yr +mixin price_professional + span(ng-if="ui.view == 'monthly'") + | {{plans[currencyCode]['professional']['monthly']}} + span.small /mo + span(ng-if="ui.view == 'annual'") + | {{plans[currencyCode]['professional']['annual']}} + span.small /yr +mixin price_student_annual + | {{plans[currencyCode]['student']['annual']}} + span.small /yr +mixin price_student_monthly + | {{plans[currencyCode]['student']['monthly']}} + span.small /mo + +//- UI Control +mixin currency_dropdown + .dropdown.currency-dropdown(dropdown) + a.btn.btn-default.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle + ) + | {{currencyCode}} ({{plans[currencyCode]['symbol']}}) + span.caret + + ul.dropdown-menu.dropdown-menu-right.text-right(role="menu") + li(ng-repeat="(currency, value) in plans") + a( + href="#", + ng-click="changeCurreny($event, currency)" + ) {{currency}} ({{value['symbol']}}) +mixin plan_switch(location) + ul.nav.nav-pills + li(ng-class="{'active': ui.view == 'monthly'}") + a.btn.btn-default-outline( + href="#" + ng-click="switchToMonthly($event,'" + location + "')" + ) #{translate("monthly")} + li(ng-class="{'active': ui.view == 'annual'}") + a.btn.btn-default-outline( + href="#" + ng-click="switchToAnnual($event,'" + location + "')" + ) #{translate("annual")} + li(ng-class="{'active': ui.view == 'student'}") + a.btn.btn-default-outline( + href="#" + ng-click="switchToStudent($event,'" + location + "')" + ) #{translate("special_price_student")} + +mixin allCardsAndControls(controlsRowSpaced, listLocation) + - var location = listLocation ? 'card_' + listLocation : 'card' + .row.top-switch(class=controlsRowSpaced ? "row-spaced" : "") + .col-md-6.col-md-offset-3 + +plan_switch('card') + .col-md-2.text-right + +currency_dropdown + + .row + .col-md-10.col-md-offset-1 + .row + .card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'") + .col-md-4 + .card.card-first + .card-header + h2 #{translate("personal")} + h5.tagline #{translate("tagline_personal")} + .circle + +price_personal + +features_personal(location) + .col-md-4 + .card.card-highlighted + .best-value + strong #{translate('best_value')} + .card-header + h2 #{translate("collaborator")} + h5.tagline #{translate("tagline_collaborator")} + .circle + +price_collaborator + +features_collaborator(location) + .col-md-4 + .card.card-last + .card-header + h2 #{translate("professional")} + h5.tagline #{translate("tagline_professional")} + .circle + +price_professional + +features_professional(location) + + .card-group.text-centered(ng-if="ui.view == 'student'") + .col-md-4 + .card.card-first + .card-header + h2 #{translate("free")} + h5.tagline #{translate("tagline_free")} + .circle #{translate("free")} + +features_free(location) + + .col-md-4 + .card.card-highlighted + +card_student_annual(location) + + .col-md-4 + .card.card-last + +card_student_monthly(location) diff --git a/services/web/app/views/subscriptions/_plans_page_tables.pug b/services/web/app/views/subscriptions/_plans_page_tables.pug new file mode 100644 index 0000000000..9db4d6b7ec --- /dev/null +++ b/services/web/app/views/subscriptions/_plans_page_tables.pug @@ -0,0 +1,117 @@ + +//- Features Tables +mixin table_premium + table.card.plans-table.plans-table-main + tr + th + th #{translate("free")} + th #{translate("personal")} + th #{translate("collaborator")} + .outer.outer-top + .outer-content + .best-value + strong #{translate('best_value')} + th #{translate("professional")} + + tr + td #{translate("price")} + td #{translate("free")} + td + +price_personal + td + +price_collaborator + td + +price_professional + + for feature in planFeatures + tr + td(event-tracking="features-table" event-tracking-trigger="hover" event-tracking-ga="subscription-funnel" event-tracking-label=`${feature.feature}`) + if feature.info + span(tooltip=translate(feature.info)) #{translate(feature.feature)} + else + | #{translate(feature.feature)} + for plan in feature.plans + td(ng-non-bindable) + if feature.value == 'str' + | #{plan} + else if plan + i.fa.fa-check(aria-hidden="true") + span.sr-only Feature included + else + i.fa.fa-times(aria-hidden="true") + span.sr-only Feature not included + + tr + td + td + +btn_buy_free('table') + td + +btn_buy_personal('table') + td + +btn_buy_collaborator('table') + .outer.outer-btm + .outer-content + td + +btn_buy_professional('table') + +mixin table_cell_student(feature) + if feature.value == 'str' + | #{feature.student} + else if feature.student + i.fa.fa-check(aria-hidden="true") + span.sr-only Feature included + else + i.fa.fa-times(aria-hidden="true") + span.sr-only Feature not included + +mixin table_student + table.card.plans-table.plans-table-student + tr + th + th #{translate("free")} + th #{translate("student")} (#{translate("annual")}) + .outer.outer-top + .outer-content + .best-value + strong Best Value + th #{translate("student")} + + tr + td #{translate("price")} + td #{translate("free")} + td + +price_student_annual + td + +price_student_monthly + + for feature in planFeatures + tr + td(event-tracking="plans-page-table" event-tracking-trigger="hover" event-tracking-ga="subscription-funnel" event-tracking-label=`${feature.feature}`) + if feature.info + span(tooltip=translate(feature.info)) #{translate(feature.feature)} + else + | #{translate(feature.feature)} + td(ng-non-bindable) + if feature.value == 'str' + | #{feature.plans.free} + else if feature.plans.free + i.fa.fa-check(aria-hidden="true") + span.sr-only Feature included + else + i.fa.fa-times(aria-hidden="true") + span.sr-only Feature included + td(ng-non-bindable) + +table_cell_student(feature) + td(ng-non-bindable) + +table_cell_student(feature) + + tr + td + td + +btn_buy_free('table') + td + +btn_buy_student('table', 'annual') + .outer.outer-btm + .outer-content + td + +btn_buy_student('table', 'monthly') diff --git a/services/web/app/views/subscriptions/_plans_quotes.pug b/services/web/app/views/subscriptions/_plans_quotes.pug new file mode 100644 index 0000000000..e7c6978a48 --- /dev/null +++ b/services/web/app/views/subscriptions/_plans_quotes.pug @@ -0,0 +1,25 @@ +.row.row-spaced-large + .col-md-12 + .page-header.plans-header.plans-subheader.text-centered + h2 #{translate('in_good_company')} +.row + .col-md-6 + div + .row + .col-md-3 + .circle-img + img(src=buildImgPath('advocates/schultz.jpg') alt="Kevin Schultz") + .col-md-9 + blockquote + p It is the ability to collaborate very easily that drew me to Overleaf. + footer Kevin Schultz, Assistant Professor of Physics, Hartwick College + .col-md-6 + div + .row + .col-md-3 + .circle-img + img(src=buildImgPath('advocates/dagoret-campagne.jpg') alt="Dr Sylvie Dagoret-Campagne") + .col-md-9 + blockquote + p Overleaf is a great educational tool for publishing scientific documents. + footer Dr Sylvie Dagoret-Campagne, Director of Research at CNRS, University of Paris-Saclay \ No newline at end of file diff --git a/services/web/app/views/subscriptions/_price_exceptions.pug b/services/web/app/views/subscriptions/_price_exceptions.pug new file mode 100644 index 0000000000..be0018db61 --- /dev/null +++ b/services/web/app/views/subscriptions/_price_exceptions.pug @@ -0,0 +1,9 @@ +p + i * !{translate("subject_to_additional_vat")} + +if (personalSubscription.recurly.activeCoupons.length > 0) + i * !{translate("coupons_not_included")}: + ul + each coupon in personalSubscription.recurly.activeCoupons + li + i= coupon.description || coupon.name diff --git a/services/web/app/views/subscriptions/canceled_subscription.pug b/services/web/app/views/subscriptions/canceled_subscription.pug new file mode 100644 index 0000000000..5d8c6e4bea --- /dev/null +++ b/services/web/app/views/subscriptions/canceled_subscription.pug @@ -0,0 +1,15 @@ +extends ../layout + +block content + main.content.content-alt#main-content + .container + .row + .col-md-8.col-md-offset-2 + .card(ng-cloak) + .page-header + h2 #{translate("subscription_canceled")} + .alert.alert-info + p #{translate("to_modify_your_subscription_go_to")} + a(href="/user/subscription") #{translate("manage_subscription")}. + p + a.btn.btn-primary(href="/project") < #{translate("back_to_your_projects")} diff --git a/services/web/app/views/subscriptions/dashboard.pug b/services/web/app/views/subscriptions/dashboard.pug new file mode 100644 index 0000000000..574e902548 --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard.pug @@ -0,0 +1,69 @@ +extends ../layout + +include ./dashboard/_team_name_mixin + +block head-scripts + script(type="text/javascript", nonce=scriptNonce, src="https://js.recurly.com/v4/recurly.js") + +block append meta + meta(name="ol-managedInstitutions", data-type="json", content=managedInstitutions) + meta(name="ol-planCodesChangingAtTermEnd", data-type="json", content=plans.planCodesChangingAtTermEnd) + if (personalSubscription && personalSubscription.recurly) + meta(name="ol-recurlyApiKey" content=settings.apis.recurly.publicKey) + meta(name="ol-subscription" data-type="json" content=personalSubscription) + meta(name="ol-recomendedCurrency" content=personalSubscription.recurly.currency) + +block content + main.content.content-alt#main-content(ng-cloak) + .container + .row + .col-md-8.col-md-offset-2 + if (fromPlansPage) + .alert.alert-warning + p You already have a subscription + .card + .page-header + h1 #{translate("your_subscription")} + + -var hasDisplayedSubscription = false + if (personalSubscription) + -hasDisplayedSubscription = true + include ./dashboard/_personal_subscription + + if (managedGroupSubscriptions && managedGroupSubscriptions.length > 0) + include ./dashboard/_managed_groups + + if (managedInstitutions && managedInstitutions.length > 0) + include ./dashboard/_managed_institutions + + if (managedPublishers && managedPublishers.length > 0) + include ./dashboard/_managed_publishers + + if (memberGroupSubscriptions && memberGroupSubscriptions.length > 0) + -hasDisplayedSubscription = true + include ./dashboard/_group_memberships + + if (confirmedMemberAffiliations && confirmedMemberAffiliations.length > 0) + include ./dashboard/_institution_memberships + + if (v1SubscriptionStatus) + include ./dashboard/_v1_subscription_status + + if (!hasDisplayedSubscription) + if (hasSubscription) + -hasDisplayedSubscription = true + p(ng-non-bindable) You're on an #{settings.appName} Paid plan. Contact + a(href="mailto:support@overleaf.com") support@overleaf.com + | to find out more. + else + if (subscriptionCopy === 'new') + p(ng-non-bindable) You are on the #{settings.appName} Free plan. Upgrade to access these Premium Features: + ul + li Invite more collaborators + for feature in ['realtime_track_changes', 'full_doc_history', 'reference_search', 'reference_sync', 'dropbox_integration_lowercase', 'github_integration_lowercase', 'priority_support'] + li #{translate(feature)} + a(ng-controller="UpgradeSubscriptionController" href="/user/subscription/plans" ng-click="upgradeSubscription()").btn.btn-primary Upgrade now + else + p(ng-non-bindable) You're on the #{settings.appName} Free plan. + | + a(ng-controller="UpgradeSubscriptionController" href="/user/subscription/plans" ng-click="upgradeSubscription()").btn.btn-primary Upgrade now diff --git a/services/web/app/views/subscriptions/dashboard/_change_plans_mixins.pug b/services/web/app/views/subscriptions/dashboard/_change_plans_mixins.pug new file mode 100644 index 0000000000..c0078ccac0 --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_change_plans_mixins.pug @@ -0,0 +1,28 @@ +mixin printPlan(plan) + if (!plan.hideFromUsers) + tr(ng-controller="ChangePlanFormController", ng-init="plan="+JSON.stringify(plan)) + td + strong(ng-non-bindable) #{plan.name} + td + if (plan.annual) + | {{price}} / #{translate("year")} + else + | {{price}} / #{translate("month")} + td + if (typeof(personalSubscription.planCode) != "undefined" && plan.planCode == personalSubscription.planCode.split("_")[0]) + if (personalSubscription.pendingPlan) + form + input(type="hidden", ng-model="plan_code", name="plan_code", value=plan.planCode) + input(type="submit", ng-click="cancelPendingPlanChange()", value=translate("keep_current_plan")).btn.btn-success + else + button.btn.disabled #{translate("your_plan")} + else if (personalSubscription.pendingPlan && typeof(personalSubscription.pendingPlan.planCode) != "undefined" && plan.planCode == personalSubscription.pendingPlan.planCode.split("_")[0]) + button.btn.disabled #{translate("your_new_plan")} + else + form + input(type="hidden", ng-model="plan_code", name="plan_code", value=plan.planCode) + input(type="submit", ng-click="changePlan()", value=translate("change_to_this_plan")).btn.btn-success + +mixin printPlans(plans) + each plan in plans + +printPlan(plan) diff --git a/services/web/app/views/subscriptions/dashboard/_group_memberships.pug b/services/web/app/views/subscriptions/dashboard/_group_memberships.pug new file mode 100644 index 0000000000..2c0e907e5e --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_group_memberships.pug @@ -0,0 +1,32 @@ +div(ng-controller="GroupMembershipController") + each groupSubscription in memberGroupSubscriptions + if (user._id+'' != groupSubscription.admin_id._id+'') + div + p + | You are a member of + | + +teamName(groupSubscription) + if (groupSubscription.teamNotice && groupSubscription.teamNotice != '') + p + //- Team notice is sanitized in SubscriptionViewModelBuilder + em(ng-non-bindable) !{groupSubscription.teamNotice} + span + button.btn.btn-danger.text-capitalise(ng-click="removeSelfFromGroup('"+groupSubscription._id+"')") #{translate("leave_group")} + hr + +script(type='text/ng-template', id='LeaveGroupModalTemplate') + .modal-header + h3 #{translate("leave_group")} + .modal-body + p #{translate("sure_you_want_to_leave_group")} + .modal-footer + button.btn.btn-default( + ng-disabled="inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-danger( + ng-disabled="state.inflight" + ng-click="confirmLeaveGroup()" + ) + span(ng-hide="inflight") #{translate("leave_now")} + span(ng-show="inflight") #{translate("processing")}… diff --git a/services/web/app/views/subscriptions/dashboard/_institution_memberships.pug b/services/web/app/views/subscriptions/dashboard/_institution_memberships.pug new file mode 100644 index 0000000000..abe80a0cc3 --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_institution_memberships.pug @@ -0,0 +1,13 @@ +each affiliation in confirmedMemberAffiliations + if (affiliation.licence && affiliation.licence != 'free') + -hasDisplayedSubscription = true + p + | You have a + | + strong(ng-non-bindable) Professional + | + | #{settings.appName} account as a confirmed member of + | + strong(ng-non-bindable)= affiliation.institution.name + hr + diff --git a/services/web/app/views/subscriptions/dashboard/_managed_groups.pug b/services/web/app/views/subscriptions/dashboard/_managed_groups.pug new file mode 100644 index 0000000000..fd7c354db7 --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_managed_groups.pug @@ -0,0 +1,24 @@ +each managedGroupSubscription in managedGroupSubscriptions + p + | You are a manager of + | + +teamName(managedGroupSubscription) + p + a.btn.btn-primary(href="/manage/groups/" + managedGroupSubscription._id + "/members") + i.fa.fa-fw.fa-users + | + | Manage members + | + p + a(href="/manage/groups/" + managedGroupSubscription._id + "/managers") + i.fa.fa-fw.fa-users + | + | Manage group managers + | + p + a(href="/metrics/groups/" + managedGroupSubscription._id) + i.fa.fa-fw.fa-line-chart + | + | View metrics + + hr diff --git a/services/web/app/views/subscriptions/dashboard/_managed_institutions.pug b/services/web/app/views/subscriptions/dashboard/_managed_institutions.pug new file mode 100644 index 0000000000..ad868d2664 --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_managed_institutions.pug @@ -0,0 +1,27 @@ +each institution in managedInstitutions + p + | You are a manager of + | + strong(ng-non-bindable)= institution.name + p + a.btn.btn-primary(href="/metrics/institutions/" + institution.v1Id) + i.fa.fa-fw.fa-line-chart + | + | View metrics + p + a(href="/institutions/" + institution.v1Id + "/hub") + i.fa.fa-fw.fa-user-circle + | + | View hub + p + a(href="/manage/institutions/" + institution.v1Id + "/managers") + i.fa.fa-fw.fa-users + | + | Manage institution managers + div(ng-controller="MetricsEmailController", ng-cloak) + p + span Monthly metrics emails: + a(href ng-bind-html="institutionEmailSubscription('"+institution.v1Id+"')" ng-show="!subscriptionChanging" ng-click="changeInstitutionalEmailSubscription('"+institution.v1Id+"')") + span(ng-show="subscriptionChanging") + i.fa.fa-spin.fa-refresh(aria-hidden="true") + hr diff --git a/services/web/app/views/subscriptions/dashboard/_managed_publishers.pug b/services/web/app/views/subscriptions/dashboard/_managed_publishers.pug new file mode 100644 index 0000000000..6a8fcfbc55 --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_managed_publishers.pug @@ -0,0 +1,16 @@ +each publisher in managedPublishers + p + | You are a manager of + | + strong(ng-non-bindable)= publisher.name + p + a(href="/publishers/" + publisher.slug + "/hub") + i.fa.fa-fw.fa-user-circle + | + | View hub + p + a(href="/manage/publishers/" + publisher.slug + "/managers") + i.fa.fa-fw.fa-users + | + | Manage publisher managers + hr diff --git a/services/web/app/views/subscriptions/dashboard/_personal_subscription.pug b/services/web/app/views/subscriptions/dashboard/_personal_subscription.pug new file mode 100644 index 0000000000..e0a7501d92 --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_personal_subscription.pug @@ -0,0 +1,7 @@ +if (personalSubscription.recurly) + include ./_personal_subscription_recurly + include ./_personal_subscription_recurly_sync_email +else + include ./_personal_subscription_custom + +hr diff --git a/services/web/app/views/subscriptions/dashboard/_personal_subscription_custom.pug b/services/web/app/views/subscriptions/dashboard/_personal_subscription_custom.pug new file mode 100644 index 0000000000..ec74cf4cd1 --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_personal_subscription_custom.pug @@ -0,0 +1,6 @@ +p + | Please + | + a(href="/contact") contact support + | + | to make changes to your plan diff --git a/services/web/app/views/subscriptions/dashboard/_personal_subscription_recurly.pug b/services/web/app/views/subscriptions/dashboard/_personal_subscription_recurly.pug new file mode 100644 index 0000000000..06aae4fc5f --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_personal_subscription_recurly.pug @@ -0,0 +1,132 @@ +div(ng-controller="RecurlySubscriptionController") + div(ng-show="!showCancellation") + if (personalSubscription.recurly.account.has_past_due_invoice && personalSubscription.recurly.account.has_past_due_invoice._ == 'true') + .alert.alert-danger #{translate("account_has_past_due_invoice_change_plan_warning")} + | + a(href=personalSubscription.recurly.accountManagementLink, target="_blank") #{translate("view_your_invoices")}. + case personalSubscription.recurly.state + when "active" + p !{translate("currently_subscribed_to_plan", {planName: personalSubscription.plan.name}, ['strong'])} + if (personalSubscription.pendingPlan) + if (personalSubscription.pendingPlan.name != personalSubscription.plan.name) + | + | !{translate("your_plan_is_changing_at_term_end", {pendingPlanName: personalSubscription.pendingPlan.name}, ['strong'])} + if (personalSubscription.recurly.pendingAdditionalLicenses > 0 || personalSubscription.recurly.additionalLicenses > 0) + | + | !{translate("pending_additional_licenses", {pendingAdditionalLicenses: personalSubscription.recurly.pendingAdditionalLicenses, pendingTotalLicenses: personalSubscription.recurly.pendingTotalLicenses}, ['strong', 'strong'])} + else if (personalSubscription.recurly.additionalLicenses > 0) + | + | !{translate("additional_licenses", {additionalLicenses: personalSubscription.recurly.additionalLicenses, totalLicenses: personalSubscription.recurly.totalLicenses}, ['strong', 'strong'])} + | + a(href, ng-click="switchToChangePlanView()", ng-if="showChangePlanButton") !{translate("change_plan")}. + if (personalSubscription.pendingPlan) + p #{translate("want_change_to_apply_before_plan_end")} + if (personalSubscription.recurly.trialEndsAtFormatted && personalSubscription.recurly.trial_ends_at > Date.now()) + p You're on a free trial which ends on #{personalSubscription.recurly.trialEndsAtFormatted} + p !{translate("next_payment_of_x_collectected_on_y", {paymentAmmount: personalSubscription.recurly.price, collectionDate: personalSubscription.recurly.nextPaymentDueAt}, ['strong', 'strong'])} + include ./../_price_exceptions + p.pull-right + p + a(href=personalSubscription.recurly.billingDetailsLink, target="_blank").btn.btn-info #{translate("update_your_billing_details")} + | + a(href=personalSubscription.recurly.accountManagementLink, target="_blank").btn.btn-info #{translate("view_your_invoices")} + | + a(href, ng-click="switchToCancellationView()", ng-hide="recurlyLoadError").btn.btn-danger !{translate("cancel_your_subscription")} + when "canceled" + p !{translate("currently_subscribed_to_plan", {planName: personalSubscription.plan.name}, ['strong'])} + p !{translate("subscription_canceled_and_terminate_on_x", {terminateDate: personalSubscription.recurly.nextPaymentDueAt}, ['strong'])} + p + a(href=personalSubscription.recurly.accountManagementLink, target="_blank").btn.btn-info #{translate("view_your_invoices")} + p: form(action="/user/subscription/reactivate",method="post") + input(type="hidden", name="_csrf", value=csrfToken) + input(type="submit",value="Reactivate your subscription").btn.btn-success + when "expired" + p !{translate("your_subscription_has_expired")} + p + a(href=personalSubscription.recurly.accountManagementLink, target="_blank").btn.btn-info #{translate("view_your_invoices")} + | + a(href="/user/subscription/plans").btn.btn-success !{translate("create_new_subscription")} + default + p !{translate("problem_with_subscription_contact_us")} + + .alert.alert-warning(ng-show="recurlyLoadError") + strong #{translate('payment_provider_unreachable_error')} + + include ./_change_plans_mixins + div(ng-show="showChangePlan", ng-cloak) + h2 !{translate("change_plan")} + p: table.table + tr + th !{translate("name")} + th !{translate("price")} + th + +printPlans(plans.studentAccounts) + +printPlans(plans.individualMonthlyPlans) + +printPlans(plans.individualAnnualPlans) + + + .div(ng-controller="RecurlyCancellationController", ng-show="showCancellation").text-center + p + strong #{translate("wed_love_you_to_stay")} + + div(ng-show="showExtendFreeTrial") + p !{translate("have_more_days_to_try", {days:14})} + p + button(type="submit", ng-click="extendTrial()", ng-disabled='inflight').btn.btn-success #{translate("ill_take_it")} + p + a(href, ng-click="cancelSubscription()", ng-disabled='inflight') #{translate("no_thanks_cancel_now")} + + div(ng-show="showDowngradeToStudent") + div(ng-controller="ChangePlanFormController") + p !{translate("interested_in_cheaper_plan",{price:'{{studentPrice}}'})} + p + button(type="submit", ng-click="downgradeToStudent()", ng-disabled='inflight').btn.btn-success #{translate("yes_move_me_to_student_plan")} + p + a(href, ng-click="cancelSubscription()", ng-disabled='inflight') #{translate("no_thanks_cancel_now")} + + div(ng-show="showBasicCancel") + p + a(href, ng-click="switchToDefaultView()").btn.btn-info #{translate("i_want_to_stay")} + p + a(href, ng-click="cancelSubscription()", ng-disabled='inflight').btn.btn-primary #{translate("cancel_my_account")} + +script(type='text/ng-template', id='confirmChangePlanModalTemplate') + .modal-header + h3 #{translate("change_plan")} + .modal-body + .alert.alert-warning(ng-show="genericError") + strong #{translate("generic_something_went_wrong")}. #{translate("try_again")}. #{translate("generic_if_problem_continues_contact_us")}. + p !{translate("sure_you_want_to_change_plan", {planName: '{{plan.name}}'}, ['strong'])} + div(ng-show="planChangesAtTermEnd") + p #{translate("existing_plan_active_until_term_end")} + p #{translate("want_change_to_apply_before_plan_end")} + .modal-footer + button.btn.btn-default( + ng-disabled="inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-success( + ng-disabled="state.inflight" + ng-click="confirmChangePlan()" + ) + span(ng-hide="inflight") #{translate("change_plan")} + span(ng-show="inflight") #{translate("processing")}… + +script(type='text/ng-template', id='cancelPendingPlanChangeModalTemplate') + .modal-header + h3 #{translate("change_plan")} + .modal-body + .alert.alert-warning(ng-show="genericError") + strong #{translate("generic_something_went_wrong")}. #{translate("try_again")}. #{translate("generic_if_problem_continues_contact_us")}. + p !{translate("sure_you_want_to_cancel_plan_change", {planName: '{{plan.name}}'}, ['strong'])} + .modal-footer + button.btn.btn-default( + ng-disabled="inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-success( + ng-disabled="state.inflight" + ng-click="confirmCancelPendingPlanChange()" + ) + span(ng-hide="inflight") #{translate("revert_pending_plan_change")} + span(ng-show="inflight") #{translate("processing")}… \ No newline at end of file diff --git a/services/web/app/views/subscriptions/dashboard/_personal_subscription_recurly_sync_email.pug b/services/web/app/views/subscriptions/dashboard/_personal_subscription_recurly_sync_email.pug new file mode 100644 index 0000000000..3d58b2ab4a --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_personal_subscription_recurly_sync_email.pug @@ -0,0 +1,18 @@ +-if (user.email !== personalSubscription.recurly.account.email) + div + hr + form(async-form="updateAccountEmailAddress", name="updateAccountEmailAddress", action='/user/subscription/account/email', method="POST") + input(name='_csrf', type='hidden', value=csrfToken) + .form-group + form-messages(for="updateAccountEmailAddress") + .alert.alert-success(ng-show="updateAccountEmailAddress.response.success") + | #{translate('recurly_email_updated')} + div(ng-hide="updateAccountEmailAddress.response.success") + p(ng-non-bindable) !{translate("recurly_email_update_needed", { recurlyEmail: personalSubscription.recurly.account.email, userEmail: user.email }, ['em', 'em'])} + .actions + button.btn-primary.btn( + type='submit', + ng-disabled="updateAccountEmailAddress.inflight" + ) + span(ng-show="!updateAccountEmailAddress.inflight") #{translate("update")} + span(ng-show="updateAccountEmailAddress.inflight") #{translate("updating")}… diff --git a/services/web/app/views/subscriptions/dashboard/_team_name_mixin.pug b/services/web/app/views/subscriptions/dashboard/_team_name_mixin.pug new file mode 100644 index 0000000000..f840cecfcb --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_team_name_mixin.pug @@ -0,0 +1,9 @@ +mixin teamName(subscription) + if (subscription.teamName && subscription.teamName != '') + strong(ng-non-bindable)= subscription.teamName + else if (subscription.admin_id._id == user._id) + | a group account + else + | the group account owned by + | + strong= subscription.admin_id.email diff --git a/services/web/app/views/subscriptions/dashboard/_v1_subscription_status.pug b/services/web/app/views/subscriptions/dashboard/_v1_subscription_status.pug new file mode 100644 index 0000000000..54df7bda2f --- /dev/null +++ b/services/web/app/views/subscriptions/dashboard/_v1_subscription_status.pug @@ -0,0 +1,62 @@ +if (v1SubscriptionStatus['team'] && v1SubscriptionStatus['team']['default_plan_name'] != 'free') + - hasDisplayedSubscription = true + p + | You have a legacy group licence from Overleaf v1. + if (v1SubscriptionStatus['team']['will_end_at']) + p + | Your current group licence ends on + | + strong= moment(v1SubscriptionStatus['team']['will_end_at']).format('Do MMM YY') + | + | and will + | + if (v1SubscriptionStatus['team']['will_renew']) + | be automatically renewed. + else + | not be automatically renewed. + if (v1SubscriptionStatus['can_cancel_team']) + p + form(method="POST", action="/user/subscription/v1/cancel") + input(type="hidden", name="_csrf", value=csrfToken) + button().btn.btn-danger Stop automatic renewal + else + p + | Please + | + a(href="/contact") contact support + | + | to make changes to your plan + hr + +if (v1SubscriptionStatus['product']) + - hasDisplayedSubscription = true + p + | You have a legacy Overleaf v1 + | + strong= v1SubscriptionStatus['product']['display_name'] + | + | plan. + p + | Your plan ends on + | + strong= moment(v1SubscriptionStatus['product']['will_end_at']).format('Do MMM YY') + | + | and will + | + if (v1SubscriptionStatus['product']['will_renew']) + | be automatically renewed. + else + | not be automatically renewed. + if (v1SubscriptionStatus['can_cancel']) + p + form(method="POST", action="/user/subscription/v1/cancel") + input(type="hidden", name="_csrf", value=csrfToken) + button().btn.btn-danger Stop automatic renewal + else + p + | Please + | + a(href="/contact") contact support + | + | to make changes to your plan + hr diff --git a/services/web/app/views/subscriptions/new.pug b/services/web/app/views/subscriptions/new.pug new file mode 100644 index 0000000000..b4e58512e2 --- /dev/null +++ b/services/web/app/views/subscriptions/new.pug @@ -0,0 +1,359 @@ +extends ../layout + +block append meta + meta(name="ol-countryCode" content=countryCode) + meta(name="ol-recurlyApiKey" content=settings.apis.recurly.publicKey) + meta(name="ol-recomendedCurrency" content=String(currency).slice(0,3)) + +block head-scripts + script(type="text/javascript", nonce=scriptNonce, src="https://js.recurly.com/v4/recurly.js") + +block content + main.content.content-alt#main-content + .container(ng-controller="NewSubscriptionController" ng-cloak) + .row.card-group + .col-md-5.col-md-push-4 + .card.card-highlighted.card-border(ng-hide="threeDSecureFlow") + .alert.alert-danger(ng-show="recurlyLoadError") + strong #{translate('payment_provider_unreachable_error')} + .page-header(ng-hide="recurlyLoadError") + .row + .col-xs-9 + h2 {{planName}} + .col-xs-3 + div.dropdown.changePlanButton.pull-right(ng-cloak, dropdown) + a.btn.btn-default.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle + ) + | {{currencyCode}} ({{allCurrencies[currencyCode]['symbol']}}) + span.caret + ul.dropdown-menu(role="menu") + li(ng-repeat="(currency, value) in availableCurrencies") + a( + ng-click="changeCurrency(currency)", + ) {{currency}} ({{value['symbol']}}) + .row(ng-if="planCode == 'student-annual' || planCode == 'student-monthly' || planCode == 'student_free_trial_7_days'") + .col-xs-12 + p.student-disclaimer #{translate('student_disclaimer')} + + hr.thin + .row + .col-md-12.text-center + div(ng-if="trialLength") + span !{translate("first_few_days_free", {trialLen:'{{trialLength}}'})} + span(ng-if="coupon.discountMonths && coupon.discountRate") - {{coupon.discountMonths}} #{translate("month")}s {{coupon.discountRate}}% Off + + div(ng-if="price") + - var priceVars = { price: "{{ availableCurrencies[currencyCode]['symbol'] }}{{ price.total }}"}; + span(ng-if="!coupon.singleUse && monthlyBilling") + | !{translate("x_price_per_month", priceVars, ['strong'] )} + span(ng-if="!coupon.singleUse && !monthlyBilling") + | !{translate("x_price_per_year", priceVars, ['strong'] )} + span(ng-if="coupon.singleUse && monthlyBilling") + | !{translate("x_price_for_first_month", priceVars, ['strong'] )} + span(ng-if="coupon.singleUse && !monthlyBilling") + | !{translate("x_price_for_first_year", priceVars, ['strong'] )} + + div(ng-if="coupon && coupon.normalPrice") + - var noDiscountPriceAngularExp = "{{ availableCurrencies[currencyCode]['symbol']}}{{coupon.normalPrice | number:2 }}"; + span.small(ng-if="!coupon.singleUse && monthlyBilling") + | !{translate("normally_x_price_per_month", { price: noDiscountPriceAngularExp } )} + span.small(ng-if="!coupon.singleUse && !monthlyBilling") + | !{translate("normally_x_price_per_year", { price: noDiscountPriceAngularExp } )} + span.small(ng-if="coupon.singleUse && monthlyBilling") + | !{translate("then_x_price_per_month", { price: noDiscountPriceAngularExp } )} + span.small(ng-if="coupon.singleUse && !monthlyBilling") + | !{translate("then_x_price_per_year", { price: noDiscountPriceAngularExp } )} + + .row(ng-hide="recurlyLoadError") + div() + .col-md-12() + form( + name="simpleCCForm" + novalidate + ) + + div.payment-method-toggle + a.payment-method-toggle-switch( + href + ng-click="setPaymentMethod('credit_card');" + ng-class="paymentMethod.value === 'credit_card' ? 'payment-method-toggle-switch-selected' : ''" + ) + i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true") + span + i.fa.fa-cc-visa.fa-2x(aria-hidden="true") + span + i.fa.fa-cc-amex.fa-2x(aria-hidden="true") + span.sr-only Pay with Mastercard, Visa, or Amex + a.payment-method-toggle-switch( + href + ng-click="setPaymentMethod('paypal');" + ng-class="paymentMethod.value === 'paypal' ? 'payment-method-toggle-switch-selected' : ''" + ) + i.fa.fa-cc-paypal.fa-2x(aria-hidden="true") + span.sr-only Pay with PayPal + + .alert.alert-warning.small(ng-show="genericError") + strong {{genericError}} + + .alert.alert-warning.small(ng-show="couponError") + strong {{couponError}} + + div(ng-show="paymentMethod.value === 'credit_card'") + .row + .col-xs-6 + .form-group(ng-class="validation.errorFields.first_name || inputHasError(simpleCCForm.firstName) ? 'has-error' : ''") + label(for="first-name") #{translate('first_name')} + input#first-name.form-control( + type="text" + maxlength='255' + data-recurly="first_name" + name="firstName" + ng-model="data.first_name" + required + ) + span.input-feedback-message(ng-if="simpleCCForm.firstName.$error.required") #{translate('this_field_is_required')} + .col-xs-6 + .form-group(ng-class="validation.errorFields.last_name || inputHasError(simpleCCForm.lastName)? 'has-error' : ''") + label(for="last-name") #{translate('last_name')} + input#last-name.form-control( + type="text" + maxlength='255' + data-recurly="last_name" + name="lastName" + ng-model="data.last_name" + required + ) + span.input-feedback-message(ng-if="simpleCCForm.lastName.$error.required") #{translate('this_field_is_required')} + + .form-group(ng-class="validation.errorFields.number ? 'has-error' : ''") + label(for="card-no") #{translate("credit_card_number")} + div#card-no( + type="text" + name="ccNumber" + data-recurly='number' + ) + + .row + .col-xs-3 + .form-group.has-feedback(ng-class="validation.errorFields.month ? 'has-error' : ''") + label(for="month").capitalised #{translate("month")} + div( + type="number" + name="month" + data-recurly="month" + ) + .col-xs-3 + .form-group.has-feedback(ng-class="validation.errorFields.year ? 'has-error' : ''") + label(for="year").capitalised #{translate("year")} + div( + type="number" + name="year" + data-recurly="year" + ) + + .col-xs-6 + .form-group.has-feedback(ng-class="validation.errorFields.cvv ? 'has-error' : ''") + label #{translate("security_code")} + div( + type="number" + ng-model="data.cvv" + data-recurly="cvv" + name="cvv" + cc-format-sec-code + ) + .form-control-feedback + a.form-helper( + href + tabindex="-1" + tooltip-template="'cvv-tooltip-tpl.html'" + tooltip-trigger="mouseenter" + tooltip-append-to-body="true" + ) ? + + div + .row + .col-xs-12 + .form-group(ng-class="validation.errorFields.address1 || inputHasError(simpleCCForm.address1) ? 'has-error' : ''") + label(for="address-line-1") #{translate('address_line_1')} + input#address-line-1.form-control( + type="text" + maxlength="255" + data-recurly="address1" + name="address1" + ng-model="data.address1" + required + ) + span.input-feedback-message(ng-if="simpleCCForm.address1.$error.required") #{translate('this_field_is_required')} + + .row + .col-xs-12 + .form-group.has-feedback(ng-class="validation.errorFields.address2 ? 'has-error' : ''") + label(for="address-line-2") #{translate('address_line_2')} + input#address-line-2.form-control( + type="text" + maxlength="255" + data-recurly="address2" + name="address2" + ng-model="data.address2" + ) + + .row + .col-xs-4 + .form-group(ng-class="validation.errorFields.postal_code || inputHasError(simpleCCForm.postalCode) ? 'has-error' : ''") + label(for="postal-code") #{translate('postal_code')} + input#postal-code.form-control( + type="text" + maxlength="255" + data-recurly="postal_code" + name="postalCode" + ng-model="data.postal_code" + required + ) + span.input-feedback-message(ng-if="simpleCCForm.postalCode.$error.required") #{translate('this_field_is_required')} + + .col-xs-8 + .form-group(ng-class="validation.errorFields.country || inputHasError(simpleCCForm.country) ? 'has-error' : ''") + label(for="country") #{translate('country')} + select#country.form-control( + data-recurly="country" + ng-model="data.country" + name="country" + ng-change="updateCountry()" + ng-selected="{{country.code == data.country}}" + ng-model-options="{ debounce: 200 }" + required + ) + option(value='', disabled) #{translate("country")} + option(value='-', disabled) -------------- + option(ng-repeat="country in countries" ng-bind-html="country.name" value="{{country.code}}") + span.input-feedback-message(ng-if="simpleCCForm.country.$error.required") #{translate('this_field_is_required')} + + .form-group + .checkbox + label + input( + type="checkbox" + ng-model="ui.addCompanyDetails" + ) + | + | #{translate("add_company_details")} + + .form-group(ng-show="ui.addCompanyDetails") + label(for="company-name") #{translate("company_name")} + input#company-name.form-control( + type="text" + name="companyName" + ng-model="data.company" + ) + + .form-group(ng-show="ui.addCompanyDetails && taxes.length") + label(for="vat-number") #{translate("vat_number")} + input#vat-number.form-control( + type="text" + name="vatNumber" + ng-model="data.vat_number" + ng-blur="applyVatNumber()" + ) + + if (showCouponField) + .form-group + label(for="coupon-code") #{translate('coupon_code')} + input#coupon-code.form-control( + type="text" + ng-blur="applyCoupon()" + ng-model="data.coupon" + ) + + p(ng-if="paymentMethod.value === 'paypal'") #{translate("paypal_upgrade")} + + div.price-breakdown( + ng-show="taxes.length" + ) + - var priceBreakdownVars = { total: "{{ availableCurrencies[currencyCode]['symbol'] }}{{ price.total }}", subtotal: "{{availableCurrencies[currencyCode]['symbol']}}{{ price.subtotal }}", tax: "{{availableCurrencies[currencyCode]['symbol']}}{{ price.tax }}" }; + hr.thin + span + | Total: + | + span(ng-if="!coupon.singleUse && monthlyBilling") + | !{translate("x_price_per_month_tax", priceBreakdownVars, ['strong'] )} + span(ng-if="!coupon.singleUse && !monthlyBilling") + | !{translate("x_price_per_year_tax", priceBreakdownVars, ['strong'] )} + span(ng-if="coupon.singleUse && monthlyBilling") + | !{translate("x_price_for_first_month_tax", priceBreakdownVars, ['strong'] )} + span(ng-if="coupon.singleUse && !monthlyBilling") + | !{translate("x_price_for_first_year_tax", priceBreakdownVars, ['strong'] )} + hr.thin + + div.payment-submit + button.btn.btn-success.btn-block( + ng-click="submit()" + ng-disabled="processing || !isFormValid(simpleCCForm);" + ) + span(ng-show="processing") + i.fa.fa-spinner.fa-spin(aria-hidden="true") + span.sr-only #{translate('processing')} + | + span(ng-if="paymentMethod.value === 'credit_card'") + | {{ monthlyBilling ? '#{translate("upgrade_cc_btn")}' : '#{translate("upgrade_now")}'}} + span(ng-if="paymentMethod.value !== 'credit_card'") #{translate("upgrade_paypal_btn")} + + p.tos-agreement-notice !{translate("by_subscribing_you_agree_to_our_terms_of_service", {}, [{name: 'a', attrs: {href: '/legal#Terms', target:'_blank', rel:'noopener noreferrer'}}])} + + div.three-d-secure-container.card.card-highlighted.card-border(ng-show="threeDSecureFlow") + .alert.alert-info.small(aria-live="assertive") + strong #{translate('card_must_be_authenticated_by_3dsecure')} + div.three-d-secure-recurly-container + + + + .col-md-3.col-md-pull-4 + if showStudentPlan + a.btn-primary.btn.plansPageStudentLink( + href, + ng-click="switchToStudent()" + ) #{translate("special_price_student")} + + .card.card-first + .paymentPageFeatures + h3 #{translate("unlimited_projects")} + p #{translate("create_unlimited_projects")} + + h3 + if plan.features.collaborators == -1 + - var collaboratorCount = 'Unlimited' + else + - var collaboratorCount = plan.features.collaborators + if plan.features.collaborators == 1 + | #{translate("collabs_per_proj_single", {collabcount:collaboratorCount})} + else + | #{translate("collabs_per_proj", {collabcount:collaboratorCount})} + p #{translate("work_on_single_version")}. #{translate("view_collab_edits_in_real_time")} + + h3 #{translate("full_doc_history")} + p.track-changes-example + | #{translate("see_what_has_been")} #[span.added #{translate("added")}] + | #{translate("and")} #[span.removed #{translate("removed")}]. + p + | #{translate("restore_to_any_older_version")}. + + h3 #{translate("sync_to_dropbox")} + p + | #{translate("acces_work_from_anywhere")}. + | #{translate("work_offline_and_sync_with_dropbox")}. + + hr + + p.small.text-center(ng-non-bindable) !{translate("cancel_anytime", { appName:'{{settings.appName}}' })} + + script(type="text/javascript", nonce=scriptNonce). + ga('send', 'event', 'pageview', 'payment_form', "#{plan_code}") + + script( + type="text/ng-template" + id="cvv-tooltip-tpl.html" + ) + p !{translate("for_visa_mastercard_and_discover", {}, ['strong', 'strong', 'strong'])} + p !{translate("for_american_express", {}, ['strong', 'strong', 'strong'])} diff --git a/services/web/app/views/subscriptions/plans.pug b/services/web/app/views/subscriptions/plans.pug new file mode 100644 index 0000000000..1db7c400ec --- /dev/null +++ b/services/web/app/views/subscriptions/plans.pug @@ -0,0 +1,100 @@ +extends ../layout + +include _plans_page_mixins +include _plans_page_tables + +block vars + - metadata = { viewport: true } + +block append meta + meta(name="ol-recomendedCurrency" content=recomendedCurrency) + meta(name="ol-groupPlans" data-type="json" content=groupPlans) + +block content + main.content.content-alt#main-content + .container + .user-notifications + ul.list-unstyled(ng-cloak) + li.notification-entry + .alert.alert-info + .notification-body + span To help you work from home throughout 2021, we're providing discounted plans and special initiatives. + .notification-action + a.btn.btn-sm.btn-info(href="https://www.overleaf.com/events/wfh2021" event-tracking="Event-Pages" event-tracking-trigger="click" event-tracking-ga="WFH-Offer-Click" event-tracking-label="Plans-Banner") Upgrade + .content-page + .plans(ng-controller="PlansController") + .container(ng-cloak) + .row + .col-md-12 + .page-header.centered.plans-header.text-centered + h1.text-capitalize(ng-non-bindable) #{translate('get_instant_access_to')} #{settings.appName} + .row + .col-md-8.col-md-offset-2 + p.text-centered #{translate("sl_benefits_plans")} + + +allCardsAndControls() + + .row.row-spaced-large.text-centered + .col-xs-12 + p.text-centered !{translate('also_provides_free_plan', { appName:'{{settings.appName}}' }, [{ name: 'a', attrs: { href: '/register' }}])} + i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true") + span.sr-only Mastercard accepted + i.fa.fa-cc-visa.fa-2x(aria-hidden="true") + span.sr-only Visa accepted + i.fa.fa-cc-amex.fa-2x(aria-hidden="true") + span.sr-only Amex accepted + i.fa.fa-cc-paypal.fa-2x(aria-hidden="true") + span.sr-only Paypal accepted + div.text-centered #{translate('change_plans_any_time')}
#{translate('billed_after_x_days', {len:'{{trial_len}}'})} + br + div.text-centered #{translate('subject_to_additional_vat')}
#{translate('select_country_vat')} + + .row.row-spaced-large + .col-md-8.col-md-offset-2 + .card.text-centered + .card-header + h2 #{translate('looking_multiple_licenses')} + span #{translate('reduce_costs_group_licenses')} + br + br + a.btn.btn-default( + href="#groups" + ng-click="openGroupPlanModal()" + ) #{translate('find_out_more')} + + .row.row-spaced-large + .col-sm-12 + .page-header.plans-header.plans-subheader.text-centered + h2 #{translate('compare_plan_features')} + .row + .col-md-6.col-md-offset-3 + +plan_switch('table') + .col-md-3.text-right + +currency_dropdown + .row(event-tracking="features-table-viewed" event-tracking-ga="subscription-funnel" event-tracking-trigger="scroll" event-tracking-send-once="true" event-tracking-label=`exp-{{plansVariant}}`) + .col-sm-12(ng-if="ui.view != 'student'") + +table_premium + .col-sm-12(ng-if="ui.view == 'student'") + +table_student + + include _plans_quotes + + include _plans_faq + + #bottom-cards.row.row-spaced(style="display: none;") + .col-sm-12 + +allCardsAndControls(true, 'bottom') + + .row.row-spaced-large + .col-md-12 + .plans-header.plans-subheader.text-centered + h2.header-with-btn #{translate('still_have_questions')} + button.btn.btn-default.btn-header.text-capitalize( + ng-controller="ContactGeneralModal" + ng-click="openModal()" + ) #{translate('get_in_touch')} + != moduleIncludes("contactModalGeneral", locals) + + .row.row-spaced + + include _modal_group_purchase diff --git a/services/web/app/views/subscriptions/successful_subscription.pug b/services/web/app/views/subscriptions/successful_subscription.pug new file mode 100644 index 0000000000..384358a30f --- /dev/null +++ b/services/web/app/views/subscriptions/successful_subscription.pug @@ -0,0 +1,30 @@ +extends ../layout + +block content + main.content.content-alt#main-content + .container + .row + .col-md-8.col-md-offset-2 + .card(ng-cloak) + .page-header + h2 #{translate("thanks_for_subscribing")} + + .alert.alert-success + if (personalSubscription.recurly.trial_ends_at) + p !{translate("next_payment_of_x_collectected_on_y", {paymentAmmount: personalSubscription.recurly.price, collectionDate: personalSubscription.recurly.nextPaymentDueAt}, ['strong', 'strong'])} + include ./_price_exceptions + p #{translate("to_modify_your_subscription_go_to")} + a(href="/user/subscription") #{translate("manage_subscription")}. + p + if (personalSubscription.groupPlan == true) + a.btn.btn-success.btn-large(href=`/manage/groups/${personalSubscription._id}/members`) #{translate("add_your_first_group_member_now")} + p.letter-from-founders + p #{translate("thanks_for_subscribing_you_help_sl", {planName:personalSubscription.plan.name})} + p #{translate("need_anything_contact_us_at")} + a(href=`mailto:${settings.adminEmail}`, ng-non-bindable) #{settings.adminEmail} + | . + p #{translate("regards")}, + br(ng-non-bindable) + | The #{settings.appName} Team + p + a.btn.btn-primary(href="/project") < #{translate("back_to_your_projects")} diff --git a/services/web/app/views/subscriptions/team/invite.pug b/services/web/app/views/subscriptions/team/invite.pug new file mode 100644 index 0000000000..40f19a8703 --- /dev/null +++ b/services/web/app/views/subscriptions/team/invite.pug @@ -0,0 +1,39 @@ +extends ../../layout + +block append meta + meta(name="ol-hasIndividualRecurlySubscription" data-type="boolean" content=hasIndividualRecurlySubscription) + meta(name="ol-inviteToken" content=inviteToken) + +block content + main.content.content-alt.team-invite#main-content + .container + .row + .col-md-8.col-md-offset-2 + if (expired) + .alert.alert-warning #{translate("email_link_expired")} + + .row.row-spaced + .col-md-8.col-md-offset-2.text-center(ng-cloak) + .card(ng-controller="TeamInviteController") + .page-header + h1.text-centered(ng-non-bindable) #{translate("invited_to_group", {inviterName: inviterName, appName: appName})} + + div(ng-show="view =='hasIndividualRecurlySubscription'") + p #{translate("cancel_personal_subscription_first")} + .alert.alert-danger(ng-show="cancel_error" ng-cloak) #{translate("something_went_wrong_canceling_your_subscription")} + p + a.btn.btn.btn-default(ng-click="keepPersonalSubscription()", ng-disabled="inflight") #{translate("not_now")} + | + a.btn.btn.btn-primary(ng-click="cancelPersonalSubscription()", ng-disabled="inflight") #{translate("cancel_your_subscription")} + + div(ng-show="view =='teamInvite'") + p #{translate("join_team_explanation", {appName: appName})} + p + a.btn.btn-default(href="/project") #{translate("not_now")} + | + a.btn.btn.btn-primary(ng-click="joinTeam()", ng-disabled="inflight") #{translate("accept_invitation")} + + div(ng-show="view =='inviteAccepted'") + p(ng-non-bindable) #{translate("joined_team", {inviterName: inviterName})} + p + a.btn.btn.btn-primary(href="/project") #{translate("done")} diff --git a/services/web/app/views/subscriptions/upgradeToAnnual.pug b/services/web/app/views/subscriptions/upgradeToAnnual.pug new file mode 100644 index 0000000000..cb13bcc535 --- /dev/null +++ b/services/web/app/views/subscriptions/upgradeToAnnual.pug @@ -0,0 +1,24 @@ +extends ../layout + +block content + + main.content.content-alt#main-content + .container(ng-controller="AnnualUpgradeController") + .row(ng-cloak) + .col-md-6.col-md-offset-3 + .card(ng-init="planName = "+JSON.stringify(planName)) + .page-header + h1.text-centered #{translate("move_to_annual_billing")} + div(ng-hide="upgradeComplete") + .row + div.col-md-12 !{translate("change_to_annual_billing_and_save", {percentage:'20%', yearlySaving:'${{yearlySaving}}'}, ['strong', 'strong'])} + .row + .row + div.col-md-12 + center + button.btn.btn-success(ng-click="completeAnnualUpgrade()", ng-disabled="inflight") + span(ng-show="inflight") #{translate("processing")} + span(ng-hide="inflight") #{translate("move_to_annual_billing")} now + + div(ng-show="upgradeComplete") + h3 #{translate("annual_billing_enabled")}, #{translate("thank_you")}. diff --git a/services/web/app/views/translations/translation_message.pug b/services/web/app/views/translations/translation_message.pug new file mode 100644 index 0000000000..a5b57320cb --- /dev/null +++ b/services/web/app/views/translations/translation_message.pug @@ -0,0 +1,8 @@ +if (typeof(suggestedLanguageSubdomainConfig) != "undefined") + span(ng-controller="TranslationsPopupController", ng-cloak) + .translations-message(ng-hide="hidei18nNotification") + a(href=suggestedLanguageSubdomainConfig.url+currentUrl) !{translate("click_here_to_view_sl_in_lng", {lngName: translate(suggestedLanguageSubdomainConfig.lngCode)}, ['strong'])} + img(src=buildImgPath("flags/24/" + suggestedLanguageSubdomainConfig.lngCode + ".png")) + button(ng-click="dismiss()").close.pull-right + span(aria-hidden="true") × + span.sr-only #{translate("close")} diff --git a/services/web/app/views/university/case_study.pug b/services/web/app/views/university/case_study.pug new file mode 100644 index 0000000000..ad25fd43b6 --- /dev/null +++ b/services/web/app/views/university/case_study.pug @@ -0,0 +1,19 @@ +extends ../layout + +block content + .masthead + .container + .row + .col-md-12 + h1(ng-non-bindable) !{viewData.title} + .row.row-spaced + + .pattern-container + .content + .container + .row + .col-md-10.col-md-offset-1 + .card + .row(ng-non-bindable) + | !{viewData.html} + diff --git a/services/web/app/views/university/university_holder.pug b/services/web/app/views/university/university_holder.pug new file mode 100644 index 0000000000..babf2ebad9 --- /dev/null +++ b/services/web/app/views/university/university_holder.pug @@ -0,0 +1,4 @@ +extends ../layout + +block content + | !{content} \ No newline at end of file diff --git a/services/web/app/views/user/confirm_email.pug b/services/web/app/views/user/confirm_email.pug new file mode 100644 index 0000000000..6b0453a7ab --- /dev/null +++ b/services/web/app/views/user/confirm_email.pug @@ -0,0 +1,28 @@ +extends ../layout + +block content + main.content.content-alt#main-content + .container + .row + .col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4 + .card + .page-header + h1 #{translate("confirm_email")} + form( + async-form="confirm-email", + name="confirmEmailForm" + action="/user/emails/confirm", + method="POST", + id="confirmEmailForm", + auto-submit="true", + ng-cloak + ) + input(type="hidden", name="_csrf", value=csrfToken) + input(type="hidden", name="token", value=token ng-non-bindable) + form-messages(for="confirmEmailForm") + .alert.alert-success(ng-show="confirmEmailForm.response.success") + | Thank you, your email is now confirmed + p.text-center(ng-show="!confirmEmailForm.response.success && !confirmEmailForm.response.error") + i.fa.fa-fw.fa-spin.fa-spinner(aria-hidden="true") + | + | Confirming your email… diff --git a/services/web/app/views/user/login.pug b/services/web/app/views/user/login.pug new file mode 100644 index 0000000000..f4a4b4f69b --- /dev/null +++ b/services/web/app/views/user/login.pug @@ -0,0 +1,46 @@ +extends ../layout + +block vars + - metadata = { viewport: true } + +block content + main.content.content-alt#main-content + .container + .row + .col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4 + .card + .page-header + h1 #{translate("log_in")} + form(async-form="login", name="loginForm", action='/login', method="POST", ng-cloak) + input(name='_csrf', type='hidden', value=csrfToken) + form-messages(for="loginForm") + .form-group + input.form-control( + type='email', + name='email', + required, + placeholder='email@example.com', + ng-model="email", + ng-model-options="{ updateOn: 'blur' }", + focus="true" + ) + span.small.text-primary(ng-show="loginForm.email.$invalid && loginForm.email.$dirty") + | #{translate("must_be_email_address")} + .form-group + input.form-control( + type='password', + name='password', + required, + placeholder='********', + ng-model="password" + ) + span.small.text-primary(ng-show="loginForm.password.$invalid && loginForm.password.$dirty") + | #{translate("required")} + .actions + button.btn-primary.btn( + type='submit', + ng-disabled="loginForm.inflight" + ) + span(ng-show="!loginForm.inflight") #{translate("login")} + span(ng-show="loginForm.inflight") #{translate("logging_in")}… + a.pull-right(href='/user/password/reset') #{translate("forgot_your_password")}? diff --git a/services/web/app/views/user/logout.pug b/services/web/app/views/user/logout.pug new file mode 100644 index 0000000000..a22c833983 --- /dev/null +++ b/services/web/app/views/user/logout.pug @@ -0,0 +1,20 @@ +extends ../layout + +block vars + - metadata = { viewport: true } + +block content + .content.content-alt + main.login-register-container#main-content + .card.login-register-card + .login-register-header + h1.login-register-header-heading #{translate("log_out")} + form.login-register-form(name="logoutForm", action='/logout', method="POST" ng-init="$scope.inflight=true" auto-submit-form) + input(name='_csrf', type='hidden', value=csrfToken) + .actions + button#submit-logout.btn-primary.btn.btn-block( + type='submit', + ng-disabled="$scope.inflight" + ) + span(ng-show="!$scope.inflight") #{translate("log_out")} + span(ng-show="$scope.inflight" ng-cloak) #{translate("logging_out")}… diff --git a/services/web/app/views/user/one_time_login.pug b/services/web/app/views/user/one_time_login.pug new file mode 100644 index 0000000000..c57d7cddc4 --- /dev/null +++ b/services/web/app/views/user/one_time_login.pug @@ -0,0 +1,20 @@ +extends ../layout + +block vars + - metadata = { viewport: true } + +block content + main.content.content-alt#main-content + .container + .row + .col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4 + .card + .page-header + h1 We're back! + p Overleaf is now running normally. + p + | Please + | + a(href="/login") log in + | + | to continue working on your projects. diff --git a/services/web/app/views/user/passwordReset.pug b/services/web/app/views/user/passwordReset.pug new file mode 100644 index 0000000000..12c09f1cc7 --- /dev/null +++ b/services/web/app/views/user/passwordReset.pug @@ -0,0 +1,58 @@ +extends ../layout + +block vars + - metadata = { viewport: true } + +block content + - var showCaptcha = settings.recaptcha && settings.recaptcha.siteKey && !(settings.recaptcha.disabled && settings.recaptcha.disabled.passwordReset) + + if showCaptcha + script(type="text/javascript", nonce=scriptNonce, src="https://www.recaptcha.net/recaptcha/api.js?render=explicit") + div( + id="recaptcha" + class="g-recaptcha" + data-sitekey=settings.recaptcha.siteKey + data-size="invisible" + data-badge="inline" + ) + + main.content.content-alt#main-content + .container + .row + .col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4 + .card + .page-header + h1 #{translate("password_reset")} + .messageArea + form( + async-form="password-reset-request", + name="passwordResetForm" + action="/user/password/reset", + method="POST", + captcha=(showCaptcha ? '' : false), + captcha-action-name=(showCaptcha ? "passwordReset" : false), + ng-cloak + ) + input(type="hidden", name="_csrf", value=csrfToken) + form-messages(for="passwordResetForm" role="alert") + .form-group + label(for='email') #{translate("please_enter_email")} + input.form-control#email( + type='email', + name='email', + placeholder='email@example.com', + required, + autocomplete="username", + ng-model="email", + autofocus + ) + span.small.text-primary( + ng-show="passwordResetForm.email.$invalid && passwordResetForm.email.$dirty" + ) #{translate("must_be_email_address")} + .actions + button.btn.btn-primary( + type='submit', + ng-disabled="passwordResetForm.$invalid || passwordResetForm.inflight" + ) + span(ng-hide="passwordResetForm.inflight") #{translate("request_password_reset")} + span(ng-show="passwordResetForm.inflight") #{translate("requesting_password_reset")}… diff --git a/services/web/app/views/user/reconfirm.pug b/services/web/app/views/user/reconfirm.pug new file mode 100644 index 0000000000..551ef09dfc --- /dev/null +++ b/services/web/app/views/user/reconfirm.pug @@ -0,0 +1,58 @@ +extends ../layout + +block content + - var email = reconfirm_email ? reconfirm_email : "" + - var showCaptcha = settings.recaptcha && settings.recaptcha.siteKey && !(settings.recaptcha.disabled && settings.recaptcha.disabled.passwordReset) + + if showCaptcha + script(type="text/javascript", nonce=scriptNonce, src="https://www.recaptcha.net/recaptcha/api.js?render=explicit") + div( + id="recaptcha" + class="g-recaptcha" + data-sitekey=settings.recaptcha.siteKey + data-size="invisible" + data-badge="inline" + ) + + main.content.content-alt#main-content + .container + .row + .col-sm-12.col-md-6.col-md-offset-3 + .card + h1.card-header.text-capitalize #{translate("reconfirm")} #{translate("Account")} + p #{translate('reconfirm_explained')} + a(href=`mailto:${settings.adminEmail}`, ng-non-bindable) #{settings.adminEmail} + | . + form( + async-form="reconfirm-account-request", + name="reconfirmAccountForm" + action="/user/reconfirm", + method="POST", + ng-cloak + ng-init="email='"+email+"'" + aria-label=translate('request_reconfirmation_email') + captcha=(showCaptcha ? '' : false), + captcha-action-name=(showCaptcha ? "passwordReset" : false), + ) + input(type="hidden", name="_csrf", value=csrfToken) + form-messages(for="reconfirmAccountForm" role="alert") + .form-group + label(for='email') #{translate("please_enter_email")} + input.form-control( + aria-label="email" + type='email', + name='email', + placeholder='email@example.com', + required, + ng-model="email", + autofocus + ) + span.small.text-primary( + ng-show="reconfirmAccountForm.email.$invalid && reconfirmAccountForm.email.$dirty" + ) #{translate("must_be_email_address")} + .actions + button.btn.btn-primary( + type='submit', + ng-disabled="reconfirmAccountForm.$invalid" + aria-label=translate('request_password_reset_to_reconfirm') + ) #{translate('request_password_reset_to_reconfirm')} diff --git a/services/web/app/views/user/register.pug b/services/web/app/views/user/register.pug new file mode 100644 index 0000000000..38c4e5fd4a --- /dev/null +++ b/services/web/app/views/user/register.pug @@ -0,0 +1,32 @@ +extends ../layout + +block content + main.content.content-alt#main-content + .container + .row + .registration_message + if sharedProjectData.user_first_name !== undefined + h1(ng-non-bindable) #{translate("user_wants_you_to_see_project", {username:sharedProjectData.user_first_name, projectname:""})} + em(ng-non-bindable) #{sharedProjectData.project_name} + div + | #{translate("join_sl_to_view_project")}. + div + | #{translate("if_you_are_registered")}, + a(href="/login") #{translate("login_here")} + else if newTemplateData.templateName !== undefined + h1(ng-non-bindable) #{translate("register_to_edit_template", {templateName:newTemplateData.templateName})} + + div #{translate("already_have_sl_account")} + a(href="/login") #{translate("login_here")} + + .row + .col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3 + .card + .page-header + h1 #{translate("register")} + p + | Please contact + | + strong(ng-non-bindable) #{settings.adminEmail} + | + | to create an account. diff --git a/services/web/app/views/user/restricted.pug b/services/web/app/views/user/restricted.pug new file mode 100644 index 0000000000..1e87a835a8 --- /dev/null +++ b/services/web/app/views/user/restricted.pug @@ -0,0 +1,13 @@ +extends ../layout + +block content + main.content#main-content + .container + .row + .col-md-8.col-md-offset-2.text-center + .page-header + h2 #{translate("restricted_no_permission")} + p + a(href="/") + i.fa.fa-arrow-circle-o-left(aria-hidden="true") + | #{translate("take_me_home")} diff --git a/services/web/app/views/user/sessions.pug b/services/web/app/views/user/sessions.pug new file mode 100644 index 0000000000..315aa06ae1 --- /dev/null +++ b/services/web/app/views/user/sessions.pug @@ -0,0 +1,48 @@ +extends ../layout + + +block append meta + meta(name="ol-otherSessions" data-type="json" content=sessions) + + +block content + main.content.content-alt#main-content + .container + .row + .col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + .card.clear-user-sessions(ng-controller="ClearSessionsController", ng-cloak) + .page-header + h1 #{translate("your_sessions")} + + div + p.small + | !{translate("clear_sessions_description")} + + div + div(ng-if="state.otherSessions.length == 0") + p.text-center + | #{translate("no_other_sessions")} + + div(ng-if="state.success == true") + p.text-success.text-center + | #{translate('clear_sessions_success')} + + div(ng-if="state.otherSessions.length != 0") + table.table.table-striped + thead + tr + th #{translate("ip_address")} + th #{translate("session_created_at")} + tr(ng-repeat="session in state.otherSessions") + td {{session.ip_address}} + td {{session.session_created | formatDate}} + + p.actions + .text-center + button.btn.btn-lg.btn-primary( + ng-click="clearSessions()" + ) #{translate('clear_sessions')} + + div(ng-if="state.error == true") + p.text-danger.error + | #{translate('generic_something_went_wrong')} diff --git a/services/web/app/views/user/setPassword.pug b/services/web/app/views/user/setPassword.pug new file mode 100644 index 0000000000..2e5c10a455 --- /dev/null +++ b/services/web/app/views/user/setPassword.pug @@ -0,0 +1,63 @@ +extends ../layout + +block append meta + meta(name="ol-passwordStrengthOptions" data-type="json" content=settings.passwordStrengthOptions) + +block content + main.content.content-alt#main-content + .container + .row + .col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4 + .card + .page-header + h1 #{translate("reset_your_password")} + form( + async-form="password-reset", + name="passwordResetForm", + action="/user/password/set", + method="POST", + ng-cloak + ) + input(type="hidden", name="_csrf", value=csrfToken) + .alert.alert-success(ng-show="passwordResetForm.response.success") + | #{translate("password_has_been_reset")}. + br + a(href='/login') #{translate("login_here")} + div(ng-show="passwordResetForm.response.error == true") + div(ng-switch="passwordResetForm.response.status") + .alert.alert-danger(ng-switch-when="404") + | #{translate('password_reset_token_expired')} + br + a(href="/user/password/reset") + | Request a new password reset email + .alert.alert-danger(ng-switch-when="400") + | #{translate('invalid_password')} + .alert.alert-danger(ng-switch-when="429") + | #{translate('rate_limit_hit_wait')} + .alert.alert-danger(ng-switch-default) + | #{translate('error_performing_request')} + + + .form-group + input.form-control#passwordField( + type='password', + name='password', + placeholder='new password', + required, + autocomplete="new-password", + ng-model="password", + autofocus, + complex-password + ) + span.small.text-primary(ng-show="passwordResetForm.password.$error.complexPassword", ng-bind-html="complexPasswordErrorMessage") + input( + type="hidden", + name="passwordResetToken", + value=passwordResetToken + ng-non-bindable + ) + .actions + button.btn.btn-primary( + type='submit', + ng-disabled="passwordResetForm.$invalid" + ) #{translate("set_new_password")} diff --git a/services/web/app/views/user/settings.pug b/services/web/app/views/user/settings.pug new file mode 100644 index 0000000000..0b501ad824 --- /dev/null +++ b/services/web/app/views/user/settings.pug @@ -0,0 +1,287 @@ +extends ../layout + +block append meta + meta(name="ol-reconfirmationRemoveEmail", content=reconfirmationRemoveEmail) + meta(name="ol-reconfirmedViaSAML", content=reconfirmedViaSAML) + meta(name="ol-passwordStrengthOptions", data-type="json", content=settings.passwordStrengthOptions || {}) + meta(name="ol-oauthProviders", data-type="json", content=oauthProviders) + meta(name="ol-thirdPartyIds", data-type="json", content=thirdPartyIds) + +block content + main.content.content-alt#main-content + .container + .row + .col-md-12.col-lg-10.col-lg-offset-1 + if ssoError + .alert.alert-danger + | #{translate('sso_link_error')}: #{translate(ssoError)} + .card + .page-header + h1 #{translate("account_settings")} + .account-settings(ng-controller="AccountSettingsController", ng-cloak) + + if hasFeature('affiliations') + include settings/user-affiliations + + .row + .col-md-5 + h3 #{translate("update_account_info")} + form(async-form="settings", name="settingsForm", method="POST", action="/user/settings", novalidate) + input(type="hidden", name="_csrf", value=csrfToken) + if !hasFeature('affiliations') + if !externalAuthenticationSystemUsed() + .form-group + label(for='email') #{translate("email")} + input.form-control( + id="email" + type='email', + name='email', + placeholder="email@example.com" + required, + ng-model="email", + ng-model-options="{ updateOn: 'blur' }" + ) + span.small.text-danger(ng-show="settingsForm.email.$invalid && settingsForm.email.$dirty") + | #{translate("must_be_email_address")} + else + // show the email, non-editable + .form-group + label.control-label #{translate("email")} + div.form-control( + readonly="true", + ng-non-bindable + ) #{user.email} + + if shouldAllowEditingDetails + .form-group + label(for='firstName').control-label #{translate("first_name")} + input.form-control( + id="firstName" + type='text', + name='first_name', + value=user.first_name + ng-non-bindable + ) + .form-group + label(for='lastName').control-label #{translate("last_name")} + input.form-control( + id="lastName" + type='text', + name='last_name', + value=user.last_name + ng-non-bindable + ) + .form-group + form-messages(aria-live="polite" for="settingsForm") + .alert.alert-success(ng-show="settingsForm.response.success") + | #{translate("thanks_settings_updated")} + .actions + button.btn.btn-primary( + type='submit', + ng-disabled="settingsForm.$invalid" + ) #{translate("update")} + else + .form-group + label.control-label #{translate("first_name")} + div.form-control( + readonly="true", + ng-non-bindable + ) #{user.first_name} + .form-group + label.control-label #{translate("last_name")} + div.form-control( + readonly="true", + ng-non-bindable + ) #{user.last_name} + + .col-md-5.col-md-offset-1 + h3 #{translate("change_password")} + if externalAuthenticationSystemUsed() && !settings.overleaf + p + Password settings are managed externally + else if !hasPassword + p + | #[a(href="/user/password/reset", target='_blank') #{translate("no_existing_password")}] + else + - var submitAction + - submitAction = '/user/password/update' + form( + async-form="changepassword" + name="changePasswordForm" + action=submitAction + method="POST" + novalidate + ) + input(type="hidden", name="_csrf", value=csrfToken) + .form-group + label(for='currentPassword') #{translate("current_password")} + input.form-control( + id="currentPassword" + type='password', + name='currentPassword', + placeholder='*********', + ng-model="currentPassword", + required + ) + span.small.text-danger(ng-show="changePasswordForm.currentPassword.$invalid && changePasswordForm.currentPassword.$dirty" aria-live="polite") + | #{translate("required")} + .form-group + label(for='passwordField') #{translate("new_password")} + input.form-control( + id='passwordField', + type='password', + name='newPassword1', + placeholder='*********', + ng-model="newPassword1", + required, + complex-password + ) + span.small.text-danger(ng-show="changePasswordForm.newPassword1.$error.complexPassword && changePasswordForm.newPassword1.$dirty", ng-bind-html="complexPasswordErrorMessage" aria-live="polite") + .form-group + label(for='newPassword2') #{translate("confirm_new_password")} + input.form-control( + id="newPassword2" + type='password', + name='newPassword2', + placeholder='*********', + ng-model="newPassword2", + equals="passwordField" + ) + span.small.text-danger(ng-show="changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$dirty" aria-live="polite") + | #{translate("doesnt_match")} + span.small.text-danger(ng-show="!changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$invalid && changePasswordForm.newPassword2.$dirty" aria-live="polite") + | #{translate("invalid_password")} + .form-group + form-messages(aria-live="polite" for="changePasswordForm") + .actions + button.btn.btn-primary( + type='submit', + ng-disabled="changePasswordForm.$invalid" + ) #{translate("change")} + + | !{moduleIncludes("userSettings", locals)} + hr + + h3 + | #{translate("sharelatex_beta_program")} + + if (user.betaProgram) + p.small + | #{translate("beta_program_already_participating")} + + div + a(id="beta-program-participate-link" href="/beta/participate") #{translate("manage_beta_program_membership")} + + hr + + h3 + | #{translate("sessions")} + + div + a(id="sessions-link", href="/user/sessions") #{translate("manage_sessions")} + + if hasFeature('oauth') + hr + include settings/user-oauth + + if hasFeature('saas') && (!externalAuthenticationSystemUsed() || (settings.createV1AccountOnLogin && settings.overleaf)) + hr + p.small + | #{translate("newsletter_info_and_unsubscribe")} + a( + href, + ng-click="unsubscribe()", + ng-show="subscribed && !unsubscribing" + ) #{translate("unsubscribe")} + span( + ng-show="unsubscribing" + ) + i.fa.fa-spin.fa-refresh(aria-hidden="true") + | #{translate("unsubscribing")} + span.text-success( + ng-show="!subscribed" + ) + i.fa.fa-check(aria-hidden="true") + | #{translate("unsubscribed")} + + if !settings.overleaf && user.overleaf + p + | Please note: If you have linked your account with Overleaf + | v2, then deleting your ShareLaTeX account will also delete + | account and all of it's associated projects and data. + p #{translate("need_to_leave")} + a(href, ng-click="deleteAccount()") #{translate("delete_your_account")} + + + script(type='text/ng-template', id='deleteAccountModalTemplate') + .modal-header + h3 #{translate("delete_account")} + div.modal-body#delete-account-modal + p !{translate("delete_account_warning_message_3")} + if settings.createV1AccountOnLogin && settings.overleaf + p + strong + | Your Overleaf v2 projects will be deleted if you delete your account. + | If you want to remove any remaining Overleaf v1 projects in your account, + | please first make sure they are imported to Overleaf v2. + + if settings.overleaf && !hasPassword + p + b + | #[a(href="/user/password/reset", target='_blank') #{translate("delete_acct_no_existing_pw")}]. + else + form(novalidate, name="deleteAccountForm") + label #{translate('email')} + input.form-control( + type="text", + autocomplete="off", + placeholder="", + ng-model="state.deleteText", + focus-on="open", + ng-keyup="checkValidation()" + ) + + label #{translate('password')} + input.form-control( + type="password", + autocomplete="off", + placeholder="", + ng-model="state.password", + ng-keyup="checkValidation()" + ) + + div.confirmation-checkbox-wrapper + input( + type="checkbox" + ng-model="state.confirmSharelatexDelete" + ng-change="checkValidation()" + ).pull-left + label(style="display: inline") I understand this will delete all projects in my Overleaf account with email address #[em {{ userDefaultEmail }}] + + div(ng-if="state.error") + div.alert.alert-danger(ng-switch="state.error.code") + span(ng-switch-when="InvalidCredentialsError") + | #{translate('email_or_password_wrong_try_again')} + span(ng-switch-when="SubscriptionAdminDeletionError") + | #{translate('subscription_admins_cannot_be_deleted')} + span(ng-switch-when="UserDeletionError") + | #{translate('user_deletion_error')} + span(ng-switch-default) + | #{translate('generic_something_went_wrong')} + if settings.createV1AccountOnLogin && settings.overleaf + div(ng-if="state.error && state.error.code == 'InvalidCredentialsError'") + div.alert.alert-info + | If you can't remember your password, or if you are using Single-Sign-On with another provider + | to sign in (such as Twitter or Google), please + | #[a(href="/user/password/reset", target='_blank') reset your password], + | and try again. + .modal-footer + button.btn.btn-default( + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-danger( + ng-disabled="!state.isValid || state.inflight" + ng-click="delete()" + ) + span(ng-hide="state.inflight") #{translate("delete")} + span(ng-show="state.inflight") #{translate("deleting")}… diff --git a/services/web/app/views/user/settings/user-affiliations.pug b/services/web/app/views/user/settings/user-affiliations.pug new file mode 100644 index 0000000000..ebeb6ade14 --- /dev/null +++ b/services/web/app/views/user/settings/user-affiliations.pug @@ -0,0 +1,386 @@ +include ../../_mixins/reconfirm_affiliation + +mixin aboutInstitutionLink() + a(href="/learn/how-to/Institutional_Login") #{translate("find_out_more_about_institution_login")}. + +mixin btnMakePrimaryDisabled(tooltip) + div( + tooltip=tooltip + tooltip-enable="!ui.isMakingRequest" + ) + button.btn.btn-sm.btn-success.affiliations-table-inline-action( + disabled + type="button" + ) #{translate("make_primary")} + +mixin btnRemoveEmail() + .affiliations-table-inline-action-disabled-wrapper(ng-if="userEmail.default") + div( + tooltip=translate("please_change_primary_to_remove") + tooltip-enable="!ui.isMakingRequest" + tooltip-placement="left" + ) + button.btn.btn-sm.btn-danger(disabled) + i.fa.fa-fw.fa-trash(aria-hidden="true") + span.sr-only #{translate("please_change_primary_to_remove")} + button.btn.btn-sm.btn-danger.affiliations-table-inline-action( + ng-if="!userEmail.default" + ng-click="removeUserEmail(userEmail)" + ng-disabled="ui.isMakingRequest" + tooltip=translate("remove") + type="button" + ) + i.fa.fa-fw.fa-trash(aria-hidden="true") + span.sr-only #{translate("remove")} + +form.row( + ng-controller="UserAffiliationsController" + name="affiliationsForm" +) + .col-md-12 + h3 #{translate("emails_and_affiliations_title")} + p.small #{translate("emails_and_affiliations_explanation")} + table.table.affiliations-table + thead + tr + th.affiliations-table-email #{translate("email")} + th.affiliations-table-institution #{translate("institution_and_role")} + th.affiliations-table-inline-actions + tbody + tr( + ng-repeat-start="userEmail in userEmails" + ) + td + | {{ userEmail.email + (userEmail.default ? ' (primary)' : '') }} + div(ng-if="!userEmail.confirmedAt").small + strong #{translate('unconfirmed')}. + span(ng-if="!userEmail.ssoAvailable") #{translate('please_check_your_inbox')}. + br + a( + href, + ng-click="resendConfirmationEmail(userEmail)", + ng-if="!userEmail.ssoAvailable" + ) #{translate('resend_confirmation_email')} + div(ng-if="userEmail.confirmedAt && userEmail.affiliation.institution && userEmail.affiliation.institution.confirmed && userEmail.affiliation.licence && userEmail.affiliation.licence != 'free'").small + span.label.label-primary #{translate("professional")} + td + div(ng-if="userEmail.affiliation.institution") + div {{ userEmail.affiliation.institution.name }} + span.small + a( + href + ng-if="!isChangingAffiliation(userEmail.email) && !userEmail.affiliation.role && !userEmail.affiliation.department" + ng-click="changeAffiliation(userEmail);" + ) #{translate("add_role_and_department")} + div.small( + ng-if="!isChangingAffiliation(userEmail.email) && (userEmail.affiliation.role || userEmail.affiliation.department)" + ) + span(ng-if="userEmail.affiliation.role") {{ userEmail.affiliation.role }} + span(ng-if="userEmail.affiliation.role && userEmail.affiliation.department") , + span(ng-if="userEmail.affiliation.department") {{ userEmail.affiliation.department }} + br + a( + href + ng-click="changeAffiliation(userEmail);" + ) #{translate("change")} + .affiliation-change-container( + ng-if="isChangingAffiliation(userEmail.email)" + ) + affiliation-form( + affiliation-data="affiliationToChange" + show-university-and-country="false" + show-role-and-department="true" + ) + .affiliation-change-actions.small + button.btn.btn-sm.btn-success( + ng-click="saveAffiliationChange(userEmail);" + ng-disabled="!(affiliationToChange.role && affiliationToChange.department)" + type="button" + ) #{translate("save_or_cancel-save")} + | #{translate("save_or_cancel-or" )} + a( + href + ng-click="cancelAffiliationChange();" + ) #{translate("save_or_cancel-cancel")} + td.affiliations-table-inline-actions + // Disabled buttons don't work with tooltips, due to pointer-events: none, + // so create a wrapper for the tooltip + span(ng-if="!userEmail.default && (!userEmail.confirmedAt || ui.isMakingRequest) && !institutionAlreadyLinked(userEmail) && !inReconfirmNotificationPeriod(userEmail)") + .affiliations-table-inline-action-disabled-wrapper(ng-if="userEmail.ssoAvailable") + +btnMakePrimaryDisabled(translate("please_link_before_making_primary")) + .affiliations-table-inline-action-disabled-wrapper(ng-if="!userEmail.ssoAvailable") + +btnMakePrimaryDisabled(translate("please_confirm_your_email_before_making_it_default")) + .affiliations-table-inline-action-disabled-wrapper(ng-if="!userEmail.default && inReconfirmNotificationPeriod(userEmail)") + +btnMakePrimaryDisabled(translate("please_reconfirm_your_affiliation_before_making_this_primary")) + button.btn.btn-sm.btn-success.affiliations-table-inline-action( + tooltip=translate("make_email_primary_description") + ng-if="!userEmail.default && (userEmail.confirmedAt && !ui.isMakingRequest) && !inReconfirmNotificationPeriod(userEmail)" + ng-click="setDefaultUserEmail(userEmail)" + type="button" + ) #{translate("make_primary")} + | + +btnRemoveEmail() + tr.affiliations-table-saml-row(ng-if="userEmail.affiliation && userEmail.affiliation && userEmail.ssoAvailable") + td + td(ng-attr-colspan="{{userEmail.samlProviderId ? '2' : '1'}}" ng-class="institutionAlreadyLinked(userEmail) ? '' : 'with-border'") + p.small(ng-if="userEmail.samlProviderId") + | !{translate("acct_linked_to_institution_acct", {institutionName: '{{userEmail.affiliation.institution.name}}'})} + div(ng-if="!userEmail.samlProviderId && !institutionAlreadyLinked(userEmail)") + //- this email is not linked to institution login but + //- cannot have multiple emails at same institution linked for "institution login" + //- so check if institution is already linked + p.small + | !{translate("can_link_your_institution_acct", {institutionName: '{{userEmail.affiliation.institution.name}}'})} + p.small + | !{translate("doing_this_allow_log_in_through_institution")} + +aboutInstitutionLink() + td.with-border.affiliations-table-inline-actions(ng-if="!userEmail.samlProviderId && !institutionAlreadyLinked(userEmail)") + button.btn-sm.btn.btn-info( + ng-click="linkInstitutionAcct(userEmail.email, userEmail.affiliation.institution.id)" + ng-disabled="ui.isMakingRequest" + type="button" + ) + | #{translate("link_accounts")} + tr( + class="reconfirm-row" + ng-if="userEmail.samlIdentifier && userEmail.samlIdentifier.providerId === reconfirmedViaSAML" + ) + td(colspan="3") + +reconfirmedAffiliationNotification() + tr( + class="reconfirm-row" + ng-repeat-end + ) + td( + colspan="3" + ng-if="userEmail.affiliation && userEmail.affiliation.inReconfirmNotificationPeriod" + ) + div(ng-class="{'alert alert-info': reconfirmationRemoveEmail === userEmail.email}") + +reconfirmAffiliationNotification('/user/settings') + + tr.affiliations-table-highlighted-row( + ng-if="!ui.showAddEmailUI && !ui.isMakingRequest" + ) + td(colspan="3") + a( + href + ng-click="showAddEmailForm()" + ) #{translate("add_another_email")} + + tr.affiliations-table-highlighted-row( + ng-if="ui.showAddEmailUI && !ui.isLoadingEmails" + ) + td + .affiliations-form-group + input-suggestions( + ng-model="newAffiliation.email" + ng-model-options="{ allowInvalid: true }" + get-suggestion="getEmailSuggestion(userInput)" + on-blur="handleEmailInputBlur()" + input-id="affilitations-email" + input-name="affilitationsEmail" + input-placeholder="e.g. johndoe@mit.edu" + input-type="email" + input-required="true" + ) + td( + colspan="2" + ng-if="newAffiliation.ssoAvailable" + ) + p.affiliations-table-label {{ newAffiliation.university.name }} + p !{translate("to_add_email_accounts_need_to_be_linked", {institutionName: "{{newAffiliation.university.name}}"})} + p !{translate("doing_this_will_verify_affiliation_and_allow_log_in", {institutionName: "{{newAffiliation.university.name}}"})} + +aboutInstitutionLink() + button.btn-sm.btn.btn-primary.btn-link-accounts( + ng-click="linkInstitutionAcct(newAffiliation.email, newAffiliation.university.id)" + ng-disabled="ui.isMakingRequest" + type="button" + ) + | #{translate("link_accounts_and_add_email")} + td( + ng-if="!newAffiliation.ssoAvailable" + ) + p.affiliations-table-label( + ng-if="newAffiliation.university && !ui.showManualUniversitySelectionUI" + ) + | {{ newAffiliation.university.name }} + span.small + | ( + a( + href + ng-click="selectUniversityManually();" + ) #{translate("change")} + | ) + .affiliations-table-label( + ng-if="!newAffiliation.university && !ui.isValidEmail && !ui.showManualUniversitySelectionUI" + ) #{translate("start_by_adding_your_email")} + .affiliations-table-label( + ng-if="!newAffiliation.university && ui.isValidEmail && !ui.isBlacklistedEmail && !ui.showManualUniversitySelectionUI" + ) + | #{translate("is_email_affiliated")} + br + a( + href + ng-click="selectUniversityManually();" + ) #{translate("let_us_know")} + affiliation-form( + affiliation-data="newAffiliation" + show-university-and-country="ui.showManualUniversitySelectionUI" + show-role-and-department="ui.isValidEmail && newAffiliation.university" + ) + td( + ng-if="!newAffiliation.ssoAvailable" + ) + button.btn.btn-sm.btn-primary( + ng-disabled="affiliationsForm.$invalid || ui.isMakingRequest" + ng-click="addNewEmail()" + ) + | #{translate("add_new_email")} + tr.affiliations-table-highlighted-row( + ng-if="ui.isMakingRequest" + ) + td.text-center(colspan="3", ng-if="ui.isLoadingEmails") + i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true") + | #{translate("loading")}… + td.text-center(colspan="3", ng-if="ui.isResendingConfirmation") + i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true") + | #{translate("sending")}… + td.text-center.text-capitalize(colspan="3", ng-if="ui.isProcessing") + i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true") + | #{translate("processing")} + td.text-center(colspan="3", ng-if="!ui.isLoadingEmails && !ui.isResendingConfirmation && !ui.isProcessing") + i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true") + | #{translate("saving")} + tr.affiliations-table-error-row( + ng-if="ui.hasError" + ) + td.text-center(colspan="3") + div + i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true") + span(ng-if="!ui.errorMessage") #{translate("error_performing_request")} + span(ng-if="ui.errorMessage") {{ui.errorMessage}} + if institutionLinked + tr.affiliations-table-info-row(ng-if="!hideInstitutionNotifications.info") + td.text-center(aria-live="assertive" colspan="3") + button.close( + type="button" + data-dismiss="modal" + ng-click="closeInstitutionNotification('info')" + aria-label=translate("close") + ) + span(aria-hidden="true") × + .small(ng-non-bindable) !{translate("institution_acct_successfully_linked", {institutionName: institutionLinked.universityName})} + if institutionLinked.hasEntitlement + .small !{translate("this_grants_access_to_features", {featureType: translate("professional")})} + if institutionEmailNonCanonical + tr.affiliations-table-warning-row(ng-if="!hideInstitutionNotifications.warning") + td.text-center(aria-live="assertive" colspan="3") + button.close( + type="button" + data-dismiss="modal" + ng-click="closeInstitutionNotification('warning')" + aria-label=translate("close") + ) + span(aria-hidden="true") × + .small + i.fa.fa-exclamation-triangle(aria-hidden="true") + | + | !{translate("in_order_to_match_institutional_metadata", {email: institutionEmailNonCanonical})} + + if samlError + tr.affiliations-table-error-row(ng-if="!hideInstitutionNotifications.linkError") + td.text-center(aria-live="assertive" colspan="3") + button.close( + type="button" + data-dismiss="modal" + ng-click="closeInstitutionNotification('linkError')" + aria-label=translate("close") + ) + span(aria-hidden="true") × + .small + i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true") + | #{translate("generic_something_went_wrong")}. + br + if samlError.translatedMessage + span(ng-non-bindable) !{samlError.translatedMessage} + else if samlError.message + span(ng-non-bindable) #{samlError.message} + if samlError.tryAgain + br + | #{translate("try_again")}. + +script(type="text/ng-template", id="affiliationFormTpl") + .affiliations-form-group( + ng-if="$ctrl.showUniversityAndCountry" + ) + ui-select( + ng-model="$ctrl.affiliationData.country" + ) + ui-select-match( + placeholder="Country" + ) {{ $select.selected.name }} + ui-select-choices( + repeat="country in $ctrl.countries | filter: $select.search" + ) + span( + ng-bind="country.name" + ) + .affiliations-form-group( + ng-if="$ctrl.showUniversityAndCountry" + ) + ui-select( + ng-model="$ctrl.affiliationData.university" + ng-disabled="!$ctrl.affiliationData.country" + tagging="$ctrl.addUniversityToSelection" + tagging-label="false" + ) + ui-select-match( + placeholder="Institution" + ) {{ $select.selected.name }} + ui-select-choices( + repeat="university in $ctrl.universities | filter: $select.search" + refresh="$ctrl.handleFreeformInputChange($select, 'name');" + refresh-delay="10" + ) + span( + ng-bind="university.name" + ) + .affiliations-form-group( + ng-if="$ctrl.showRoleAndDepartment" + ) + ui-select( + ng-model="$ctrl.affiliationData.role" + tagging + tagging-label="false" + ) + ui-select-match( + placeholder="Role" + ) {{ $select.selected }} + ui-select-choices( + repeat="role in $ctrl.roles | filter: $select.search" + refresh="$ctrl.handleFreeformInputChange($select);" + refresh-delay="10" + ) + span( + ng-bind="role" + ) + + .affiliations-form-group( + ng-if="$ctrl.showRoleAndDepartment" + ) + ui-select( + ng-model="$ctrl.affiliationData.department" + tagging + tagging-label="false" + ) + ui-select-match( + placeholder="Department" + ) {{ $select.selected }} + ui-select-choices( + repeat="department in $ctrl.departments | filter: $select.search" + refresh="$ctrl.handleFreeformInputChange($select);" + refresh-delay="10" + ) + span( + ng-bind="department" + ) diff --git a/services/web/app/views/user/settings/user-oauth.pug b/services/web/app/views/user/settings/user-oauth.pug new file mode 100644 index 0000000000..e384e16c38 --- /dev/null +++ b/services/web/app/views/user/settings/user-oauth.pug @@ -0,0 +1,41 @@ +mixin providerList() + ul.list-like-table + li(ng-repeat="(key, provider) in providers" ng-if="!provider.hideWhenNotLinked || (provider.hideWhenNotLinked && thirdPartyIds[key])") + .row + .col-xs-12.col-sm-8.col-md-10 + h4 {{provider.name}} + p.small(ng-bind-html="provider.description") + .col-xs-2.col-sm-4.col-md-2.text-right + //- Unlink + button.btn.btn-default( + ng-click="unlink(key)" + ng-disabled="providers[key].ui.isProcessing" + ng-if="thirdPartyIds[key]" + ) + span(ng-if="!providers[key].ui.isProcessing") #{translate("unlink")} + span(ng-if="providers[key].ui.isProcessing") #{translate("processing")} + //- Link + a.btn.btn-primary.text-capitalize( + ng-href="{{provider.linkPath}}?intent=link" + ng-if="!thirdPartyIds[key] && !provider.hideWhenNotLinked" + ) #{translate("link")} + //- unlink error + .row( + ng-if="providers[key].ui.hasError" + ) + .col-sm-12 + //- to do: fix CSS so that we don't need inline styling + .alert.alert-danger( + ng-if="providers[key].ui.hasError" + style="display: block; margin-bottom: 10px;" + ) + i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true") + | {{providers[key].ui.errorMessage}} +.row( + ng-controller="UserOauthController" + ng-cloak +) + .col-xs-12 + h3.text-capitalize#linked-accounts #{translate("linked_accounts")} + p.small #{translate("linked_accounts_explained", {appName:'{{settings.appName}}'})} + +providerList() diff --git a/services/web/app/views/user_membership/index.pug b/services/web/app/views/user_membership/index.pug new file mode 100644 index 0000000000..ee0583e52b --- /dev/null +++ b/services/web/app/views/user_membership/index.pug @@ -0,0 +1,113 @@ +extends ../layout + +block append meta + meta(name="ol-users", data-type="json", content=users) + meta(name="ol-paths", data-type="json", content=paths) + meta(name="ol-groupSize", data-type="json", content=groupSize) + +block content + main.content.content-alt#main-content + .container + .row + .col-md-10.col-md-offset-1 + h1(ng-non-bindable) #{name || translate(translations.title)} + .card(ng-controller="UserMembershipController") + .page-header + .pull-right(ng-cloak) + small(ng-show="groupSize && selectedUsers.length == 0") !{translate("you_have_added_x_of_group_size_y", {addedUsersSize:'{{ users.length }}', groupSize: '{{ groupSize }}'}, ['strong', 'strong'])} + a.btn.btn-danger( + href, + ng-show="selectedUsers.length > 0" + ng-click="removeMembers()" + ) #{translate(translations.remove)} + h3 #{translate(translations.subtitle)} + + .row-spaced-small + div(ng-if="inputs.removeMembers.error", ng-cloak) + div.alert.alert-danger(ng-if="inputs.removeMembers.errorMessage") + | #{translate('error')}: + | {{ inputs.removeMembers.errorMessage }} + div.alert.alert-danger(ng-if="!inputs.removeMembers.errorMessage") + | #{translate('generic_something_went_wrong')} + ul.list-unstyled.structured-list( + select-all-list, + ng-cloak + ) + li.container-fluid + .row + .col-md-4 + input.select-all( + select-all, + type="checkbox" + ) + span.header #{translate("email")} + .col-md-4 + span.header #{translate("name")} + .col-md-2 + span.header #{translate("last_login")} + .col-md-2 + span.header #{translate("accepted_invite")} + li.container-fluid( + ng-repeat="user in users | orderBy:'email':true", + ng-controller="UserMembershipListItemController" + ) + .row + .col-md-4 + input.select-item( + select-individual, + type="checkbox", + ng-model="user.selected" + ) + span.email {{ user.email }} + .col-md-4 + span.name {{ user.first_name }} {{ user.last_name }} + .col-md-2 + span.lastLogin {{ user.last_logged_in_at | formatDate:'Do MMM YYYY' }} + .col-md-2 + span.registered + i.fa.fa-check.text-success(ng-show="!user.invite" aria-hidden="true") + span.sr-only(ng-show="!user.invite") #{translate('accepted_invite')} + i.fa.fa-times(ng-show="user.invite" aria-hidden="true") + span.sr-only(ng-show="user.invite") #{translate('invite_not_accepted')} + li( + ng-if="users.length == 0", + ng-cloak + ) + .row + .col-md-12.text-centered + small #{translate("no_members")} + + hr + div(ng-if="!groupSize || users.length < groupSize", ng-cloak) + p.small #{translate("add_more_members")} + div(ng-if="inputs.addMembers.error", ng-cloak) + div.alert.alert-danger(ng-if="inputs.addMembers.errorMessage") + | #{translate('error')}: + | {{ inputs.addMembers.errorMessage }} + div.alert.alert-danger(ng-if="!inputs.addMembers.errorMessage") + | #{translate('generic_something_went_wrong')} + form.form + .row + .col-xs-6 + input.form-control( + name="email", + type="text", + placeholder="jane@example.com, joe@example.com", + ng-model="inputs.addMembers.content", + on-enter="addMembers()" + aria-describedby="add-members-description" + ) + .col-xs-4 + button.btn.btn-primary(ng-click="addMembers()", ng-disabled="inputs.addMembers.inflightCount > 0") + span(ng-show="inputs.addMembers.inflightCount === 0") #{translate("add")} + span(ng-show="inputs.addMembers.inflightCount > 0") #{translate("adding")}… + .col-xs-2(ng-if="paths.exportMembers", ng-cloak) + a(href=paths.exportMembers) #{translate('export_csv')} + .row + .col-xs-8 + span.help-block #{translate('add_comma_separated_emails_help')} + + div(ng-if="groupSize && users.length >= groupSize && users.length > 0", ng-cloak) + .row + .col-xs-2.col-xs-offset-10(ng-if="paths.exportMembers", ng-cloak) + a(href=paths.exportMembers) #{translate('export_csv')} diff --git a/services/web/app/views/user_membership/new.pug b/services/web/app/views/user_membership/new.pug new file mode 100644 index 0000000000..30543da2e9 --- /dev/null +++ b/services/web/app/views/user_membership/new.pug @@ -0,0 +1,18 @@ +extends ../layout + +block content + main.content.content-alt#main-content + .container + .row + .col-md-10.col-md-offset-1 + h3(ng-non-bindable) #{entityName} "#{entityId}" does not exists in v2 + form( + enctype='application/json', + method='post', + action='' + ) + input(name="_csrf", type="hidden", value=csrfToken) + button.btn.btn-primary.text-capitalize( + type="submit", + ng-non-bindable + ) Create #{entityName} in v2 diff --git a/services/web/app/views/view_templates/bonus_templates.pug b/services/web/app/views/view_templates/bonus_templates.pug new file mode 100644 index 0000000000..58b4fc4973 --- /dev/null +++ b/services/web/app/views/view_templates/bonus_templates.pug @@ -0,0 +1,47 @@ +script(type="text/ng-template", id="BonusLinkToUsModal") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + aria-label="Close" + ) + span(aria-hidden="true") × + h3 Dropbox link + .modal-body.modal-body-share + + div(ng-show="dbState.gotLinkStatus") + div(ng-hide="dbState.userIsLinkedToDropbox || !dbState.hasDropboxFeature") + + span(ng-hide="dbState.startedLinkProcess") Your account is not linked to dropbox + | + a(ng-click="linkToDropbox()").btn.btn-info Update Dropbox Settings + + p.small.text-center(ng-show="dbState.startedLinkProcess") + | Please refresh this page after starting your free trial. + + + div(ng-show="dbState.hasDropboxFeature && dbState.userIsLinkedToDropbox") + progressbar.progress-striped.active(value='dbState.percentageLeftTillNextPoll', type="info") + span + strong {{dbState.minsTillNextPoll}} minutes + span until dropbox is next checked for changes. + + div.text-center(ng-hide="dbState.hasDropboxFeature") + p You need to upgrade your account to link to dropbox. + p + a.btn(ng-click="startFreeTrial('dropbox')", ng-class="buttonClass") Start Free Trial + p.small(ng-show="startedFreeTrial") + | Please refresh this page after starting your free trial. + + div(ng-hide="dbState.gotLinkStatus") + span.small checking dropbox status + i.fa.fa-refresh.fa-spin(aria-hidden="true") + + + + .modal-footer() + button.btn.btn-default( + ng-click="cancel()", + ) + span Dismiss diff --git a/services/web/babel.config.json b/services/web/babel.config.json new file mode 100644 index 0000000000..4a1da76e68 --- /dev/null +++ b/services/web/babel.config.json @@ -0,0 +1,40 @@ +{ + "presets": [ + [ + "@babel/react", + { + "runtime": "automatic" + } + ], + [ + "@babel/env", + { + "useBuiltIns": "usage", + "corejs": { "version": 3 } + } + ] + ], + "plugins": ["angularjs-annotate", "macros"], + // Target our current Node version in test environment, to transform and + // polyfill only what's necessary + "env": { + "test": { + "presets": [ + [ + "@babel/react", + { + "runtime": "automatic" + } + ], + [ + "@babel/env", + { + "targets": { "node": "12.21" }, + "useBuiltIns": "usage", + "corejs": { "version": 3 } + } + ] + ] + } + } +} diff --git a/services/web/bin/cdn_upload b/services/web/bin/cdn_upload new file mode 100755 index 0000000000..cdd3df2f50 --- /dev/null +++ b/services/web/bin/cdn_upload @@ -0,0 +1,61 @@ +#!/bin/bash +set -e + +function upload_with_content_type() { + content_type=$1 + bucket=$2 + shift 2 + content_type_options="" + if [[ "$content_type" != "-" ]]; then + content_type_options="-h Content-Type:${content_type};charset=utf-8" + fi + + # DOCS for gsutil -- it does not have long command line flags! + ## global flags + # -h NAME:VALUE add header, can occur multiples times + # -m upload with multiple threads + ## rsync flags + # -r traverse into directories recursively + # -x Python regex for excluding files from the sync + gsutil \ + -h "Cache-Control:public, max-age=31536000" \ + ${content_type_options} \ + -m \ + rsync \ + -r \ + "$@" \ + "/tmp/public/" \ + "${bucket}/public/" +} +function upload_into_bucket() { + bucket=$1 + + # stylesheets + upload_with_content_type 'text/css' "$bucket" \ + -x '.+(? $KNOWN_HOSTS + ssh-keygen -lf $KNOWN_HOSTS | grep "SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8 github.com" + git config --global user.name Copybot + git config --global user.email copybot@overleaf.com + set +e + copybara --git-committer-email=copybot@overleaf.com --git-committer-name=Copybot + COPYBARA_EXIT_CODE=$? + # Exit codes are documented in java/com/google/copybara/util/ExitCode.java + # 0 is success, 4 is no-op (i.e. no change), anything else is an error + if [[ $COPYBARA_EXIT_CODE -eq 0 || $COPYBARA_EXIT_CODE -eq 4 ]]; then + exit 0 + else + exit $COPYBARA_EXIT_CODE + fi +fi diff --git a/services/web/bin/lint_pug_templates b/services/web/bin/lint_pug_templates new file mode 100755 index 0000000000..6f255d9745 --- /dev/null +++ b/services/web/bin/lint_pug_templates @@ -0,0 +1,31 @@ +#!/bin/sh + +set -e + +TEMPLATES_EXTENDING_META_BLOCK=$(\ + grep \ + --files-with-matches \ + --recursive app/views modules/*/app/views \ + --regex 'block append meta' \ + --regex 'block prepend meta' \ + --regex 'append meta' \ + --regex 'prepend meta' \ +) + +for file in ${TEMPLATES_EXTENDING_META_BLOCK}; do + if ! grep "$file" --quiet --extended-regexp -e 'extends .+layout'; then + cat <
+
+\
+`,
+ transclude: true,
+ scope: {
+ form: '=for',
+ },
+}))
diff --git a/services/web/frontend/js/directives/autoSubmitForm.js b/services/web/frontend/js/directives/autoSubmitForm.js
new file mode 100644
index 0000000000..b1df2792be
--- /dev/null
+++ b/services/web/frontend/js/directives/autoSubmitForm.js
@@ -0,0 +1,8 @@
+import App from '../base'
+App.directive('autoSubmitForm', function () {
+ return {
+ link(scope, element) {
+ element.submit() // Runs on load
+ },
+ }
+})
diff --git a/services/web/frontend/js/directives/bookmarkableTabset.js b/services/web/frontend/js/directives/bookmarkableTabset.js
new file mode 100644
index 0000000000..1293f8ba16
--- /dev/null
+++ b/services/web/frontend/js/directives/bookmarkableTabset.js
@@ -0,0 +1,58 @@
+import _ from 'lodash'
+import App from '../base'
+App.directive('bookmarkableTabset', $location => ({
+ restrict: 'A',
+ require: 'tabset',
+ link(scope, el, attrs, tabset) {
+ const _makeActive = function (hash) {
+ if (hash && hash !== '') {
+ const matchingTab = _.find(
+ tabset.tabs,
+ tab => tab.bookmarkableTabId === hash
+ )
+ if (matchingTab) {
+ matchingTab.select()
+ return el.children()[0].scrollIntoView({ behavior: 'smooth' })
+ }
+ }
+ }
+
+ scope.$applyAsync(function () {
+ // for page load
+ const hash = $location.hash()
+ _makeActive(hash)
+
+ // for links within page to a tab
+ // this needs to be within applyAsync because there could be a link
+ // within a tab to another tab
+ const linksToTabs = document.querySelectorAll('.link-to-tab')
+ const _clickLinkToTab = event => {
+ const hash = event.currentTarget.getAttribute('href').split('#').pop()
+ _makeActive(hash)
+ }
+
+ if (linksToTabs) {
+ Array.from(linksToTabs).map(link =>
+ link.addEventListener('click', _clickLinkToTab)
+ )
+ }
+ })
+ },
+}))
+
+App.directive('bookmarkableTab', $location => ({
+ restrict: 'A',
+ require: 'tab',
+ link(scope, el, attrs, tab) {
+ const tabScope = el.isolateScope()
+ const tabId = attrs.bookmarkableTab
+ if (tabScope && tabId && tabId !== '') {
+ tabScope.bookmarkableTabId = tabId
+ tabScope.$watch('active', function (isActive, wasActive) {
+ if (isActive && !wasActive && $location.hash() !== tabId) {
+ return $location.hash(tabId)
+ }
+ })
+ }
+ },
+}))
diff --git a/services/web/frontend/js/directives/complexPassword.js b/services/web/frontend/js/directives/complexPassword.js
new file mode 100644
index 0000000000..b1bc278fb1
--- /dev/null
+++ b/services/web/frontend/js/directives/complexPassword.js
@@ -0,0 +1,90 @@
+import _ from 'lodash'
+/* global PassField */
+
+/* eslint-disable
+ max-len
+*/
+import App from '../base'
+import 'libs/passfield'
+App.directive('complexPassword', () => ({
+ require: ['^asyncForm', 'ngModel'],
+
+ link(scope, element, attrs, ctrl) {
+ PassField.Config.blackList = []
+ const defaultPasswordOpts = {
+ pattern: '',
+ length: {
+ min: 6,
+ max: 72,
+ },
+ allowEmpty: false,
+ allowAnyChars: false,
+ isMasked: true,
+ showToggle: false,
+ showGenerate: false,
+ showTip: false,
+ showWarn: false,
+ checkMode: PassField.CheckModes.STRICT,
+ chars: {
+ digits: '1234567890',
+ letters: 'abcdefghijklmnopqrstuvwxyz',
+ letters_up: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+ symbols: '@#$%^&*()-_=+[]{};:<>/?!£€.,',
+ },
+ }
+
+ const opts = _.defaults(
+ window.passwordStrengthOptions || {},
+ defaultPasswordOpts
+ )
+
+ if (opts.length.min === 1) {
+ // this allows basically anything to be a valid password
+ opts.acceptRate = 0
+ }
+
+ if (opts.length.max > 72) {
+ // there is a hard limit of 71 characters in the password at the backend
+ opts.length.max = 72
+ }
+
+ if (opts.length.max > 0) {
+ // PassField's notion of 'max' is non-inclusive
+ opts.length.max += 1
+ }
+
+ const passField = new PassField.Field('passwordField', opts)
+ const [asyncFormCtrl, ngModelCtrl] = Array.from(ctrl)
+
+ ngModelCtrl.$parsers.unshift(function (modelValue) {
+ let isValid = passField.validatePass()
+ const email = asyncFormCtrl.getEmail() || window.usersEmail
+
+ if (!isValid) {
+ scope.complexPasswordErrorMessage = passField.getPassValidationMessage()
+ } else if (typeof email === 'string' && email !== '') {
+ const startOfEmail = email.split('@')[0]
+ if (
+ modelValue.indexOf(email) !== -1 ||
+ modelValue.indexOf(startOfEmail) !== -1
+ ) {
+ isValid = false
+ scope.complexPasswordErrorMessage =
+ 'Password can not contain email address'
+ }
+ }
+ if (opts.length.max != null && modelValue.length >= opts.length.max) {
+ isValid = false
+ scope.complexPasswordErrorMessage = `Maximum password length ${
+ opts.length.max - 1
+ } exceeded`
+ }
+ if (opts.length.min != null && modelValue.length < opts.length.min) {
+ isValid = false
+ scope.complexPasswordErrorMessage = `Password too short, minimum ${opts.length.min}`
+ }
+ ngModelCtrl.$setValidity('complexPassword', isValid)
+ return modelValue
+ })
+ },
+}))
diff --git a/services/web/frontend/js/directives/equals.js b/services/web/frontend/js/directives/equals.js
new file mode 100644
index 0000000000..43b723432a
--- /dev/null
+++ b/services/web/frontend/js/directives/equals.js
@@ -0,0 +1,21 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+
+export default App.directive('equals', () => ({
+ require: 'ngModel',
+ link(scope, elem, attrs, ctrl) {
+ const firstField = `#${attrs.equals}`
+ return elem.add(firstField).on('keyup', () =>
+ scope.$apply(function () {
+ const equal = elem.val() === $(firstField).val()
+ return ctrl.$setValidity('areEqual', equal)
+ })
+ )
+ },
+}))
diff --git a/services/web/frontend/js/directives/eventTracking.js b/services/web/frontend/js/directives/eventTracking.js
new file mode 100644
index 0000000000..2836b9fb3e
--- /dev/null
+++ b/services/web/frontend/js/directives/eventTracking.js
@@ -0,0 +1,125 @@
+import _ from 'lodash'
+/* eslint-disable
+ camelcase,
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+// For sending event data to metabase and google analytics
+// ---
+// by default,
+// event not sent to MB.
+// for MB, add event-tracking-mb='true'
+// by default, event sent to MB via sendMB
+// event not sent to GA.
+// for GA, add event-tracking-ga attribute, where the value is the GA category
+// Either GA or MB can use the attribute event-tracking-send-once='true' to
+// send event just once
+// MB will use the key and GA will use the action to determine if the event
+// has been sent
+// event-tracking-trigger attribute is required to send event
+
+/* eslint-disable
+ camelcase,
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+// For sending event data to metabase and google analytics
+// ---
+// by default,
+// event not sent to MB.
+// for MB, add event-tracking-mb='true'
+// by default, event sent to MB via sendMB
+// event not sent to GA.
+// for GA, add event-tracking-ga attribute, where the value is the GA category
+// Either GA or MB can use the attribute event-tracking-send-once='true' to
+// send event just once
+// MB will use the key and GA will use the action to determine if the event
+// has been sent
+// event-tracking-trigger attribute is required to send event
+
+import App from '../base'
+
+const isInViewport = function (element) {
+ const elTop = element.offset().top
+ const elBtm = elTop + element.outerHeight()
+
+ const viewportTop = $(window).scrollTop()
+ const viewportBtm = viewportTop + $(window).height()
+
+ return elBtm > viewportTop && elTop < viewportBtm
+}
+
+export default App.directive('eventTracking', eventTracking => ({
+ scope: {
+ eventTracking: '@',
+ eventSegmentation: '=?',
+ },
+ link(scope, element, attrs) {
+ const sendGA = attrs.eventTrackingGa || false
+ const sendMB = attrs.eventTrackingMb || false
+ const sendMBFunction = attrs.eventTrackingSendOnce ? 'sendMBOnce' : 'sendMB'
+ const sendGAFunction = attrs.eventTrackingSendOnce ? 'sendGAOnce' : 'send'
+ const segmentation = scope.eventSegmentation || {}
+ segmentation.page = window.location.pathname
+
+ const sendEvent = function (scrollEvent) {
+ /*
+ @param {boolean} scrollEvent Use to unbind scroll event
+ */
+ if (sendMB) {
+ eventTracking[sendMBFunction](scope.eventTracking, segmentation)
+ }
+ if (sendGA) {
+ eventTracking[sendGAFunction](
+ attrs.eventTrackingGa,
+ attrs.eventTrackingAction || scope.eventTracking,
+ attrs.eventTrackingLabel || ''
+ )
+ }
+ if (scrollEvent) {
+ return $(window).unbind('resize scroll')
+ }
+ }
+
+ if (attrs.eventTrackingTrigger === 'load') {
+ return sendEvent()
+ } else if (attrs.eventTrackingTrigger === 'click') {
+ return element.on('click', e => sendEvent())
+ } else if (attrs.eventTrackingTrigger === 'hover') {
+ let timer = null
+ let timeoutAmt = 500
+ if (attrs.eventHoverAmt) {
+ timeoutAmt = parseInt(attrs.eventHoverAmt, 10)
+ }
+ return element
+ .on('mouseenter', function () {
+ timer = setTimeout(() => sendEvent(), timeoutAmt)
+ })
+ .on('mouseleave', () => clearTimeout(timer))
+ } else if (
+ attrs.eventTrackingTrigger === 'scroll' &&
+ !eventTracking.eventInCache(scope.eventTracking)
+ ) {
+ $(window).on(
+ 'resize scroll',
+ _.throttle(() => {
+ if (isInViewport(element)) {
+ sendEvent(true)
+ }
+ }, 500)
+ )
+ }
+ },
+}))
diff --git a/services/web/frontend/js/directives/expandableTextArea.js b/services/web/frontend/js/directives/expandableTextArea.js
new file mode 100644
index 0000000000..e134068404
--- /dev/null
+++ b/services/web/frontend/js/directives/expandableTextArea.js
@@ -0,0 +1,29 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+
+export default App.directive('expandableTextArea', () => ({
+ restrict: 'A',
+ link(scope, el) {
+ const resetHeight = function () {
+ const curHeight = el.outerHeight()
+ const fitHeight = el.prop('scrollHeight')
+ // clear height if text area is empty
+ if (el.val() === '') {
+ el.css('height', 'unset')
+ }
+ // otherwise expand to fit text
+ else if (fitHeight > curHeight) {
+ scope.$emit('expandable-text-area:resize')
+ el.css('height', fitHeight)
+ }
+ }
+
+ return scope.$watch(() => el.val(), resetHeight)
+ },
+}))
diff --git a/services/web/frontend/js/directives/fineUpload.js b/services/web/frontend/js/directives/fineUpload.js
new file mode 100644
index 0000000000..0a60d89f5e
--- /dev/null
+++ b/services/web/frontend/js/directives/fineUpload.js
@@ -0,0 +1,90 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+import qq from 'fineuploader'
+
+export default App.directive('fineUpload', $timeout => ({
+ scope: {
+ multiple: '=',
+ endpoint: '@',
+ templateId: '@',
+ sizeLimit: '@',
+ allowedExtensions: '=',
+ onCompleteCallback: '=',
+ onUploadCallback: '=',
+ onValidateBatch: '=',
+ onErrorCallback: '=',
+ onSubmitCallback: '=',
+ onCancelCallback: '=',
+ autoUpload: '=',
+ params: '=',
+ control: '=',
+ },
+ link(scope, element, attrs) {
+ let autoUpload, validation
+ const multiple = scope.multiple || false
+ const { endpoint } = scope
+ const { templateId } = scope
+ if (scope.allowedExtensions != null) {
+ validation = { allowedExtensions: scope.allowedExtensions }
+ } else {
+ validation = {}
+ }
+ if (scope.sizeLimit) {
+ validation.sizeLimit = scope.sizeLimit
+ }
+ const maxConnections = scope.maxConnections || 1
+ const onComplete = scope.onCompleteCallback || function () {}
+ const onUpload = scope.onUploadCallback || function () {}
+ const onError = scope.onErrorCallback || function () {}
+ const onValidateBatch = scope.onValidateBatch || function () {}
+ const onSubmit = scope.onSubmitCallback || function () {}
+ const onCancel = scope.onCancelCallback || function () {}
+ if (scope.autoUpload == null) {
+ autoUpload = true
+ } else {
+ ;({ autoUpload } = scope)
+ }
+ const params = scope.params || {}
+ params._csrf = window.csrfToken
+
+ const q = new qq.FineUploader({
+ element: element[0],
+ multiple,
+ autoUpload,
+ disabledCancelForFormUploads: true,
+ validation,
+ maxConnections,
+ request: {
+ endpoint,
+ forceMultipart: true,
+ params,
+ paramsInBody: false,
+ },
+ callbacks: {
+ onComplete,
+ onUpload,
+ onValidateBatch,
+ onError,
+ onSubmit,
+ onCancel,
+ },
+ template: templateId,
+ failedUploadTextDisplay: {
+ mode: 'custom',
+ responseProperty: 'error',
+ },
+ })
+ window.q = q
+ if (scope.control != null) {
+ scope.control.q = q
+ }
+ return q
+ },
+}))
diff --git a/services/web/frontend/js/directives/focus.js b/services/web/frontend/js/directives/focus.js
new file mode 100644
index 0000000000..17ce160e7b
--- /dev/null
+++ b/services/web/frontend/js/directives/focus.js
@@ -0,0 +1,92 @@
+/* eslint-disable
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+App.directive('focusWhen', $timeout => ({
+ restrict: 'A',
+ link(scope, element, attr) {
+ return scope.$watch(attr.focusWhen, function (value) {
+ if (value) {
+ return $timeout(() => element.focus())
+ }
+ })
+ },
+}))
+
+App.directive('focusOn', $timeout => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return scope.$on(attrs.focusOn, () => element.focus())
+ },
+}))
+
+App.directive('selectWhen', $timeout => ({
+ restrict: 'A',
+ link(scope, element, attr) {
+ return scope.$watch(attr.selectWhen, function (value) {
+ if (value) {
+ return $timeout(() => element.select())
+ }
+ })
+ },
+}))
+
+App.directive('selectOn', $timeout => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return scope.$on(attrs.selectOn, () => element.select())
+ },
+}))
+
+App.directive('selectNameWhen', $timeout => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return scope.$watch(attrs.selectNameWhen, function (value) {
+ if (value) {
+ return $timeout(() => selectName(element))
+ }
+ })
+ },
+}))
+
+App.directive('selectNameOn', () => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return scope.$on(attrs.selectNameOn, () => selectName(element))
+ },
+}))
+
+App.directive('focus', $timeout => ({
+ scope: {
+ trigger: '@focus',
+ },
+
+ link(scope, element) {
+ return scope.$watch('trigger', function (value) {
+ if (value === 'true') {
+ return $timeout(() => element[0].focus())
+ }
+ })
+ },
+}))
+
+function selectName(element) {
+ // Select up to last '.'. I.e. everything except the file extension
+ element.focus()
+ const name = element.val()
+ if (element[0].setSelectionRange != null) {
+ let selectionEnd = name.lastIndexOf('.')
+ if (selectionEnd === -1) {
+ selectionEnd = name.length
+ }
+ return element[0].setSelectionRange(0, selectionEnd)
+ }
+}
diff --git a/services/web/frontend/js/directives/mathjax.js b/services/web/frontend/js/directives/mathjax.js
new file mode 100644
index 0000000000..eac5422e00
--- /dev/null
+++ b/services/web/frontend/js/directives/mathjax.js
@@ -0,0 +1,33 @@
+import _ from 'lodash'
+/* global MathJax */
+
+import App from '../base'
+
+export default App.directive('mathjax', function ($compile, $parse) {
+ return {
+ link(scope, element, attrs) {
+ if (!(MathJax && MathJax.Hub)) return
+
+ if (attrs.delimiter !== 'no-single-dollar') {
+ const inlineMathConfig =
+ MathJax.Hub.config && MathJax.Hub.config.tex2jax.inlineMath
+ const alreadyConfigured = _.find(
+ inlineMathConfig,
+ c => c[0] === '$' && c[1] === '$'
+ )
+
+ if (!alreadyConfigured) {
+ MathJax.Hub.Config({
+ tex2jax: {
+ inlineMath: inlineMathConfig.concat([['$', '$']]),
+ },
+ })
+ }
+ }
+
+ setTimeout(() => {
+ MathJax.Hub.Queue(['Typeset', MathJax.Hub, element.get(0)])
+ }, 0)
+ },
+ }
+})
diff --git a/services/web/frontend/js/directives/maxHeight.js b/services/web/frontend/js/directives/maxHeight.js
new file mode 100644
index 0000000000..91e916564d
--- /dev/null
+++ b/services/web/frontend/js/directives/maxHeight.js
@@ -0,0 +1,20 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+
+export default App.directive('maxHeight', () => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return scope.$watch(attrs.maxHeight, function (value) {
+ if (value != null) {
+ return element.css({ 'max-height': value })
+ }
+ })
+ },
+}))
diff --git a/services/web/frontend/js/directives/onEnter.js b/services/web/frontend/js/directives/onEnter.js
new file mode 100644
index 0000000000..7c99867ffc
--- /dev/null
+++ b/services/web/frontend/js/directives/onEnter.js
@@ -0,0 +1,17 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+
+export default App.directive('onEnter', () => (scope, element, attrs) =>
+ element.bind('keydown keypress', function (event) {
+ if (event.which === 13) {
+ scope.$apply(() => scope.$eval(attrs.onEnter, { event }))
+ return event.preventDefault()
+ }
+ })
+)
diff --git a/services/web/frontend/js/directives/rightClick.js b/services/web/frontend/js/directives/rightClick.js
new file mode 100644
index 0000000000..3d74de9db9
--- /dev/null
+++ b/services/web/frontend/js/directives/rightClick.js
@@ -0,0 +1,19 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+
+export default App.directive('rightClick', () => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return element.bind('contextmenu', function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ return scope.$eval(attrs.rightClick)
+ })
+ },
+}))
diff --git a/services/web/frontend/js/directives/scroll.js b/services/web/frontend/js/directives/scroll.js
new file mode 100644
index 0000000000..82abe22d7e
--- /dev/null
+++ b/services/web/frontend/js/directives/scroll.js
@@ -0,0 +1,56 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+
+export default App.directive('updateScrollBottomOn', $timeout => ({
+ restrict: 'A',
+ link(scope, element, attrs, ctrls) {
+ // We keep the offset from the bottom fixed whenever the event fires
+ //
+ // ^ | ^
+ // | | | scrollTop
+ // | | v
+ // | |-----------
+ // | | ^
+ // | | |
+ // | | | clientHeight (viewable area)
+ // | | |
+ // | | |
+ // | | v
+ // | |-----------
+ // | | ^
+ // | | | scrollBottom
+ // v | v
+ // \
+ // scrollHeight
+
+ let scrollBottom = 0
+ element.on(
+ 'scroll',
+ e =>
+ (scrollBottom =
+ element[0].scrollHeight -
+ element[0].scrollTop -
+ element[0].clientHeight)
+ )
+
+ return scope.$on(attrs.updateScrollBottomOn, () =>
+ $timeout(
+ () =>
+ element.scrollTop(
+ element[0].scrollHeight - element[0].clientHeight - scrollBottom
+ ),
+ 0
+ )
+ )
+ },
+}))
diff --git a/services/web/frontend/js/directives/selectAll.js b/services/web/frontend/js/directives/selectAll.js
new file mode 100644
index 0000000000..db69d3d943
--- /dev/null
+++ b/services/web/frontend/js/directives/selectAll.js
@@ -0,0 +1,98 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+App.directive('selectAllList', () => ({
+ controller: [
+ '$scope',
+ function ($scope) {
+ // Selecting or deselecting all should apply to all projects
+ this.selectAll = () => $scope.$broadcast('select-all:select')
+
+ this.deselectAll = () => $scope.$broadcast('select-all:deselect')
+
+ this.clearSelectAllState = () => $scope.$broadcast('select-all:clear')
+ },
+ ],
+ link(scope, element, attrs) {},
+}))
+
+App.directive('selectAll', () => ({
+ require: '^selectAllList',
+ link(scope, element, attrs, selectAllListController) {
+ scope.$on('select-all:clear', () => element.prop('checked', false))
+
+ return element.change(function () {
+ if (element.is(':checked')) {
+ selectAllListController.selectAll()
+ } else {
+ selectAllListController.deselectAll()
+ }
+ return true
+ })
+ },
+}))
+
+App.directive('selectIndividual', () => ({
+ require: '^selectAllList',
+ scope: {
+ ngModel: '=',
+ },
+ link(scope, element, attrs, selectAllListController) {
+ let ignoreChanges = false
+
+ scope.$watch('ngModel', function (value) {
+ if (value != null && !ignoreChanges) {
+ return selectAllListController.clearSelectAllState()
+ }
+ })
+
+ scope.$on('select-all:select', function () {
+ if (element.prop('disabled')) {
+ return
+ }
+ ignoreChanges = true
+ scope.$apply(() => (scope.ngModel = true))
+ return (ignoreChanges = false)
+ })
+
+ scope.$on('select-all:deselect', function () {
+ if (element.prop('disabled')) {
+ return
+ }
+ ignoreChanges = true
+ scope.$apply(() => (scope.ngModel = false))
+ return (ignoreChanges = false)
+ })
+
+ return scope.$on('select-all:row-clicked', function () {
+ if (element.prop('disabled')) {
+ return
+ }
+ ignoreChanges = true
+ scope.$apply(function () {
+ scope.ngModel = !scope.ngModel
+ if (!scope.ngModel) {
+ return selectAllListController.clearSelectAllState()
+ }
+ })
+ return (ignoreChanges = false)
+ })
+ },
+}))
+
+export default App.directive('selectRow', () => ({
+ scope: true,
+ link(scope, element, attrs) {
+ return element.on('click', e => scope.$broadcast('select-all:row-clicked'))
+ },
+}))
diff --git a/services/web/frontend/js/directives/stopPropagation.js b/services/web/frontend/js/directives/stopPropagation.js
new file mode 100644
index 0000000000..f310f7808a
--- /dev/null
+++ b/services/web/frontend/js/directives/stopPropagation.js
@@ -0,0 +1,24 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+App.directive('stopPropagation', $http => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return element.bind(attrs.stopPropagation, e => e.stopPropagation())
+ },
+}))
+
+export default App.directive('preventDefault', $http => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return element.bind(attrs.preventDefault, e => e.preventDefault())
+ },
+}))
diff --git a/services/web/frontend/js/directives/videoPlayState.js b/services/web/frontend/js/directives/videoPlayState.js
new file mode 100644
index 0000000000..c99b5131a2
--- /dev/null
+++ b/services/web/frontend/js/directives/videoPlayState.js
@@ -0,0 +1,29 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../base'
+
+export default App.directive('videoPlayState', $parse => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ const videoDOMEl = element[0]
+ return scope.$watch(
+ () => $parse(attrs.videoPlayState)(scope),
+ function (shouldPlay) {
+ if (shouldPlay) {
+ videoDOMEl.currentTime = 0
+ return videoDOMEl.play()
+ } else {
+ return videoDOMEl.pause()
+ }
+ }
+ )
+ },
+}))
diff --git a/services/web/frontend/js/features/chat/components/chat-fallback-error.js b/services/web/frontend/js/features/chat/components/chat-fallback-error.js
new file mode 100644
index 0000000000..38273505b2
--- /dev/null
+++ b/services/web/frontend/js/features/chat/components/chat-fallback-error.js
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import { Button, Alert } from 'react-bootstrap'
+
+function ChatFallbackError({ reconnect }) {
+ const { t } = useTranslation()
+
+ return (
+
+ )
+}
+
+ChatFallbackError.propTypes = {
+ reconnect: PropTypes.any,
+}
+
+export default ChatFallbackError
diff --git a/services/web/frontend/js/features/chat/components/chat-pane.js b/services/web/frontend/js/features/chat/components/chat-pane.js
new file mode 100644
index 0000000000..215af12117
--- /dev/null
+++ b/services/web/frontend/js/features/chat/components/chat-pane.js
@@ -0,0 +1,114 @@
+import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+
+import MessageList from './message-list'
+import MessageInput from './message-input'
+import InfiniteScroll from './infinite-scroll'
+import ChatFallbackError from './chat-fallback-error'
+import Icon from '../../../shared/components/icon'
+import { useLayoutContext } from '../../../shared/context/layout-context'
+import { useUserContext } from '../../../shared/context/user-context'
+import withErrorBoundary from '../../../infrastructure/error-boundary'
+import { FetchError } from '../../../infrastructure/fetch-json'
+import { useChatContext } from '../context/chat-context'
+
+const ChatPane = React.memo(function ChatPane() {
+ const { t } = useTranslation()
+
+ const { chatIsOpen } = useLayoutContext({ chatIsOpen: PropTypes.bool })
+ const user = useUserContext({
+ id: PropTypes.string.isRequired,
+ })
+
+ const {
+ status,
+ messages,
+ initialMessagesLoaded,
+ atEnd,
+ loadInitialMessages,
+ loadMoreMessages,
+ reset,
+ sendMessage,
+ markMessagesAsRead,
+ error,
+ } = useChatContext()
+
+ useEffect(() => {
+ if (chatIsOpen && !initialMessagesLoaded) {
+ loadInitialMessages()
+ }
+ }, [chatIsOpen, loadInitialMessages, initialMessagesLoaded])
+
+ const shouldDisplayPlaceholder = status !== 'pending' && messages.length === 0
+
+ const messageContentCount = messages.reduce(
+ (acc, { contents }) => acc + contents.length,
+ 0
+ )
+
+ if (error) {
+ // let user try recover from fetch errors
+ if (error instanceof FetchError) {
+ return
+
+ )
+}
+
+function Placeholder() {
+ const { t } = useTranslation()
+ return (
+ <>
+ {t('no_messages')}
+
+ {t('send_first_message')}
+
+
+
+ )
+}
+
+export default withErrorBoundary(ChatPane, ChatFallbackError)
diff --git a/services/web/frontend/js/features/chat/components/infinite-scroll.js b/services/web/frontend/js/features/chat/components/infinite-scroll.js
new file mode 100644
index 0000000000..361fec55d4
--- /dev/null
+++ b/services/web/frontend/js/features/chat/components/infinite-scroll.js
@@ -0,0 +1,88 @@
+import { useRef, useEffect, useLayoutEffect } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+
+const SCROLL_END_OFFSET = 30
+
+function InfiniteScroll({
+ atEnd,
+ children,
+ className = '',
+ fetchData,
+ itemCount,
+ isLoading,
+}) {
+ const root = useRef(null)
+
+ // we keep the value in a Ref instead of state so it can be safely used in effects
+ const scrollBottomRef = useRef(0)
+ function setScrollBottom(value) {
+ scrollBottomRef.current = value
+ }
+
+ function updateScrollPosition() {
+ root.current.scrollTop =
+ root.current.scrollHeight -
+ root.current.clientHeight -
+ scrollBottomRef.current
+ }
+
+ // Repositions the scroll after new items are loaded
+ useLayoutEffect(updateScrollPosition, [itemCount])
+
+ // Repositions the scroll after a window resize
+ useEffect(() => {
+ const handleResize = _.debounce(updateScrollPosition, 400)
+ window.addEventListener('resize', handleResize)
+ return () => {
+ window.removeEventListener('resize', handleResize)
+ }
+ }, [])
+
+ function onScrollHandler(event) {
+ setScrollBottom(
+ root.current.scrollHeight -
+ root.current.scrollTop -
+ root.current.clientHeight
+ )
+ if (event.target !== event.currentTarget) {
+ // Ignore scroll events on nested divs
+ // (this check won't be necessary in React 17: https://github.com/facebook/react/issues/15723
+ return
+ }
+ if (shouldFetchData()) {
+ fetchData()
+ }
+ }
+
+ function shouldFetchData() {
+ const containerIsLargerThanContent =
+ root.current.children[0].clientHeight < root.current.clientHeight
+ if (atEnd || isLoading || containerIsLargerThanContent) {
+ return false
+ } else {
+ return root.current.scrollTop < SCROLL_END_OFFSET
+ }
+ }
+
+ return (
+ +
+ {children}
+
+ )
+}
+
+InfiniteScroll.propTypes = {
+ atEnd: PropTypes.bool,
+ children: PropTypes.element.isRequired,
+ className: PropTypes.string,
+ fetchData: PropTypes.func.isRequired,
+ itemCount: PropTypes.number.isRequired,
+ isLoading: PropTypes.bool,
+}
+
+export default InfiniteScroll
diff --git a/services/web/frontend/js/features/chat/components/message-content.js b/services/web/frontend/js/features/chat/components/message-content.js
new file mode 100644
index 0000000000..109dc52f11
--- /dev/null
+++ b/services/web/frontend/js/features/chat/components/message-content.js
@@ -0,0 +1,56 @@
+import { useRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import Linkify from 'react-linkify'
+
+function MessageContent({ content }) {
+ const root = useRef(null)
+
+ useEffect(() => {
+ if (!(window.MathJax && window.MathJax.Hub)) {
+ return
+ }
+ const MJHub = window.MathJax.Hub
+ const inlineMathConfig =
+ (MJHub.config &&
+ MJHub.config.tex2jax &&
+ MJHub.config.tex2jax.inlineMath) ||
+ []
+ const alreadyConfigured = inlineMathConfig.some(
+ c => c[0] === '$' && c[1] === '$'
+ )
+ if (!alreadyConfigured) {
+ MJHub.Config({
+ tex2jax: {
+ inlineMath: inlineMathConfig.concat([['$', '$']]),
+ },
+ })
+ }
+ }, [])
+
+ useEffect(() => {
+ // adds attributes to all the links generated by
+
+
+
+
+ )
+}
+
+MessageInput.propTypes = {
+ resetUnreadMessages: PropTypes.func.isRequired,
+ sendMessage: PropTypes.func.isRequired,
+}
+
+export default MessageInput
diff --git a/services/web/frontend/js/features/chat/components/message-list.js b/services/web/frontend/js/features/chat/components/message-list.js
new file mode 100644
index 0000000000..bf712dd700
--- /dev/null
+++ b/services/web/frontend/js/features/chat/components/message-list.js
@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types'
+import moment from 'moment'
+import Message from './message'
+
+const FIVE_MINUTES = 5 * 60 * 1000
+
+function formatTimestamp(date) {
+ if (!date) {
+ return 'N/A'
+ } else {
+ return `${moment(date).format('h:mm a')} ${moment(date).calendar()}`
+ }
+}
+
+function MessageList({ messages, resetUnreadMessages, userId }) {
+ function shouldRenderDate(messageIndex) {
+ if (messageIndex === 0) {
+ return true
+ } else {
+ const message = messages[messageIndex]
+ const previousMessage = messages[messageIndex - 1]
+ return message.timestamp - previousMessage.timestamp > FIVE_MINUTES
+ }
+ }
+
+ return (
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+ -
+ {messages.map((message, index) => (
+ // new messages are added to the beginning of the list, so we use a reversed index
+
-
+ {shouldRenderDate(index) && (
+ + ++ )} +
+
+ ))}
+
+ {!isMessageFromSelf && (
+
+ )
+}
+
+Message.propTypes = {
+ message: PropTypes.shape({
+ contents: PropTypes.arrayOf(PropTypes.string).isRequired,
+ user: PropTypes.shape({
+ id: PropTypes.string,
+ email: PropTypes.string,
+ first_name: PropTypes.string,
+ }),
+ }),
+ userId: PropTypes.string.isRequired,
+}
+
+export default Message
diff --git a/services/web/frontend/js/features/chat/context/chat-context.js b/services/web/frontend/js/features/chat/context/chat-context.js
new file mode 100644
index 0000000000..76d178a50a
--- /dev/null
+++ b/services/web/frontend/js/features/chat/context/chat-context.js
@@ -0,0 +1,307 @@
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useReducer,
+ useMemo,
+} from 'react'
+import PropTypes from 'prop-types'
+import { v4 as uuid } from 'uuid'
+
+import { useUserContext } from '../../../shared/context/user-context'
+import { useProjectContext } from '../../../shared/context/project-context'
+import { getJSON, postJSON } from '../../../infrastructure/fetch-json'
+import { appendMessage, prependMessages } from '../utils/message-list-appender'
+import useBrowserWindow from '../../../shared/hooks/use-browser-window'
+import { useLayoutContext } from '../../../shared/context/layout-context'
+
+const PAGE_SIZE = 50
+
+export function chatReducer(state, action) {
+ switch (action.type) {
+ case 'INITIAL_FETCH_MESSAGES':
+ return {
+ ...state,
+ status: 'pending',
+ initialMessagesLoaded: true,
+ }
+
+ case 'FETCH_MESSAGES':
+ return {
+ ...state,
+ status: 'pending',
+ }
+
+ case 'FETCH_MESSAGES_SUCCESS':
+ return {
+ ...state,
+ status: 'idle',
+ messages: prependMessages(state.messages, action.messages),
+ lastTimestamp: action.messages[0] ? action.messages[0].timestamp : null,
+ atEnd: action.messages.length < PAGE_SIZE,
+ }
+
+ case 'SEND_MESSAGE':
+ return {
+ ...state,
+ messages: appendMessage(state.messages, {
+ // Messages are sent optimistically, so don't have an id (used for
+ // React keys). The uuid is valid for this session, and ensures all
+ // messages have an id. It will be overwritten by the actual ids on
+ // refresh
+ id: uuid(),
+ user: action.user,
+ content: action.content,
+ timestamp: Date.now(),
+ }),
+ messageWasJustSent: true,
+ }
+
+ case 'RECEIVE_MESSAGE':
+ return {
+ ...state,
+ messages: appendMessage(state.messages, action.message),
+ messageWasJustSent: false,
+ unreadMessageCount: state.unreadMessageCount + 1,
+ }
+
+ case 'MARK_MESSAGES_AS_READ':
+ return {
+ ...state,
+ unreadMessageCount: 0,
+ }
+
+ case 'CLEAR':
+ return { ...initialState }
+
+ case 'ERROR':
+ return {
+ ...state,
+ status: 'error',
+ error: action.error,
+ }
+
+ default:
+ throw new Error('Unknown action')
+ }
+}
+
+const initialState = {
+ status: 'idle',
+ messages: [],
+ initialMessagesLoaded: false,
+ lastTimestamp: null,
+ atEnd: false,
+ messageWasJustSent: false,
+ unreadMessageCount: 0,
+ error: null,
+}
+
+export const ChatContext = createContext()
+
+ChatContext.Provider.propTypes = {
+ value: PropTypes.shape({
+ status: PropTypes.string.isRequired,
+ messages: PropTypes.array.isRequired,
+ initialMessagesLoaded: PropTypes.bool.isRequired,
+ atEnd: PropTypes.bool.isRequired,
+ unreadMessageCount: PropTypes.number.isRequired,
+ loadInitialMessages: PropTypes.func.isRequired,
+ loadMoreMessages: PropTypes.func.isRequired,
+ sendMessage: PropTypes.func.isRequired,
+ markMessagesAsRead: PropTypes.func.isRequired,
+ reset: PropTypes.func.isRequired,
+ error: PropTypes.object,
+ }).isRequired,
+}
+
+export function ChatProvider({ children }) {
+ const user = useUserContext({
+ id: PropTypes.string.isRequired,
+ })
+ const { _id: projectId } = useProjectContext({
+ _id: PropTypes.string.isRequired,
+ })
+
+ const { chatIsOpen } = useLayoutContext({ chatIsOpen: PropTypes.bool })
+
+ const {
+ hasFocus: windowHasFocus,
+ flashTitle,
+ stopFlashingTitle,
+ } = useBrowserWindow()
+
+ const [state, dispatch] = useReducer(chatReducer, initialState)
+
+ const { loadInitialMessages, loadMoreMessages, reset } = useMemo(() => {
+ function fetchMessages() {
+ if (state.atEnd) return
+
+ const query = { limit: PAGE_SIZE }
+
+ if (state.lastTimestamp) {
+ query.before = state.lastTimestamp
+ }
+
+ const queryString = new URLSearchParams(query)
+ const url = `/project/${projectId}/messages?${queryString.toString()}`
+
+ getJSON(url)
+ .then((messages = []) => {
+ dispatch({
+ type: 'FETCH_MESSAGES_SUCCESS',
+ messages: messages.reverse(),
+ })
+ })
+ .catch(error => {
+ dispatch({
+ type: 'ERROR',
+ error: error,
+ })
+ })
+ }
+
+ function loadInitialMessages() {
+ if (state.initialMessagesLoaded) return
+
+ dispatch({ type: 'INITIAL_FETCH_MESSAGES' })
+ fetchMessages()
+ }
+
+ function loadMoreMessages() {
+ dispatch({ type: 'FETCH_MESSAGES' })
+ fetchMessages()
+ }
+
+ function reset() {
+ dispatch({ type: 'CLEAR' })
+ fetchMessages()
+ }
+
+ return {
+ loadInitialMessages,
+ loadMoreMessages,
+ reset,
+ }
+ }, [projectId, state.atEnd, state.initialMessagesLoaded, state.lastTimestamp])
+
+ const sendMessage = useCallback(
+ content => {
+ if (!content) return
+
+ dispatch({
+ type: 'SEND_MESSAGE',
+ user,
+ content,
+ })
+
+ const url = `/project/${projectId}/messages`
+ postJSON(url, {
+ body: { content },
+ }).catch(error => {
+ dispatch({
+ type: 'ERROR',
+ error: error,
+ })
+ })
+ },
+ [projectId, user]
+ )
+
+ const markMessagesAsRead = useCallback(() => {
+ dispatch({ type: 'MARK_MESSAGES_AS_READ' })
+ }, [])
+
+ // Handling receiving messages over the socket
+ const socket = window._ide?.socket
+ useEffect(() => {
+ if (!socket) return
+
+ function receivedMessage(message) {
+ // If the message is from the current user and they just sent a message,
+ // then we are receiving the sent message back from the socket. Ignore it
+ // to prevent double message
+ const messageIsFromSelf = message?.user?.id === user?.id
+ if (messageIsFromSelf && state.messageWasJustSent) return
+
+ dispatch({ type: 'RECEIVE_MESSAGE', message })
+
+ // Temporary workaround to pass state to unread message balloon in Angular
+ window.dispatchEvent(
+ new CustomEvent('Chat.MessageReceived', { detail: { message } })
+ )
+ }
+
+ socket.on('new-chat-message', receivedMessage)
+ return () => {
+ if (!socket) return
+
+ socket.removeListener('new-chat-message', receivedMessage)
+ }
+ // We're adding and removing the socket listener every time we send a
+ // message (and messageWasJustSent changes). Not great, but no good way
+ // around it
+ }, [socket, state.messageWasJustSent, state.unreadMessageCount, user])
+
+ // Handle unread messages
+ useEffect(() => {
+ if (windowHasFocus) {
+ stopFlashingTitle()
+ if (chatIsOpen) {
+ markMessagesAsRead()
+ }
+ }
+ if (!windowHasFocus && state.unreadMessageCount > 0) {
+ flashTitle('New Message')
+ }
+ }, [
+ windowHasFocus,
+ chatIsOpen,
+ state.unreadMessageCount,
+ flashTitle,
+ stopFlashingTitle,
+ markMessagesAsRead,
+ ])
+
+ const value = useMemo(
+ () => ({
+ status: state.status,
+ messages: state.messages,
+ initialMessagesLoaded: state.initialMessagesLoaded,
+ atEnd: state.atEnd,
+ unreadMessageCount: state.unreadMessageCount,
+ loadInitialMessages,
+ loadMoreMessages,
+ reset,
+ sendMessage,
+ markMessagesAsRead,
+ error: state.error,
+ }),
+ [
+ loadInitialMessages,
+ loadMoreMessages,
+ markMessagesAsRead,
+ reset,
+ sendMessage,
+ state.atEnd,
+ state.error,
+ state.initialMessagesLoaded,
+ state.messages,
+ state.status,
+ state.unreadMessageCount,
+ ]
+ )
+
+ return
+ {message.user.first_name || message.user.email}
+
+ )}
+
+ {!isMessageFromSelf && (
+
+ )}
+
+
+ {message.contents.map((content, index) => (
+
+ {t('chat')}
+ + ) +} + +ChatToggleButton.propTypes = { + chatIsOpen: PropTypes.bool, + unreadMessageCount: PropTypes.number.isRequired, + onClick: PropTypes.func.isRequired, +} + +export default ChatToggleButton diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.js new file mode 100644 index 0000000000..80f3bc12b8 --- /dev/null +++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.js @@ -0,0 +1,30 @@ +import PropTypes from 'prop-types' + +function CobrandingLogo({ + brandVariationHomeUrl, + brandVariationName, + logoImgUrl, +}) { + return ( + +
+
+ )
+}
+
+CobrandingLogo.propTypes = {
+ brandVariationHomeUrl: PropTypes.string.isRequired,
+ brandVariationName: PropTypes.string.isRequired,
+ logoImgUrl: PropTypes.string.isRequired,
+}
+
+export default CobrandingLogo
diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root.js
new file mode 100644
index 0000000000..8afb9e5e0a
--- /dev/null
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root.js
@@ -0,0 +1,146 @@
+import React, { useCallback } from 'react'
+import PropTypes from 'prop-types'
+import ToolbarHeader from './toolbar-header'
+import { useEditorContext } from '../../../shared/context/editor-context'
+import { useChatContext } from '../../chat/context/chat-context'
+import { useLayoutContext } from '../../../shared/context/layout-context'
+import { useProjectContext } from '../../../shared/context/project-context'
+
+const projectContextPropTypes = {
+ name: PropTypes.string.isRequired,
+}
+
+const editorContextPropTypes = {
+ cobranding: PropTypes.object,
+ loading: PropTypes.bool,
+ isRestrictedTokenMember: PropTypes.bool,
+ renameProject: PropTypes.func.isRequired,
+ isProjectOwner: PropTypes.bool,
+ permissionsLevel: PropTypes.string,
+}
+
+const layoutContextPropTypes = {
+ chatIsOpen: PropTypes.bool,
+ setChatIsOpen: PropTypes.func.isRequired,
+ reviewPanelOpen: PropTypes.bool,
+ setReviewPanelOpen: PropTypes.func.isRequired,
+ view: PropTypes.string,
+ setView: PropTypes.func.isRequired,
+ setLeftMenuShown: PropTypes.func.isRequired,
+ pdfLayout: PropTypes.string.isRequired,
+}
+
+const chatContextPropTypes = {
+ markMessagesAsRead: PropTypes.func.isRequired,
+ unreadMessageCount: PropTypes.number.isRequired,
+}
+
+const EditorNavigationToolbarRoot = React.memo(
+ function EditorNavigationToolbarRoot({
+ onlineUsersArray,
+ openDoc,
+ openShareProjectModal,
+ }) {
+ const { name: projectName } = useProjectContext(projectContextPropTypes)
+
+ const {
+ cobranding,
+ loading,
+ isRestrictedTokenMember,
+ renameProject,
+ isProjectOwner,
+ permissionsLevel,
+ } = useEditorContext(editorContextPropTypes)
+
+ const {
+ chatIsOpen,
+ setChatIsOpen,
+ reviewPanelOpen,
+ setReviewPanelOpen,
+ view,
+ setView,
+ setLeftMenuShown,
+ pdfLayout,
+ } = useLayoutContext(layoutContextPropTypes)
+
+ const { markMessagesAsRead, unreadMessageCount } = useChatContext(
+ chatContextPropTypes
+ )
+
+ const toggleChatOpen = useCallback(() => {
+ if (!chatIsOpen) {
+ markMessagesAsRead()
+ }
+ setChatIsOpen(value => !value)
+ }, [chatIsOpen, setChatIsOpen, markMessagesAsRead])
+
+ const toggleReviewPanelOpen = useCallback(
+ () => setReviewPanelOpen(value => !value),
+ [setReviewPanelOpen]
+ )
+
+ const toggleHistoryOpen = useCallback(() => {
+ setView(view === 'history' ? 'editor' : 'history')
+ }, [view, setView])
+
+ const togglePdfView = useCallback(() => {
+ setView(view === 'pdf' ? 'editor' : 'pdf')
+ }, [view, setView])
+
+ const openShareModal = useCallback(() => {
+ openShareProjectModal(isProjectOwner)
+ }, [openShareProjectModal, isProjectOwner])
+
+ const onShowLeftMenuClick = useCallback(
+ () => setLeftMenuShown(value => !value),
+ [setLeftMenuShown]
+ )
+
+ const goToUser = useCallback(
+ user => {
+ if (user.doc && typeof user.row === 'number') {
+ openDoc(user.doc, { gotoLine: user.row + 1 })
+ }
+ },
+ [openDoc]
+ )
+
+ // using {display: 'none'} as 1:1 migration from Angular's ng-hide. Using
+ // `loading ? null : {t('history')}
+ + ) +} + +HistoryToggleButton.propTypes = { + historyIsOpen: PropTypes.bool, + onClick: PropTypes.func.isRequired, +} + +export default HistoryToggleButton diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.js new file mode 100644 index 0000000000..537f851f80 --- /dev/null +++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.js @@ -0,0 +1,21 @@ +import PropTypes from 'prop-types' +import { useTranslation } from 'react-i18next' +import Icon from '../../../shared/components/icon' + +function MenuButton({ onClick }) { + const { t } = useTranslation() + + return ( + // eslint-disable-next-line jsx-a11y/anchor-is-valid + +{t('menu')}
+ + ) +} + +MenuButton.propTypes = { + onClick: PropTypes.func.isRequired, +} + +export default MenuButton diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.js new file mode 100644 index 0000000000..67ebcea17a --- /dev/null +++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.js @@ -0,0 +1,121 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { useTranslation } from 'react-i18next' +import { Dropdown, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap' +import Icon from '../../../shared/components/icon' +import { getHueForUserId } from '../../../shared/utils/colors' +import ControlledDropdown from '../../../shared/components/controlled-dropdown' + +function OnlineUsersWidget({ onlineUsers, goToUser }) { + const { t } = useTranslation() + + const shouldDisplayDropdown = onlineUsers.length >= 4 + + if (shouldDisplayDropdown) { + return ( +
+ {onlineUsers.map((user, index) => (
+ {user.name}}
+ >
+
+ {/* OverlayTrigger won't fire unless UserIcon is wrapped in a span */}
+
+ ))}
+
+ )
+ }
+}
+
+OnlineUsersWidget.propTypes = {
+ onlineUsers: PropTypes.arrayOf(
+ PropTypes.shape({
+ user_id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ })
+ ).isRequired,
+ goToUser: PropTypes.func.isRequired,
+}
+
+function UserIcon({ user, showName, onClick }) {
+ const backgroundColor = `hsl(${getHueForUserId(user.user_id)}, 70%, 50%)`
+
+ function handleOnClick() {
+ onClick(user)
+ }
+
+ return (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+
+
+ {user.name.slice(0, 1)}
+
+ {showName && user.name}
+
+ )
+}
+
+UserIcon.propTypes = {
+ user: PropTypes.shape({
+ user_id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ }),
+ showName: PropTypes.bool,
+ onClick: PropTypes.func.isRequired,
+}
+
+const DropDownToggleButton = React.forwardRef((props, ref) => {
+ const { t } = useTranslation()
+ return (
+
+ {!isRenaming && (
+
+ {projectName}
+
+ )}
+ {isRenaming && (
+
+ )}
+ {canRename && (
+ {t('rename')}}
+ >
+ {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus */}
+
+
+ )}
+
+ )
+}
+
+ProjectNameEditableLabel.propTypes = {
+ projectName: PropTypes.string.isRequired,
+ hasRenamePermissions: PropTypes.bool,
+ onChange: PropTypes.func.isRequired,
+ className: PropTypes.string,
+}
+
+export default ProjectNameEditableLabel
diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.js
new file mode 100644
index 0000000000..39e03a033a
--- /dev/null
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.js
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import Icon from '../../../shared/components/icon'
+
+function ShareProjectButton({ onClick }) {
+ const { t } = useTranslation()
+
+ return (
+ // eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus
+
+ {t('share')}
+ + ) +} + +ShareProjectButton.propTypes = { + onClick: PropTypes.func.isRequired, +} + +export default ShareProjectButton diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.js new file mode 100644 index 0000000000..02b12a6ab0 --- /dev/null +++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.js @@ -0,0 +1,119 @@ +import React from 'react' +import PropTypes from 'prop-types' +import MenuButton from './menu-button' +import CobrandingLogo from './cobranding-logo' +import BackToProjectsButton from './back-to-projects-button' +import ChatToggleButton from './chat-toggle-button' +import OnlineUsersWidget from './online-users-widget' +import ProjectNameEditableLabel from './project-name-editable-label' +import TrackChangesToggleButton from './track-changes-toggle-button' +import HistoryToggleButton from './history-toggle-button' +import ShareProjectButton from './share-project-button' +import PdfToggleButton from './pdf-toggle-button' +import importOverleafModules from '../../../../macros/import-overleaf-module.macro' + +const [publishModalModules] = importOverleafModules('publishModal') +const PublishButton = publishModalModules?.import.default + +const ToolbarHeader = React.memo(function ToolbarHeader({ + cobranding, + onShowLeftMenuClick, + chatIsOpen, + toggleChatOpen, + reviewPanelOpen, + toggleReviewPanelOpen, + historyIsOpen, + toggleHistoryOpen, + unreadMessageCount, + onlineUsers, + goToUser, + isRestrictedTokenMember, + hasPublishPermissions, + projectName, + renameProject, + hasRenamePermissions, + openShareModal, + pdfViewIsOpen, + pdfButtonIsVisible, + togglePdfView, +}) { + const shouldDisplayPublishButton = hasPublishPermissions && PublishButton + + return ( +
+
+ {pdfButtonIsVisible && (
+
+
+ {t('review')}
+ + ) +} + +TrackChangesToggleButton.propTypes = { + trackChangesIsOpen: PropTypes.bool, + disabled: PropTypes.bool, + onClick: PropTypes.func.isRequired, +} + +export default TrackChangesToggleButton diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/controllers/editor-navigation-toolbar-controller.js b/services/web/frontend/js/features/editor-navigation-toolbar/controllers/editor-navigation-toolbar-controller.js new file mode 100644 index 0000000000..54f5c2580c --- /dev/null +++ b/services/web/frontend/js/features/editor-navigation-toolbar/controllers/editor-navigation-toolbar-controller.js @@ -0,0 +1,26 @@ +import App from '../../../base' +import { react2angular } from 'react2angular' +import EditorNavigationToolbarRoot from '../components/editor-navigation-toolbar-root' +import { rootContext } from '../../../shared/context/root-context' + +App.controller('EditorNavigationToolbarController', function ($scope, ide) { + // wrapper is required to avoid scope problems with `this` inside `EditorManager` + $scope.openDoc = (doc, args) => ide.editorManager.openDoc(doc, args) +}) + +App.component( + 'editorNavigationToolbarRoot', + react2angular(rootContext.use(EditorNavigationToolbarRoot), [ + 'openDoc', + + // `$scope.onlineUsersArray` is already populated by `OnlineUsersManager`, which also creates + // a new array instance every time the list of online users change (which should refresh the + // value passed to React as a prop, triggering a re-render) + 'onlineUsersArray', + + // We're still including ShareController as part fo the React navigation toolbar. The reason is + // the coupling between ShareController's $scope and Angular's ShareProjectModal. Once ShareProjectModal + // is fully ported to React we should be able to repli + 'openShareProjectModal', + ]) +) diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.js b/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.js new file mode 100644 index 0000000000..2e2ec06093 --- /dev/null +++ b/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.js @@ -0,0 +1,55 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import { Dropdown } from 'react-bootstrap' +import { useFileTreeMainContext } from '../contexts/file-tree-main' + +import FileTreeItemMenuItems from './file-tree-item/file-tree-item-menu-items' + +function FileTreeContextMenu() { + const { + hasWritePermissions, + contextMenuCoords, + setContextMenuCoords, + } = useFileTreeMainContext() + + if (!hasWritePermissions || !contextMenuCoords) return null + + function close() { + // reset context menu + setContextMenuCoords(null) + } + + function handleToggle(wantOpen) { + if (!wantOpen) close() + } + + function handleClick() { + handleToggle(false) + } + + return ReactDOM.createPortal( +
+
|
+
+
+ {newFileCreateMode === 'doc' && (
+ |
+
+ {t('project_approaching_file_limit')} ({fileCount.value}/
+ {fileCount.limit})
+
+ )}
+
+ {fileCount.status === 'error' && (
+ + The following files already exist in this project: +
+ +-
+ {conflicts.map((conflict, index) => (
+
- + {conflict.meta.name} + + ))} +
+ Do you want to overwrite them? +
+ ++ + + +
+
+
+ )
+}
+
+FileTreeDraggablePreviewLayer.propTypes = {
+ isOver: PropTypes.bool.isRequired,
+}
+
+function DraggablePreviewItem({ title }) {
+ return
+
+ {title}
+}
+
+DraggablePreviewItem.propTypes = {
+ title: PropTypes.string.isRequired,
+}
+
+// makes the preview item follow the cursor.
+// See https://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor
+function getItemStyle(clientOffset, containerOffset) {
+ if (!containerOffset || !clientOffset) {
+ return {
+ display: 'none',
+ }
+ }
+ const { x: containerX, y: containerY } = containerOffset
+ const { x: clientX, y: clientY } = clientOffset
+ const posX = clientX - containerX - 15
+ const posY = clientY - containerY - 15
+ const transform = `translate(${posX}px, ${posY}px)`
+ return {
+ transform,
+ WebkitTransform: transform,
+ }
+}
+
+export default FileTreeDraggablePreviewLayer
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-error.js b/services/web/frontend/js/features/file-tree/components/file-tree-error.js
new file mode 100644
index 0000000000..4d518bc0d5
--- /dev/null
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-error.js
@@ -0,0 +1,22 @@
+import { Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+function FileTreeError() {
+ const { t } = useTranslation()
+
+ function reload() {
+ location.reload()
+ }
+
+ return (
+
+
+ )
+}
+
+export default FileTreeError
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-folder-list.js b/services/web/frontend/js/features/file-tree/components/file-tree-folder-list.js
new file mode 100644
index 0000000000..a5f4dd313f
--- /dev/null
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-folder-list.js
@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import FileTreeDoc from './file-tree-doc'
+import FileTreeFolder from './file-tree-folder'
+import { fileCollator } from '../util/file-collator'
+
+function FileTreeFolderList({
+ folders,
+ docs,
+ files,
+ classes = {},
+ dropRef = null,
+ children,
+}) {
+ const docsAndFiles = [...docs, ...files]
+
+ return (
+ {t('generic_something_went_wrong')}
+{t('please_refresh')}
+ +-
+ {folders.sort(compareFunction).map(folder => {
+ return (
+
+
+ )
+}
+
+FileTreeItemInner.propTypes = {
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ isSelected: PropTypes.bool.isRequired,
+ icons: PropTypes.node,
+}
+
+export default FileTreeItemInner
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.js
new file mode 100644
index 0000000000..84e1b24dd4
--- /dev/null
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.js
@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next'
+
+import { MenuItem } from 'react-bootstrap'
+import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
+
+function FileTreeItemMenuItems() {
+ const { t } = useTranslation()
+
+ const {
+ canRename,
+ canDelete,
+ canCreate,
+ startRenaming,
+ startDeleting,
+ startCreatingFolder,
+ startCreatingDocOrFile,
+ startUploadingDocOrFile,
+ } = useFileTreeActionable()
+
+ return (
+ <>
+ {canRename ? (
+
+ ) : null}
+ {canDelete ? (
+
+ ) : null}
+ {canCreate ? (
+ <>
+
+
+
+
+
+ ) : null}
+
+ )
+}
+
+export default FileTreeItemMenuItems
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu.js
new file mode 100644
index 0000000000..b30b75444d
--- /dev/null
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu.js
@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { findDOMNode } from 'react-dom'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import withoutPropagation from '../../../../infrastructure/without-propagation'
+
+import { Dropdown, Overlay } from 'react-bootstrap'
+import Icon from '../../../../shared/components/icon'
+
+import FileTreeItemMenuItems from './file-tree-item-menu-items'
+
+function FileTreeItemMenu({ id }) {
+ const { t } = useTranslation()
+
+ const [dropdownOpen, setDropdownOpen] = useState(false)
+ const [dropdownTarget, setDropdownTarget] = useState()
+
+ function handleToggle(wantOpen) {
+ setDropdownOpen(wantOpen)
+ }
+
+ function handleClick() {
+ handleToggle(false)
+ }
+
+ const toggleRef = component => {
+ if (component) {
+ // eslint-disable-next-line react/no-find-dom-node
+ setDropdownTarget(findDOMNode(component))
+ }
+ }
+
+ return (
+
+ {icons}
+
+
+
+ )
+}
+
+Menu.propTypes = {
+ dropdownId: PropTypes.string.isRequired,
+ style: PropTypes.object,
+ className: PropTypes.string,
+}
+
+export default FileTreeItemMenu
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js
new file mode 100644
index 0000000000..65a3472964
--- /dev/null
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js
@@ -0,0 +1,138 @@
+import { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
+
+import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
+import { useFileTreeMainContext } from '../../contexts/file-tree-main'
+
+function FileTreeItemName({ name, isSelected, setIsDraggable }) {
+ const { hasWritePermissions } = useFileTreeMainContext()
+
+ const {
+ isRenaming,
+ startRenaming,
+ finishRenaming,
+ error,
+ cancel,
+ } = useFileTreeActionable()
+
+ const isRenamingEntity = isRenaming && isSelected && !error
+
+ useEffect(() => {
+ setIsDraggable(hasWritePermissions && !isRenamingEntity)
+ }, [setIsDraggable, hasWritePermissions, isRenamingEntity])
+
+ if (isRenamingEntity) {
+ return (
+ -
+
+
+
+
+ )
+}
+
+function FileTreeToolbarLeft() {
+ const { t } = useTranslation()
+ const {
+ canCreate,
+ startCreatingFolder,
+ startCreatingDocOrFile,
+ startUploadingDocOrFile,
+ } = useFileTreeActionable()
+
+ if (!canCreate) return null
+
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+function FileTreeToolbarRight() {
+ const { t } = useTranslation()
+ const {
+ canRename,
+ canDelete,
+ startRenaming,
+ startDeleting,
+ } = useFileTreeActionable()
+
+ if (!canRename && !canDelete) {
+ return null
+ }
+
+ return (
+
+ {canRename ? (
+
+
+ ) : null}
+ {canDelete ? (
+
+
+ ) : null}
+
+ )
+}
+
+export default FileTreeToolbar
diff --git a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.js b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.js
new file mode 100644
index 0000000000..6fd497f79f
--- /dev/null
+++ b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.js
@@ -0,0 +1,35 @@
+import { Modal } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
+import FileTreeCreateFormProvider from '../../contexts/file-tree-create-form'
+import FileTreeModalCreateFileBody from '../file-tree-create/file-tree-modal-create-file-body'
+import FileTreeModalCreateFileFooter from '../file-tree-create/file-tree-modal-create-file-footer'
+import AccessibleModal from '../../../../shared/components/accessible-modal'
+
+export default function FileTreeModalCreateFile() {
+ const { t } = useTranslation()
+
+ const { isCreatingFile, cancel } = useFileTreeActionable()
+
+ if (!isCreatingFile) {
+ return null
+ }
+
+ return (
+
+ {t('files_cannot_include_invalid_characters')}
+
+ ) : null}
+ {error ? (
+
+ {errorMessage()}
+
+ ) : null}
+ {t('sure_you_want_to_delete')}
+-
+ {actionedEntities.map(entity => (
+
- {entity.name} + ))} +
+ {t('generic_something_went_wrong')}
+
+ )}
+
+ {errorMessage()}
+
+
+
+ )
+ } else if (file.linkedFileData.provider === 'project_file') {
+ fileInfo = (
+
+
+ )
+ } else if (file.linkedFileData.provider === 'project_output_file') {
+ fileInfo = (
+
+
+ )
+ }
+ }
+
+ const refreshFile = useCallback(() => {
+ setRefreshing(true)
+ // Replacement of the file handled by the file tree
+ window.expectingLinkedFileRefreshedSocketFor = file.name
+ postJSON(`/project/${projectId}/linked_file/${file.id}/refresh`, { signal })
+ .then(() => {
+ setRefreshing(false)
+ })
+ .catch(err => {
+ setRefreshing(false)
+ setRefreshError(err.data?.message || err.message)
+ })
+ .finally(() => {
+ if (
+ file.linkedFileData.provider === 'mendeley' ||
+ file.linkedFileData.provider === 'zotero' ||
+ file.name.match(/^.*\.bib$/)
+ ) {
+ reindexReferences()
+ }
+ })
+
+ function reindexReferences() {
+ const opts = {
+ body: { shouldBroadcast: true },
+ }
+
+ postJSON(`/project/${projectId}/references/indexAll`, opts)
+ .then(response => {
+ // Later updated by the socket but also updated here for immediate use
+ storeReferencesKeys(response.keys)
+ })
+ .catch(error => {
+ console.log(error)
+ })
+ }
+ }, [file, projectId, signal, storeReferencesKeys])
+
+ return (
+
+
+ )
+}
+
+FileViewHeader.propTypes = {
+ file: PropTypes.shape({
+ id: PropTypes.string,
+ name: PropTypes.string,
+ linkedFileData: PropTypes.object,
+ }).isRequired,
+ storeReferencesKeys: PropTypes.func.isRequired,
+}
+
+function UrlProvider({ file }) {
+ return (
+
+
+
+ )}
+ +
+ {t('error')}: {refreshError}
+ {tprLinkedFileRefreshError.map(
+ ({ import: { LinkedFileRefreshError }, path }) => (
+
+
+
+
+
+ {textPreview && (
+
+ )
+}
+
+FileViewText.propTypes = {
+ file: PropTypes.shape({ id: PropTypes.string }).isRequired,
+ onLoad: PropTypes.func.isRequired,
+ onError: PropTypes.func.isRequired,
+}
diff --git a/services/web/frontend/js/features/file-view/components/file-view.js b/services/web/frontend/js/features/file-view/components/file-view.js
new file mode 100644
index 0000000000..6e222929f6
--- /dev/null
+++ b/services/web/frontend/js/features/file-view/components/file-view.js
@@ -0,0 +1,81 @@
+import { useState, useCallback } from 'react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+
+import FileViewHeader from './file-view-header'
+import FileViewImage from './file-view-image'
+import FileViewText from './file-view-text'
+import Icon from '../../../shared/components/icon'
+
+const imageExtensions = ['png', 'jpg', 'jpeg', 'gif']
+
+const textExtensions = window.ExposedSettings.textExtensions
+
+export default function FileView({ file, storeReferencesKeys }) {
+ const [contentLoading, setContentLoading] = useState(true)
+ const [hasError, setHasError] = useState(false)
+
+ const { t } = useTranslation()
+
+ const extension = file.name.split('.').pop().toLowerCase()
+ const isUnpreviewableFile =
+ !imageExtensions.includes(extension) && !textExtensions.includes(extension)
+
+ const handleLoad = useCallback(() => {
+ setContentLoading(false)
+ }, [])
+
+ const handleError = useCallback(() => {
+ if (!hasError) {
+ setContentLoading(false)
+ setHasError(true)
+ }
+ }, [hasError])
+
+ const content = (
+ <>
+
+
+ )}
+
+
+ {textPreview}
+ {shouldShowDots &&...
} +
+ {!hasError && content}
+ {!isUnpreviewableFile && contentLoading &&
+ )
+}
+
+function FileViewLoadingIndicator() {
+ const { t } = useTranslation()
+ return (
+ {t('no_preview_available')}
+ )} +
+
+
+ )
+}
+
+FileView.propTypes = {
+ file: PropTypes.shape({
+ id: PropTypes.string,
+ name: PropTypes.string,
+ }).isRequired,
+ storeReferencesKeys: PropTypes.func.isRequired,
+}
diff --git a/services/web/frontend/js/features/file-view/controllers/file-view-controller.js b/services/web/frontend/js/features/file-view/controllers/file-view-controller.js
new file mode 100644
index 0000000000..63223a7dbd
--- /dev/null
+++ b/services/web/frontend/js/features/file-view/controllers/file-view-controller.js
@@ -0,0 +1,23 @@
+import App from '../../../base'
+import { react2angular } from 'react2angular'
+import _ from 'lodash'
+
+import { rootContext } from '../../../shared/context/root-context'
+import FileView from '../components/file-view'
+
+export default App.controller(
+ 'FileViewController',
+ function ($scope, $rootScope) {
+ $scope.file = $scope.openFile
+
+ $scope.storeReferencesKeys = newKeys => {
+ const oldKeys = $rootScope._references.keys
+ return ($rootScope._references.keys = _.union(oldKeys, newKeys))
+ }
+ }
+)
+
+App.component(
+ 'fileView',
+ react2angular(rootContext.use(FileView), ['storeReferencesKeys', 'file'])
+)
diff --git a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js
new file mode 100644
index 0000000000..5cb76acccd
--- /dev/null
+++ b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js
@@ -0,0 +1,217 @@
+import { Button, Modal, Row, Col } from 'react-bootstrap'
+import PropTypes from 'prop-types'
+import { Trans, useTranslation } from 'react-i18next'
+import AccessibleModal from '../../../shared/components/accessible-modal'
+
+export default function HotkeysModal({
+ animation = true,
+ handleHide,
+ show,
+ isMac = false,
+ trackChangesVisible = false,
+}) {
+ const { t } = useTranslation()
+
+ const ctrl = isMac ? 'Cmd' : 'Ctrl'
+
+ return (
+ {t('common')}
+ +{t('navigation')}
+ +{t('editing')}
+ +{t('autocomplete')}
+ +
+
+
+ {t('review')}
+ +
+ {combination}
+ {description}
+
+ )
+}
+Hotkey.propTypes = {
+ combination: PropTypes.string.isRequired,
+ description: PropTypes.string.isRequired,
+}
diff --git a/services/web/frontend/js/features/hotkeys-modal/controllers/hotkeys-modal-controller.js b/services/web/frontend/js/features/hotkeys-modal/controllers/hotkeys-modal-controller.js
new file mode 100644
index 0000000000..43fa47feb6
--- /dev/null
+++ b/services/web/frontend/js/features/hotkeys-modal/controllers/hotkeys-modal-controller.js
@@ -0,0 +1,26 @@
+import App from '../../../base'
+import { react2angular } from 'react2angular'
+
+import HotkeysModal from '../components/hotkeys-modal'
+
+App.component('hotkeysModal', react2angular(HotkeysModal, undefined))
+
+export default App.controller('HotkeysModalController', function ($scope) {
+ $scope.show = false
+ $scope.isMac = /Mac/i.test(navigator.platform)
+
+ $scope.handleHide = () => {
+ $scope.$applyAsync(() => {
+ $scope.show = false
+ })
+ }
+
+ $scope.openHotkeysModal = () => {
+ $scope.$applyAsync(() => {
+ $scope.trackChangesVisible =
+ $scope.project && $scope.project.features.trackChangesVisible
+
+ $scope.show = true
+ })
+ }
+})
diff --git a/services/web/frontend/js/features/outline/components/outline-item.js b/services/web/frontend/js/features/outline/components/outline-item.js
new file mode 100644
index 0000000000..cdc723d715
--- /dev/null
+++ b/services/web/frontend/js/features/outline/components/outline-item.js
@@ -0,0 +1,119 @@
+import { useState, useEffect, createRef, useRef } from 'react'
+import PropTypes from 'prop-types'
+import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import OutlineList from './outline-list'
+import Icon from '../../../shared/components/icon'
+
+function getChildrenLines(children) {
+ return (children || [])
+ .map(child => {
+ return getChildrenLines(child.children).concat(child.line)
+ })
+ .flat()
+}
+
+function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
+ const { t } = useTranslation()
+
+ const [expanded, setExpanded] = useState(true)
+ const titleElementRef = createRef()
+ const isHighlightedRef = useRef(false)
+
+ const mainItemClasses = classNames('outline-item', {
+ 'outline-item-no-children': !outlineItem.children,
+ })
+
+ const hasHighlightedChild =
+ !expanded &&
+ getChildrenLines(outlineItem.children).includes(highlightedLine)
+
+ const isHighlighted =
+ highlightedLine === outlineItem.line || hasHighlightedChild
+
+ const itemLinkClasses = classNames('outline-item-link', {
+ 'outline-item-link-highlight': isHighlighted,
+ })
+
+ function handleExpandCollapseClick() {
+ setExpanded(!expanded)
+ }
+
+ function handleOutlineItemLinkClick() {
+ jumpToLine(outlineItem.line, false)
+ }
+
+ function handleOutlineItemLinkDoubleClick() {
+ jumpToLine(outlineItem.line, true)
+ }
+
+ useEffect(() => {
+ const wasHighlighted = isHighlightedRef.current
+ isHighlightedRef.current = isHighlighted
+
+ if (!wasHighlighted && isHighlighted) {
+ scrollIntoViewIfNeeded(titleElementRef.current, {
+ scrollMode: 'if-needed',
+ block: 'center',
+ })
+ }
+ }, [isHighlighted, titleElementRef, isHighlightedRef])
+
+ // don't set the aria-expanded attribute when there are no children
+ const ariaExpandedValue = outlineItem.children ? expanded : undefined
+
+ return (
+
+ {outlineItem.children ? (
+
+ ) : null}
+
+
+ {expanded && outlineItem.children ? (
+ -
+ {outline.map((outlineItem, idx) => {
+ return (
+
+
+
+
+ {expanded && isTexFile ? (
+
+ )
+})
+
+OutlinePane.propTypes = {
+ isTexFile: PropTypes.bool.isRequired,
+ outline: PropTypes.array.isRequired,
+ jumpToLine: PropTypes.func.isRequired,
+ onToggle: PropTypes.func.isRequired,
+ eventTracking: PropTypes.object.isRequired,
+ highlightedLine: PropTypes.number,
+}
+
+export default withErrorBoundary(OutlinePane)
diff --git a/services/web/frontend/js/features/outline/components/outline-root.js b/services/web/frontend/js/features/outline/components/outline-root.js
new file mode 100644
index 0000000000..9d403ace8f
--- /dev/null
+++ b/services/web/frontend/js/features/outline/components/outline-root.js
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+
+import OutlineList from './outline-list'
+
+function OutlineRoot({ outline, jumpToLine, highlightedLine }) {
+ const { t } = useTranslation()
+
+ return (
+
+
+ ) : null}
+
+ {outline.length ? (
+
+ )
+}
+
+OutlineRoot.propTypes = {
+ outline: PropTypes.array.isRequired,
+ jumpToLine: PropTypes.func.isRequired,
+ highlightedLine: PropTypes.number,
+}
+
+export default OutlineRoot
diff --git a/services/web/frontend/js/features/outline/controllers/outline-controller.js b/services/web/frontend/js/features/outline/controllers/outline-controller.js
new file mode 100644
index 0000000000..1d5df7e106
--- /dev/null
+++ b/services/web/frontend/js/features/outline/controllers/outline-controller.js
@@ -0,0 +1,44 @@
+import App from '../../../base'
+import OutlinePane from '../components/outline-pane'
+import { react2angular } from 'react2angular'
+import { rootContext } from '../../../shared/context/root-context'
+
+App.controller('OutlineController', function ($scope, ide, eventTracking) {
+ $scope.isTexFile = false
+ $scope.outline = []
+ $scope.eventTracking = eventTracking
+
+ $scope.$on('outline-manager:outline-changed', onOutlineChange)
+
+ function onOutlineChange(e, outlineInfo) {
+ $scope.$applyAsync(() => {
+ $scope.isTexFile = outlineInfo.isTexFile
+ $scope.outline = outlineInfo.outline
+ $scope.highlightedLine = outlineInfo.highlightedLine
+ })
+ }
+
+ $scope.jumpToLine = (lineNo, syncToPdf) => {
+ ide.outlineManager.jumpToLine(lineNo, syncToPdf)
+ eventTracking.sendMB('outline-jump-to-line')
+ }
+
+ $scope.onToggle = isOpen => {
+ $scope.$applyAsync(() => {
+ $scope.$emit('outline-toggled', isOpen)
+ })
+ }
+})
+
+// Wrap React component as Angular component. Only needed for "top-level" component
+App.component(
+ 'outlinePane',
+ react2angular(rootContext.use(OutlinePane), [
+ 'outline',
+ 'jumpToLine',
+ 'highlightedLine',
+ 'eventTracking',
+ 'onToggle',
+ 'isTexFile',
+ ])
+)
diff --git a/services/web/frontend/js/features/outline/outline-manager.js b/services/web/frontend/js/features/outline/outline-manager.js
new file mode 100644
index 0000000000..cde836fed2
--- /dev/null
+++ b/services/web/frontend/js/features/outline/outline-manager.js
@@ -0,0 +1,113 @@
+import './controllers/outline-controller'
+import { matchOutline, nestOutline } from './outline-parser'
+import isValidTeXFile from '../../main/is-valid-tex-file'
+
+class OutlineManager {
+ constructor(ide, scope) {
+ this.ide = ide
+ this.scope = scope
+ this.shareJsDoc = null
+ this.isTexFile = false
+ this.flatOutline = []
+ this.outline = []
+ this.highlightedLine = null
+ this.ignoreNextScroll = false
+ this.ignoreNextCursorUpdate = false
+
+ scope.$on('doc:after-opened', (ev, { isNewDoc }) => {
+ if (isNewDoc) {
+ // if a new doc is opened a cursor updates will be triggered before the
+ // content is loaded. We have to ignore it or the outline highlight
+ // will be incorrect. This doesn't happen when `doc:after-opened` is
+ // fired without a new doc opened.
+ this.ignoreNextCursorUpdate = true
+ }
+ // always ignore the next scroll update so the cursor update takes
+ // precedence
+ this.ignoreNextScroll = true
+ this.shareJsDoc = scope.editor.sharejs_doc
+ this.isTexFile = isValidTeXFile(scope.editor.open_doc_name)
+ this.updateOutline()
+ this.broadcastChangeEvent()
+ })
+
+ scope.$watch('openFile.name', openFileName => {
+ this.isTexFile = isValidTeXFile(openFileName)
+ this.updateOutline()
+ this.broadcastChangeEvent()
+ })
+
+ scope.$on('doc:changed', () => {
+ this.updateOutline()
+ this.broadcastChangeEvent()
+ })
+
+ scope.$on('file-view:file-opened', () => {
+ this.isTexFile = false
+ this.updateOutline()
+ this.broadcastChangeEvent()
+ })
+
+ scope.$on('cursor:editor:update', (event, cursorPosition) => {
+ if (this.ignoreNextCursorUpdate) {
+ this.ignoreNextCursorUpdate = false
+ return
+ }
+ this.updateHighlightedLine(cursorPosition.row + 1)
+ this.broadcastChangeEvent()
+ })
+
+ scope.$on('scroll:editor:update', (event, middleVisibleRow) => {
+ if (this.ignoreNextScroll) {
+ this.ignoreNextScroll = false
+ return
+ }
+
+ this.updateHighlightedLine(middleVisibleRow + 1)
+ })
+
+ scope.$watch('editor.showRichText', () => {
+ this.ignoreNextScroll = true
+ this.ignoreNextCursorUpdate = true
+ })
+ }
+
+ updateOutline() {
+ this.outline = []
+ if (this.isTexFile) {
+ const content = this.ide.editorManager.getCurrentDocValue()
+ if (content) {
+ this.flatOutline = matchOutline(content)
+ this.outline = nestOutline(this.flatOutline)
+ }
+ }
+ }
+
+ // set highlightedLine to the closest outline line above the editorLine
+ updateHighlightedLine(editorLine) {
+ let closestOutlineLine = null
+ for (let lineId = 0; lineId < this.flatOutline.length; lineId++) {
+ const outline = this.flatOutline[lineId]
+ if (editorLine < outline.line) break // editorLine is above
+ closestOutlineLine = outline.line
+ }
+ if (closestOutlineLine === this.highlightedLine) return
+ this.highlightedLine = closestOutlineLine
+ this.broadcastChangeEvent()
+ }
+
+ jumpToLine(line, syncToPdf) {
+ this.ignoreNextScroll = true
+ this.ide.editorManager.jumpToLine({ gotoLine: line, syncToPdf })
+ }
+
+ broadcastChangeEvent() {
+ this.scope.$broadcast('outline-manager:outline-changed', {
+ isTexFile: this.isTexFile,
+ outline: this.outline,
+ highlightedLine: this.highlightedLine,
+ })
+ }
+}
+
+export default OutlineManager
diff --git a/services/web/frontend/js/features/outline/outline-parser.js b/services/web/frontend/js/features/outline/outline-parser.js
new file mode 100644
index 0000000000..dbd876cbcf
--- /dev/null
+++ b/services/web/frontend/js/features/outline/outline-parser.js
@@ -0,0 +1,128 @@
+const COMMAND_LEVELS = {
+ book: 10,
+ part: 20,
+ addpart: 20,
+ chapter: 30,
+ addchap: 30,
+ section: 40,
+ addsect: 40,
+ subsection: 50,
+ subsubsection: 60,
+ paragraph: 70,
+ subparagraph: 80,
+}
+
+/*
+ *
+ * RegExp matcher parts:
+ *
+ * REGEX_START: begining of line, any number of spaces, double \ (required)
+ * REGEX_COMMAND: any of the listed commands (required)
+ * REGEX_SPACING: spaces and * between groups (optional)
+ * REGEX_SHORT_TITLE: a text between square brackets (optional)
+ * REGEX_TITLE: a text between curly brackets (required)
+ *
+ */
+const REGEX_START = '^\\s*\\\\'
+const REGEX_COMMAND = `(${Object.keys(COMMAND_LEVELS).join('|')})`
+const REGEX_SPACING = '\\s?\\*?\\s?'
+const REGEX_SHORT_TITLE = '(\\[([^\\]]+)\\])?'
+const REGEX_TITLE = '{(.*)}'
+const MATCHER = new RegExp(
+ `${REGEX_START}${REGEX_COMMAND}${REGEX_SPACING}${REGEX_SHORT_TITLE}${REGEX_SPACING}${REGEX_TITLE}`
+)
+
+function matchOutline(content) {
+ const lines = content.split('\n')
+ const flatOutline = []
+ lines.forEach((line, lineId) => {
+ const match = line.match(MATCHER)
+ if (!match) return
+ const [, command, , shortTitle, title] = match
+
+ flatOutline.push({
+ line: lineId + 1,
+ title: matchDisplayTitle(shortTitle || title),
+ level: COMMAND_LEVELS[command],
+ })
+ })
+ return flatOutline
+}
+
+const DISPLAY_TITLE_REGEX = /([^\\]*)\\([^{]+){([^}]+)}(.*)/
+const END_OF_TITLE_REGEX = /^([^{}]*?({[^{}]*?}[^{}]*?)*)}/
+/*
+ * Attempt to improve the display of the outline title for titles with commands.
+ * Either skip the command (for labels) or display the command's content instead
+ * of the entire command.
+ *
+ * e.g. "Label \\label{foo} between" => "Label between"
+ * e.g. "TT \\texttt{Bar}" => "TT Bar"
+ *
+ */
+function matchDisplayTitle(title) {
+ const closingBracketPosition = title.indexOf('}')
+
+ if (closingBracketPosition < 0) {
+ // simple title (no commands)
+ return title
+ }
+
+ // if there is anything outside the title def on the line, remove it
+ // before proceeding
+ const titleOnlyMatch = title.match(END_OF_TITLE_REGEX)
+ if (titleOnlyMatch) {
+ title = titleOnlyMatch[1]
+ }
+
+ const titleMatch = title.match(DISPLAY_TITLE_REGEX)
+ if (!titleMatch) {
+ // no contained commands; strip everything after the first closing bracket
+ return title.substring(0, closingBracketPosition)
+ }
+
+ const [, textBefore, command, commandContent, textAfter] = titleMatch
+ if (command === 'label') {
+ // label: don't display them at all
+ title = `${textBefore}${textAfter}`
+ } else {
+ // display the content of the command. Works well for formatting commands
+ title = `${textBefore}${commandContent}${textAfter}`
+ }
+
+ return title
+}
+
+function nestOutline(flatOutline) {
+ const parentOutlines = {}
+ const nestedOutlines = []
+ flatOutline.forEach(outline => {
+ const parentOutlineLevels = Object.keys(parentOutlines)
+
+ // find the nearest parent outline
+ const nearestParentLevel = parentOutlineLevels
+ .reverse()
+ .find(level => level < outline.level)
+ const parentOutline = parentOutlines[nearestParentLevel]
+ if (!parentOutline) {
+ // top level
+ nestedOutlines.push(outline)
+ } else if (!parentOutline.children) {
+ // first outline in this node
+ parentOutline.children = [outline]
+ } else {
+ // push outline to node
+ parentOutline.children.push(outline)
+ }
+
+ // store the outline as new parent at its level and forget lower-level
+ // outlines (if any) as they shouldn't get any children anymore
+ parentOutlines[outline.level] = outline
+ parentOutlineLevels
+ .filter(level => level > outline.level)
+ .forEach(level => delete parentOutlines[level])
+ })
+ return nestedOutlines
+}
+
+export { matchOutline, nestOutline }
diff --git a/services/web/frontend/js/features/preview/components/preview-download-button.js b/services/web/frontend/js/features/preview/components/preview-download-button.js
new file mode 100644
index 0000000000..3c515f4275
--- /dev/null
+++ b/services/web/frontend/js/features/preview/components/preview-download-button.js
@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import PreviewDownloadFileList from './preview-download-file-list'
+import Icon from '../../../shared/components/icon'
+import ControlledDropdown from '../../../shared/components/controlled-dropdown'
+
+function PreviewDownloadButton({
+ isCompiling,
+ outputFiles,
+ pdfDownloadUrl,
+ showText,
+}) {
+ const { t } = useTranslation()
+
+ let textStyle = {}
+ if (!showText) {
+ textStyle = {
+ position: 'absolute',
+ right: '-100vw',
+ }
+ }
+
+ const pdfDownloadDisabled = isCompiling || !pdfDownloadUrl
+ const buttonElement = (
+
+
+ {t('we_cant_find_any_sections_or_subsections_in_this_file')}.{' '}
+
+ {t('find_out_more_about_the_file_outline')}
+
+
+ )}
+ -
+
-
+
+
+ -
+
}} + /> +
+ -
+
}} + /> +
+
{t('free_accounts_have_timeout_upgrade_to_increase')}
+{t('plus_upgraded_accounts_receive')}:
+
+
+ {isProjectOwner ? (
+ -
+
-
+
+ + {t('unlimited_projects')} +
+ -
+
+ + {t('collabs_per_proj', { collabcount: 'Multiple' })} +
+ -
+
+ + {t('full_doc_history')} +
+ -
+
+ + {t('sync_to_dropbox')} +
+ -
+
+ + {t('sync_to_github')} +
+ -
+
+ + {t('compile_larger_projects')} +
+
+
+
+ )
+}
+
+function FirstErrorPopUpInfoBadge() {
+ const { t } = useTranslation()
+ const logsPaneInfoMessage = t('logs_pane_info_message_popup')
+ const tooltip = (
+
+
+
+
+
+
+ )
+}
+
+function PreviewLogEntryHeader({
+ sourceLocation,
+ level,
+ headerTitle,
+ headerIcon,
+ logType,
+ showSourceLocationLink = true,
+ showCloseButton = false,
+ onSourceLocationClick,
+ onClose,
+}) {
+ const { t } = useTranslation()
+ const logLocationSpanRef = useRef()
+ const [locationSpanOverflown, setLocationSpanOverflown] = useState(false)
+
+ useResizeObserver(
+ logLocationSpanRef,
+ locationSpanOverflown,
+ checkLocationSpanOverflow
+ )
+
+ const file = sourceLocation ? sourceLocation.file : null
+ const line = sourceLocation ? sourceLocation.line : null
+ const logEntryHeaderClasses = classNames('log-entry-header', {
+ 'log-entry-header-error': level === 'error',
+ 'log-entry-header-warning': level === 'warning',
+ 'log-entry-header-typesetting': level === 'typesetting',
+ 'log-entry-header-raw': level === 'raw',
+ 'log-entry-header-success': level === 'success',
+ })
+ const logEntryLocationBtnClasses = classNames('log-entry-header-link', {
+ 'log-entry-header-link-error': level === 'error',
+ 'log-entry-header-link-warning': level === 'warning',
+ 'log-entry-header-link-typesetting': level === 'typesetting',
+ 'log-entry-header-link-raw': level === 'raw',
+ 'log-entry-header-link-success': level === 'success',
+ })
+ const headerLogLocationTitle = t('navigate_log_source', {
+ location: file + (line ? `, ${line}` : ''),
+ })
+
+ function checkLocationSpanOverflow(observedElement) {
+ const spanEl = observedElement.target
+ const isOverflowing = spanEl.scrollWidth > spanEl.clientWidth
+ setLocationSpanOverflown(isOverflowing)
+ }
+
+ const locationLinkText =
+ showSourceLocationLink && file ? `${file}${line ? `, ${line}` : ''}` : null
+
+ // Because we want an ellipsis on the left-hand side (e.g. "...longfilename.tex"), the
+ // `log-entry-header-link-location` class has text laid out from right-to-left using the CSS
+ // rule `direction: rtl;`.
+ // This works most of the times, except when the first character of the filename is considered
+ // a punctuation mark, like `/` (e.g. `/foo/bar/baz.sty`). In this case, because of
+ // right-to-left writing rules, the punctuation mark is moved to the right-side of the string,
+ // resulting in `...bar/baz.sty/` instead of `...bar/baz.sty`.
+ // To avoid this edge-case, we wrap the `logLocationLinkText` in two directional formatting
+ // characters:
+ // * \u202A LEFT-TO-RIGHT EMBEDDING Treat the following text as embedded left-to-right.
+ // * \u202C POP DIRECTIONAL FORMATTING End the scope of the last LRE, RLE, RLO, or LRO.
+ // This essentially tells the browser that, althought the text is laid out from right-to-left,
+ // the wrapped portion of text should follow left-to-right writing rules.
+ const locationLink = locationLinkText ? (
+
+ ) : null
+
+ const locationTooltip =
+ locationSpanOverflown && locationLinkText ? (
+ {headerIcon}
+ ) : null}
+ {headerTitleText}
+ {locationTooltip ? ( +
+ {rawContent ? (
+
+ )
+}
+
+PreviewLogEntryHeader.propTypes = {
+ sourceLocation: PropTypes.shape({
+ file: PropTypes.string,
+ // `line should be either a number or null (i.e. not required), but currently sometimes we get
+ // an empty string (from BibTeX errors), which is why we're using `any` here. We should revert
+ // to PropTypes.number (not required) once we fix that.
+ line: PropTypes.any,
+ column: PropTypes.any,
+ }),
+ level: PropTypes.string.isRequired,
+ headerTitle: PropTypes.string,
+ headerIcon: PropTypes.element,
+ logType: PropTypes.string,
+ showSourceLocationLink: PropTypes.bool,
+ showCloseButton: PropTypes.bool,
+ onSourceLocationClick: PropTypes.func,
+ onClose: PropTypes.func,
+}
+
+PreviewLogEntryContent.propTypes = {
+ rawContent: PropTypes.string,
+ formattedContent: PropTypes.node,
+ extraInfoURL: PropTypes.string,
+}
+
+PreviewLogsPaneEntry.propTypes = {
+ sourceLocation: PreviewLogEntryHeader.propTypes.sourceLocation,
+ headerTitle: PropTypes.string,
+ headerIcon: PropTypes.element,
+ rawContent: PropTypes.string,
+ logType: PropTypes.string,
+ formattedContent: PropTypes.node,
+ extraInfoURL: PropTypes.string,
+ level: PropTypes.oneOf(['error', 'warning', 'typesetting', 'raw', 'success'])
+ .isRequired,
+ customClass: PropTypes.string,
+ showSourceLocationLink: PropTypes.bool,
+ showCloseButton: PropTypes.bool,
+ entryAriaLabel: PropTypes.string,
+ onSourceLocationClick: PropTypes.func,
+ onClose: PropTypes.func,
+}
+
+export default PreviewLogsPaneEntry
diff --git a/services/web/frontend/js/features/preview/components/preview-logs-pane.js b/services/web/frontend/js/features/preview/components/preview-logs-pane.js
new file mode 100644
index 0000000000..4256b3a791
--- /dev/null
+++ b/services/web/frontend/js/features/preview/components/preview-logs-pane.js
@@ -0,0 +1,244 @@
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import { Dropdown } from 'react-bootstrap'
+import PreviewLogsPaneEntry from './preview-logs-pane-entry'
+import PreviewValidationIssue from './preview-validation-issue'
+import PreviewDownloadFileList from './preview-download-file-list'
+import PreviewError from './preview-error'
+import Icon from '../../../shared/components/icon'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
+import ControlledDropdown from '../../../shared/components/controlled-dropdown'
+
+function PreviewLogsPane({
+ logEntries = { all: [], errors: [], warnings: [], typesetting: [] },
+ rawLog = '',
+ validationIssues = {},
+ errors = {},
+ outputFiles = [],
+ isClearingCache,
+ isCompiling = false,
+ autoCompileHasLintingError = false,
+ variantWithFirstErrorPopup,
+ onLogEntryLocationClick,
+ onClearCache,
+}) {
+ const { t } = useTranslation()
+ const {
+ all: allCompilerIssues = [],
+ errors: compilerErrors = [],
+ warnings: compilerWarnings = [],
+ typesetting: compilerTypesettingIssues = [],
+ } = logEntries
+ const allLogEntries = [
+ ...compilerErrors,
+ ...compilerWarnings,
+ ...compilerTypesettingIssues,
+ ]
+
+ const actionsUI = (
+
+
+ ) : null}
+ {formattedContent ? (
+
+
+ {needsExpandCollapse ? (
+ {rawContent.trim()}
+
+
+
+ ) : null}
+ {formattedContent}
+ ) : null}
+ {extraInfoURL ? (
+
+ ) : null}
+
+
+
+
+
+
+
+ )
+
+ const rawLogUI = (
+
+
+ )
+}
+
+const PreviewErrors = ({ errors }) => {
+ const nowTS = Date.now()
+ return Object.entries(errors).map(([name, exists], index) => {
+ return exists &&
+
+
+
+ )
+}
+
+function LogsPaneInfoNotice({ variantWithFirstErrorPopup }) {
+ const { t } = useTranslation()
+ const [dismissedInfoNotice, setDismissedInfoNotice] = usePersistedState(
+ `logs_pane.dismissed_info_notice`,
+ false
+ )
+
+ const surveyLink = variantWithFirstErrorPopup
+ ? 'https://forms.gle/AUbDDRvroQ7KFwHR9'
+ : 'https://forms.gle/bRxevtGzBHRk8BKw8'
+ function handleDismissButtonClick() {
+ setDismissedInfoNotice(true)
+ }
+
+ return dismissedInfoNotice ? null : (
+
+
+
+
+ + {t('code_check_failed_explanation')} +
+
+
+
+ )
+}
+
+PreviewErrors.propTypes = {
+ errors: PropTypes.object.isRequired,
+}
+
+PreviewValidationIssues.propTypes = {
+ validationIssues: PropTypes.object.isRequired,
+}
+
+PreviewLogEntries.propTypes = {
+ logEntries: PropTypes.array.isRequired,
+ onLogEntryLocationClick: PropTypes.func.isRequired,
+}
+
+LogsPaneInfoNotice.propTypes = {
+ variantWithFirstErrorPopup: PropTypes.bool,
+}
+
+PreviewLogsPane.propTypes = {
+ logEntries: PropTypes.shape({
+ all: PropTypes.array,
+ errors: PropTypes.array,
+ warning: PropTypes.array,
+ typesetting: PropTypes.array,
+ }),
+ autoCompileHasLintingError: PropTypes.bool,
+ rawLog: PropTypes.string,
+ outputFiles: PropTypes.array,
+ isClearingCache: PropTypes.bool,
+ isCompiling: PropTypes.bool,
+ variantWithFirstErrorPopup: PropTypes.bool,
+ onLogEntryLocationClick: PropTypes.func.isRequired,
+ onClearCache: PropTypes.func.isRequired,
+ validationIssues: PropTypes.object,
+ errors: PropTypes.object,
+}
+
+export default PreviewLogsPane
diff --git a/services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js b/services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js
new file mode 100644
index 0000000000..6e8e385238
--- /dev/null
+++ b/services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js
@@ -0,0 +1,207 @@
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import Icon from '../../../shared/components/icon'
+
+const MAX_ERRORS_COUNT = 99
+
+function PreviewLogsToggleButton({
+ onToggle,
+ showLogs,
+ autoCompileLintingError = false,
+ compileFailed = false,
+ logsState: { nErrors, nWarnings },
+ showText,
+}) {
+ const { t } = useTranslation()
+ let textStyle = {}
+ let btnColorCssClass = 'btn-default'
+ let buttonContents
+
+ if (!showText) {
+ textStyle = {
+ position: 'absolute',
+ right: '-100vw',
+ }
+ }
+
+ function handleOnClick(e) {
+ e.currentTarget.blur()
+ onToggle()
+ }
+
+ if (showLogs) {
+ buttonContents =
+
+ )
+}
+
+PreviewToolbar.propTypes = {
+ compilerState: PropTypes.shape({
+ autoCompileHasLintingError: PropTypes.bool,
+ isAutoCompileOn: PropTypes.bool.isRequired,
+ isCompiling: PropTypes.bool.isRequired,
+ isDraftModeOn: PropTypes.bool.isRequired,
+ isSyntaxCheckOn: PropTypes.bool.isRequired,
+ compileFailed: PropTypes.bool,
+ logEntries: PropTypes.object.isRequired,
+ }),
+ logsState: PropTypes.shape({
+ nErrors: PropTypes.number.isRequired,
+ nWarnings: PropTypes.number.isRequired,
+ }),
+ showLogs: PropTypes.bool.isRequired,
+ splitLayout: PropTypes.bool.isRequired,
+ onRecompile: PropTypes.func.isRequired,
+ onRecompileFromScratch: PropTypes.func.isRequired,
+ onRunSyntaxCheckNow: PropTypes.func.isRequired,
+ onSetAutoCompile: PropTypes.func.isRequired,
+ onSetDraftMode: PropTypes.func.isRequired,
+ onSetSyntaxCheck: PropTypes.func.isRequired,
+ onToggleLogs: PropTypes.func.isRequired,
+ onSetSplitLayout: PropTypes.func.isRequired,
+ onSetFullLayout: PropTypes.func.isRequired,
+ onStopCompilation: PropTypes.func.isRequired,
+ pdfDownloadUrl: PropTypes.string,
+ outputFiles: PropTypes.array,
+}
+
+export default PreviewToolbar
diff --git a/services/web/frontend/js/features/preview/components/preview-validation-issue.js b/services/web/frontend/js/features/preview/components/preview-validation-issue.js
new file mode 100644
index 0000000000..a8d27676e8
--- /dev/null
+++ b/services/web/frontend/js/features/preview/components/preview-validation-issue.js
@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import PreviewLogsPaneEntry from './preview-logs-pane-entry'
+
+function PreviewValidationIssue({ name, details }) {
+ const { t } = useTranslation()
+ let validationTitle
+ let validationContent
+
+ if (name === 'sizeCheck') {
+ validationTitle = t('project_too_large')
+ validationContent = (
+ <>
+
+
+
+
+
+
+
+ {t('project_too_large_please_reduce')}
+ -
+ {details.resources.map((resource, index) => (
+
- + {resource.path} — {resource.kbSize} + kb + + ))} +
{t('following_paths_conflict')}
+ -
+ {details.map((detail, index) => (
+
- /{detail.path} + ))} +
+
+ )
+}
diff --git a/services/web/frontend/js/features/share-project-modal/components/add-collaborators.js b/services/web/frontend/js/features/share-project-modal/components/add-collaborators.js
new file mode 100644
index 0000000000..da2b2dea01
--- /dev/null
+++ b/services/web/frontend/js/features/share-project-modal/components/add-collaborators.js
@@ -0,0 +1,151 @@
+import { useState, useMemo } from 'react'
+import { useTranslation, Trans } from 'react-i18next'
+import { Form, FormGroup, FormControl, Button } from 'react-bootstrap'
+import { useMultipleSelection } from 'downshift'
+import { useShareProjectContext } from './share-project-modal'
+import SelectCollaborators from './select-collaborators'
+import { resendInvite, sendInvite } from '../utils/api'
+import { useUserContacts } from '../hooks/use-user-contacts'
+import useIsMounted from '../../../shared/hooks/use-is-mounted'
+import { useProjectContext } from '../../../shared/context/project-context'
+
+export default function AddCollaborators() {
+ const [privileges, setPrivileges] = useState('readAndWrite')
+
+ const isMounted = useIsMounted()
+
+ const { data: contacts } = useUserContacts()
+
+ const { t } = useTranslation()
+
+ const { updateProject, setInFlight, setError } = useShareProjectContext()
+
+ const project = useProjectContext()
+
+ const currentMemberEmails = useMemo(
+ () => (project.members || []).map(member => member.email).sort(),
+ [project.members]
+ )
+
+ const nonMemberContacts = useMemo(() => {
+ if (!contacts) {
+ return null
+ }
+
+ return contacts.filter(
+ contact => !currentMemberEmails.includes(contact.email)
+ )
+ }, [contacts, currentMemberEmails])
+
+ const multipleSelectionProps = useMultipleSelection({
+ initialActiveIndex: 0,
+ initialSelectedItems: [],
+ })
+
+ const { reset, selectedItems } = multipleSelectionProps
+
+ async function handleSubmit(event) {
+ event.preventDefault()
+
+ if (!selectedItems.length) {
+ return
+ }
+
+ // reset the selected items
+ reset()
+
+ setError(undefined)
+ setInFlight(true)
+
+ for (const contact of selectedItems) {
+ // unmounting means can't add any more collaborators
+ if (!isMounted.current) {
+ break
+ }
+
+ const email = contact.type === 'user' ? contact.email : contact.display
+ const normalisedEmail = email.toLowerCase()
+
+ if (currentMemberEmails.includes(normalisedEmail)) {
+ continue
+ }
+
+ let data
+
+ try {
+ const invite = (project.invites || []).find(
+ invite => invite.email === normalisedEmail
+ )
+
+ if (invite) {
+ data = await resendInvite(project, invite)
+ } else {
+ data = await sendInvite(project, email, privileges)
+ }
+ } catch (error) {
+ setInFlight(false)
+ setError(
+ error.data?.errorReason ||
+ (error.response?.status === 429
+ ? 'too_many_requests'
+ : 'generic_something_went_wrong')
+ )
+ break
+ }
+
+ if (data.error) {
+ setError(data.error)
+ setInFlight(false)
+ } else if (data.invite) {
+ updateProject({
+ invites: project.invites.concat(data.invite),
+ })
+ } else if (data.users) {
+ updateProject({
+ members: project.members.concat(data.users),
+ })
+ } else if (data.user) {
+ updateProject({
+ members: project.members.concat(data.user),
+ })
+ }
+
+ // wait for a short time, so canAddCollaborators has time to update with new collaborator information
+ await new Promise(resolve => setTimeout(resolve, 100))
+ }
+
+ setInFlight(false)
+ }
+
+ return (
+
+ )
+}
diff --git a/services/web/frontend/js/features/share-project-modal/components/edit-member.js b/services/web/frontend/js/features/share-project-modal/components/edit-member.js
new file mode 100644
index 0000000000..5c6af53bb3
--- /dev/null
+++ b/services/web/frontend/js/features/share-project-modal/components/edit-member.js
@@ -0,0 +1,184 @@
+import { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Trans, useTranslation } from 'react-i18next'
+import { useShareProjectContext } from './share-project-modal'
+import Icon from '../../../shared/components/icon'
+import TransferOwnershipModal from './transfer-ownership-modal'
+import {
+ Button,
+ Col,
+ Form,
+ FormControl,
+ FormGroup,
+ OverlayTrigger,
+ Tooltip,
+} from 'react-bootstrap'
+import { removeMemberFromProject, updateMember } from '../utils/api'
+import { useProjectContext } from '../../../shared/context/project-context'
+
+export default function EditMember({ member }) {
+ const [privileges, setPrivileges] = useState(member.privileges)
+ const [
+ confirmingOwnershipTransfer,
+ setConfirmingOwnershipTransfer,
+ ] = useState(false)
+
+ // update the local state if the member's privileges change externally
+ useEffect(() => {
+ setPrivileges(member.privileges)
+ }, [member.privileges])
+
+ const { updateProject, monitorRequest } = useShareProjectContext()
+ const project = useProjectContext()
+
+ function handleSubmit(event) {
+ event.preventDefault()
+
+ if (privileges === 'owner') {
+ setConfirmingOwnershipTransfer(true)
+ } else {
+ monitorRequest(() =>
+ updateMember(project, member, {
+ privilegeLevel: privileges,
+ })
+ ).then(() => {
+ updateProject({
+ members: project.members.map(item =>
+ item._id === member._id ? { ...item, privileges } : item
+ ),
+ })
+ })
+ }
+ }
+
+ if (confirmingOwnershipTransfer) {
+ return (
+
+
-
+
-
+
+ + +
+ -
+
+ + +
+ -
+
+ + +
+ -
+
+ + +
+ -
+
+ + +
+ -
+
+ + +
+
+ {user.allowedFreeTrial ? (
+
+
+
+
+ )
+}
+ChangePrivilegesActions.propTypes = {
+ handleReset: PropTypes.func.isRequired,
+}
diff --git a/services/web/frontend/js/features/share-project-modal/components/invite.js b/services/web/frontend/js/features/share-project-modal/components/invite.js
new file mode 100644
index 0000000000..5440beb896
--- /dev/null
+++ b/services/web/frontend/js/features/share-project-modal/components/invite.js
@@ -0,0 +1,113 @@
+import { useCallback } from 'react'
+import PropTypes from 'prop-types'
+import { useShareProjectContext } from './share-project-modal'
+import Icon from '../../../shared/components/icon'
+import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import MemberPrivileges from './member-privileges'
+import { resendInvite, revokeInvite } from '../utils/api'
+import { useProjectContext } from '../../../shared/context/project-context'
+
+export default function Invite({ invite, isAdmin }) {
+ return (
+
+
+ {invite.email}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ const link = `${window.location.origin}${path}${token}`
+
+ return (
+ + {link} ++ ) +} +AccessToken.propTypes = { + token: PropTypes.string, + tooltipId: PropTypes.string.isRequired, + path: PropTypes.string.isRequired, +} + +function LinkSharingInfo() { + return ( ++
+ {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+
+
+
+ )
+}
+SelectCollaborators.propTypes = {
+ loading: PropTypes.bool.isRequired,
+ options: PropTypes.array.isRequired,
+ placeholder: PropTypes.string,
+ multipleSelectionProps: PropTypes.shape({
+ getSelectedItemProps: PropTypes.func.isRequired,
+ getDropdownProps: PropTypes.func.isRequired,
+ addSelectedItem: PropTypes.func.isRequired,
+ removeSelectedItem: PropTypes.func.isRequired,
+ selectedItems: PropTypes.array.isRequired,
+ }).isRequired,
+}
+
+function Option({ selected, item, getItemProps, index }) {
+ return (
+
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+
+
+ {selectedItems.map((selectedItem, index) => (
+
+
+
+
+ -
+ {isOpen &&
+ filteredOptions.map((item, index) => (
+
+ ))}
+
+ {inFlight &&
+
+
+
+
+
+
+
+ {inflight &&
+
+
+
+
+ {t('no_symbols_found')}
+ )}
+
+
+
+
+ {input.length <= 0 ? (
+
+
+ {t('showing_symbol_search_results', { search: input })}
+
+ )}
+
+
+
+
+
+ {symbol.description}
+
+ {symbol.command}
+ {symbol.notes && (
+ {symbol.notes}
+ )}
+
+ }
+ >
+
+
+ {items.map((symbol, index) => (
+ {
+ handleSelect(symbol)
+ setFocusedIndex(index)
+ }}
+ handleKeyDown={handleKeyDown}
+ focused={index === focusedIndex}
+ />
+ ))}
+
+ )
+}
+SymbolPaletteItems.propTypes = {
+ items: PropTypes.arrayOf(
+ PropTypes.shape({
+ codepoint: PropTypes.string.isRequired,
+ })
+ ).isRequired,
+ handleSelect: PropTypes.func.isRequired,
+ focusInput: PropTypes.func.isRequired,
+}
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js
new file mode 100644
index 0000000000..cf5a1eb2a7
--- /dev/null
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js
@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import { FormControl } from 'react-bootstrap'
+import useDebounce from '../../../shared/hooks/use-debounce'
+
+export default function SymbolPaletteSearch({ setInput, inputRef }) {
+ const [localInput, setLocalInput] = useState('')
+
+ // debounce the search input until a typing delay
+ const debouncedLocalInput = useDebounce(localInput, 250)
+
+ useEffect(() => {
+ setInput(debouncedLocalInput)
+ }, [debouncedLocalInput, setInput])
+
+ const { t } = useTranslation()
+
+ const inputRefCallback = useCallback(
+ element => {
+ inputRef.current = element
+ },
+ [inputRef]
+ )
+
+ return (
+
+
+ )}
+
+ {error && (
+ {data.messages}
+{t('total_words')}:
+
+ {t('headers')}:
+
+ {t('math_inline')}:
+
+ {t('math_display')}:
+
+ Please see this help guide for more information", + editorContent + ) + // Do not forceReopen the document. + return + } + const removeHandler = this.$scope.$on('project:joined', () => { + this.openDoc(doc, { forceReopen: true }) + removeHandler() + }) + }) + } + + _bindToDocumentEvents(doc, sharejs_doc) { + this._attachErrorHandlerToDocument(doc, sharejs_doc) + + return sharejs_doc.on('externalUpdate', update => { + if (this._ignoreExternalUpdates) { + return + } + if ( + _.property(['meta', 'type'])(update) === 'external' && + _.property(['meta', 'source'])(update) === 'git-bridge' + ) { + return + } + return this.ide.showGenericMessageModal( + 'Document Updated Externally', + 'This document was just updated externally. Any recent changes you have made may have been overwritten. To see previous versions please look in the history.' + ) + }) + } + + _unbindFromDocumentEvents(document) { + return document.off() + } + + getCurrentDocValue() { + return this.$scope.editor.sharejs_doc != null + ? this.$scope.editor.sharejs_doc.getSnapshot() + : undefined + } + + getCurrentDocId() { + return this.$scope.editor.open_doc_id + } + + startIgnoringExternalUpdates() { + return (this._ignoreExternalUpdates = true) + } + + stopIgnoringExternalUpdates() { + return (this._ignoreExternalUpdates = false) + } + + _syncTrackChangesState(doc) { + let tryToggle + if (doc == null) { + return + } + + if (this._syncTimeout != null) { + clearTimeout(this._syncTimeout) + this._syncTimeout = null + } + + const want = this.$scope.editor.wantTrackChanges + const have = doc.getTrackingChanges() + if (want === have) { + this.$scope.editor.trackChanges = want + return + } + + return (tryToggle = () => { + const saved = doc.getInflightOp() == null && doc.getPendingOp() == null + if (saved) { + doc.setTrackingChanges(want) + return this.$scope.$apply(() => { + return (this.$scope.editor.trackChanges = want) + }) + } else { + return (this._syncTimeout = setTimeout(tryToggle, 100)) + } + })() + } + } + EditorManager.initClass() + return EditorManager +})() diff --git a/services/web/frontend/js/ide/editor/EditorShareJsCodec.js b/services/web/frontend/js/ide/editor/EditorShareJsCodec.js new file mode 100644 index 0000000000..dd2885fa60 --- /dev/null +++ b/services/web/frontend/js/ide/editor/EditorShareJsCodec.js @@ -0,0 +1,50 @@ +/* eslint-disable + max-len, + no-return-assign, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +let EditorShareJsCodec + +export default EditorShareJsCodec = { + rangeToShareJs(range, lines) { + let offset = 0 + for (let i = 0; i < lines.length; i++) { + const line = lines[i] + offset += i < range.row ? line.length : range.column + } + offset += range.row // Include newlines + return offset + }, + + changeToShareJs(delta, lines) { + const offset = EditorShareJsCodec.rangeToShareJs(delta.start, lines) + + const text = delta.lines.join('\n') + switch (delta.action) { + case 'insert': + return { i: text, p: offset } + case 'remove': + return { d: text, p: offset } + default: + throw new Error(`unknown action: ${delta.action}`) + } + }, + + shareJsOffsetToRowColumn(offset, lines) { + let row = 0 + for (row = 0; row < lines.length; row++) { + const line = lines[row] + if (offset <= line.length) { + break + } + offset -= lines[row].length + 1 + } // + 1 for newline char + return { row, column: offset } + }, +} diff --git a/services/web/frontend/js/ide/editor/ShareJsDoc.js b/services/web/frontend/js/ide/editor/ShareJsDoc.js new file mode 100644 index 0000000000..2e560b73b5 --- /dev/null +++ b/services/web/frontend/js/ide/editor/ShareJsDoc.js @@ -0,0 +1,481 @@ +/* eslint-disable + camelcase, + max-len, + no-unused-vars, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS001: Remove Babel/TypeScript constructor workaround + * DS101: Remove unnecessary use of Array.from + * DS102: Remove unnecessary code created because of implicit returns + * DS103: Rewrite code to no longer use __guard__ + * DS205: Consider reworking code to avoid use of IIFEs + * DS206: Consider reworking classes to avoid initClass + * DS207: Consider shorter variations of null checks + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +import EventEmitter from '../../utils/EventEmitter' +import ShareJs from 'libs/sharejs' +import EditorWatchdogManager from '../connection/EditorWatchdogManager' + +let ShareJsDoc +const SINGLE_USER_FLUSH_DELAY = 2000 // ms +const MULTI_USER_FLUSH_DELAY = 500 // ms + +export default ShareJsDoc = (function () { + ShareJsDoc = class ShareJsDoc extends EventEmitter { + static initClass() { + this.prototype.INFLIGHT_OP_TIMEOUT = 5000 // Retry sending ops after 5 seconds without an ack + this.prototype.WAIT_FOR_CONNECTION_TIMEOUT = 500 + + this.prototype.FATAL_OP_TIMEOUT = 30000 + } + + constructor( + doc_id, + docLines, + version, + socket, + globalEditorWatchdogManager + ) { + super() + // Dencode any binary bits of data + // See http://ecmanaut.blogspot.co.uk/2006/07/encoding-decoding-utf8-in-javascript.html + this.doc_id = doc_id + this.socket = socket + this.type = 'text' + docLines = Array.from(docLines).map(line => + decodeURIComponent(escape(line)) + ) + const snapshot = docLines.join('\n') + this.track_changes = false + + this.connection = { + send: update => { + this._startInflightOpTimeout(update) + if ( + window.disconnectOnUpdate != null && + Math.random() < window.disconnectOnUpdate + ) { + sl_console.log('Disconnecting on update', update) + window._ide.socket.socket.disconnect() + } + if ( + window.dropUpdates != null && + Math.random() < window.dropUpdates + ) { + sl_console.log('Simulating a lost update', update) + return + } + if (this.track_changes) { + if (update.meta == null) { + update.meta = {} + } + update.meta.tc = this.track_changes_id_seeds.inflight + } + return this.socket.emit( + 'applyOtUpdate', + this.doc_id, + update, + error => { + if (error != null) { + return this._handleError(error) + } + } + ) + }, + state: 'ok', + id: this.socket.publicId, + } + + this._doc = new ShareJs.Doc(this.connection, this.doc_id, { + type: this.type, + }) + this._doc.setFlushDelay(SINGLE_USER_FLUSH_DELAY) + this._doc.on('change', (...args) => { + return this.trigger('change', ...Array.from(args)) + }) + this.EditorWatchdogManager = new EditorWatchdogManager({ + parent: globalEditorWatchdogManager, + }) + this._doc.on('acknowledge', () => { + this.lastAcked = new Date() // note time of last ack from server for an op we sent + this.EditorWatchdogManager.onAck() // keep track of last ack globally + return this.trigger('acknowledge') + }) + this._doc.on('remoteop', (...args) => { + // As soon as we're working with a collaborator, start sending + // ops more frequently for low latency. + this._doc.setFlushDelay(MULTI_USER_FLUSH_DELAY) + return this.trigger('remoteop', ...Array.from(args)) + }) + this._doc.on('flipped_pending_to_inflight', () => { + return this.trigger('flipped_pending_to_inflight') + }) + this._doc.on('saved', () => { + return this.trigger('saved') + }) + this._doc.on('error', e => { + return this._handleError(e) + }) + + this._bindToDocChanges(this._doc) + + this.processUpdateFromServer({ + open: true, + v: version, + snapshot, + }) + this._removeCarriageReturnCharFromShareJsDoc() + } + + _removeCarriageReturnCharFromShareJsDoc() { + const doc = this._doc + if (doc.snapshot.indexOf('\r') === -1) { + return + } + window._ide.pushEvent('remove-carriage-return-char', { + doc_id: this.doc_id, + }) + let nextPos + while ((nextPos = doc.snapshot.indexOf('\r')) !== -1) { + sl_console.log('[ShareJsDoc] remove-carriage-return-char', nextPos) + doc.del(nextPos, 1) + } + } + + submitOp(...args) { + return this._doc.submitOp(...Array.from(args || [])) + } + + // The following code puts out of order messages into a queue + // so that they can be processed in order. This is a workaround + // for messages being delayed by redis cluster. + // FIXME: REMOVE THIS WHEN REDIS PUBSUB IS SENDING MESSAGES IN ORDER + _isAheadOfExpectedVersion(message) { + return this._doc.version > 0 && message.v > this._doc.version + } + + _pushOntoQueue(message) { + sl_console.log(`[processUpdate] push onto queue ${message.v}`) + // set a timer so that we never leave messages in the queue indefinitely + if (!this.queuedMessageTimer) { + this.queuedMessageTimer = setTimeout(() => { + sl_console.log(`[processUpdate] queue timeout fired for ${message.v}`) + // force the message to be processed after the timeout, + // it will cause an error if the missing update has not arrived + this.processUpdateFromServer(message) + }, this.INFLIGHT_OP_TIMEOUT) + } + this.queuedMessages.push(message) + // keep the queue in order, lowest version first + this.queuedMessages.sort(function (a, b) { + return a.v - b.v + }) + } + + _clearQueue() { + this.queuedMessages = [] + } + + _processQueue() { + if (this.queuedMessages.length > 0) { + const nextAvailableVersion = this.queuedMessages[0].v + if (nextAvailableVersion > this._doc.version) { + // there are updates we still can't apply yet + } else { + // there's a version we can accept on the queue, apply it + sl_console.log( + `[processUpdate] taken from queue ${nextAvailableVersion}` + ) + this.processUpdateFromServerInOrder(this.queuedMessages.shift()) + // clear the pending timer if the queue has now been cleared + if (this.queuedMessages.length === 0 && this.queuedMessageTimer) { + sl_console.log('[processUpdate] queue is empty, cleared timeout') + clearTimeout(this.queuedMessageTimer) + this.queuedMessageTimer = null + } + } + } + } + + // FIXME: This is the new method which reorders incoming updates if needed + // called from Document.js + processUpdateFromServerInOrder(message) { + // Create an array to hold queued messages + if (!this.queuedMessages) { + this.queuedMessages = [] + } + // Is this update ahead of the next expected update? + // If so, put it on a queue to be handled later. + if (this._isAheadOfExpectedVersion(message)) { + this._pushOntoQueue(message) + return // defer processing this update for now + } + var error = this.processUpdateFromServer(message) + if ( + error instanceof Error && + error.message === 'Invalid version from server' + ) { + // if there was an error, abandon the queued updates ahead of this one + this._clearQueue() + return + } + // Do we have any messages queued up? + // find the next message if available + this._processQueue() + } + + // FIXME: This is the original method. Switch back to this when redis + // issues are resolved. + processUpdateFromServer(message) { + try { + this._doc._onMessage(message) + } catch (error) { + // Version mismatches are thrown as errors + console.log(error) + this._handleError(error) + return error // return the error for queue handling + } + + if ( + __guard__(message != null ? message.meta : undefined, x => x.type) === + 'external' + ) { + return this.trigger('externalUpdate', message) + } + } + + catchUp(updates) { + return (() => { + const result = [] + for (let i = 0; i < updates.length; i++) { + const update = updates[i] + update.v = this._doc.version + update.doc = this.doc_id + result.push(this.processUpdateFromServer(update)) + } + return result + })() + } + + getSnapshot() { + return this._doc.snapshot + } + + getVersion() { + return this._doc.version + } + + getType() { + return this.type + } + + clearInflightAndPendingOps() { + this._clearFatalTimeoutTimer() + this._doc.inflightOp = null + this._doc.inflightCallbacks = [] + this._doc.pendingOp = null + return (this._doc.pendingCallbacks = []) + } + + flushPendingOps() { + // This will flush any ops that are pending. + // If there is an inflight op it will do nothing. + return this._doc.flush() + } + + updateConnectionState(state) { + sl_console.log(`[updateConnectionState] Setting state to ${state}`) + this.connection.state = state + this.connection.id = this.socket.publicId + this._doc.autoOpen = false + this._doc._connectionStateChanged(state) + return (this.lastAcked = null) // reset the last ack time when connection changes + } + + hasBufferedOps() { + return this._doc.inflightOp != null || this._doc.pendingOp != null + } + + getInflightOp() { + return this._doc.inflightOp + } + + getPendingOp() { + return this._doc.pendingOp + } + + getRecentAck() { + // check if we have received an ack recently (within a factor of two of the single user flush delay) + return ( + this.lastAcked != null && + new Date() - this.lastAcked < 2 * SINGLE_USER_FLUSH_DELAY + ) + } + + getOpSize(op) { + // compute size of an op from its components + // (total number of characters inserted and deleted) + let size = 0 + for (const component of Array.from(op || [])) { + if ((component != null ? component.i : undefined) != null) { + size += component.i.length + } + if ((component != null ? component.d : undefined) != null) { + size += component.d.length + } + } + return size + } + + _attachEditorWatchdogManager(editorName, editor) { + // end-to-end check for edits -> acks, for this very ShareJsdoc + // This will catch a broken connection and missing UX-blocker for the + // user, allowing them to keep editing. + this._detachEditorWatchdogManager = this.EditorWatchdogManager.attachToEditor( + editorName, + editor + ) + } + + _attachToEditor(editorName, editor, attachToShareJs) { + this._attachEditorWatchdogManager(editorName, editor) + + attachToShareJs() + } + + _maybeDetachEditorWatchdogManager() { + // a failed attach attempt may lead to a missing cleanup handler + if (this._detachEditorWatchdogManager) { + this._detachEditorWatchdogManager() + delete this._detachEditorWatchdogManager + } + } + + attachToAce(ace) { + this._attachToEditor('Ace', ace, () => { + this._doc.attach_ace(ace, false, window.maxDocLength) + }) + } + + detachFromAce() { + this._maybeDetachEditorWatchdogManager() + return typeof this._doc.detach_ace === 'function' + ? this._doc.detach_ace() + : undefined + } + + attachToCM(cm) { + this._attachToEditor('CM', cm, () => { + this._doc.attach_cm(cm, false) + }) + } + + detachFromCM() { + this._maybeDetachEditorWatchdogManager() + return typeof this._doc.detach_cm === 'function' + ? this._doc.detach_cm() + : undefined + } // If we're waiting for the project to join, try again in 0.5 seconds + + _startInflightOpTimeout(update) { + this._startFatalTimeoutTimer(update) + var retryOp = () => { + // Only send the update again if inflightOp is still populated + // This can be cleared when hard reloading the document in which + // case we don't want to keep trying to send it. + sl_console.log('[inflightOpTimeout] Trying op again') + if (this._doc.inflightOp != null) { + // When there is a socket.io disconnect, @_doc.inflightSubmittedIds + // is updated with the socket.io client id of the current op in flight + // (meta.source of the op). + // @connection.id is the client id of the current socket.io session. + // So we need both depending on whether the op was submitted before + // one or more disconnects, or if it was submitted during the current session. + update.dupIfSource = [ + this.connection.id, + ...Array.from(this._doc.inflightSubmittedIds), + ] + + // We must be joined to a project for applyOtUpdate to work on the real-time + // service, so don't send an op if we're not. Connection state is set to 'ok' + // when we've joined the project + if (this.connection.state !== 'ok') { + let timer + sl_console.log( + '[inflightOpTimeout] Not connected, retrying in 0.5s' + ) + return (timer = setTimeout( + retryOp, + this.WAIT_FOR_CONNECTION_TIMEOUT + )) + } else { + sl_console.log('[inflightOpTimeout] Sending') + return this.connection.send(update) + } + } + } + + const timer = setTimeout(retryOp, this.INFLIGHT_OP_TIMEOUT) + return this._doc.inflightCallbacks.push(() => { + this._clearFatalTimeoutTimer() + return clearTimeout(timer) + }) // 30 seconds + } + + _startFatalTimeoutTimer(update) { + // If an op doesn't get acked within FATAL_OP_TIMEOUT, something has + // gone unrecoverably wrong (the op will have been retried multiple times) + if (this._timeoutTimer != null) { + return + } + return (this._timeoutTimer = setTimeout(() => { + this._clearFatalTimeoutTimer() + return this.trigger('op:timeout', update) + }, this.FATAL_OP_TIMEOUT)) + } + + _clearFatalTimeoutTimer() { + if (this._timeoutTimer == null) { + return + } + clearTimeout(this._timeoutTimer) + return (this._timeoutTimer = null) + } + + _handleError(error, meta) { + if (meta == null) { + meta = {} + } + return this.trigger('error', error, meta) + } + + _bindToDocChanges(doc) { + const { submitOp } = doc + doc.submitOp = (...args) => { + this.trigger('op:sent', ...Array.from(args)) + doc.pendingCallbacks.push(() => { + return this.trigger('op:acknowledged', ...Array.from(args)) + }) + return submitOp.apply(doc, args) + } + + const { flush } = doc + return (doc.flush = (...args) => { + this.trigger('flush', doc.inflightOp, doc.pendingOp, doc.version) + return flush.apply(doc, args) + }) + } + } + ShareJsDoc.initClass() + return ShareJsDoc +})() + +function __guard__(value, transform) { + return typeof value !== 'undefined' && value !== null + ? transform(value) + : undefined +} diff --git a/services/web/frontend/js/ide/editor/components/spellMenu.js b/services/web/frontend/js/ide/editor/components/spellMenu.js new file mode 100644 index 0000000000..07fe4c5a6a --- /dev/null +++ b/services/web/frontend/js/ide/editor/components/spellMenu.js @@ -0,0 +1,46 @@ +/* eslint-disable + max-len, +*/ +// TODO: This file was created by bulk-decaffeinate. +// Fix any style issues and re-enable lint. +/* + * decaffeinate suggestions: + * DS102: Remove unnecessary code created because of implicit returns + * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md + */ +import App from '../../../base' + +export default App.component('spellMenu', { + bindings: { + open: '<', + top: '<', + left: '<', + layoutFromBottom: '<', + highlight: '<', + replaceWord: '&', + learnWord: '&', + }, + template: `\ +
+
+
\
+`,
+})
diff --git a/services/web/frontend/js/ide/editor/controllers/SavingNotificationController.js b/services/web/frontend/js/ide/editor/controllers/SavingNotificationController.js
new file mode 100644
index 0000000000..9dea747dd2
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/controllers/SavingNotificationController.js
@@ -0,0 +1,102 @@
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+import Document from '../Document'
+
+export default App.controller(
+ 'SavingNotificationController',
+ function ($scope, $interval, ide) {
+ let warnAboutUnsavedChanges
+ setInterval(() => pollSavedStatus(), 1000)
+
+ $(window).bind('beforeunload', () => {
+ return warnAboutUnsavedChanges()
+ })
+
+ let lockEditorModal = null // modal showing "connection lost"
+ let originalPermissionsLevel
+ const MAX_UNSAVED_SECONDS = 15 // lock the editor after this time if unsaved
+
+ $scope.docSavingStatus = {}
+ var pollSavedStatus = function () {
+ let t
+ const oldStatus = $scope.docSavingStatus
+ const oldUnsavedCount = $scope.docSavingStatusCount
+ const newStatus = {}
+ let newUnsavedCount = 0
+ let maxUnsavedSeconds = 0
+
+ for (const doc_id in Document.openDocs) {
+ const doc = Document.openDocs[doc_id]
+ const saving = doc.pollSavedStatus()
+ if (!saving) {
+ newUnsavedCount++
+ if (oldStatus[doc_id] != null) {
+ newStatus[doc_id] = oldStatus[doc_id]
+ t = newStatus[doc_id].unsavedSeconds += 1
+ if (t > maxUnsavedSeconds) {
+ maxUnsavedSeconds = t
+ }
+ } else {
+ newStatus[doc_id] = {
+ unsavedSeconds: 0,
+ doc: ide.fileTreeManager.findEntityById(doc_id),
+ }
+ }
+ }
+ }
+
+ if (newUnsavedCount > 0 && t > MAX_UNSAVED_SECONDS && !lockEditorModal) {
+ lockEditorModal = ide.showLockEditorMessageModal(
+ 'Connection lost',
+ 'Sorry, the connection to the server is down.'
+ )
+
+ // put editor in readOnly mode
+ originalPermissionsLevel = ide.$scope.permissionsLevel
+ ide.$scope.permissionsLevel = 'readOnly'
+
+ lockEditorModal.result.finally(() => {
+ lockEditorModal = null // unset the modal if connection comes back
+ // restore original permissions
+ ide.$scope.permissionsLevel = originalPermissionsLevel
+ })
+ }
+
+ if (lockEditorModal && newUnsavedCount === 0) {
+ lockEditorModal.dismiss('connection back up')
+ // restore original permissions if they were changed
+ if (originalPermissionsLevel) {
+ ide.$scope.permissionsLevel = originalPermissionsLevel
+ }
+ }
+
+ // for performance, only update the display if the old or new
+ // counts of unsaved files are nonzeror. If both old and new
+ // unsaved counts are zero then we know we are in a good state
+ // and don't need to do anything to the UI.
+ if (newUnsavedCount || oldUnsavedCount) {
+ $scope.docSavingStatus = newStatus
+ $scope.docSavingStatusCount = newUnsavedCount
+ return $scope.$apply()
+ }
+ }
+
+ return (warnAboutUnsavedChanges = function () {
+ if (Document.hasUnsavedChanges()) {
+ return 'You have unsaved changes. If you leave now they will not be saved.'
+ }
+ })
+ }
+)
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor.js b/services/web/frontend/js/ide/editor/directives/aceEditor.js
new file mode 100644
index 0000000000..8144f8f08d
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor.js
@@ -0,0 +1,1022 @@
+import _ from 'lodash'
+/* eslint-disable
+ camelcase,
+ max-len
+ */
+import App from '../../../base'
+import UndoManager from './aceEditor/undo/UndoManager'
+import AutoCompleteManager from './aceEditor/auto-complete/AutoCompleteManager'
+import SpellCheckManager from './aceEditor/spell-check/SpellCheckManager'
+import SpellCheckAdapter from './aceEditor/spell-check/SpellCheckAdapter'
+import HighlightsManager from './aceEditor/highlights/HighlightsManager'
+import CursorPositionManager from './aceEditor/cursor-position/CursorPositionManager'
+import CursorPositionAdapter from './aceEditor/cursor-position/CursorPositionAdapter'
+import TrackChangesManager from './aceEditor/track-changes/TrackChangesManager'
+import TrackChangesAdapter from './aceEditor/track-changes/TrackChangesAdapter'
+import MetadataManager from './aceEditor/metadata/MetadataManager'
+import 'ace/ace'
+import 'ace/ext-searchbox'
+import 'ace/ext-modelist'
+import 'ace/keybinding-vim'
+import '../../metadata/services/metadata'
+import '../../graphics/services/graphics'
+import '../../preamble/services/preamble'
+import '../../files/services/files'
+let syntaxValidationEnabled
+const { EditSession } = ace.require('ace/edit_session')
+const ModeList = ace.require('ace/ext/modelist')
+const { Vim } = ace.require('ace/keyboard/vim')
+const SearchBox = ace.require('ace/ext/searchbox')
+
+// Set the base path that ace will fetch modes/snippets/workers from
+if (window.aceBasePath !== '') {
+ syntaxValidationEnabled = true
+ ace.config.set('basePath', `${window.aceBasePath}`)
+} else {
+ syntaxValidationEnabled = false
+}
+
+// By default, don't use workers - enable them per-session as required
+ace.config.setDefaultValue('session', 'useWorker', false)
+
+// Ace loads its script itself, so we need to hook in to be able to clear
+// the cache.
+if (ace.config._moduleUrl == null) {
+ ace.config._moduleUrl = ace.config.moduleUrl
+ ace.config.moduleUrl = function (...args) {
+ const url = ace.config._moduleUrl(...Array.from(args || []))
+ return url
+ }
+}
+
+App.directive(
+ 'aceEditor',
+ function (
+ ide,
+ $timeout,
+ $compile,
+ $rootScope,
+ eventTracking,
+ localStorage,
+ $cacheFactory,
+ metadata,
+ graphics,
+ preamble,
+ files,
+ $http,
+ $q,
+ $window
+ ) {
+ monkeyPatchSearch($rootScope, $compile)
+
+ return {
+ scope: {
+ theme: '=',
+ showPrintMargin: '=',
+ keybindings: '=',
+ fontSize: '=',
+ autoComplete: '=',
+ autoPairDelimiters: '=',
+ sharejsDoc: '=',
+ spellCheck: '=',
+ spellCheckLanguage: '=',
+ highlights: '=',
+ text: '=',
+ readOnly: '=',
+ annotations: '=',
+ navigateHighlights: '=',
+ fileName: '=',
+ onCtrlEnter: '=', // Compile
+ onCtrlJ: '=', // Toggle the review panel
+ onCtrlShiftC: '=', // Add a new comment
+ onCtrlShiftA: '=', // Toggle track-changes on/off
+ onSave: '=', // Cmd/Ctrl-S or :w in Vim
+ syntaxValidation: '=',
+ reviewPanel: '=',
+ eventsBridge: '=',
+ trackChanges: '=',
+ docId: '=',
+ rendererData: '=',
+ lineHeight: '=',
+ fontFamily: '=',
+ },
+ link(scope, element, attrs) {
+ // Don't freak out if we're already in an apply callback
+ let spellCheckManager
+ scope.$originalApply = scope.$apply
+ scope.$apply = function (fn) {
+ if (fn == null) {
+ fn = function () {}
+ }
+ const phase = this.$root.$$phase
+ if (phase === '$apply' || phase === '$digest') {
+ return fn()
+ } else {
+ return this.$originalApply(fn)
+ }
+ }
+
+ const editor = ace.edit(element.find('.ace-editor-body')[0])
+ editor.$blockScrolling = Infinity
+
+ // Besides the main editor, other elements will re-use this directive
+ // for displaying read-only content -- e.g. the history panes.
+ const editorAcceptsChanges = attrs.aceEditor === 'editor'
+ if (editorAcceptsChanges) {
+ // end-to-end check for edits -> acks, globally on any doc
+ // This may catch a missing attached ShareJsDoc that in turn bails out
+ // on missing acks.
+ ide.globalEditorWatchdogManager.attachToEditor('Ace', editor)
+ }
+
+ // auto-insertion of braces, brackets, dollars
+ editor.setOption('behavioursEnabled', scope.autoPairDelimiters || false)
+ editor.setOption('wrapBehavioursEnabled', false)
+
+ ide.$scope.$on('editor:replace-selection', (event, text) => {
+ editor.focus()
+ const document = editor.session.getDocument()
+ const ranges = editor.selection.getAllRanges()
+ for (const range of ranges) {
+ document.replace(range, text)
+ }
+ })
+
+ ide.$scope.$on('symbol-palette-toggled', (event, isToggled) => {
+ if (!isToggled) {
+ editor.focus()
+ }
+ })
+
+ scope.$watch('autoPairDelimiters', autoPairDelimiters => {
+ if (autoPairDelimiters) {
+ return editor.setOption('behavioursEnabled', true)
+ } else {
+ return editor.setOption('behavioursEnabled', false)
+ }
+ })
+
+ if (!window._debug_editors) {
+ window._debug_editors = []
+ }
+ window._debug_editors.push(editor)
+
+ scope.name = attrs.aceEditor
+
+ if (scope.spellCheck) {
+ // only enable spellcheck when explicitly required
+ spellCheckManager = new SpellCheckManager(
+ scope,
+ $cacheFactory,
+ $http,
+ $q,
+ new SpellCheckAdapter(editor)
+ )
+ }
+
+ /* eslint-disable no-unused-vars */
+ const undoManager = new UndoManager(editor)
+ const highlightsManager = new HighlightsManager(scope, editor, element)
+ const cursorPositionManager = new CursorPositionManager(
+ scope,
+ new CursorPositionAdapter(editor),
+ localStorage
+ )
+ const trackChangesManager = new TrackChangesManager(
+ scope,
+ editor,
+ element,
+ new TrackChangesAdapter(editor)
+ )
+
+ const metadataManager = new MetadataManager(
+ scope,
+ editor,
+ element,
+ metadata
+ )
+ const autoCompleteManager = new AutoCompleteManager(
+ scope,
+ editor,
+ element,
+ metadataManager,
+ graphics,
+ preamble,
+ files
+ )
+
+ // prevent user entering null and non-BMP unicode characters in Ace
+ const BAD_CHARS_REGEXP = /[\0\uD800-\uDFFF]/g
+ const BAD_CHARS_REPLACEMENT_CHAR = '\uFFFD'
+ // the 'exec' event fires for ace functions before they are executed.
+ // you can modify the input or reject the event with e.preventDefault()
+ editor.commands.on('exec', function (e) {
+ // replace bad characters in paste content
+ if (e.command && e.command.name === 'paste') {
+ BAD_CHARS_REGEXP.lastIndex = 0 // reset stateful regexp for this usage
+ if (e.args && BAD_CHARS_REGEXP.test(e.args.text)) {
+ e.args.text = e.args.text.replace(
+ BAD_CHARS_REGEXP,
+ BAD_CHARS_REPLACEMENT_CHAR
+ )
+ }
+ }
+ // replace bad characters in keyboard input
+ if (e.command && e.command.name === 'insertstring') {
+ BAD_CHARS_REGEXP.lastIndex = 0 // reset stateful regexp for this usage
+ if (e.args && BAD_CHARS_REGEXP.test(e.args)) {
+ e.args = e.args.replace(
+ BAD_CHARS_REGEXP,
+ BAD_CHARS_REPLACEMENT_CHAR
+ )
+ }
+ }
+ })
+
+ /* eslint-enable no-unused-vars */
+
+ scope.$watch('onSave', function (callback) {
+ if (callback != null) {
+ Vim.defineEx('write', 'w', callback)
+ editor.commands.addCommand({
+ name: 'save',
+ bindKey: {
+ win: 'Ctrl-S',
+ mac: 'Command-S',
+ },
+ exec: callback,
+ readOnly: true,
+ })
+ // Not technically 'save', but Ctrl-. recompiles in OL v1
+ // so maintain compatibility
+ return editor.commands.addCommand({
+ name: 'recompile_v1',
+ bindKey: {
+ win: 'Ctrl-.',
+ mac: 'Ctrl-.',
+ },
+ exec: callback,
+ readOnly: true,
+ })
+ }
+ })
+ editor.commands.removeCommand('transposeletters')
+ editor.commands.removeCommand('showSettingsMenu')
+ editor.commands.removeCommand('foldall')
+
+ // For European keyboards, the / is above 7 so needs Shift pressing.
+ // This comes through as Command-Shift-/ on OS X, which is mapped to
+ // toggleBlockComment.
+ // This doesn't do anything for LaTeX, so remap this to togglecomment to
+ // work for European keyboards as normal.
+ // On Windows, the key combo comes as Ctrl-Shift-7.
+ editor.commands.removeCommand('toggleBlockComment')
+ editor.commands.removeCommand('togglecomment')
+
+ editor.commands.addCommand({
+ name: 'togglecomment',
+ bindKey: {
+ win: 'Ctrl-/|Ctrl-Shift-7',
+ mac: 'Command-/|Command-Shift-/',
+ },
+ exec(editor) {
+ return editor.toggleCommentLines()
+ },
+ multiSelectAction: 'forEachLine',
+ scrollIntoView: 'selectionPart',
+ })
+
+ // Trigger search AND replace on CMD+F
+ editor.commands.addCommand({
+ name: 'find',
+ bindKey: {
+ win: 'Ctrl-F',
+ mac: 'Command-F',
+ },
+ exec(editor) {
+ return SearchBox.Search(editor, true)
+ },
+ readOnly: true,
+ })
+
+ // Bold text on CMD+B
+ editor.commands.addCommand({
+ name: 'bold',
+ bindKey: {
+ win: 'Ctrl-B',
+ mac: 'Command-B',
+ },
+ exec(editor) {
+ const selection = editor.getSelection()
+ if (selection.isEmpty()) {
+ editor.insert('\\textbf{}')
+ return editor.navigateLeft(1)
+ } else {
+ const text = editor.getCopyText()
+ return editor.insert(`\\textbf{${text}}`)
+ }
+ },
+ readOnly: false,
+ })
+
+ // Italicise text on CMD+I
+ editor.commands.addCommand({
+ name: 'italics',
+ bindKey: {
+ win: 'Ctrl-I',
+ mac: 'Command-I',
+ },
+ exec(editor) {
+ const selection = editor.getSelection()
+ if (selection.isEmpty()) {
+ editor.insert('\\textit{}')
+ return editor.navigateLeft(1)
+ } else {
+ const text = editor.getCopyText()
+ return editor.insert(`\\textit{${text}}`)
+ }
+ },
+ readOnly: false,
+ })
+
+ scope.$watch('onCtrlEnter', function (callback) {
+ if (callback != null) {
+ return editor.commands.addCommand({
+ name: 'compile',
+ bindKey: {
+ win: 'Ctrl-Enter',
+ mac: 'Command-Enter',
+ },
+ exec: editor => {
+ return callback()
+ },
+ readOnly: true,
+ })
+ }
+ })
+
+ scope.$watch('onCtrlJ', function (callback) {
+ if (callback != null) {
+ return editor.commands.addCommand({
+ name: 'toggle-review-panel',
+ bindKey: {
+ win: 'Ctrl-J',
+ mac: 'Command-J',
+ },
+ exec: editor => {
+ return callback()
+ },
+ readOnly: true,
+ })
+ }
+ })
+
+ scope.$watch('onCtrlShiftC', function (callback) {
+ if (callback != null) {
+ return editor.commands.addCommand({
+ name: 'add-new-comment',
+ bindKey: {
+ win: 'Ctrl-Shift-C',
+ mac: 'Command-Shift-C',
+ },
+ exec: editor => {
+ return callback()
+ },
+ readOnly: true,
+ })
+ }
+ })
+
+ scope.$watch('onCtrlShiftA', function (callback) {
+ if (callback != null) {
+ return editor.commands.addCommand({
+ name: 'toggle-track-changes',
+ bindKey: {
+ win: 'Ctrl-Shift-A',
+ mac: 'Command-Shift-A',
+ },
+ exec: editor => {
+ return callback()
+ },
+ readOnly: true,
+ })
+ }
+ })
+
+ // Make '/' work for search in vim mode.
+ editor.showCommandLine = arg => {
+ if (arg === '/') {
+ return SearchBox.Search(editor, true)
+ }
+ }
+
+ const getCursorScreenPosition = function () {
+ const session = editor.getSession()
+ const cursorPosition = session.selection.getCursor()
+ const sessionPos = session.documentToScreenPosition(
+ cursorPosition.row,
+ cursorPosition.column
+ )
+ return (
+ sessionPos.row * editor.renderer.lineHeight - session.getScrollTop()
+ )
+ }
+
+ if (attrs.resizeOn != null) {
+ for (const event of Array.from(attrs.resizeOn.split(','))) {
+ scope.$on(event, function () {
+ scope.$applyAsync(() => {
+ const previousScreenPosition = getCursorScreenPosition()
+ editor.resize()
+ // Put cursor back to same vertical position on screen
+ const newScreenPosition = getCursorScreenPosition()
+ const session = editor.getSession()
+ return session.setScrollTop(
+ session.getScrollTop() +
+ newScreenPosition -
+ previousScreenPosition
+ )
+ })
+ })
+ }
+ }
+
+ scope.$on(`${scope.name}:set-scroll-size`, function (e, size) {
+ // Make sure that the editor has enough scroll margin above and below
+ // to scroll the review panel with the given size
+ const marginTop = size.overflowTop
+ const { maxHeight } = editor.renderer.layerConfig
+ const marginBottom = Math.max(size.height - maxHeight, 0)
+ return setScrollMargins(marginTop, marginBottom)
+ })
+
+ var setScrollMargins = function (marginTop, marginBottom) {
+ let marginChanged = false
+ if (editor.renderer.scrollMargin.top !== marginTop) {
+ editor.renderer.scrollMargin.top = marginTop
+ marginChanged = true
+ }
+ if (editor.renderer.scrollMargin.bottom !== marginBottom) {
+ editor.renderer.scrollMargin.bottom = marginBottom
+ marginChanged = true
+ }
+ if (marginChanged) {
+ return editor.renderer.updateFull()
+ }
+ }
+
+ const resetScrollMargins = () => setScrollMargins(0, 0)
+
+ scope.$watch('theme', value => editor.setTheme(`ace/theme/${value}`))
+
+ scope.$watch('showPrintMargin', value =>
+ editor.setShowPrintMargin(value)
+ )
+
+ scope.$watch('keybindings', function (value) {
+ if (['vim', 'emacs'].includes(value)) {
+ return editor.setKeyboardHandler(`ace/keyboard/${value}`)
+ } else {
+ return editor.setKeyboardHandler(null)
+ }
+ })
+
+ scope.$watch('fontSize', value =>
+ element.find('.ace_editor, .ace_content').css({
+ 'font-size': value + 'px',
+ })
+ )
+
+ scope.$watch('fontFamily', function (value) {
+ const monospaceFamilies = [
+ 'Monaco',
+ 'Menlo',
+ 'Ubuntu Mono',
+ 'Consolas',
+ 'monospace',
+ ]
+
+ if (value != null) {
+ switch (value) {
+ case 'monaco':
+ return editor.setOption(
+ 'fontFamily',
+ monospaceFamilies.join(', ')
+ )
+ case 'lucida':
+ return editor.setOption(
+ 'fontFamily',
+ '"Lucida Console", "Source Code Pro", monospace'
+ )
+ default:
+ return editor.setOption('fontFamily', null)
+ }
+ }
+ })
+
+ scope.$watch('lineHeight', function (value) {
+ if (value != null) {
+ switch (value) {
+ case 'compact':
+ editor.container.style.lineHeight = 1.33
+ break
+ case 'normal':
+ editor.container.style.lineHeight = 1.6
+ break
+ case 'wide':
+ editor.container.style.lineHeight = 2
+ break
+ default:
+ editor.container.style.lineHeight = 1.6
+ }
+ return editor.renderer.updateFontSize()
+ }
+ })
+
+ scope.$watch('sharejsDoc', function (sharejs_doc, old_sharejs_doc) {
+ if (old_sharejs_doc != null) {
+ scope.$broadcast('beforeChangeDocument')
+ detachFromAce(old_sharejs_doc)
+ }
+ if (sharejs_doc != null) {
+ attachToAce(sharejs_doc)
+ }
+ if (sharejs_doc != null && old_sharejs_doc != null) {
+ return scope.$broadcast('afterChangeDocument')
+ }
+ })
+
+ scope.$watch('text', function (text) {
+ if (text != null) {
+ editor.setValue(text, -1)
+ const session = editor.getSession()
+ return session.setUseWrapMode(true)
+ }
+ })
+
+ scope.$watch('annotations', function (annotations) {
+ const session = editor.getSession()
+ return session.setAnnotations(annotations)
+ })
+
+ scope.$watch('readOnly', value => editor.setReadOnly(!!value))
+
+ scope.$watch('syntaxValidation', function (value) {
+ // ignore undefined settings here
+ // only instances of ace with an explicit value should set useWorker
+ // the history instance will have syntaxValidation undefined
+ if (value != null && syntaxValidationEnabled) {
+ const session = editor.getSession()
+ return session.setOption('useWorker', value)
+ }
+ })
+
+ editor.setOption('scrollPastEnd', true)
+
+ let updateCount = 0
+ const onChange = function () {
+ updateCount++
+
+ if (updateCount === 100) {
+ eventTracking.send('editor-interaction', 'multi-doc-update')
+ }
+ return scope.$emit(`${scope.name}:change`)
+ }
+
+ let currentFirstVisibleRow = null
+ const emitMiddleVisibleRowChanged = () => {
+ const firstVisibleRow = editor.getFirstVisibleRow()
+ if (firstVisibleRow === currentFirstVisibleRow) return
+
+ currentFirstVisibleRow = firstVisibleRow
+ const lastVisibleRow = editor.getLastVisibleRow()
+ scope.$emit(
+ `scroll:editor:update`,
+ Math.floor((firstVisibleRow + lastVisibleRow) / 2)
+ )
+ }
+
+ const onScroll = function (scrollTop) {
+ if (scope.eventsBridge == null) {
+ return
+ }
+ const height = editor.renderer.layerConfig.maxHeight
+ emitMiddleVisibleRowChanged()
+ return scope.eventsBridge.emit('aceScroll', scrollTop, height)
+ }
+
+ const onScrollbarVisibilityChanged = function (event, vRenderer) {
+ if (scope.eventsBridge == null) {
+ return
+ }
+ return scope.eventsBridge.emit(
+ 'aceScrollbarVisibilityChanged',
+ vRenderer.scrollBarV.isVisible,
+ vRenderer.scrollBarV.width
+ )
+ }
+
+ if (scope.eventsBridge != null) {
+ editor.renderer.on(
+ 'scrollbarVisibilityChanged',
+ onScrollbarVisibilityChanged
+ )
+
+ scope.eventsBridge.on('externalScroll', position =>
+ editor.getSession().setScrollTop(position)
+ )
+ scope.eventsBridge.on('refreshScrollPosition', function () {
+ const session = editor.getSession()
+ session.setScrollTop(session.getScrollTop() + 1)
+ return session.setScrollTop(session.getScrollTop() - 1)
+ })
+ }
+
+ const onSessionChangeForSpellCheck = function (e) {
+ spellCheckManager.onSessionChange()
+ if (e.oldSession != null) {
+ e.oldSession.getDocument().off('change', spellCheckManager.onChange)
+ }
+ e.session.getDocument().on('change', spellCheckManager.onChange)
+ if (e.oldSession != null) {
+ e.oldSession.off('changeScrollTop', spellCheckManager.onScroll)
+ }
+ return e.session.on('changeScrollTop', spellCheckManager.onScroll)
+ }
+
+ const initSpellCheck = function () {
+ if (!spellCheckManager) return
+ spellCheckManager.init()
+ editor.on('changeSession', onSessionChangeForSpellCheck)
+ onSessionChangeForSpellCheck({
+ session: editor.getSession(),
+ }) // Force initial setup
+ return editor.on('nativecontextmenu', spellCheckManager.onContextMenu)
+ }
+
+ const tearDownSpellCheck = function () {
+ if (!spellCheckManager) return
+ editor.off('changeSession', onSessionChangeForSpellCheck)
+ return editor.off(
+ 'nativecontextmenu',
+ spellCheckManager.onContextMenu
+ )
+ }
+
+ const initTrackChanges = function () {
+ trackChangesManager.rangesTracker = scope.sharejsDoc.ranges
+
+ // Force onChangeSession in order to set up highlights etc.
+ trackChangesManager.onChangeSession()
+
+ if (!trackChangesManager) return
+ editor.on('changeSelection', trackChangesManager.onChangeSelection)
+
+ // Selection also moves with updates elsewhere in the document
+ editor.on('change', trackChangesManager.onChangeSelection)
+
+ editor.on('changeSession', trackChangesManager.onChangeSession)
+ editor.on('cut', trackChangesManager.onCut)
+ editor.on('paste', trackChangesManager.onPaste)
+ editor.renderer.on('resize', trackChangesManager.onResize)
+ }
+
+ const tearDownTrackChanges = function () {
+ if (!trackChangesManager) return
+ trackChangesManager.tearDown()
+ editor.off('changeSelection', trackChangesManager.onChangeSelection)
+
+ editor.off('change', trackChangesManager.onChangeSelection)
+ editor.off('changeSession', trackChangesManager.onChangeSession)
+ editor.off('cut', trackChangesManager.onCut)
+ editor.off('paste', trackChangesManager.onPaste)
+ editor.renderer.off('resize', trackChangesManager.onResize)
+ }
+
+ const initUndo = function () {
+ // Emulate onChangeSession event. Note: listening to changeSession
+ // event is unnecessary since this method is called when we switch
+ // sessions (via ShareJS changing) anyway
+ undoManager.onChangeSession(editor.getSession())
+ editor.on('change', undoManager.onChange)
+ }
+
+ const tearDownUndo = function () {
+ editor.off('change', undoManager.onChange)
+ }
+
+ const onSessionChangeForCursorPosition = function (e) {
+ if (e.oldSession != null) {
+ e.oldSession.selection.off(
+ 'changeCursor',
+ cursorPositionManager.onCursorChange
+ )
+ }
+ return e.session.selection.on(
+ 'changeCursor',
+ cursorPositionManager.onCursorChange
+ )
+ }
+
+ const onUnloadForCursorPosition = () =>
+ cursorPositionManager.onUnload(editor.getSession())
+
+ const initCursorPosition = function () {
+ editor.on('changeSession', onSessionChangeForCursorPosition)
+
+ // Force initial setup
+ onSessionChangeForCursorPosition({ session: editor.getSession() })
+
+ return $(window).on('unload', onUnloadForCursorPosition)
+ }
+
+ const tearDownCursorPosition = function () {
+ editor.off('changeSession', onSessionChangeForCursorPosition)
+ return $(window).off('unload', onUnloadForCursorPosition)
+ }
+
+ initCursorPosition()
+
+ // Trigger the event once *only* - this is called after Ace is connected
+ // to the ShareJs instance but this event should only be triggered the
+ // first time the editor is opened. Not every time the docs opened
+ const triggerEditorInitEvent = _.once(() =>
+ scope.$broadcast('editorInit')
+ )
+
+ var attachToAce = function (sharejs_doc) {
+ let mode
+ const lines = sharejs_doc.getSnapshot().split('\n')
+ let session = editor.getSession()
+ if (session != null) {
+ session.destroy()
+ }
+
+ // see if we can lookup a suitable mode from ace
+ // but fall back to text by default
+ try {
+ if (/\.(Rtex|bbl|tikz)$/i.test(scope.fileName)) {
+ // recognise Rtex and bbl as latex
+ mode = 'ace/mode/latex'
+ } else if (/\.(sty|cls|clo)$/.test(scope.fileName)) {
+ // recognise some common files as tex
+ mode = 'ace/mode/tex'
+ } else {
+ ;({ mode } = ModeList.getModeForPath(scope.fileName))
+ // we prefer plain_text mode over text mode because ace's
+ // text mode is actually for code and has unwanted
+ // indenting (see wrapMethod in ace edit_session.js)
+ if (mode === 'ace/mode/text') {
+ mode = 'ace/mode/plain_text'
+ }
+ }
+ } catch (error) {
+ mode = 'ace/mode/plain_text'
+ }
+
+ // create our new session
+ session = new EditSession(lines, mode)
+
+ session.setUseWrapMode(true)
+ // use syntax validation only when explicitly set
+ if (
+ scope.syntaxValidation != null &&
+ syntaxValidationEnabled &&
+ !/\.bib$/.test(scope.fileName)
+ ) {
+ session.setOption('useWorker', scope.syntaxValidation)
+ }
+
+ // set to readonly until document change handlers are attached
+ editor.setReadOnly(true)
+
+ // now attach session to editor
+ editor.setSession(session)
+
+ const doc = session.getDocument()
+ doc.on('change', onChange)
+
+ editor.initing = true
+ sharejs_doc.attachToAce(editor)
+ editor.initing = false
+
+ // now ready to edit document
+ // respect the readOnly setting, normally false
+ editor.setReadOnly(scope.readOnly)
+ triggerEditorInitEvent()
+
+ if (!scope.readOnly) {
+ initSpellCheck()
+ }
+
+ initTrackChanges()
+ initUndo()
+
+ resetScrollMargins()
+
+ // need to set annotations after attaching because attaching
+ // deletes and then inserts document content
+ session.setAnnotations(scope.annotations)
+
+ session.on('changeScrollTop', eventTracking.editingSessionHeartbeat)
+
+ angular
+ .element($window)
+ .on('click', eventTracking.editingSessionHeartbeat)
+
+ scope.$on('$destroy', () =>
+ angular
+ .element($window)
+ .off('click', eventTracking.editingSessionHeartbeat)
+ )
+
+ if (scope.eventsBridge != null) {
+ session.on('changeScrollTop', onScroll)
+ }
+
+ $rootScope.hasLintingError = false
+ session.on('changeAnnotation', function () {
+ // Both linter errors and compile logs are set as error annotations,
+ // however when the user types something, the compile logs are
+ // replaced with linter errors. When we check for lint errors before
+ // autocompile we are guaranteed to get linter errors
+ const hasErrors =
+ session
+ .getAnnotations()
+ .filter(annotation => annotation.type !== 'info').length > 0
+
+ if ($rootScope.hasLintingError !== hasErrors) {
+ return ($rootScope.hasLintingError = hasErrors)
+ }
+ })
+
+ setTimeout(() =>
+ // Let any listeners init themselves
+ onScroll(editor.renderer.getScrollTop())
+ )
+
+ return editor.focus()
+ }
+
+ var detachFromAce = function (sharejs_doc) {
+ tearDownSpellCheck()
+ tearDownTrackChanges()
+ tearDownUndo()
+ sharejs_doc.detachFromAce()
+ sharejs_doc.off('remoteop.recordRemote')
+
+ const session = editor.getSession()
+ session.off('changeScrollTop')
+
+ const doc = session.getDocument()
+ return doc.off('change', onChange)
+ }
+
+ if (scope.rendererData != null) {
+ editor.renderer.on('changeCharacterSize', () => {
+ scope.$apply(
+ () => (scope.rendererData.lineHeight = editor.renderer.lineHeight)
+ )
+ })
+ }
+
+ scope.$watch('rendererData', function (rendererData) {
+ if (rendererData != null) {
+ return (rendererData.lineHeight = editor.renderer.lineHeight)
+ }
+ })
+
+ scope.$on('$destroy', function () {
+ if (scope.sharejsDoc != null) {
+ scope.$broadcast('changeEditor')
+ tearDownSpellCheck()
+ tearDownCursorPosition()
+ tearDownUndo()
+ detachFromAce(scope.sharejsDoc)
+ const session = editor.getSession()
+ if (session != null) {
+ session.destroy()
+ }
+ return scope.eventsBridge.emit(
+ 'aceScrollbarVisibilityChanged',
+ false,
+ 0
+ )
+ }
+ })
+
+ return scope.$emit(`${scope.name}:inited`, editor)
+ },
+
+ template: `\
+
+
\
+`,
+ }
+ }
+)
+
+function monkeyPatchSearch($rootScope, $compile) {
+ const searchHtml = `\
+\
+`
+
+ // Remove Ace CSS
+ $('#ace_searchbox').remove()
+
+ const SB = SearchBox.SearchBox
+ const { $init } = SB.prototype
+ SB.prototype.$init = function () {
+ this.element = $compile(searchHtml)($rootScope.$new())[0]
+ return $init.apply(this)
+ }
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/AutoCompleteManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/AutoCompleteManager.js
new file mode 100644
index 0000000000..b508ee159c
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/AutoCompleteManager.js
@@ -0,0 +1,475 @@
+import _ from 'lodash'
+import CommandManager from './CommandManager'
+import EnvironmentManager from './EnvironmentManager'
+import PackageManager from './PackageManager'
+import Helpers from './Helpers'
+import 'ace/ace'
+import 'ace/ext-language_tools'
+const { Range } = ace.require('ace/range')
+const aceSnippetManager = ace.require('ace/snippets').snippetManager
+
+class AutoCompleteManager {
+ constructor(
+ $scope,
+ editor,
+ element,
+ metadataManager,
+ graphics,
+ preamble,
+ files
+ ) {
+ this.$scope = $scope
+ this.editor = editor
+ this.element = element
+ this.metadataManager = metadataManager
+ this.graphics = graphics
+ this.preamble = preamble
+ this.files = files
+ this.monkeyPatchAutocomplete()
+
+ this.$scope.$watch('autoComplete', autocomplete => {
+ if (autocomplete) {
+ this.enable()
+ } else {
+ this.disable()
+ }
+ })
+
+ const onChange = change => {
+ this.onChange(change)
+ }
+
+ this.editor.on('changeSession', e => {
+ e.oldSession.off('change', onChange)
+ e.session.on('change', onChange)
+ })
+ }
+
+ enable() {
+ this.editor.setOptions({
+ enableBasicAutocompletion: true,
+ enableSnippets: true,
+ enableLiveAutocompletion: false,
+ })
+
+ const CommandCompleter = new CommandManager(this.metadataManager)
+ const SnippetCompleter = new EnvironmentManager()
+ const PackageCompleter = new PackageManager(this.metadataManager, Helpers)
+
+ const Graphics = this.graphics
+ const Preamble = this.preamble
+ const Files = this.files
+
+ const GraphicsCompleter = {
+ getCompletions(editor, session, pos, prefix, callback) {
+ const { commandFragment } = Helpers.getContext(editor, pos)
+ if (commandFragment) {
+ const match = commandFragment.match(
+ /^~?\\(includegraphics(?:\[.*])?){([^}]*, *)?(\w*)/
+ )
+ if (match) {
+ // eslint-disable-next-line no-unused-vars
+ const commandName = match[1]
+ const graphicsPaths = Preamble.getGraphicsPaths()
+ const result = []
+ for (const graphic of Graphics.getGraphicsFiles()) {
+ let { path } = graphic
+ for (const graphicsPath of graphicsPaths) {
+ if (path.indexOf(graphicsPath) === 0) {
+ path = path.slice(graphicsPath.length)
+ break
+ }
+ }
+ result.push({
+ caption: `\\${commandName}{${path}}`,
+ value: `\\${commandName}{${path}}`,
+ meta: 'graphic',
+ score: 50,
+ })
+ }
+ callback(null, result)
+ }
+ }
+ },
+ }
+
+ const { metadataManager } = this
+ const FilesCompleter = {
+ getCompletions: (editor, session, pos, prefix, callback) => {
+ const { commandFragment } = Helpers.getContext(editor, pos)
+ if (commandFragment) {
+ const match = commandFragment.match(/^\\(input|include){(\w*)/)
+ if (match) {
+ // eslint-disable-next-line no-unused-vars
+ const commandName = match[1]
+ const result = []
+ for (const file of Files.getTeXFiles()) {
+ if (file.id !== this.$scope.docId && !file.deleted && file.path) {
+ const { path } = file
+ const cleanPath = path.replace(/(.+)\.tex$/i, '$1')
+ result.push({
+ caption: `\\${commandName}{${path}}`,
+ value: `\\${commandName}{${cleanPath}}`,
+ meta: 'file',
+ score: 50,
+ })
+ }
+ }
+ callback(null, result)
+ }
+ }
+ },
+ }
+
+ const LabelsCompleter = {
+ getCompletions(editor, session, pos, prefix, callback) {
+ const { commandFragment } = Helpers.getContext(editor, pos)
+ if (commandFragment) {
+ const refMatch = commandFragment.match(
+ /^~?\\([a-zA-Z]*ref){([^}]*, *)?(\w*)/
+ )
+ if (refMatch) {
+ // eslint-disable-next-line no-unused-vars
+ const commandName = refMatch[1]
+ const result = []
+ if (commandName !== 'ref') {
+ // ref is in top 100 commands
+ result.push({
+ caption: `\\${commandName}{}`,
+ snippet: `\\${commandName}{}`,
+ meta: 'cross-reference',
+ score: 60,
+ })
+ }
+ for (const label of metadataManager.getAllLabels()) {
+ result.push({
+ caption: `\\${commandName}{${label}}`,
+ value: `\\${commandName}{${label}}`,
+ meta: 'cross-reference',
+ score: 50,
+ })
+ }
+ callback(null, result)
+ }
+ }
+ },
+ }
+
+ const references = this.$scope.$root._references
+ const ReferencesCompleter = {
+ getCompletions(editor, session, pos, prefix, callback) {
+ const { commandFragment } = Helpers.getContext(editor, pos)
+ if (commandFragment) {
+ const citeMatch = commandFragment.match(
+ /^~?\\([a-z]*cite[a-z]*(?:\[.*])?){([^}]*, *)?(\w*)/
+ )
+ if (citeMatch) {
+ // eslint-disable-next-line no-unused-vars
+ let [_ignore, commandName, previousArgs] = citeMatch
+ if (previousArgs == null) {
+ previousArgs = ''
+ }
+ const previousArgsCaption =
+ previousArgs.length > 8 ? '…,' : previousArgs
+ const result = []
+ result.push({
+ caption: `\\${commandName}{}`,
+ snippet: `\\${commandName}{}`,
+ meta: 'reference',
+ score: 60,
+ })
+ if (references.keys && references.keys.length > 0) {
+ references.keys.forEach(function (key) {
+ if (key != null) {
+ result.push({
+ caption: `\\${commandName}{${previousArgsCaption}${key}}`,
+ value: `\\${commandName}{${previousArgs}${key}}`,
+ meta: 'reference',
+ score: 50,
+ })
+ }
+ })
+ callback(null, result)
+ } else {
+ callback(null, result)
+ }
+ }
+ }
+ },
+ }
+
+ this.editor.completers = [
+ CommandCompleter,
+ SnippetCompleter,
+ PackageCompleter,
+ ReferencesCompleter,
+ LabelsCompleter,
+ GraphicsCompleter,
+ FilesCompleter,
+ ]
+ }
+
+ disable() {
+ return this.editor.setOptions({
+ enableBasicAutocompletion: false,
+ enableSnippets: false,
+ })
+ }
+
+ onChange(change) {
+ let i
+ const cursorPosition = this.editor.getCursorPosition()
+ const { end } = change
+ const { lineUpToCursor, commandFragment } = Helpers.getContext(
+ this.editor,
+ end
+ )
+ if (
+ (i = lineUpToCursor.indexOf('%')) > -1 &&
+ lineUpToCursor[i - 1] !== '\\'
+ ) {
+ return
+ }
+ const lastCharIsBackslash = lineUpToCursor.slice(-1) === '\\'
+ const lastTwoChars = lineUpToCursor.slice(-2)
+ // Don't offer autocomplete on double-backslash, backslash-colon, etc
+ if (/^\\[^a-zA-Z]$/.test(lastTwoChars)) {
+ if (this.editor.completer) {
+ this.editor.completer.detach()
+ }
+ return
+ }
+ // Check that this change was made by us, not a collaborator
+ // (Cursor is still one place behind)
+ // NOTE: this is also the case when a user backspaces over a highlighted
+ // region
+ if (
+ change.origin !== 'remote' &&
+ change.action === 'insert' &&
+ end.row === cursorPosition.row &&
+ end.column === cursorPosition.column + 1
+ ) {
+ if (
+ (commandFragment != null ? commandFragment.length : undefined) > 2 ||
+ lastCharIsBackslash
+ ) {
+ setTimeout(() => {
+ this.editor.execCommand('startAutocomplete')
+ }, 0)
+ }
+ }
+ const match = change.lines[0].match(/\\(\w+){}/)
+ if (
+ change.action === 'insert' &&
+ match &&
+ match[1] &&
+ // eslint-disable-next-line max-len
+ /(begin|end|[a-zA-Z]*ref|usepackage|[a-z]*cite[a-z]*|input|include)/.test(
+ match[1]
+ )
+ ) {
+ return setTimeout(() => {
+ this.editor.execCommand('startAutocomplete')
+ }, 0)
+ }
+ }
+
+ monkeyPatchAutocomplete() {
+ const { Autocomplete } = ace.require('ace/autocomplete')
+ const Util = ace.require('ace/autocomplete/util')
+
+ if (Autocomplete.prototype._insertMatch == null) {
+ // Only override this once since it's global but we may create multiple
+ // autocomplete handlers
+ Autocomplete.prototype._insertMatch = Autocomplete.prototype.insertMatch
+ Autocomplete.prototype.insertMatch = function (data) {
+ const { editor } = this
+
+ const pos = editor.getCursorPosition()
+ let range = new Range(pos.row, pos.column, pos.row, pos.column + 1)
+ const nextChar = editor.session.getTextRange(range)
+ // If we are in \begin{it|}, then we need to remove the trailing }
+ // since it will be adding in with the autocomplete of \begin{item}...
+ if (
+ /^\\\w+(\[[\w\\,=. ]*\])?{/.test(this.completions.filterText) &&
+ nextChar === '}'
+ ) {
+ editor.session.remove(range)
+ }
+
+ // Provide our own `insertMatch` implementation.
+ // See the `insertMatch` method of Autocomplete in
+ // `ext-language_tools.js`.
+ // We need this to account for editing existing commands, particularly
+ // when adding a prefix.
+ // We fix this by detecting when the cursor is in the middle of an
+ // existing command, and adjusting the insertions/deletions
+ // accordingly.
+ // Example:
+ // when changing `\ref{}` to `\href{}`, ace default behaviour
+ // is likely to end up with `\href{}ref{}`
+ if (data == null) {
+ const { completions } = this
+ const { popup } = this
+ data = popup.getData(popup.getRow())
+ data.completer = {
+ insertMatch(editor, matchData) {
+ for (range of editor.selection.getAllRanges()) {
+ const leftRange = _.clone(range)
+ const rightRange = _.clone(range)
+ // trim to left of cursor
+ const lineUpToCursor = editor
+ .getSession()
+ .getTextRange(
+ new Range(
+ range.start.row,
+ 0,
+ range.start.row,
+ range.start.column
+ )
+ )
+ // Delete back to command start, as appropriate
+ const commandStartIndex = Helpers.getLastCommandFragmentIndex(
+ lineUpToCursor
+ )
+ if (commandStartIndex !== -1) {
+ leftRange.start.column = commandStartIndex
+ } else {
+ leftRange.start.column -= completions.filterText.length
+ }
+ editor.session.remove(leftRange)
+ // look at text after cursor
+ const lineBeyondCursor = editor
+ .getSession()
+ .getTextRange(
+ new Range(
+ rightRange.start.row,
+ rightRange.start.column,
+ rightRange.end.row,
+ 99999
+ )
+ )
+
+ if (lineBeyondCursor) {
+ const partialCommandMatch = lineBeyondCursor.match(
+ /^([a-zA-Z0-9]+)\{/
+ )
+ if (partialCommandMatch) {
+ // We've got a partial command after the cursor
+ const commandTail = partialCommandMatch[1]
+ // remove rest of the partial command, right of cursor
+ rightRange.end.column +=
+ commandTail.length - completions.filterText.length
+ editor.session.remove(rightRange)
+ // trim the completion text to just the command, without
+ // braces or brackets
+ // example: '\cite{}' -> '\cite'
+ if (matchData.snippet != null) {
+ matchData.snippet = matchData.snippet.replace(
+ /[{[].*[}\]]/,
+ ''
+ )
+ }
+ if (matchData.caption != null) {
+ matchData.caption = matchData.caption.replace(
+ /[{[].*[}\]]/,
+ ''
+ )
+ }
+ if (matchData.value != null) {
+ matchData.value = matchData.value.replace(
+ /[{[].*[}\]]/,
+ ''
+ )
+ }
+ }
+ const inArgument = lineBeyondCursor.match(/^([\w._-]+)\}(.*)/)
+ if (inArgument) {
+ const argumentRightOfCursor = inArgument[1]
+ const afterArgument = inArgument[2]
+ if (afterArgument) {
+ rightRange.end.column =
+ rightRange.start.column +
+ argumentRightOfCursor.length +
+ 1
+ }
+ editor.session.remove(rightRange)
+ }
+ }
+ }
+ // finally, insert the match
+ if (matchData.snippet) {
+ aceSnippetManager.insertSnippet(editor, matchData.snippet)
+ } else {
+ editor.execCommand('insertstring', matchData.value || matchData)
+ }
+ },
+ }
+ }
+
+ Autocomplete.prototype._insertMatch.call(this, data)
+ }
+
+ // Overwrite this to set autoInsert = false and set font size
+ Autocomplete.startCommand = {
+ name: 'startAutocomplete',
+ exec: editor => {
+ if (!editor.completer) {
+ editor.completer = new Autocomplete()
+ }
+ editor.completer.autoInsert = false
+ editor.completer.autoSelect = true
+ editor.completer.showPopup(editor)
+ editor.completer.cancelContextMenu()
+ const container = $(
+ editor.completer.popup != null
+ ? editor.completer.popup.container
+ : undefined
+ )
+ container.css({ 'font-size': this.$scope.fontSize + 'px' })
+ // Dynamically set width of autocomplete popup
+ const filtered =
+ editor.completer.completions &&
+ editor.completer.completions.filtered
+ if (filtered) {
+ const longestCaption = _.max(filtered.map(c => c.caption.length))
+ const longestMeta = _.max(filtered.map(c => c.meta.length))
+ const charWidth = editor.renderer.characterWidth
+ // between 280 and 700 px
+ const width = Math.max(
+ Math.min(
+ Math.round(
+ longestCaption * charWidth +
+ longestMeta * charWidth +
+ 5 * charWidth
+ ),
+ 700
+ ),
+ 280
+ )
+ container.css({ width: `${width}px` })
+ }
+ if (filtered.length === 0) {
+ editor.completer.detach()
+ }
+ },
+ bindKey: 'Ctrl-Space|Ctrl-Shift-Space|Alt-Space',
+ }
+ }
+
+ Util.retrievePrecedingIdentifier = function (text, pos, regex) {
+ let currentLineOffset = 0
+ for (let i = pos - 1; i <= 0; i++) {
+ if (text[i] === '\n') {
+ currentLineOffset = i + 1
+ break
+ }
+ }
+ const currentLine = text.slice(currentLineOffset, pos)
+ const fragment = Helpers.getLastCommandFragment(currentLine) || ''
+ return fragment
+ }
+ }
+}
+
+export default AutoCompleteManager
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/CommandManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/CommandManager.js
new file mode 100644
index 0000000000..69cb23a396
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/CommandManager.js
@@ -0,0 +1,241 @@
+import _ from 'lodash'
+/* eslint-disable
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS206: Consider reworking classes to avoid initClass
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import topHundred from './snippets/TopHundredSnippets'
+let CommandManager
+class Parser {
+ static initClass() {
+ // Ignore single letter commands since auto complete is moot then.
+ this.prototype.commandRegex = /\\([a-zA-Z]{2,})/
+ }
+
+ constructor(doc, prefix) {
+ this.doc = doc
+ this.prefix = prefix
+ }
+
+ parse() {
+ // Safari regex is super slow, freezes browser for minutes on end,
+ // hacky solution: limit iterations
+ let command
+ let limit = null
+ if (
+ __guard__(
+ typeof window !== 'undefined' && window !== null
+ ? window._ide
+ : undefined,
+ x => x.browserIsSafari
+ )
+ ) {
+ limit = 5000
+ }
+
+ // fully formed commands
+ const realCommands = []
+ // commands which match the prefix exactly,
+ // and could be partially typed or malformed
+ const incidentalCommands = []
+ const seen = {}
+ let iterations = 0
+ while ((command = this.nextCommand())) {
+ iterations += 1
+ if (limit && iterations > limit) {
+ return realCommands
+ }
+
+ const docState = this.doc
+
+ let optionalArgs = 0
+ while (this.consumeArgument('[', ']')) {
+ optionalArgs++
+ }
+
+ let args = 0
+ while (this.consumeArgument('{', '}')) {
+ args++
+ }
+
+ const commandHash = `${command}\\${optionalArgs}\\${args}`
+
+ if (this.prefix != null && `\\${command}` === this.prefix) {
+ incidentalCommands.push([command, optionalArgs, args])
+ } else {
+ if (seen[commandHash] == null) {
+ seen[commandHash] = true
+ realCommands.push([command, optionalArgs, args])
+ }
+ }
+
+ // Reset to before argument to handle nested commands
+ this.doc = docState
+ }
+
+ // check incidentals, see if we should pluck out a match
+ if (incidentalCommands.length > 1) {
+ const bestMatch = incidentalCommands.sort(
+ (a, b) => b[1] + b[2] - (a[1] + a[2])
+ )[0]
+ realCommands.push(bestMatch)
+ }
+
+ return realCommands
+ }
+
+ nextCommand() {
+ const i = this.doc.search(this.commandRegex)
+ if (i === -1) {
+ return false
+ } else {
+ const match = this.doc.match(this.commandRegex)[1]
+ this.doc = this.doc.substr(i + match.length + 1)
+ return match
+ }
+ }
+
+ consumeWhitespace() {
+ const match = this.doc.match(/^[ \t\n]*/m)[0]
+ return (this.doc = this.doc.substr(match.length))
+ }
+
+ consumeArgument(openingBracket, closingBracket) {
+ this.consumeWhitespace()
+
+ if (this.doc[0] === openingBracket) {
+ let i = 1
+ let bracketParity = 1
+ while (bracketParity > 0 && i < this.doc.length) {
+ if (this.doc[i] === openingBracket) {
+ bracketParity++
+ } else if (this.doc[i] === closingBracket) {
+ bracketParity--
+ }
+ i++
+ }
+
+ if (bracketParity === 0) {
+ this.doc = this.doc.substr(i)
+ return true
+ } else {
+ return false
+ }
+ } else {
+ return false
+ }
+ }
+}
+Parser.initClass()
+
+export default CommandManager = class CommandManager {
+ constructor(metadataManager) {
+ this.metadataManager = metadataManager
+ }
+
+ getCompletions(editor, session, pos, prefix, callback) {
+ const commandNames = {}
+ for (var snippet of Array.from(topHundred)) {
+ commandNames[snippet.caption.match(/\w+/)[0]] = true
+ }
+
+ const packages = this.metadataManager.getAllPackages()
+ const packageCommands = []
+ for (const pkg in packages) {
+ const snippets = packages[pkg]
+ for (snippet of Array.from(snippets)) {
+ packageCommands.push(snippet)
+ commandNames[snippet.caption.match(/\w+/)[0]] = true
+ }
+ }
+
+ const doc = session.getValue()
+ const parser = new Parser(doc, prefix)
+ const commands = parser.parse()
+ let completions = []
+ for (const command of Array.from(commands)) {
+ if (!commandNames[command[0]]) {
+ let caption = `\\${command[0]}`
+ const score = caption === prefix ? 99 : 50
+ snippet = caption
+ var i = 1
+ _.times(command[1], function () {
+ snippet += `[\${${i}}]`
+ caption += '[]'
+ return i++
+ })
+ _.times(command[2], function () {
+ snippet += `{\${${i}}}`
+ caption += '{}'
+ return i++
+ })
+ completions.push({
+ caption,
+ snippet,
+ meta: 'cmd',
+ score,
+ })
+ }
+ }
+ completions = completions.concat(topHundred, packageCommands)
+
+ return callback(null, completions)
+ }
+
+ loadCommandsFromDoc(doc) {
+ const parser = new Parser(doc)
+ return (this.commands = parser.parse())
+ }
+
+ getSuggestions(commandFragment) {
+ const matchingCommands = _.filter(
+ this.commands,
+ command => command[0].slice(0, commandFragment.length) === commandFragment
+ )
+
+ return _.map(matchingCommands, function (command) {
+ let completionAfterCursor, completionBeforeCursor
+ const base = `\\${commandFragment}`
+
+ let args = ''
+ _.times(command[1], () => (args = args + '[]'))
+ _.times(command[2], () => (args = args + '{}'))
+ const completionBase = command[0].slice(commandFragment.length)
+
+ const squareArgsNo = command[1]
+ const curlyArgsNo = command[2]
+ const totalArgs = squareArgsNo + curlyArgsNo
+ if (totalArgs === 0) {
+ completionBeforeCursor = completionBase
+ completionAfterCursor = ''
+ } else {
+ completionBeforeCursor = completionBase + args[0]
+ completionAfterCursor = args.slice(1)
+ }
+
+ return {
+ base,
+ completion: completionBase + args,
+ completionBeforeCursor,
+ completionAfterCursor,
+ }
+ })
+ }
+}
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/EnvironmentManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/EnvironmentManager.js
new file mode 100644
index 0000000000..119356dbd6
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/EnvironmentManager.js
@@ -0,0 +1,237 @@
+import _ from 'lodash'
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import Environments from './snippets/Environments'
+let staticSnippets = Array.from(Environments.withoutSnippets).map(env => ({
+ caption: `\\begin{${env}}...`,
+ snippet: `\
+\\begin{${env}}
+\t$1
+\\end{${env}}\
+`,
+ meta: 'env',
+}))
+
+staticSnippets = staticSnippets.concat([
+ {
+ caption: '\\begin{array}...',
+ snippet: `\
+\\begin{array}{\${1:cc}}
+\t$2 & $3 \\\\\\\\
+\t$4 & $5
+\\end{array}\
+`,
+ meta: 'env',
+ },
+ {
+ caption: '\\begin{figure}...',
+ snippet: `\
+\\begin{figure}
+\t\\centering
+\t\\includegraphics{$1}
+\t\\caption{\${2:Caption}}
+\t\\label{\${3:fig:my_label}}
+\\end{figure}\
+`,
+ meta: 'env',
+ },
+ {
+ caption: '\\begin{tabular}...',
+ snippet: `\
+\\begin{tabular}{\${1:c|c}}
+\t$2 & $3 \\\\\\\\
+\t$4 & $5
+\\end{tabular}\
+`,
+ meta: 'env',
+ },
+ {
+ caption: '\\begin{table}...',
+ snippet: `\
+\\begin{table}[$1]
+\t\\centering
+\t\\begin{tabular}{\${2:c|c}}
+\t\t$3 & $4 \\\\\\\\
+\t\t$5 & $6
+\t\\end{tabular}
+\t\\caption{\${7:Caption}}
+\t\\label{\${8:tab:my_label}}
+\\end{table}\
+`,
+ meta: 'env',
+ },
+ {
+ caption: '\\begin{list}...',
+ snippet: `\
+\\begin{list}
+\t\\item $1
+\\end{list}\
+`,
+ meta: 'env',
+ },
+ {
+ caption: '\\begin{enumerate}...',
+ snippet: `\
+\\begin{enumerate}
+\t\\item $1
+\\end{enumerate}\
+`,
+ meta: 'env',
+ },
+ {
+ caption: '\\begin{itemize}...',
+ snippet: `\
+\\begin{itemize}
+\t\\item $1
+\\end{itemize}\
+`,
+ meta: 'env',
+ },
+ {
+ caption: '\\begin{frame}...',
+ snippet: `\
+\\begin{frame}{\${1:Frame Title}}
+\t$2
+\\end{frame}\
+`,
+ meta: 'env',
+ },
+])
+
+const documentSnippet = {
+ caption: '\\begin{document}...',
+ snippet: `\
+\\begin{document}
+$1
+\\end{document}\
+`,
+ meta: 'env',
+}
+
+const bibliographySnippet = {
+ caption: '\\begin{thebibliography}...',
+ snippet: `\
+\\begin{thebibliography}{$1}
+\\bibitem{$2}
+$3
+\\end{thebibliography}\
+`,
+ meta: 'env',
+}
+staticSnippets.push(documentSnippet)
+
+const parseCustomEnvironments = function (text) {
+ let match
+ const re = /^\\newenvironment{(\w+)}.*$/gm
+ const result = []
+ let iterations = 0
+ while ((match = re.exec(text))) {
+ result.push({ name: match[1], whitespace: null })
+ iterations += 1
+ if (iterations >= 1000) {
+ return result
+ }
+ }
+ return result
+}
+
+const parseBeginCommands = function (text) {
+ let match
+ const re = /^([\t ]*)\\begin{(\w+)}.*\n([\t ]*)/gm
+ const result = []
+ let iterations = 0
+ while ((match = re.exec(text))) {
+ const whitespaceAlignment = match[3].replace(match[1] || '', '')
+ if (
+ !Array.from(Environments.all).includes(match[2]) &&
+ match[2] !== 'document'
+ ) {
+ result.push({ name: match[2], whitespace: whitespaceAlignment })
+ iterations += 1
+ if (iterations >= 1000) {
+ return result
+ }
+ }
+ re.lastIndex = match.index + 1
+ }
+ return result
+}
+
+const hasDocumentEnvironment = function (text) {
+ const re = /^\\begin{document}/m
+ return re.exec(text) !== null
+}
+
+const hasBibliographyEnvironment = function (text) {
+ const re = /^\\begin{thebibliography}/m
+ return re.exec(text) !== null
+}
+
+class EnvironmentManager {
+ getCompletions(editor, session, pos, prefix, callback) {
+ let ind
+ const docText = session.getValue()
+ const customEnvironments = parseCustomEnvironments(docText)
+ const beginCommands = parseBeginCommands(docText)
+ if (hasDocumentEnvironment(docText)) {
+ ind = staticSnippets.indexOf(documentSnippet)
+ if (ind !== -1) {
+ staticSnippets.splice(ind, 1)
+ }
+ } else {
+ staticSnippets.push(documentSnippet)
+ }
+
+ if (hasBibliographyEnvironment(docText)) {
+ ind = staticSnippets.indexOf(bibliographySnippet)
+ if (ind !== -1) {
+ staticSnippets.splice(ind, 1)
+ }
+ } else {
+ staticSnippets.push(bibliographySnippet)
+ }
+
+ const parsedItemsMap = {}
+ for (const environment of Array.from(customEnvironments)) {
+ parsedItemsMap[environment.name] = environment
+ }
+ for (const command of Array.from(beginCommands)) {
+ parsedItemsMap[command.name] = command
+ }
+ const parsedItems = _.values(parsedItemsMap)
+ const snippets = staticSnippets
+ .concat(
+ parsedItems.map(item => ({
+ caption: `\\begin{${item.name}}...`,
+ snippet: `\
+\\begin{${item.name}}
+${item.whitespace || ''}$0
+\\end{${item.name}}\
+`,
+ meta: 'env',
+ }))
+ )
+ .concat(
+ // arguably these `end` commands shouldn't be here, as they're not snippets
+ // but this is where we have access to the `begin` environment names
+ // *shrug*
+ parsedItems.map(item => ({
+ caption: `\\end{${item.name}}`,
+ value: `\\end{${item.name}}`,
+ meta: 'env',
+ }))
+ )
+ return callback(null, snippets)
+ }
+}
+
+export default EnvironmentManager
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/Helpers.js b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/Helpers.js
new file mode 100644
index 0000000000..572cc63af3
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/Helpers.js
@@ -0,0 +1,73 @@
+/* eslint-disable
+ max-len,
+ no-cond-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import 'ace/ace'
+import 'ace/ext-language_tools'
+const { Range } = ace.require('ace/range')
+
+var Helpers = {
+ getLastCommandFragment(lineUpToCursor) {
+ let index
+ if ((index = Helpers.getLastCommandFragmentIndex(lineUpToCursor)) > -1) {
+ return lineUpToCursor.slice(index)
+ } else {
+ return null
+ }
+ },
+
+ getLastCommandFragmentIndex(lineUpToCursor) {
+ // This is hack to let us skip over commands in arguments, and
+ // go to the command on the same 'level' as us. E.g.
+ // \includegraphics[width=\textwidth]{..
+ // should not match the \textwidth.
+ let m
+ const blankArguments = lineUpToCursor.replace(/\[([^\]]*)\]/g, args =>
+ Array(args.length + 1).join('.')
+ )
+ if ((m = blankArguments.match(/(\\[^\\]*)$/))) {
+ return m.index
+ } else {
+ return -1
+ }
+ },
+
+ getCommandNameFromFragment(commandFragment) {
+ return __guard__(
+ commandFragment != null ? commandFragment.match(/\\(\w+)\{/) : undefined,
+ x => x[1]
+ )
+ },
+
+ getContext(editor, pos) {
+ const upToCursorRange = new Range(pos.row, 0, pos.row, pos.column)
+ const lineUpToCursor = editor.getSession().getTextRange(upToCursorRange)
+ const commandFragment = Helpers.getLastCommandFragment(lineUpToCursor)
+ const commandName = Helpers.getCommandNameFromFragment(commandFragment)
+ const beyondCursorRange = new Range(pos.row, pos.column, pos.row, 99999)
+ const lineBeyondCursor = editor.getSession().getTextRange(beyondCursorRange)
+ return {
+ lineUpToCursor,
+ commandFragment,
+ commandName,
+ lineBeyondCursor,
+ }
+ },
+}
+
+export default Helpers
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/PackageManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/PackageManager.js
new file mode 100644
index 0000000000..5b23099104
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/PackageManager.js
@@ -0,0 +1,143 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+const packages = [
+ 'inputenc',
+ 'graphicx',
+ 'amsmath',
+ 'geometry',
+ 'amssymb',
+ 'hyperref',
+ 'babel',
+ 'color',
+ 'xcolor',
+ 'url',
+ 'natbib',
+ 'fontenc',
+ 'fancyhdr',
+ 'amsfonts',
+ 'booktabs',
+ 'amsthm',
+ 'float',
+ 'tikz',
+ 'caption',
+ 'setspace',
+ 'multirow',
+ 'array',
+ 'multicol',
+ 'titlesec',
+ 'enumitem',
+ 'ifthen',
+ 'listings',
+ 'blindtext',
+ 'subcaption',
+ 'times',
+ 'bm',
+ 'subfigure',
+ 'algorithm',
+ 'fontspec',
+ 'biblatex',
+ 'tabularx',
+ 'microtype',
+ 'etoolbox',
+ 'parskip',
+ 'calc',
+ 'verbatim',
+ 'mathtools',
+ 'epsfig',
+ 'wrapfig',
+ 'lipsum',
+ 'cite',
+ 'textcomp',
+ 'longtable',
+ 'textpos',
+ 'algpseudocode',
+ 'enumerate',
+ 'subfig',
+ 'pdfpages',
+ 'epstopdf',
+ 'latexsym',
+ 'lmodern',
+ 'pifont',
+ 'ragged2e',
+ 'rotating',
+ 'dcolumn',
+ 'xltxtra',
+ 'marvosym',
+ 'indentfirst',
+ 'xspace',
+ 'csquotes',
+ 'xparse',
+ 'changepage',
+ 'soul',
+ 'xunicode',
+ 'comment',
+ 'mathrsfs',
+ 'tocbibind',
+ 'lastpage',
+ 'algorithm2e',
+ 'pgfplots',
+ 'lineno',
+ 'graphics',
+ 'algorithmic',
+ 'fullpage',
+ 'mathptmx',
+ 'todonotes',
+ 'ulem',
+ 'tweaklist',
+ 'moderncvstyleclassic',
+ 'collection',
+ 'moderncvcompatibility',
+ 'gensymb',
+ 'helvet',
+ 'siunitx',
+ 'adjustbox',
+ 'placeins',
+ 'colortbl',
+ 'appendix',
+ 'makeidx',
+ 'supertabular',
+ 'ifpdf',
+ 'framed',
+ 'aliascnt',
+ 'layaureo',
+ 'authblk',
+]
+
+class PackageManager {
+ constructor(metadataManager) {
+ this.metadataManager = metadataManager
+ }
+
+ getCompletions(editor, session, pos, prefix, callback) {
+ const usedPackages = Object.keys(this.metadataManager.getAllPackages())
+ const packageSnippets = []
+ for (const pkg of Array.from(packages)) {
+ if (!Array.from(usedPackages).includes(pkg)) {
+ packageSnippets.push({
+ caption: `\\usepackage{${pkg}}`,
+ snippet: `\\usepackage{${pkg}}`,
+ meta: 'pkg',
+ })
+ }
+ }
+
+ packageSnippets.push({
+ caption: '\\usepackage{}',
+ snippet: '\\usepackage{$1}',
+ meta: 'pkg',
+ score: 70,
+ })
+ return callback(null, packageSnippets)
+ }
+}
+
+export default PackageManager
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/snippets/Environments.js b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/snippets/Environments.js
new file mode 100644
index 0000000000..6f62be574b
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/snippets/Environments.js
@@ -0,0 +1,34 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+const envs = [
+ 'abstract',
+ 'align',
+ 'align*',
+ 'equation',
+ 'equation*',
+ 'gather',
+ 'gather*',
+ 'multline',
+ 'multline*',
+ 'split',
+ 'verbatim',
+ 'quote',
+ 'center',
+]
+
+const envsWithSnippets = [
+ 'array',
+ 'figure',
+ 'tabular',
+ 'table',
+ 'list',
+ 'enumerate',
+ 'itemize',
+ 'frame',
+ 'thebibliography',
+]
+
+export default {
+ all: envs.concat(envsWithSnippets),
+ withoutSnippets: envs,
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/snippets/TopHundredSnippets.js b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/snippets/TopHundredSnippets.js
new file mode 100644
index 0000000000..d4643f0294
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/auto-complete/snippets/TopHundredSnippets.js
@@ -0,0 +1,699 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+export default [
+ {
+ caption: '\\begin{}',
+ snippet: '\\begin{$1}',
+ meta: 'env',
+ score: 7.849662248028187,
+ },
+ {
+ caption: '\\end{}',
+ snippet: '\\end{$1}',
+ meta: 'env',
+ score: 7.847906405228455,
+ },
+ {
+ caption: '\\usepackage[]{}',
+ snippet: '\\usepackage[$1]{$2}',
+ meta: 'pkg',
+ score: 5.427890758130527,
+ },
+ {
+ caption: '\\item',
+ snippet: '\\item',
+ meta: 'cmd',
+ score: 3.800886892251021,
+ },
+ {
+ caption: '\\item[]',
+ snippet: '\\item[$1]',
+ meta: 'cmd',
+ score: 3.800886892251021,
+ },
+ {
+ caption: '\\section{}',
+ snippet: '\\section{$1}',
+ meta: 'cmd',
+ score: 3.0952612541683835,
+ },
+ {
+ caption: '\\textbf{}',
+ snippet: '\\textbf{$1}',
+ meta: 'cmd',
+ score: 2.627755982816738,
+ },
+ {
+ caption: '\\cite{}',
+ snippet: '\\cite{$1}',
+ meta: 'cmd',
+ score: 2.341195220791228,
+ },
+ {
+ caption: '\\label{}',
+ snippet: '\\label{$1}',
+ meta: 'cmd',
+ score: 1.897791904799601,
+ },
+ {
+ caption: '\\textit{}',
+ snippet: '\\textit{$1}',
+ meta: 'cmd',
+ score: 1.6842996195493385,
+ },
+ {
+ caption: '\\includegraphics[]{}',
+ snippet: '\\includegraphics[$1]{$2}',
+ meta: 'cmd',
+ score: 1.4595731795525781,
+ },
+ {
+ caption: '\\documentclass[]{}',
+ snippet: '\\documentclass[$1]{$2}',
+ meta: 'cmd',
+ score: 1.4425339817971206,
+ },
+ {
+ caption: '\\documentclass{}',
+ snippet: '\\documentclass{$1}',
+ meta: 'cmd',
+ score: 1.4425339817971206,
+ },
+ {
+ caption: '\\ref{}',
+ snippet: '\\ref{$1}',
+ meta: 'cross-reference',
+ score: 0.014379554883991673,
+ },
+ {
+ caption: '\\frac{}{}',
+ snippet: '\\frac{$1}{$2}',
+ meta: 'cmd',
+ score: 1.4341091141105058,
+ },
+ {
+ caption: '\\subsection{}',
+ snippet: '\\subsection{$1}',
+ meta: 'cmd',
+ score: 1.3890912739512353,
+ },
+ {
+ caption: '\\hline',
+ snippet: '\\hline',
+ meta: 'cmd',
+ score: 1.3209538327406387,
+ },
+ {
+ caption: '\\caption{}',
+ snippet: '\\caption{$1}',
+ meta: 'cmd',
+ score: 1.2569477427490174,
+ },
+ {
+ caption: '\\centering',
+ snippet: '\\centering',
+ meta: 'cmd',
+ score: 1.1642881814937829,
+ },
+ {
+ caption: '\\vspace{}',
+ snippet: '\\vspace{$1}',
+ meta: 'cmd',
+ score: 0.9533807826673939,
+ },
+ {
+ caption: '\\title{}',
+ snippet: '\\title{$1}',
+ meta: 'cmd',
+ score: 0.9202908262245683,
+ },
+ {
+ caption: '\\author{}',
+ snippet: '\\author{$1}',
+ meta: 'cmd',
+ score: 0.8973590434087177,
+ },
+ {
+ caption: '\\author[]{}',
+ snippet: '\\author[$1]{$2}',
+ meta: 'cmd',
+ score: 0.8973590434087177,
+ },
+ {
+ caption: '\\maketitle',
+ snippet: '\\maketitle',
+ meta: 'cmd',
+ score: 0.7504160124360846,
+ },
+ {
+ caption: '\\textwidth',
+ snippet: '\\textwidth',
+ meta: 'cmd',
+ score: 0.7355328080889112,
+ },
+ {
+ caption: '\\newcommand{}{}',
+ snippet: '\\newcommand{$1}{$2}',
+ meta: 'cmd',
+ score: 0.7264891987129375,
+ },
+ {
+ caption: '\\newcommand{}[]{}',
+ snippet: '\\newcommand{$1}[$2]{$3}',
+ meta: 'cmd',
+ score: 0.7264891987129375,
+ },
+ {
+ caption: '\\date{}',
+ snippet: '\\date{$1}',
+ meta: 'cmd',
+ score: 0.7225518453076786,
+ },
+ {
+ caption: '\\emph{}',
+ snippet: '\\emph{$1}',
+ meta: 'cmd',
+ score: 0.7060308784832261,
+ },
+ {
+ caption: '\\textsc{}',
+ snippet: '\\textsc{$1}',
+ meta: 'cmd',
+ score: 0.6926466355384758,
+ },
+ {
+ caption: '\\multicolumn{}{}{}',
+ snippet: '\\multicolumn{$1}{$2}{$3}',
+ meta: 'cmd',
+ score: 0.5473606021405326,
+ },
+ {
+ caption: '\\input{}',
+ snippet: '\\input{$1}',
+ meta: 'cmd',
+ score: 0.4966021927742672,
+ },
+ {
+ caption: '\\alpha',
+ snippet: '\\alpha',
+ meta: 'cmd',
+ score: 0.49520006391384913,
+ },
+ {
+ caption: '\\in',
+ snippet: '\\in',
+ meta: 'cmd',
+ score: 0.4716039670146658,
+ },
+ {
+ caption: '\\mathbf{}',
+ snippet: '\\mathbf{$1}',
+ meta: 'cmd',
+ score: 0.4682018419466319,
+ },
+ {
+ caption: '\\right',
+ snippet: '\\right',
+ meta: 'cmd',
+ score: 0.4299239459457309,
+ },
+ {
+ caption: '\\left',
+ snippet: '\\left',
+ meta: 'cmd',
+ score: 0.42937815279867964,
+ },
+ {
+ caption: '\\sum',
+ snippet: '\\sum',
+ meta: 'cmd',
+ score: 0.42607994509619934,
+ },
+ {
+ caption: '\\chapter{}',
+ snippet: '\\chapter{$1}',
+ meta: 'cmd',
+ score: 0.422097569591803,
+ },
+ {
+ caption: '\\par',
+ snippet: '\\par',
+ meta: 'cmd',
+ score: 0.413853376001159,
+ },
+ {
+ caption: '\\lambda',
+ snippet: '\\lambda',
+ meta: 'cmd',
+ score: 0.39389600578684125,
+ },
+ {
+ caption: '\\subsubsection{}',
+ snippet: '\\subsubsection{$1}',
+ meta: 'cmd',
+ score: 0.3727781330132016,
+ },
+ {
+ caption: '\\bibitem{}',
+ snippet: '\\bibitem{$1}',
+ meta: 'cmd',
+ score: 0.3689547570562042,
+ },
+ {
+ caption: '\\bibitem[]{}',
+ snippet: '\\bibitem[$1]{$2}',
+ meta: 'cmd',
+ score: 0.3689547570562042,
+ },
+ {
+ caption: '\\text{}',
+ snippet: '\\text{$1}',
+ meta: 'cmd',
+ score: 0.3608680734736821,
+ },
+ {
+ caption: '\\setlength{}{}',
+ snippet: '\\setlength{$1}{$2}',
+ meta: 'cmd',
+ score: 0.354445763583904,
+ },
+ {
+ caption: '\\mathcal{}',
+ snippet: '\\mathcal{$1}',
+ meta: 'cmd',
+ score: 0.35084018920966636,
+ },
+ {
+ caption: '\\newpage',
+ snippet: '\\newpage',
+ meta: 'cmd',
+ score: 0.3277033727934986,
+ },
+ {
+ caption: '\\renewcommand{}{}',
+ snippet: '\\renewcommand{$1}{$2}',
+ meta: 'cmd',
+ score: 0.3267437011085663,
+ },
+ {
+ caption: '\\theta',
+ snippet: '\\theta',
+ meta: 'cmd',
+ score: 0.3210417159232142,
+ },
+ {
+ caption: '\\hspace{}',
+ snippet: '\\hspace{$1}',
+ meta: 'cmd',
+ score: 0.3147206476372336,
+ },
+ {
+ caption: '\\beta',
+ snippet: '\\beta',
+ meta: 'cmd',
+ score: 0.3061799530337638,
+ },
+ {
+ caption: '\\texttt{}',
+ snippet: '\\texttt{$1}',
+ meta: 'cmd',
+ score: 0.3019066753744355,
+ },
+ {
+ caption: '\\times',
+ snippet: '\\times',
+ meta: 'cmd',
+ score: 0.2957960629411553,
+ },
+ {
+ caption: '\\color{}',
+ snippet: '\\color{$1}',
+ meta: 'cmd',
+ score: 0.2864294797053033,
+ },
+ {
+ caption: '\\mu',
+ snippet: '\\mu',
+ meta: 'cmd',
+ score: 0.27635652476799255,
+ },
+ {
+ caption: '\\bibliography{}',
+ snippet: '\\bibliography{$1}',
+ meta: 'cmd',
+ score: 0.2659628337907604,
+ },
+ {
+ caption: '\\linewidth',
+ snippet: '\\linewidth',
+ meta: 'cmd',
+ score: 0.2639498312518439,
+ },
+ {
+ caption: '\\delta',
+ snippet: '\\delta',
+ meta: 'cmd',
+ score: 0.2620578600722735,
+ },
+ {
+ caption: '\\sigma',
+ snippet: '\\sigma',
+ meta: 'cmd',
+ score: 0.25940147926344487,
+ },
+ {
+ caption: '\\pi',
+ snippet: '\\pi',
+ meta: 'cmd',
+ score: 0.25920934567729714,
+ },
+ {
+ caption: '\\hat{}',
+ snippet: '\\hat{$1}',
+ meta: 'cmd',
+ score: 0.25264309033778715,
+ },
+ {
+ caption: '\\bibliographystyle{}',
+ snippet: '\\bibliographystyle{$1}',
+ meta: 'cmd',
+ score: 0.25122317941387773,
+ },
+ {
+ caption: '\\small',
+ snippet: '\\small',
+ meta: 'cmd',
+ score: 0.2447632045426295,
+ },
+ {
+ caption: '\\LaTeX',
+ snippet: '\\LaTeX',
+ meta: 'cmd',
+ score: 0.2334089308452787,
+ },
+ {
+ caption: '\\cdot',
+ snippet: '\\cdot',
+ meta: 'cmd',
+ score: 0.23029085545522762,
+ },
+ {
+ caption: '\\footnote{}',
+ snippet: '\\footnote{$1}',
+ meta: 'cmd',
+ score: 0.2253056071787701,
+ },
+ {
+ caption: '\\newtheorem{}{}',
+ snippet: '\\newtheorem{$1}{$2}',
+ meta: 'cmd',
+ score: 0.215689795055434,
+ },
+ {
+ caption: '\\Delta',
+ snippet: '\\Delta',
+ meta: 'cmd',
+ score: 0.21386475063892618,
+ },
+ {
+ caption: '\\tau',
+ snippet: '\\tau',
+ meta: 'cmd',
+ score: 0.21236188205859796,
+ },
+ {
+ caption: '\\hfill',
+ snippet: '\\hfill',
+ meta: 'cmd',
+ score: 0.2058248088519886,
+ },
+ {
+ caption: '\\leq',
+ snippet: '\\leq',
+ meta: 'cmd',
+ score: 0.20498894440637172,
+ },
+ {
+ caption: '\\footnotesize',
+ snippet: '\\footnotesize',
+ meta: 'cmd',
+ score: 0.2038592081252624,
+ },
+ {
+ caption: '\\large',
+ snippet: '\\large',
+ meta: 'cmd',
+ score: 0.20377416734108866,
+ },
+ {
+ caption: '\\sqrt{}',
+ snippet: '\\sqrt{$1}',
+ meta: 'cmd',
+ score: 0.20240160977404634,
+ },
+ {
+ caption: '\\epsilon',
+ snippet: '\\epsilon',
+ meta: 'cmd',
+ score: 0.2005136761359043,
+ },
+ {
+ caption: '\\Large',
+ snippet: '\\Large',
+ meta: 'cmd',
+ score: 0.1987771081149759,
+ },
+ {
+ caption: '\\rho',
+ snippet: '\\rho',
+ meta: 'cmd',
+ score: 0.1959287380541684,
+ },
+ {
+ caption: '\\omega',
+ snippet: '\\omega',
+ meta: 'cmd',
+ score: 0.19326783415115262,
+ },
+ {
+ caption: '\\mathrm{}',
+ snippet: '\\mathrm{$1}',
+ meta: 'cmd',
+ score: 0.19117752976172653,
+ },
+ {
+ caption: '\\boldsymbol{}',
+ snippet: '\\boldsymbol{$1}',
+ meta: 'cmd',
+ score: 0.18137737738638837,
+ },
+ {
+ caption: '\\gamma',
+ snippet: '\\gamma',
+ meta: 'cmd',
+ score: 0.17940276535431304,
+ },
+ {
+ caption: '\\clearpage',
+ snippet: '\\clearpage',
+ meta: 'cmd',
+ score: 0.1789117552185788,
+ },
+ {
+ caption: '\\infty',
+ snippet: '\\infty',
+ meta: 'cmd',
+ score: 0.17837290019711305,
+ },
+ {
+ caption: '\\phi',
+ snippet: '\\phi',
+ meta: 'cmd',
+ score: 0.17405809173097808,
+ },
+ {
+ caption: '\\partial',
+ snippet: '\\partial',
+ meta: 'cmd',
+ score: 0.17168102367966637,
+ },
+ {
+ caption: '\\include{}',
+ snippet: '\\include{$1}',
+ meta: 'cmd',
+ score: 0.1547080054979312,
+ },
+ {
+ caption: '\\address{}',
+ snippet: '\\address{$1}',
+ meta: 'cmd',
+ score: 0.1525055392611109,
+ },
+ {
+ caption: '\\quad',
+ snippet: '\\quad',
+ meta: 'cmd',
+ score: 0.15242755832392743,
+ },
+ {
+ caption: '\\paragraph{}',
+ snippet: '\\paragraph{$1}',
+ meta: 'cmd',
+ score: 0.152074250347974,
+ },
+ {
+ caption: '\\varepsilon',
+ snippet: '\\varepsilon',
+ meta: 'cmd',
+ score: 0.05411564201390573,
+ },
+ {
+ caption: '\\zeta',
+ snippet: '\\zeta',
+ meta: 'cmd',
+ score: 0.023330249803752954,
+ },
+ {
+ caption: '\\eta',
+ snippet: '\\eta',
+ meta: 'cmd',
+ score: 0.11088718379889091,
+ },
+ {
+ caption: '\\vartheta',
+ snippet: '\\vartheta',
+ meta: 'cmd',
+ score: 0.0025822992078068712,
+ },
+ {
+ caption: '\\iota',
+ snippet: '\\iota',
+ meta: 'cmd',
+ score: 0.0024774003791525486,
+ },
+ {
+ caption: '\\kappa',
+ snippet: '\\kappa',
+ meta: 'cmd',
+ score: 0.04887876299369008,
+ },
+ {
+ caption: '\\nu',
+ snippet: '\\nu',
+ meta: 'cmd',
+ score: 0.09206962821059342,
+ },
+ {
+ caption: '\\xi',
+ snippet: '\\xi',
+ meta: 'cmd',
+ score: 0.06496042899265699,
+ },
+ {
+ caption: '\\varpi',
+ snippet: '\\varpi',
+ meta: 'cmd',
+ score: 0.0007039358167790341,
+ },
+ {
+ caption: '\\varrho',
+ snippet: '\\varrho',
+ meta: 'cmd',
+ score: 0.0011279491613898612,
+ },
+ {
+ caption: '\\varsigma',
+ snippet: '\\varsigma',
+ meta: 'cmd',
+ score: 0.0010424880711234978,
+ },
+ {
+ caption: '\\upsilon',
+ snippet: '\\upsilon',
+ meta: 'cmd',
+ score: 0.00420715572598688,
+ },
+ {
+ caption: '\\varphi',
+ snippet: '\\varphi',
+ meta: 'cmd',
+ score: 0.03351251516668212,
+ },
+ {
+ caption: '\\chi',
+ snippet: '\\chi',
+ meta: 'cmd',
+ score: 0.043373492287805675,
+ },
+ {
+ caption: '\\psi',
+ snippet: '\\psi',
+ meta: 'cmd',
+ score: 0.09994508706163642,
+ },
+ {
+ caption: '\\Gamma',
+ snippet: '\\Gamma',
+ meta: 'cmd',
+ score: 0.04801549269801977,
+ },
+ {
+ caption: '\\Theta',
+ snippet: '\\Theta',
+ meta: 'cmd',
+ score: 0.038090902146599444,
+ },
+ {
+ caption: '\\Lambda',
+ snippet: '\\Lambda',
+ meta: 'cmd',
+ score: 0.032206594305977686,
+ },
+ {
+ caption: '\\Xi',
+ snippet: '\\Xi',
+ meta: 'cmd',
+ score: 0.01060997225400494,
+ },
+ {
+ caption: '\\Pi',
+ snippet: '\\Pi',
+ meta: 'cmd',
+ score: 0.021264671817473237,
+ },
+ {
+ caption: '\\Sigma',
+ snippet: '\\Sigma',
+ meta: 'cmd',
+ score: 0.05769642802079917,
+ },
+ {
+ caption: '\\Upsilon',
+ snippet: '\\Upsilon',
+ meta: 'cmd',
+ score: 0.00032875192955749566,
+ },
+ {
+ caption: '\\Phi',
+ snippet: '\\Phi',
+ meta: 'cmd',
+ score: 0.0538724950042562,
+ },
+ {
+ caption: '\\Psi',
+ snippet: '\\Psi',
+ meta: 'cmd',
+ score: 0.03056589143021648,
+ },
+ {
+ caption: '\\Omega',
+ snippet: '\\Omega',
+ meta: 'cmd',
+ score: 0.09490387997853639,
+ },
+]
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/cursor-position/CursorPositionAdapter.js b/services/web/frontend/js/ide/editor/directives/aceEditor/cursor-position/CursorPositionAdapter.js
new file mode 100644
index 0000000000..f136002562
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/cursor-position/CursorPositionAdapter.js
@@ -0,0 +1,53 @@
+/* eslint-disable
+ max-len,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import EditorShareJsCodec from '../../../EditorShareJsCodec'
+let CursorPositionAdapter
+
+export default CursorPositionAdapter = class CursorPositionAdapter {
+ constructor(editor) {
+ this.editor = editor
+ }
+
+ getCursor() {
+ return this.editor.getCursorPosition()
+ }
+
+ getEditorScrollPosition() {
+ return this.editor.getFirstVisibleRow()
+ }
+
+ setCursor(pos) {
+ pos = pos.cursorPosition || { row: 0, column: 0 }
+ return this.editor.moveCursorToPosition(pos)
+ }
+
+ setEditorScrollPosition(pos) {
+ pos = pos.firstVisibleLine || 0
+ return this.editor.scrollToLine(pos)
+ }
+
+ clearSelection() {
+ return this.editor.selection.clearSelection()
+ }
+
+ gotoLine(line, column) {
+ this.editor.gotoLine(line, column)
+ this.editor.scrollToLine(line, true, true) // centre and animate
+ return this.editor.focus()
+ }
+
+ gotoOffset(offset) {
+ const lines = this.editor.getSession().getDocument().getAllLines()
+ const position = EditorShareJsCodec.shareJsOffsetToRowColumn(offset, lines)
+ return this.gotoLine(position.row + 1, position.column)
+ }
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/cursor-position/CursorPositionManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/cursor-position/CursorPositionManager.js
new file mode 100644
index 0000000000..b16ca12540
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/cursor-position/CursorPositionManager.js
@@ -0,0 +1,113 @@
+/* eslint-disable
+ max-len,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+let CursorPositionManager
+
+export default CursorPositionManager = class CursorPositionManager {
+ constructor($scope, adapter, localStorage) {
+ this.storePositionAndLine = this.storePositionAndLine.bind(this)
+ this.jumpToPositionInNewDoc = this.jumpToPositionInNewDoc.bind(this)
+ this.onUnload = this.onUnload.bind(this)
+ this.onCursorChange = this.onCursorChange.bind(this)
+ this.onSyncToPdf = this.onSyncToPdf.bind(this)
+ this.$scope = $scope
+ this.adapter = adapter
+ this.localStorage = localStorage
+ this.$scope.$on('editorInit', this.jumpToPositionInNewDoc)
+
+ this.$scope.$on('beforeChangeDocument', this.storePositionAndLine)
+
+ this.$scope.$on('afterChangeDocument', this.jumpToPositionInNewDoc)
+
+ this.$scope.$on('changeEditor', this.storePositionAndLine)
+
+ this.$scope.$on(
+ `${this.$scope.name}:gotoLine`,
+ (e, line, column, syncToPdf) => {
+ if (line != null) {
+ return setTimeout(() => {
+ this.adapter.gotoLine(line, column)
+ if (syncToPdf) this.onSyncToPdf()
+ }, 10)
+ }
+ }
+ ) // Hack: Must happen after @gotoStoredPosition
+
+ this.$scope.$on(`${this.$scope.name}:gotoOffset`, (e, offset) => {
+ if (offset != null) {
+ return setTimeout(() => {
+ return this.adapter.gotoOffset(offset)
+ }, 10)
+ }
+ }) // Hack: Must happen after @gotoStoredPosition
+
+ this.$scope.$on(`${this.$scope.name}:clearSelection`, e => {
+ return this.adapter.clearSelection()
+ })
+ }
+
+ storePositionAndLine() {
+ this.storeCursorPosition()
+ return this.storeFirstVisibleLine()
+ }
+
+ jumpToPositionInNewDoc() {
+ this.doc_id =
+ this.$scope.sharejsDoc != null ? this.$scope.sharejsDoc.doc_id : undefined
+ return setTimeout(() => {
+ return this.gotoStoredPosition()
+ }, 0)
+ }
+
+ onUnload() {
+ this.storeCursorPosition()
+ return this.storeFirstVisibleLine()
+ }
+
+ onCursorChange() {
+ return this.emitCursorUpdateEvent()
+ }
+
+ onSyncToPdf() {
+ return this.$scope.$emit(`cursor:${this.$scope.name}:syncToPdf`)
+ }
+
+ storeFirstVisibleLine() {
+ if (this.doc_id != null) {
+ const docPosition = this.localStorage(`doc.position.${this.doc_id}`) || {}
+ docPosition.firstVisibleLine = this.adapter.getEditorScrollPosition()
+ return this.localStorage(`doc.position.${this.doc_id}`, docPosition)
+ }
+ }
+
+ storeCursorPosition() {
+ if (this.doc_id != null) {
+ const docPosition = this.localStorage(`doc.position.${this.doc_id}`) || {}
+ docPosition.cursorPosition = this.adapter.getCursor()
+ return this.localStorage(`doc.position.${this.doc_id}`, docPosition)
+ }
+ }
+
+ emitCursorUpdateEvent() {
+ const cursor = this.adapter.getCursor()
+ return this.$scope.$emit(`cursor:${this.$scope.name}:update`, cursor)
+ }
+
+ gotoStoredPosition() {
+ if (this.doc_id == null) {
+ return
+ }
+ const pos = this.localStorage(`doc.position.${this.doc_id}`) || {}
+ this.adapter.setCursor(pos)
+ return this.adapter.setEditorScrollPosition(pos)
+ }
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/highlights/HighlightsManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/highlights/HighlightsManager.js
new file mode 100644
index 0000000000..e66c6a5131
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/highlights/HighlightsManager.js
@@ -0,0 +1,396 @@
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import 'ace/ace'
+import ColorManager from '../../../../colors/ColorManager'
+let HighlightsManager
+const { Range } = ace.require('ace/range')
+
+export default HighlightsManager = class HighlightsManager {
+ constructor($scope, editor, element) {
+ this.$scope = $scope
+ this.editor = editor
+ this.element = element
+ this.markerIds = []
+ this.labels = []
+
+ this.$scope.annotationLabel = {
+ show: false,
+ right: 'auto',
+ left: 'auto',
+ top: 'auto',
+ bottom: 'auto',
+ backgroundColor: 'black',
+ text: '',
+ }
+
+ this.$scope.updateLabels = {
+ updatesAbove: 0,
+ updatesBelow: 0,
+ }
+
+ this.$scope.$watch('highlights', value => {
+ return this.redrawAnnotations()
+ })
+
+ this.$scope.$watch('theme', value => {
+ return this.redrawAnnotations()
+ })
+
+ this.editor.on('mousemove', e => {
+ const position = this.editor.renderer.screenToTextCoordinates(
+ e.clientX,
+ e.clientY
+ )
+ e.position = position
+ return this.showAnnotationLabels(position)
+ })
+
+ const onChangeScrollTop = () => {
+ return this.updateShowMoreLabels()
+ }
+
+ this.editor.getSession().on('changeScrollTop', onChangeScrollTop)
+
+ this.$scope.$watch('text', () => {
+ if (this.$scope.navigateHighlights) {
+ return setTimeout(() => {
+ return this.scrollToFirstHighlight()
+ }, 0)
+ }
+ })
+
+ this.editor.on('changeSession', e => {
+ if (e.oldSession != null) {
+ e.oldSession.off('changeScrollTop', onChangeScrollTop)
+ }
+ e.session.on('changeScrollTop', onChangeScrollTop)
+ return this.redrawAnnotations()
+ })
+
+ this.$scope.gotoHighlightBelow = () => {
+ if (this.firstHiddenHighlightAfter == null) {
+ return
+ }
+ return this.editor.scrollToLine(
+ this.firstHiddenHighlightAfter.end.row,
+ true,
+ false
+ )
+ }
+
+ this.$scope.gotoHighlightAbove = () => {
+ if (this.lastHiddenHighlightBefore == null) {
+ return
+ }
+ return this.editor.scrollToLine(
+ this.lastHiddenHighlightBefore.start.row,
+ true,
+ false
+ )
+ }
+ }
+
+ redrawAnnotations() {
+ this._clearMarkers()
+ this._clearLabels()
+
+ for (const annotation of Array.from(this.$scope.highlights || [])) {
+ ;(annotation => {
+ const colorScheme = ColorManager.getColorScheme(
+ annotation.hue,
+ this.element
+ )
+ if (annotation.cursor != null) {
+ this.labels.push({
+ text: annotation.label,
+ range: new Range(
+ annotation.cursor.row,
+ annotation.cursor.column,
+ annotation.cursor.row,
+ annotation.cursor.column + 1
+ ),
+ colorScheme,
+ snapToStartOfRange: true,
+ })
+ return this._drawCursor(annotation, colorScheme)
+ } else if (annotation.highlight != null) {
+ this.labels.push({
+ text: annotation.label,
+ range: new Range(
+ annotation.highlight.start.row,
+ annotation.highlight.start.column,
+ annotation.highlight.end.row,
+ annotation.highlight.end.column
+ ),
+ colorScheme,
+ })
+ return this._drawHighlight(annotation, colorScheme)
+ } else if (annotation.strikeThrough != null) {
+ this.labels.push({
+ text: annotation.label,
+ range: new Range(
+ annotation.strikeThrough.start.row,
+ annotation.strikeThrough.start.column,
+ annotation.strikeThrough.end.row,
+ annotation.strikeThrough.end.column
+ ),
+ colorScheme,
+ })
+ return this._drawStrikeThrough(annotation, colorScheme)
+ }
+ })(annotation)
+ }
+
+ return this.updateShowMoreLabels()
+ }
+
+ showAnnotationLabels(position) {
+ let labelToShow = null
+ for (const label of Array.from(this.labels || [])) {
+ if (label.range.contains(position.row, position.column)) {
+ labelToShow = label
+ }
+ }
+
+ if (labelToShow == null) {
+ // this is the most common path, triggered on mousemove, so
+ // for performance only apply setting when it changes
+ if (
+ __guard__(
+ this.$scope != null ? this.$scope.annotationLabel : undefined,
+ x => x.show
+ ) !== false
+ ) {
+ return this.$scope.$apply(() => {
+ return (this.$scope.annotationLabel.show = false)
+ })
+ }
+ } else {
+ let bottom, coords, left, right, top
+ const $ace = $(this.editor.renderer.container).find('.ace_scroller')
+ // Move the label into the Ace content area so that offsets and positions are easy to calculate.
+ $ace.append(this.element.find('.annotation-label'))
+
+ if (labelToShow.snapToStartOfRange) {
+ coords = this.editor.renderer.textToScreenCoordinates(
+ labelToShow.range.start.row,
+ labelToShow.range.start.column
+ )
+ } else {
+ coords = this.editor.renderer.textToScreenCoordinates(
+ position.row,
+ position.column
+ )
+ }
+
+ const offset = $ace.offset()
+ const height = $ace.height()
+ coords.pageX = coords.pageX - offset.left
+ coords.pageY = coords.pageY - offset.top
+
+ if (coords.pageY > this.editor.renderer.lineHeight * 2) {
+ top = 'auto'
+ bottom = height - coords.pageY
+ } else {
+ top = coords.pageY + this.editor.renderer.lineHeight
+ bottom = 'auto'
+ }
+
+ // Apply this first that the label has the correct width when calculating below
+ this.$scope.$apply(() => {
+ this.$scope.annotationLabel.text = labelToShow.text
+ return (this.$scope.annotationLabel.show = true)
+ })
+
+ const $label = this.element.find('.annotation-label')
+
+ if (coords.pageX + $label.outerWidth() < $ace.width()) {
+ left = coords.pageX
+ right = 'auto'
+ } else {
+ right = 0
+ left = 'auto'
+ }
+
+ return this.$scope.$apply(() => {
+ return (this.$scope.annotationLabel = {
+ show: true,
+ left,
+ right,
+ bottom,
+ top,
+ backgroundColor: labelToShow.colorScheme.labelBackgroundColor,
+ text: labelToShow.text,
+ })
+ })
+ }
+ }
+
+ updateShowMoreLabels() {
+ if (!this.$scope.navigateHighlights) {
+ return
+ }
+ return setTimeout(() => {
+ const firstRow = this.editor.getFirstVisibleRow()
+ const lastRow = this.editor.getLastVisibleRow()
+ let highlightsBefore = 0
+ let highlightsAfter = 0
+ this.lastHiddenHighlightBefore = null
+ this.firstHiddenHighlightAfter = null
+ for (const annotation of Array.from(this.$scope.highlights || [])) {
+ const range = annotation.highlight || annotation.strikeThrough
+ if (range == null) {
+ continue
+ }
+ if (range.start.row < firstRow) {
+ highlightsBefore += 1
+ this.lastHiddenHighlightBefore = range
+ }
+ if (range.end.row > lastRow) {
+ highlightsAfter += 1
+ if (!this.firstHiddenHighlightAfter) {
+ this.firstHiddenHighlightAfter = range
+ }
+ }
+ }
+
+ return this.$scope.$apply(() => {
+ return (this.$scope.updateLabels = {
+ highlightsBefore,
+ highlightsAfter,
+ })
+ })
+ }, 100)
+ }
+
+ scrollToFirstHighlight() {
+ return (() => {
+ const result = []
+ for (const annotation of Array.from(this.$scope.highlights || [])) {
+ const range = annotation.highlight || annotation.strikeThrough
+ if (range == null) {
+ continue
+ }
+ this.editor.scrollToLine(range.start.row, true, false)
+ break
+ }
+ return result
+ })()
+ }
+
+ _clearMarkers() {
+ for (const marker_id of Array.from(this.markerIds)) {
+ this.editor.getSession().removeMarker(marker_id)
+ }
+ return (this.markerIds = [])
+ }
+
+ _clearLabels() {
+ return (this.labels = [])
+ }
+
+ _drawCursor(annotation, colorScheme) {
+ return this._addMarkerWithCustomStyle(
+ new Range(
+ annotation.cursor.row,
+ annotation.cursor.column,
+ annotation.cursor.row,
+ annotation.cursor.column + 1
+ ),
+ 'annotation remote-cursor',
+ false,
+ `border-color: ${colorScheme.cursor};`
+ )
+ }
+
+ _drawHighlight(annotation, colorScheme) {
+ return this._addMarkerWithCustomStyle(
+ new Range(
+ annotation.highlight.start.row,
+ annotation.highlight.start.column,
+ annotation.highlight.end.row,
+ annotation.highlight.end.column
+ ),
+ 'annotation highlight',
+ false,
+ `background-color: ${colorScheme.highlightBackgroundColor}`
+ )
+ }
+
+ _drawStrikeThrough(annotation, colorScheme) {
+ this._addMarkerWithCustomStyle(
+ new Range(
+ annotation.strikeThrough.start.row,
+ annotation.strikeThrough.start.column,
+ annotation.strikeThrough.end.row,
+ annotation.strikeThrough.end.column
+ ),
+ 'annotation strike-through-background',
+ false,
+ `background-color: ${colorScheme.strikeThroughBackgroundColor}`
+ )
+ return this._addMarkerWithCustomStyle(
+ new Range(
+ annotation.strikeThrough.start.row,
+ annotation.strikeThrough.start.column,
+ annotation.strikeThrough.end.row,
+ annotation.strikeThrough.end.column
+ ),
+ 'annotation strike-through-foreground',
+ true,
+ `color: ${colorScheme.strikeThroughForegroundColor};`
+ )
+ }
+
+ _addMarkerWithCustomStyle(range, klass, foreground, style) {
+ let markerLayer
+ if (!foreground) {
+ markerLayer = this.editor.renderer.$markerBack
+ } else {
+ markerLayer = this.editor.renderer.$markerFront
+ }
+
+ return this.markerIds.push(
+ this.editor.getSession().addMarker(
+ range,
+ klass,
+ function (html, range, left, top, config) {
+ if (range.isMultiLine()) {
+ return markerLayer.drawTextMarker(html, range, klass, config, style)
+ } else {
+ return markerLayer.drawSingleLineMarker(
+ html,
+ range,
+ `${klass} ace_start`,
+ config,
+ 0,
+ style
+ )
+ }
+ },
+ foreground
+ )
+ )
+ }
+}
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/metadata/MetadataManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/metadata/MetadataManager.js
new file mode 100644
index 0000000000..eea37c8a06
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/metadata/MetadataManager.js
@@ -0,0 +1,100 @@
+import _ from 'lodash'
+/* eslint-disable
+ max-len,
+ no-cond-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import 'ace/ace'
+let MetadataManager
+const { Range } = ace.require('ace/range')
+
+const getLastCommandFragment = function (lineUpToCursor) {
+ let m
+ if ((m = lineUpToCursor.match(/(\\[^\\]+)$/))) {
+ return m[1]
+ } else {
+ return null
+ }
+}
+
+export default MetadataManager = class MetadataManager {
+ constructor($scope, editor, element, Metadata) {
+ this.$scope = $scope
+ this.editor = editor
+ this.element = element
+ this.Metadata = Metadata
+ this.debouncer = {} // DocId => Timeout
+
+ const onChange = change => {
+ if (change.origin === 'remote') {
+ return
+ }
+ if (!['remove', 'insert'].includes(change.action)) {
+ return
+ }
+ const cursorPosition = this.editor.getCursorPosition()
+ const { end } = change
+ let range = new Range(end.row, 0, end.row, end.column)
+ let lineUpToCursor = this.editor.getSession().getTextRange(range)
+ if (
+ lineUpToCursor.trim() === '%' ||
+ lineUpToCursor.slice(0, 1) === '\\'
+ ) {
+ range = new Range(end.row, 0, end.row, end.column + 80)
+ lineUpToCursor = this.editor.getSession().getTextRange(range)
+ }
+ const commandFragment = getLastCommandFragment(lineUpToCursor)
+
+ const linesContainPackage = _.some(change.lines, line =>
+ line.match(/^\\usepackage(?:\[.{0,80}?])?{(.{0,80}?)}/)
+ )
+ const linesContainReqPackage = _.some(change.lines, line =>
+ line.match(/^\\RequirePackage(?:\[.{0,80}?])?{(.{0,80}?)}/)
+ )
+ const linesContainLabel = _.some(change.lines, line =>
+ line.match(/\\label{(.{0,80}?)}/)
+ )
+ const linesContainMeta =
+ linesContainPackage || linesContainLabel || linesContainReqPackage
+
+ const lastCommandFragmentIsLabel =
+ (commandFragment != null ? commandFragment.slice(0, 7) : undefined) ===
+ '\\label{'
+ const lastCommandFragmentIsPackage =
+ (commandFragment != null ? commandFragment.slice(0, 11) : undefined) ===
+ '\\usepackage'
+ const lastCommandFragmentIsReqPack =
+ (commandFragment != null ? commandFragment.slice(0, 15) : undefined) ===
+ '\\RequirePackage'
+ const lastCommandFragmentIsMeta =
+ lastCommandFragmentIsPackage ||
+ lastCommandFragmentIsLabel ||
+ lastCommandFragmentIsReqPack
+
+ if (linesContainMeta || lastCommandFragmentIsMeta) {
+ return this.Metadata.scheduleLoadDocMetaFromServer(this.$scope.docId)
+ }
+ }
+
+ this.editor.on('changeSession', e => {
+ e.oldSession.off('change', onChange)
+ return e.session.on('change', onChange)
+ })
+ }
+
+ getAllLabels() {
+ return this.Metadata.getAllLabels()
+ }
+
+ getAllPackages() {
+ return this.Metadata.getAllPackages()
+ }
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/HighlightedWordManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/HighlightedWordManager.js
new file mode 100644
index 0000000000..b193ca7989
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/HighlightedWordManager.js
@@ -0,0 +1,137 @@
+import _ from 'lodash'
+/* eslint-disable
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import 'ace/ace'
+let HighlightedWordManager
+const { Range } = ace.require('ace/range')
+
+class Highlight {
+ constructor(markerId, range, options) {
+ this.markerId = markerId
+ this.range = range
+ this.word = options.word
+ this.suggestions = options.suggestions
+ }
+}
+
+export default HighlightedWordManager = class HighlightedWordManager {
+ constructor(editor) {
+ this.editor = editor
+ this.reset()
+ }
+
+ reset() {
+ if (this.highlights != null) {
+ this.highlights.forEach(highlight => {
+ return this.editor.getSession().removeMarker(highlight.markerId)
+ })
+ }
+ return (this.highlights = [])
+ }
+
+ addHighlight(options) {
+ const session = this.editor.getSession()
+ const doc = session.getDocument()
+ // Set up Range that will automatically update it's positions when the
+ // document changes
+ const range = new Range()
+ range.start = doc.createAnchor({
+ row: options.row,
+ column: options.column,
+ })
+ range.end = doc.createAnchor({
+ row: options.row,
+ column: options.column + options.word.length,
+ })
+ // Prevent range from adding newly typed characters to the end of the word.
+ // This makes it appear as if the spelling error continues to the next word
+ // even after a space
+ range.end.$insertRight = true
+
+ const markerId = session.addMarker(
+ range,
+ 'spelling-highlight',
+ 'text',
+ false
+ )
+
+ return this.highlights.push(new Highlight(markerId, range, options))
+ }
+
+ removeHighlight(highlight) {
+ this.editor.getSession().removeMarker(highlight.markerId)
+ return (this.highlights = this.highlights.filter(hl => hl !== highlight))
+ }
+
+ removeWord(word) {
+ return this.highlights
+ .filter(highlight => highlight.word === word)
+ .forEach(highlight => {
+ return this.removeHighlight(highlight)
+ })
+ }
+
+ clearRow(row) {
+ return this.highlights
+ .filter(highlight => highlight.range.start.row === row)
+ .forEach(highlight => {
+ return this.removeHighlight(highlight)
+ })
+ }
+
+ findHighlightWithinRange(range) {
+ return _.find(this.highlights, highlight => {
+ return this._doesHighlightOverlapRange(highlight, range.start, range.end)
+ })
+ }
+
+ _doesHighlightOverlapRange(highlight, start, end) {
+ const highlightRow = highlight.range.start.row
+ const highlightStartColumn = highlight.range.start.column
+ const highlightEndColumn = highlight.range.end.column
+
+ const highlightIsAllBeforeRange =
+ highlightRow < start.row ||
+ (highlightRow === start.row && highlightEndColumn <= start.column)
+ const highlightIsAllAfterRange =
+ highlightRow > end.row ||
+ (highlightRow === end.row && highlightStartColumn >= end.column)
+ return !(highlightIsAllBeforeRange || highlightIsAllAfterRange)
+ }
+
+ clearHighlightTouchingRange(range) {
+ const highlight = _.find(this.highlights, hl => {
+ return this._doesHighlightTouchRange(hl, range.start, range.end)
+ })
+ if (highlight) {
+ return this.removeHighlight(highlight)
+ }
+ }
+
+ _doesHighlightTouchRange(highlight, start, end) {
+ const highlightRow = highlight.range.start.row
+ const highlightStartColumn = highlight.range.start.column
+ const highlightEndColumn = highlight.range.end.column
+
+ const rangeStartIsWithinHighlight =
+ highlightStartColumn <= start.column && highlightEndColumn >= start.column
+ const rangeEndIsWithinHighlight =
+ highlightStartColumn <= end.column && highlightEndColumn >= end.column
+
+ return (
+ highlightRow === start.row &&
+ (rangeStartIsWithinHighlight || rangeEndIsWithinHighlight)
+ )
+ }
+}
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/SpellCheckAdapter.js b/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/SpellCheckAdapter.js
new file mode 100644
index 0000000000..2339875564
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/SpellCheckAdapter.js
@@ -0,0 +1,96 @@
+import HighlightedWordManager from './HighlightedWordManager'
+import 'ace/ace'
+const { Range } = ace.require('ace/range')
+
+class SpellCheckAdapter {
+ constructor(editor) {
+ this.replaceWord = this.replaceWord.bind(this)
+ this.editor = editor
+ this.highlightedWordManager = new HighlightedWordManager(this.editor)
+ }
+
+ getLines() {
+ return this.editor.getValue().split('\n')
+ }
+
+ getLineCount() {
+ return this.editor.session.getLength()
+ }
+
+ getFirstVisibleRowNum() {
+ return this.editor.renderer.layerConfig.firstRow
+ }
+
+ getLastVisibleRowNum() {
+ return this.editor.renderer.layerConfig.lastRow
+ }
+
+ getLinesByRows(rows) {
+ return rows.map(rowIdx => this.editor.session.doc.getLine(rowIdx))
+ }
+
+ getSelectionContents() {
+ return this.editor.getSelectedText()
+ }
+
+ normalizeChangeEvent(e) {
+ return e
+ }
+
+ getCoordsFromContextMenuEvent(e) {
+ e.domEvent.stopPropagation()
+ return {
+ x: e.domEvent.clientX,
+ y: e.domEvent.clientY,
+ }
+ }
+
+ preventContextMenuEventDefault(e) {
+ e.domEvent.preventDefault()
+ }
+
+ getHighlightFromCoords(coords) {
+ const position = this.editor.renderer.screenToTextCoordinates(
+ coords.x,
+ coords.y
+ )
+ return this.highlightedWordManager.findHighlightWithinRange({
+ start: position,
+ end: position,
+ })
+ }
+
+ isContextMenuEventOnBottomHalf(e) {
+ const { clientY } = e.domEvent
+ const editorBoundingRect = e.target.container.getBoundingClientRect()
+ const relativeYPos =
+ (clientY - editorBoundingRect.top) / editorBoundingRect.height
+ return relativeYPos > 0.5
+ }
+
+ selectHighlightedWord(highlight) {
+ const { row } = highlight.range.start
+ const startColumn = highlight.range.start.column
+ const endColumn = highlight.range.end.column
+
+ this.editor
+ .getSession()
+ .getSelection()
+ .setSelectionRange(new Range(row, startColumn, row, endColumn))
+ }
+
+ replaceWord(highlight, newWord) {
+ const { row } = highlight.range.start
+ const startColumn = highlight.range.start.column
+ const endColumn = highlight.range.end.column
+
+ this.editor
+ .getSession()
+ .replace(new Range(row, startColumn, row, endColumn), newWord)
+
+ // Bring editor back into focus after clicking on suggestion
+ this.editor.focus()
+ }
+}
+
+export default SpellCheckAdapter
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.js
new file mode 100644
index 0000000000..caaad3986d
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.js
@@ -0,0 +1,436 @@
+// eslint-disable-next-line prefer-regex-literals
+const BLACKLISTED_COMMAND_REGEX = new RegExp(
+ `\
+\\\\\
+(label\
+|[a-z]{0,16}ref\
+|usepackage\
+|begin\
+|end\
+|[a-z]{0,16}cite\
+|input\
+|include\
+|includegraphics)\
+(\\[[^\\]]*\\])?\
+\\{[^}]*\\}\
+`,
+ 'g'
+)
+// Regex generated from /\\?['\p{L}]+/g via https://mothereff.in/regexpu.
+// \p{L} matches unicode characters in the 'letter' category, but is not supported until ES6.
+const WORD_REGEX = /\\?(?:['A-Za-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FD5\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AE\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF30-\uDF40\uDF42-\uDF49\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF19]|\uD806[\uDCA0-\uDCDF\uDCFF\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F]|\uD808[\uDC00-\uDF99]|\uD809[\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0]|\uD821[\uDC00-\uDFEC]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00\uDC01]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1]|\uD87E[\uDC00-\uDE1D])+/g
+const DEBOUNCE_DELAY = 500
+
+class SpellCheckManager {
+ constructor($scope, $cacheFactory, $http, $q, adapter) {
+ this.onChange = this.onChange.bind(this)
+ this.onSessionChange = this.onSessionChange.bind(this)
+ this.onContextMenu = this.onContextMenu.bind(this)
+ this.onScroll = this.onScroll.bind(this)
+ this.learnWord = this.learnWord.bind(this)
+ this.$scope = $scope
+ this.$http = $http
+ this.$q = $q
+ this.adapter = adapter
+ this.$scope.spellMenu = {
+ open: false,
+ top: '0px',
+ left: '0px',
+ suggestions: [],
+ }
+ this.inProgressRequest = null
+ this.changedLines = []
+ this.firstCheck = true
+
+ this.$scope.$watch('spellCheckLanguage', (language, oldLanguage) => {
+ if (language !== oldLanguage && oldLanguage != null) {
+ return this.reInitForLangChange()
+ }
+ })
+ this.$scope.replaceWord = this.adapter.replaceWord
+ this.$scope.learnWord = this.learnWord
+
+ this.cache =
+ $cacheFactory.get(`spellCheck-cache`) ||
+ $cacheFactory(`spellCheck-cache`, {
+ capacity: 15000,
+ })
+
+ this.selectedHighlightContents = null
+
+ $(document).on('click', e => {
+ // There is a bug (?) in Safari when ctrl-clicking an element, and the
+ // the contextmenu event is preventDefault-ed. In this case, the
+ // contextmenu event *and* a click event propagate from the element.
+ // If the contextmenu is *not* preventDefault-ed, then only the
+ // contextmenu event propagates. The latter behaviour is what other
+ // browsers do no matter if the event is preventDefault-ed or not.
+ // See: https://stackoverflow.com/questions/53660359/preventing-default-on-contextmenu-event-triggers-subsequent-click-event
+ // This means that on Safari the spelling menu is opened in response to
+ // the contextmenu event, but then quickly closed due to the
+ // (propagated) click event.
+ // We still need to handle the click event, to enable the "click-away"
+ // behaviour. The workaround is to check if we're in Safari and the Ctrl
+ // key is pressed in the click handler, and if so, then prevent the
+ // spelling menu from closing.
+ // That when clicking as normal, the "click-away" behaviour still works
+ // as before.
+ // When ctrl-clicking, the click event is not propagated, so the handler
+ // is ignored. However this triggers another contextmenu event, which
+ // closes the previous spelling menu.
+ if (window._ide.browserIsSafari && e.ctrlKey) {
+ return
+ }
+
+ // Ignore if right click
+ if (e.which !== 3) {
+ this.closeContextMenu()
+ }
+ return true
+ })
+ }
+
+ init() {
+ this.changedLines = Array(this.adapter.getLineCount()).fill(true)
+ this.firstCheck = true
+ if (this.isSpellCheckEnabled()) {
+ this.runSpellCheckSoon(DEBOUNCE_DELAY)
+ }
+ }
+
+ reInitForLangChange() {
+ this.adapter.highlightedWordManager.reset()
+ this.init()
+ }
+
+ isSpellCheckEnabled() {
+ return !!(
+ this.$scope.spellCheck &&
+ this.$scope.spellCheckLanguage &&
+ this.$scope.spellCheckLanguage !== ''
+ )
+ }
+
+ onChange(e) {
+ if (this.isSpellCheckEnabled()) {
+ this.$scope.$applyAsync(() => {
+ if (
+ this.selectedHighlightContents &&
+ this.selectedHighlightContents !== this.adapter.getSelectionContents()
+ ) {
+ this.closeContextMenu()
+ }
+ })
+ this.markLinesAsUpdated(this.adapter.normalizeChangeEvent(e))
+ this.adapter.highlightedWordManager.clearHighlightTouchingRange(e)
+ this.runSpellCheckSoon(DEBOUNCE_DELAY)
+ }
+ }
+
+ onSessionChange() {
+ this.adapter.highlightedWordManager.reset()
+ if (this.inProgressRequest != null) {
+ this.inProgressRequest.abort()
+ }
+
+ if (this.isSpellCheckEnabled()) {
+ this.runSpellCheckSoon(DEBOUNCE_DELAY)
+ }
+ }
+
+ onContextMenu(e) {
+ this.closeContextMenu()
+ this.openContextMenu(e)
+ }
+
+ onScroll() {
+ if (this.isSpellCheckEnabled()) {
+ this.runSpellCheckSoon(DEBOUNCE_DELAY)
+ }
+ this.closeContextMenu()
+ }
+
+ openContextMenu(e) {
+ const coords = this.adapter.getCoordsFromContextMenuEvent(e)
+ const highlight = this.adapter.getHighlightFromCoords(coords)
+ const shouldPositionFromBottom = this.adapter.isContextMenuEventOnBottomHalf(
+ e
+ )
+ if (highlight) {
+ this.adapter.preventContextMenuEventDefault(e)
+ this.adapter.selectHighlightedWord(highlight)
+ this.$scope.$applyAsync(() => {
+ this.selectedHighlightContents = this.adapter.getSelectionContents()
+ this.$scope.spellMenu = {
+ open: true,
+ top: coords.y + 'px',
+ left: coords.x + 'px',
+ layoutFromBottom: shouldPositionFromBottom,
+ highlight,
+ }
+ })
+ }
+ }
+
+ closeContextMenu() {
+ // This is triggered on scroll, so for performance only apply setting when
+ // it changes
+ if (
+ (this.$scope != null ? this.$scope.spellMenu : undefined) &&
+ this.$scope.spellMenu.open !== false
+ ) {
+ this.selectedHighlightContents = null
+ this.$scope.$applyAsync(() => {
+ this.$scope.spellMenu.open = false
+ })
+ }
+ }
+
+ learnWord(highlight) {
+ this.apiRequest('/learn', { word: highlight.word })
+ this.adapter.highlightedWordManager.removeWord(highlight.word)
+ const language = this.$scope.spellCheckLanguage
+ this.cache.put(`${language}:${highlight.word}`, true)
+ }
+
+ markLinesAsUpdated(change) {
+ const { start } = change
+ const { end } = change
+
+ const insertLines = () => {
+ let lines = end.row - start.row
+ while (lines--) {
+ this.changedLines.splice(start.row, 0, true)
+ }
+ }
+
+ const removeLines = () => {
+ let lines = end.row - start.row
+ while (lines--) {
+ this.changedLines.splice(start.row + 1, 1)
+ }
+ }
+
+ if (change.action === 'insert') {
+ this.changedLines[start.row] = true
+ insertLines()
+ } else if (change.action === 'remove') {
+ this.changedLines[start.row] = true
+ removeLines()
+ }
+ }
+
+ runSpellCheckSoon(delay) {
+ if (delay == null) {
+ delay = 1000
+ }
+ const run = () => {
+ delete this.timeoutId
+ this.runSpellCheck()
+ }
+ if (this.timeoutId != null) {
+ clearTimeout(this.timeoutId)
+ }
+ this.timeoutId = setTimeout(run, delay)
+ }
+
+ runSpellCheck() {
+ let j
+ let i, key, word
+ const rowNumsToCheck = this.getRowNumsToCheck()
+ const language = this.$scope.spellCheckLanguage
+ let { words, positions } = this.getWords(rowNumsToCheck)
+
+ const highlights = []
+ const seen = {}
+ const newWords = []
+ const newPositions = []
+
+ // iterate through all words, building up a list of
+ // newWords/newPositions not in the cache
+ for (j = 0, i = j; j < words.length; j++, i = j) {
+ word = words[i]
+ key = `${language}:${word}`
+ if (seen[key] == null) {
+ seen[key] = this.cache.get(key)
+ } // avoid hitting the cache unnecessarily
+ const cached = seen[key]
+ if (cached == null) {
+ newWords.push(words[i])
+ newPositions.push(positions[i])
+ } else if (cached === true) {
+ // word is correct
+ } else {
+ highlights.push({
+ column: positions[i].column,
+ row: positions[i].row,
+ word,
+ suggestions: cached,
+ })
+ }
+ }
+ words = newWords
+ positions = newPositions
+
+ const displayResult = highlights => {
+ if (this.timeoutId != null) {
+ return
+ }
+ this.firstCheck = false
+ rowNumsToCheck.forEach(row => {
+ this.changedLines[row] = false
+ this.adapter.highlightedWordManager.clearRow(row)
+ })
+ highlights.map(highlight =>
+ this.adapter.highlightedWordManager.addHighlight(highlight)
+ )
+ }
+
+ if (!words.length) {
+ displayResult(highlights)
+ } else {
+ this.inProgressRequest = this.apiRequest(
+ '/check',
+ { language, words },
+ (error, result) => {
+ delete this.inProgressRequest
+ if (error != null || result == null || result.misspellings == null) {
+ return null
+ }
+ const misspelled = []
+ for (const misspelling of result.misspellings) {
+ word = words[misspelling.index]
+ const position = positions[misspelling.index]
+ misspelled[misspelling.index] = true
+ highlights.push({
+ column: position.column,
+ row: position.row,
+ word,
+ suggestions: misspelling.suggestions,
+ })
+ key = `${language}:${word}`
+ if (!seen[key]) {
+ this.cache.put(key, misspelling.suggestions)
+ seen[key] = true
+ }
+ }
+ for (i = 0; i < words.length; i++) {
+ word = words[i]
+ if (!misspelled[i]) {
+ key = `${language}:${word}`
+ if (!seen[key]) {
+ this.cache.put(key, true)
+ seen[key] = true
+ }
+ }
+ }
+ displayResult(highlights)
+ }
+ )
+ }
+ }
+
+ apiRequest(endpoint, data, callback) {
+ if (callback == null) {
+ callback = function (error, result) {
+ console.error(error)
+ }
+ }
+ data.token = window.user.id
+ data._csrf = window.csrfToken
+ // use angular timeout option to cancel request if doc is changed
+ const requestHandler = this.$q.defer()
+ const options = { timeout: requestHandler.promise }
+ this.$http
+ .post(`/spelling${endpoint}`, data, options)
+ .then(response => {
+ return callback(null, response.data)
+ })
+ .catch(response => {
+ return callback(new Error('api failure'))
+ })
+ // provide a method to cancel the request
+ const abortRequest = () => requestHandler.resolve()
+ return { abort: abortRequest }
+ }
+
+ getWords(rowNumsToCheck) {
+ const lines = this.adapter.getLinesByRows(rowNumsToCheck)
+ const words = []
+ const positions = []
+ for (let row = 0; row < lines.length; row++) {
+ let line = lines[row]
+ const rowIdx = rowNumsToCheck[row]
+ line = this.blankOutBlacklistedCommands(line)
+ var result
+ WORD_REGEX.lastIndex = 0 // reset global stateful regexp for this usage
+ while ((result = WORD_REGEX.exec(line))) {
+ let word = result[0]
+ if (word[0] === "'") {
+ word = word.slice(1)
+ }
+ if (word[word.length - 1] === "'") {
+ word = word.slice(0, -1)
+ }
+ positions.push({ row: rowIdx, column: result.index })
+ words.push(word)
+ }
+ }
+ return { words, positions }
+ }
+
+ // Returns row numbers for dirty lines (i.e. with changes, need to be checked).
+ // Initially, all lines are considered to be dirty/have changes (i.e. weren't checked before).
+ // Generally, only the visible viewport is considered. Upon initialization, a larger area is
+ // considered (visible viewport ± 2x the size of the visible viewport).
+ //
+ // Examples:
+ // 1. Document with 10 lines; initial check
+ // Viewport show lines 3 to 7
+ // Initial check means that we are going to also check the area above and below the visible viewport
+ // Extra area to be checked is 2x the size of visible viewport (5 visible lines; 2 * 5 = 10), i.e.
+ // 3 - 10 = -7 (clamped to 0, the lower boundary of document lines)
+ // 7 + 10 = 17 (clamped to 9, the upper boundary of document lines)
+ // Expected result: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
+ // 2. Document with 10 lines; document has already been initially checked; user changes lines 5 and 6
+ // Viewport show lines 3 to 7
+ // Expected result: [ 5, 6 ] (i.e. unchanged lines are ignored; intersection of viewport and changed lines)
+ // 3. Document with 10 lines, document has already been initially checked, remote user changes lines 1 and 2
+ // Viewport show lines 3 to 7
+ // Expected result: [ ] (i.e. changes were outside viewport, so there are no visible changed lines)
+ getRowNumsToCheck() {
+ const firstVisibleRowNum = this.adapter.getFirstVisibleRowNum()
+ const lastVisibleRowNum = this.adapter.getLastVisibleRowNum()
+ let firstRowNumtoCheck = firstVisibleRowNum
+ let lastRowNumtoCheck = lastVisibleRowNum
+
+ if (this.firstCheck) {
+ const lastRowNum = this.adapter.getLineCount() - 1
+ const nVisibleLines = lastVisibleRowNum - firstVisibleRowNum + 1
+ firstRowNumtoCheck = Math.max(0, firstVisibleRowNum - 2 * nVisibleLines)
+ lastRowNumtoCheck = Math.min(
+ lastVisibleRowNum + 2 * nVisibleLines,
+ lastRowNum
+ )
+ }
+
+ return this.changedLines.reduce((rowNumsToCheck, curVal, curRow) => {
+ if (
+ curVal &&
+ curRow >= firstRowNumtoCheck &&
+ curRow <= lastRowNumtoCheck
+ ) {
+ rowNumsToCheck.push(curRow)
+ }
+ return rowNumsToCheck
+ }, [])
+ }
+
+ blankOutBlacklistedCommands(line) {
+ return line.replace(BLACKLISTED_COMMAND_REGEX, command =>
+ Array(command.length + 1).join('.')
+ )
+ }
+}
+
+export default SpellCheckManager
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesAdapter.js b/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesAdapter.js
new file mode 100644
index 0000000000..c6cb1211ed
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesAdapter.js
@@ -0,0 +1,248 @@
+/* eslint-disable
+ camelcase
+ */
+import EditorShareJsCodec from '../../../EditorShareJsCodec'
+import 'ace/ace'
+const { Range } = ace.require('ace/range')
+class TrackChangesAdapter {
+ constructor(editor) {
+ this.editor = editor
+ this.changeIdToMarkerIdMap = {}
+ }
+
+ tearDown() {
+ this.changeIdToMarkerIdMap = {}
+ }
+
+ clearAnnotations() {
+ const session = this.editor.getSession()
+ for (const change_id in this.changeIdToMarkerIdMap) {
+ const markers = this.changeIdToMarkerIdMap[change_id]
+ for (const marker_name in markers) {
+ const marker_id = markers[marker_name]
+ session.removeMarker(marker_id)
+ }
+ }
+ this.changeIdToMarkerIdMap = {}
+ }
+
+ onInsertAdded(change) {
+ const start = this.shareJsOffsetToRowColumn(change.op.p)
+ const end = this.shareJsOffsetToRowColumn(change.op.p + change.op.i.length)
+
+ const session = this.editor.getSession()
+ const background_range = new Range(
+ start.row,
+ start.column,
+ end.row,
+ end.column
+ )
+ const background_marker_id = session.addMarker(
+ background_range,
+ 'track-changes-marker track-changes-added-marker',
+ 'text'
+ )
+ const callout_marker_id = this.createCalloutMarker(
+ start,
+ 'track-changes-added-marker-callout'
+ )
+
+ this.changeIdToMarkerIdMap[change.id] = {
+ background_marker_id,
+ callout_marker_id,
+ }
+ }
+
+ onDeleteAdded(change) {
+ const position = this.shareJsOffsetToRowColumn(change.op.p)
+ const session = this.editor.getSession()
+
+ const markerLayer = this.editor.renderer.$markerBack
+ const klass = 'track-changes-marker track-changes-deleted-marker'
+ const background_range = this.makeZeroWidthRange(position)
+ const background_marker_id = session.addMarker(
+ background_range,
+ klass,
+ (html, range, left, top, config) =>
+ markerLayer.drawSingleLineMarker(
+ html,
+ range,
+ `${klass} ace_start`,
+ config,
+ 0,
+ ''
+ )
+ )
+
+ const callout_marker_id = this.createCalloutMarker(
+ position,
+ 'track-changes-deleted-marker-callout'
+ )
+
+ this.changeIdToMarkerIdMap[change.id] = {
+ background_marker_id,
+ callout_marker_id,
+ }
+ }
+
+ onInsertRemoved(change) {
+ if (this.changeIdToMarkerIdMap[change.id] == null) {
+ return
+ }
+ const {
+ background_marker_id,
+ callout_marker_id,
+ } = this.changeIdToMarkerIdMap[change.id]
+ delete this.changeIdToMarkerIdMap[change.id]
+ const session = this.editor.getSession()
+ session.removeMarker(background_marker_id)
+ session.removeMarker(callout_marker_id)
+ }
+
+ onDeleteRemoved(change) {
+ if (this.changeIdToMarkerIdMap[change.id] == null) {
+ return
+ }
+ const {
+ background_marker_id,
+ callout_marker_id,
+ } = this.changeIdToMarkerIdMap[change.id]
+ delete this.changeIdToMarkerIdMap[change.id]
+
+ const session = this.editor.getSession()
+ session.removeMarker(background_marker_id)
+ session.removeMarker(callout_marker_id)
+ }
+
+ onChangeMoved(change) {
+ let end
+ const start = this.shareJsOffsetToRowColumn(change.op.p)
+ if (change.op.i != null) {
+ end = this.shareJsOffsetToRowColumn(change.op.p + change.op.i.length)
+ } else {
+ end = start
+ }
+ this.updateMarker(change.id, start, end)
+ }
+
+ onCommentAdded(comment) {
+ if (this.changeIdToMarkerIdMap[comment.id] == null) {
+ // Only create new markers if they don't already exist
+ const start = this.shareJsOffsetToRowColumn(comment.op.p)
+ const end = this.shareJsOffsetToRowColumn(
+ comment.op.p + comment.op.c.length
+ )
+ const session = this.editor.getSession()
+ const background_range = new Range(
+ start.row,
+ start.column,
+ end.row,
+ end.column
+ )
+ const background_marker_id = session.addMarker(
+ background_range,
+ 'track-changes-marker track-changes-comment-marker',
+ 'text'
+ )
+ const callout_marker_id = this.createCalloutMarker(
+ start,
+ 'track-changes-comment-marker-callout'
+ )
+ this.changeIdToMarkerIdMap[comment.id] = {
+ background_marker_id,
+ callout_marker_id,
+ }
+ }
+ }
+
+ onCommentMoved(comment) {
+ const start = this.shareJsOffsetToRowColumn(comment.op.p)
+ const end = this.shareJsOffsetToRowColumn(
+ comment.op.p + comment.op.c.length
+ )
+ this.updateMarker(comment.id, start, end)
+ }
+
+ onCommentRemoved(comment) {
+ if (this.changeIdToMarkerIdMap[comment.id] != null) {
+ // Resolved comments may not have marker ids
+ const {
+ background_marker_id,
+ callout_marker_id,
+ } = this.changeIdToMarkerIdMap[comment.id]
+ delete this.changeIdToMarkerIdMap[comment.id]
+ const session = this.editor.getSession()
+ session.removeMarker(background_marker_id)
+ session.removeMarker(callout_marker_id)
+ }
+ }
+
+ updateMarker(change_id, start, end) {
+ if (this.changeIdToMarkerIdMap[change_id] == null) {
+ return
+ }
+ const session = this.editor.getSession()
+ const markers = session.getMarkers()
+ const {
+ background_marker_id,
+ callout_marker_id,
+ } = this.changeIdToMarkerIdMap[change_id]
+ if (background_marker_id != null && markers[background_marker_id] != null) {
+ const background_marker = markers[background_marker_id]
+ background_marker.range.start = start
+ background_marker.range.end = end
+ }
+ if (callout_marker_id != null && markers[callout_marker_id] != null) {
+ const callout_marker = markers[callout_marker_id]
+ callout_marker.range.start = start
+ callout_marker.range.end = start
+ }
+ }
+
+ shareJsOffsetToRowColumn(offset) {
+ const lines = this.editor.getSession().getDocument().getAllLines()
+ return EditorShareJsCodec.shareJsOffsetToRowColumn(offset, lines)
+ }
+
+ createCalloutMarker(position, klass) {
+ const session = this.editor.getSession()
+ const callout_range = this.makeZeroWidthRange(position)
+ const markerLayer = this.editor.renderer.$markerBack
+ return session.addMarker(
+ callout_range,
+ klass,
+ (html, range, left, top, config) =>
+ markerLayer.drawSingleLineMarker(
+ html,
+ range,
+ `track-changes-marker-callout ${klass} ace_start`,
+ config,
+ 0,
+ 'width: auto; right: 0;'
+ )
+ )
+ }
+
+ makeZeroWidthRange(position) {
+ const ace_range = new Range(
+ position.row,
+ position.column,
+ position.row,
+ position.column
+ )
+ // Our delete marker is zero characters wide, but Ace doesn't draw ranges
+ // that are empty. So we monkey patch the range to tell Ace it's not empty
+ // We do want to claim to be empty if we're off screen after clipping rows
+ // though. This is the code we need to trick:
+ // var range = marker.range.clipRows(config.firstRow, config.lastRow);
+ // if (range.isEmpty()) continue;
+ ace_range.clipRows = function (first_row, last_row) {
+ this.isEmpty = function () {
+ return first_row > this.end.row || last_row < this.start.row
+ }
+ return this
+ }
+ return ace_range
+ }
+}
+export default TrackChangesAdapter
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.js
new file mode 100644
index 0000000000..f66f2433a8
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.js
@@ -0,0 +1,665 @@
+/* eslint-disable
+ camelcase,
+ max-len
+ */
+import EditorShareJsCodec from '../../../EditorShareJsCodec'
+import 'ace/ace'
+import '../../../../../utils/EventEmitter'
+import '../../../../colors/ColorManager'
+const { Range } = ace.require('ace/range')
+class TrackChangesManager {
+ constructor($scope, editor, element, adapter) {
+ this._doneUpdateThisLoop = false
+ this._pendingUpdates = false
+
+ this.onChangeSession = this.onChangeSession.bind(this)
+ this.onChangeSelection = this.onChangeSelection.bind(this)
+ this.onCut = this.onCut.bind(this)
+ this.onPaste = this.onPaste.bind(this)
+ this.onResize = this.onResize.bind(this)
+ this.tearDown = this.tearDown.bind(this)
+
+ this.$scope = $scope
+ this.editor = editor
+ this.element = element
+ this.adapter = adapter
+ this._scrollTimeout = null
+ this.changingSelection = false
+
+ if (window.trackChangesManager == null) {
+ window.trackChangesManager = this
+ }
+
+ this.$scope.$watch('trackChanges', track_changes => {
+ if (track_changes == null) {
+ return
+ }
+ this.setTrackChanges(track_changes)
+ })
+
+ this.$scope.$watch('sharejsDoc', (doc, oldDoc) => {
+ if (doc == null) {
+ return
+ }
+ if (oldDoc != null) {
+ this.disconnectFromDoc(oldDoc)
+ }
+ this.setTrackChanges(this.$scope.trackChanges)
+ this.connectToDoc(doc)
+ })
+
+ this.$scope.$on('comment:add', (e, thread_id, offset, length) => {
+ this.addCommentToSelection(thread_id, offset, length)
+ })
+
+ this.$scope.$on('comment:select_line', e => {
+ this.selectLineIfNoSelection()
+ })
+
+ this.$scope.$on('changes:accept', (e, change_ids) => {
+ this.acceptChangeIds(change_ids)
+ })
+
+ this.$scope.$on('changes:reject', (e, change_ids) => {
+ this.rejectChangeIds(change_ids)
+ })
+
+ this.$scope.$on('comment:remove', (e, comment_id) => {
+ this.removeCommentId(comment_id)
+ })
+
+ this.$scope.$on('comment:resolve_threads', (e, thread_ids) => {
+ this.hideCommentsByThreadIds(thread_ids)
+ })
+
+ this.$scope.$on('comment:unresolve_thread', (e, thread_id) => {
+ this.showCommentByThreadId(thread_id)
+ })
+
+ this.$scope.$on('review-panel:recalculate-screen-positions', () => {
+ this.recalculateReviewEntriesScreenPositions()
+ })
+
+ this._resetCutState()
+ }
+
+ onChangeSession(e) {
+ this.clearAnnotations()
+ this.redrawAnnotations()
+
+ if (this.editor) {
+ this.editor.session.on('changeScrollTop', this.onChangeScroll.bind(this))
+ }
+ }
+
+ onChangeScroll() {
+ if (this._scrollTimeout == null) {
+ return (this._scrollTimeout = setTimeout(() => {
+ this.recalculateVisibleEntries()
+ this.$scope.$apply()
+ return (this._scrollTimeout = null)
+ }, 200))
+ }
+ }
+
+ onChangeSelection() {
+ // Deletes can send about 5 changeSelection events, so
+ // just act on the last one.
+ if (!this.changingSelection) {
+ this.changingSelection = true
+ return this.$scope.$evalAsync(() => {
+ this.changingSelection = false
+ return this.updateFocus()
+ })
+ }
+ }
+
+ onResize() {
+ this.recalculateReviewEntriesScreenPositions()
+ }
+
+ connectToDoc(doc) {
+ this.rangesTracker = doc.ranges
+ this.setTrackChanges(this.$scope.trackChanges)
+
+ doc.on('ranges:dirty', () => {
+ this.updateAnnotations()
+ })
+ doc.on('ranges:clear', () => {
+ this.clearAnnotations()
+ })
+ doc.on('ranges:redraw', () => {
+ this.redrawAnnotations()
+ })
+ }
+
+ disconnectFromDoc(doc) {
+ doc.off('ranges:clear')
+ doc.off('ranges:redraw')
+ doc.off('ranges:dirty')
+ }
+
+ tearDown() {
+ this.adapter.tearDown()
+ }
+
+ setTrackChanges(value) {
+ if (value) {
+ if (this.$scope.sharejsDoc != null) {
+ this.$scope.sharejsDoc.track_changes_as = window.user.id || 'anonymous'
+ }
+ } else {
+ if (this.$scope.sharejsDoc != null) {
+ this.$scope.sharejsDoc.track_changes_as = null
+ }
+ }
+ }
+
+ clearAnnotations() {
+ this.adapter.clearAnnotations()
+ }
+
+ redrawAnnotations() {
+ for (const change of Array.from(this.rangesTracker.changes)) {
+ if (change.op.i != null) {
+ this.adapter.onInsertAdded(change)
+ } else if (change.op.d != null) {
+ this.adapter.onDeleteAdded(change)
+ }
+ }
+
+ Array.from(this.rangesTracker.comments).forEach(comment => {
+ if (!this.isCommentResolved(comment)) {
+ this.adapter.onCommentAdded(comment)
+ }
+ })
+
+ this.broadcastChange()
+ }
+
+ updateAnnotations() {
+ // Doc updates with multiple ops, like search/replace or block comments
+ // will call this with every individual op in a single event loop. So only
+ // do the first this loop, then schedule an update for the next loop for
+ // the rest.
+ if (!this._doneUpdateThisLoop) {
+ this._doUpdateAnnotations()
+ this._doneUpdateThisLoop = true
+ return setTimeout(() => {
+ if (this._pendingUpdates) {
+ this._doUpdateAnnotations()
+ }
+ this._doneUpdateThisLoop = false
+ this._pendingUpdates = false
+ })
+ } else {
+ this._pendingUpdates = true
+ }
+ }
+
+ _doUpdateAnnotations() {
+ let change, comment
+ const dirty = this.rangesTracker.getDirtyState()
+
+ let updateMarkers = false
+
+ for (var id in dirty.change.added) {
+ change = dirty.change.added[id]
+ if (change.op.i != null) {
+ this.adapter.onInsertAdded(change)
+ } else if (change.op.d != null) {
+ this.adapter.onDeleteAdded(change)
+ }
+ }
+ for (id in dirty.change.removed) {
+ change = dirty.change.removed[id]
+ if (change.op.i != null) {
+ this.adapter.onInsertRemoved(change)
+ } else if (change.op.d != null) {
+ this.adapter.onDeleteRemoved(change)
+ }
+ }
+ for (id in dirty.change.moved) {
+ change = dirty.change.moved[id]
+ updateMarkers = true
+ this.adapter.onChangeMoved(change)
+ }
+
+ for (id in dirty.comment.added) {
+ comment = dirty.comment.added[id]
+ if (!this.isCommentResolved(comment)) {
+ this.adapter.onCommentAdded(comment)
+ }
+ }
+ for (id in dirty.comment.removed) {
+ comment = dirty.comment.removed[id]
+ if (!this.isCommentResolved(comment)) {
+ this.adapter.onCommentRemoved(comment)
+ }
+ }
+ for (id in dirty.comment.moved) {
+ comment = dirty.comment.moved[id]
+ if (this.adapter.onCommentMoved && !this.isCommentResolved(comment)) {
+ updateMarkers = true
+ this.adapter.onCommentMoved(comment)
+ }
+ }
+
+ /**
+ * For now, if not using ACE don't worry about the markers
+ */
+ if (!this.editor) {
+ updateMarkers = false
+ }
+
+ this.rangesTracker.resetDirtyState()
+ if (updateMarkers) {
+ this.editor.renderer.updateBackMarkers()
+ }
+ this.broadcastChange()
+ }
+
+ addComment(offset, content, thread_id) {
+ const op = { c: content, p: offset, t: thread_id }
+ // @rangesTracker.applyOp op # Will apply via sharejs
+ this.$scope.sharejsDoc.submitOp(op)
+ }
+
+ addCommentToSelection(thread_id, offset, length) {
+ const start = this.adapter.shareJsOffsetToRowColumn(offset)
+ const end = this.adapter.shareJsOffsetToRowColumn(offset + length)
+ const range = new Range(start.row, start.column, end.row, end.column)
+ const content = this.editor.session.getTextRange(range)
+ this.addComment(offset, content, thread_id)
+ }
+
+ isCommentResolved(comment) {
+ return this.rangesTracker.resolvedThreadIds[comment.op.t]
+ }
+
+ selectLineIfNoSelection() {
+ if (this.editor.selection.isEmpty()) {
+ this.editor.selection.selectLine()
+ }
+ }
+
+ acceptChangeIds(change_ids) {
+ this.rangesTracker.removeChangeIds(change_ids)
+ this.updateAnnotations()
+ this.updateFocus()
+ }
+
+ rejectChangeIds(change_ids) {
+ const changes = this.rangesTracker.getChanges(change_ids)
+ if (changes.length === 0) {
+ return
+ }
+
+ // When doing bulk rejections, adjacent changes might interact with each other.
+ // Consider an insertion with an adjacent deletion (which is a common use-case, replacing words):
+ //
+ // "foo bar baz" -> "foo quux baz"
+ //
+ // The change above will be modeled with two ops, with the insertion going first:
+ //
+ // foo quux baz
+ // |--| -> insertion of "quux", op 1, at position 4
+ // | -> deletion of "bar", op 2, pushed forward by "quux" to position 8
+ //
+ // When rejecting these changes at once, if the insertion is rejected first, we get unexpected
+ // results. What happens is:
+ //
+ // 1) Rejecting the insertion deletes the added word "quux", i.e., it removes 4 chars
+ // starting from position 4;
+ //
+ // "foo quux baz" -> "foo baz"
+ // |--| -> 4 characters to be removed
+ //
+ // 2) Rejecting the deletion adds the deleted word "bar" at position 8 (i.e. it will act as if
+ // the word "quuux" was still present).
+ //
+ // "foo baz" -> "foo bazbar"
+ // | -> deletion of "bar" is reverted by reinserting "bar" at position 8
+ //
+ // While the intended result would be "foo bar baz", what we get is:
+ //
+ // "foo bazbar" (note "bar" readded at position 8)
+ //
+ // The issue happens because of step 1. To revert the insertion of "quux", 4 characters are deleted
+ // from position 4. This includes the position where the deletion exists; when that position is
+ // cleared, the RangesTracker considers that the deletion is gone and stops tracking/updating it.
+ // As we still hold a reference to it, the code tries to revert it by readding the deleted text, but
+ // does so at the outdated position (position 8, which was valid when "quux" was present).
+ //
+ // To avoid this kind of problem, we need to make sure that reverting operations doesn't affect
+ // subsequent operations that come after. Reverse sorting the operations based on position will
+ // achieve it; in the case above, it makes sure that the the deletion is reverted first:
+ //
+ // 1) Rejecting the deletion adds the deleted word "bar" at position 8
+ //
+ // "foo quux baz" -> "foo quuxbar baz"
+ // | -> deletion of "bar" is reverted by
+ // reinserting "bar" at position 8
+ //
+ // 2) Rejecting the insertion deletes the added word "quux", i.e., it removes 4 chars
+ // starting from position 4 and achieves the expected result:
+ //
+ // "foo quuxbar baz" -> "foo bar baz"
+ // |--| -> 4 characters to be removed
+
+ changes.sort((a, b) => b.op.p - a.op.p)
+
+ const session = this.editor.getSession()
+ for (const change of Array.from(changes)) {
+ if (change.op.d != null) {
+ const content = change.op.d
+ const position = this.adapter.shareJsOffsetToRowColumn(change.op.p)
+ session.$fromReject = true // Tell track changes to cancel out delete
+ session.insert(position, content)
+ session.$fromReject = false
+ } else if (change.op.i != null) {
+ const start = this.adapter.shareJsOffsetToRowColumn(change.op.p)
+ const end = this.adapter.shareJsOffsetToRowColumn(
+ change.op.p + change.op.i.length
+ )
+ const editor_text = session.getDocument().getTextRange({ start, end })
+ if (editor_text !== change.op.i) {
+ throw new Error(
+ `Op to be removed (${JSON.stringify(
+ change.op
+ )}), does not match editor text, '${editor_text}'`
+ )
+ }
+ session.$fromReject = true
+ session.remove({ start, end })
+ session.$fromReject = false
+ } else {
+ throw new Error(`unknown change: ${JSON.stringify(change)}`)
+ }
+ }
+ setTimeout(() => this.updateFocus())
+ }
+
+ removeCommentId(comment_id) {
+ this.rangesTracker.removeCommentId(comment_id)
+ return this.updateAnnotations()
+ }
+
+ hideCommentsByThreadIds(thread_ids) {
+ const resolve_ids = {}
+ const comments = this.rangesTracker.comments || []
+ for (const id of Array.from(thread_ids)) {
+ resolve_ids[id] = true
+ }
+
+ for (const comment of comments) {
+ if (resolve_ids[comment.op.t]) {
+ this.adapter.onCommentRemoved(comment)
+ }
+ }
+ return this.broadcastChange()
+ }
+
+ showCommentByThreadId(thread_id) {
+ const comments = this.rangesTracker.comments || []
+ for (const comment of comments) {
+ if (comment.op.t === thread_id && !this.isCommentResolved(comment)) {
+ this.adapter.onCommentAdded(comment)
+ }
+ }
+ return this.broadcastChange()
+ }
+
+ _resetCutState() {
+ return (this._cutState = {
+ text: null,
+ comments: [],
+ docId: null,
+ })
+ }
+
+ onCut() {
+ this._resetCutState()
+ const selection = this.editor.getSelectionRange()
+ const selection_start = this._rangeToShareJs(selection.start)
+ const selection_end = this._rangeToShareJs(selection.end)
+ this._cutState.text = this.editor.getSelectedText()
+ this._cutState.docId = this.$scope.docId
+ return (() => {
+ const result = []
+ for (const comment of Array.from(this.rangesTracker.comments)) {
+ const comment_start = comment.op.p
+ const comment_end = comment_start + comment.op.c.length
+ if (selection_start <= comment_start && comment_end <= selection_end) {
+ result.push(
+ this._cutState.comments.push({
+ offset: comment.op.p - selection_start,
+ text: comment.op.c,
+ comment,
+ })
+ )
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ }
+
+ onPaste() {
+ this.editor.once('change', change => {
+ if (change.action !== 'insert') {
+ return
+ }
+ const pasted_text = change.lines.join('\n')
+ const paste_offset = this._rangeToShareJs(change.start)
+ // We have to wait until the change has been processed by the range
+ // tracker, since if we move the ops into place beforehand, they will be
+ // moved again when the changes are processed by the range tracker. This
+ // ranges:dirty event is fired after the doc has applied the changes to
+ // the range tracker.
+ this.$scope.sharejsDoc.on('ranges:dirty.paste', () => {
+ // Doc event emitter uses namespaced events
+ this.$scope.sharejsDoc.off('ranges:dirty.paste')
+ if (
+ pasted_text === this._cutState.text &&
+ this.$scope.docId === this._cutState.docId
+ ) {
+ for (const { comment, offset, text } of Array.from(
+ this._cutState.comments
+ )) {
+ const op = { c: text, p: paste_offset + offset, t: comment.id }
+ this.$scope.sharejsDoc.submitOp(op)
+ } // Resubmitting an existing comment op (by thread id) will move it
+ }
+ this._resetCutState()
+ // Check that comments still match text. Will throw error if not.
+ this.rangesTracker.validate(this.editor.getValue())
+ })
+ })
+ }
+
+ checkMapping() {
+ // TODO: reintroduce this check
+ let background_marker_id, callout_marker_id, end, marker, op, start
+ const session = this.editor.getSession()
+
+ // Make a copy of session.getMarkers() so we can modify it
+ const markers = {}
+ const object = session.getMarkers()
+ for (var marker_id in object) {
+ marker = object[marker_id]
+ markers[marker_id] = marker
+ }
+
+ const expected_markers = []
+ for (var change of Array.from(this.rangesTracker.changes)) {
+ if (this.adapter.changeIdToMarkerIdMap[change.id] != null) {
+ ;({ op } = change)
+ ;({
+ background_marker_id,
+ callout_marker_id,
+ } = this.adapter.changeIdToMarkerIdMap[change.id])
+ start = this.adapter.shareJsOffsetToRowColumn(op.p)
+ if (op.i != null) {
+ end = this.adapter.shareJsOffsetToRowColumn(op.p + op.i.length)
+ } else if (op.d != null) {
+ end = start
+ }
+ expected_markers.push({
+ marker_id: background_marker_id,
+ start,
+ end,
+ })
+ expected_markers.push({
+ marker_id: callout_marker_id,
+ start,
+ end: start,
+ })
+ }
+ }
+
+ for (const comment of Array.from(this.rangesTracker.comments)) {
+ if (this.adapter.changeIdToMarkerIdMap[comment.id] != null) {
+ ;({
+ background_marker_id,
+ callout_marker_id,
+ } = this.adapter.changeIdToMarkerIdMap[comment.id])
+ start = this.adapter.shareJsOffsetToRowColumn(comment.op.p)
+ end = this.adapter.shareJsOffsetToRowColumn(
+ comment.op.p + comment.op.c.length
+ )
+ expected_markers.push({
+ marker_id: background_marker_id,
+ start,
+ end,
+ })
+ expected_markers.push({
+ marker_id: callout_marker_id,
+ start,
+ end: start,
+ })
+ }
+ }
+
+ for ({ marker_id, start, end } of Array.from(expected_markers)) {
+ marker = markers[marker_id]
+ delete markers[marker_id]
+ if (
+ marker.range.start.row !== start.row ||
+ marker.range.start.column !== start.column ||
+ marker.range.end.row !== end.row ||
+ marker.range.end.column !== end.column
+ ) {
+ console.error("Change doesn't match marker anymore", {
+ change,
+ marker,
+ start,
+ end,
+ })
+ }
+ }
+
+ return (() => {
+ const result = []
+ for (marker_id in markers) {
+ marker = markers[marker_id]
+ if (/track-changes/.test(marker.clazz)) {
+ result.push(console.error('Orphaned ace marker', marker))
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ }
+
+ broadcastChange() {
+ this.$scope.$emit('editor:track-changes:changed', this.$scope.docId)
+ }
+
+ recalculateReviewEntriesScreenPositions() {
+ const session = this.editor.getSession()
+ const { renderer } = this.editor
+ const entries = this._getCurrentDocEntries()
+ const object = entries || {}
+ for (const entry_id in object) {
+ const entry = object[entry_id]
+ const doc_position = this.adapter.shareJsOffsetToRowColumn(entry.offset)
+ const screen_position = session.documentToScreenPosition(
+ doc_position.row,
+ doc_position.column
+ )
+ const y = screen_position.row * renderer.lineHeight
+ if (entry.screenPos == null) {
+ entry.screenPos = {}
+ }
+ entry.screenPos.y = y
+ entry.docPos = doc_position
+ }
+ this.recalculateVisibleEntries()
+ this.$scope.$apply()
+ }
+
+ recalculateVisibleEntries() {
+ const OFFSCREEN_ROWS = 20
+
+ // With less than this number of entries, don't bother culling to avoid
+ // little UI jumps when scrolling.
+ const CULL_AFTER = 100
+
+ const { firstRow, lastRow } = this.editor.renderer.layerConfig
+ const entries = this._getCurrentDocEntries() || {}
+ const entriesLength = Object.keys(entries).length
+ let changed = false
+ for (const entry_id in entries) {
+ const entry = entries[entry_id]
+ const old = entry.visible
+ entry.visible =
+ entriesLength < CULL_AFTER ||
+ (firstRow - OFFSCREEN_ROWS <= entry.docPos.row &&
+ entry.docPos.row <= lastRow + OFFSCREEN_ROWS)
+ if (entry.visible !== old) {
+ changed = true
+ }
+ }
+ if (changed) {
+ this.$scope.$emit('editor:track-changes:visibility_changed')
+ }
+ }
+
+ _getCurrentDocEntries() {
+ const doc_id = this.$scope.docId
+ const entries = this.$scope.reviewPanel.entries[doc_id] || {}
+ return entries
+ }
+
+ updateFocus() {
+ if (this.editor) {
+ const selection = this.editor.getSelectionRange()
+ const selection_start = this._rangeToShareJs(selection.start)
+ const selection_end = this._rangeToShareJs(selection.end)
+ const is_selection = selection_start !== selection_end
+ this.$scope.$emit(
+ 'editor:focus:changed',
+ selection_start,
+ selection_end,
+ is_selection
+ )
+ }
+ }
+
+ _rangeToShareJs(range) {
+ const lines = this.editor.getSession().getDocument().getLines(0, range.row)
+ return EditorShareJsCodec.rangeToShareJs(range, lines)
+ }
+
+ _changeToShareJs(delta) {
+ const lines = this.editor
+ .getSession()
+ .getDocument()
+ .getLines(0, delta.start.row)
+ return EditorShareJsCodec.changeToShareJs(delta, lines)
+ }
+}
+export default TrackChangesManager
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/undo/UndoManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/undo/UndoManager.js
new file mode 100644
index 0000000000..0c2b32ef32
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/undo/UndoManager.js
@@ -0,0 +1,30 @@
+import 'ace/ace'
+const BuiltInUndoManager = ace.require('ace/undomanager').UndoManager
+
+class UndoManager {
+ constructor(editor) {
+ this.editor = editor
+
+ this.onChangeSession = this.onChangeSession.bind(this)
+ this.onChange = this.onChange.bind(this)
+ }
+
+ onChangeSession(session) {
+ session.setUndoManager(new BuiltInUndoManager())
+ }
+
+ onChange(change) {
+ if (change.origin !== 'remote') return
+
+ // HACK: remote changes in Ace are added by the ShareJS/Ace adapter
+ // asynchronously via a timeout (see attach_ace function). This makes it
+ // impossible to clear to undo stack when remote changes are received.
+ // To hack around this we queue the undo stack clear so that it applies
+ // after the change is applied
+ setTimeout(() => {
+ this.editor.getSession().getUndoManager().reset()
+ })
+ }
+}
+
+export default UndoManager
diff --git a/services/web/frontend/js/ide/editor/directives/toggleSwitch.js b/services/web/frontend/js/ide/editor/directives/toggleSwitch.js
new file mode 100644
index 0000000000..86a223d2bf
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/directives/toggleSwitch.js
@@ -0,0 +1,48 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('toggleSwitch', () => ({
+ restrict: 'E',
+ scope: {
+ description: '@',
+ labelFalse: '@',
+ labelTrue: '@',
+ ngModel: '=',
+ },
+ template: `\
+\
+`,
+}))
diff --git a/services/web/frontend/js/ide/file-tree/FileTreeManager.js b/services/web/frontend/js/ide/file-tree/FileTreeManager.js
new file mode 100644
index 0000000000..7e4d96b1c1
--- /dev/null
+++ b/services/web/frontend/js/ide/file-tree/FileTreeManager.js
@@ -0,0 +1,740 @@
+/* eslint-disable
+ camelcase,
+ node/handle-callback-err,
+ max-len,
+ no-dupe-class-members,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS202: Simplify dynamic range loops
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import './directives/fileEntity'
+import './controllers/FileTreeController'
+import './controllers/FileTreeEntityController'
+import './controllers/FileTreeFolderController'
+import '../../features/file-tree/controllers/file-tree-controller'
+let FileTreeManager
+
+export default FileTreeManager = class FileTreeManager {
+ constructor(ide, $scope) {
+ this.ide = ide
+ this.$scope = $scope
+ this.$scope.$on('project:joined', () => {
+ this.loadRootFolder()
+ this.loadDeletedDocs()
+ return this.$scope.$emit('file-tree:initialized')
+ })
+
+ this.$scope.$on('entities:multiSelected', (_event, data) => {
+ this.$scope.$apply(() => {
+ this.$scope.multiSelectedCount = data.count
+ })
+ })
+
+ this.$scope.$watch('rootFolder', rootFolder => {
+ if (rootFolder != null) {
+ return this.recalculateDocList()
+ }
+ })
+
+ this._bindToSocketEvents()
+
+ this.$scope.multiSelectedCount = 0
+
+ $(document).on('click', () => {
+ this.clearMultiSelectedEntities()
+ return this.$scope.$digest()
+ })
+ }
+
+ _bindToSocketEvents() {
+ this.ide.socket.on('reciveNewDoc', (parent_folder_id, doc) => {
+ const parent_folder =
+ this.findEntityById(parent_folder_id) || this.$scope.rootFolder
+ return this.$scope.$apply(() => {
+ parent_folder.children.push({
+ name: doc.name,
+ id: doc._id,
+ type: 'doc',
+ })
+ return this.recalculateDocList()
+ })
+ })
+
+ this.ide.socket.on(
+ 'reciveNewFile',
+ (parent_folder_id, file, source, linkedFileData) => {
+ const parent_folder =
+ this.findEntityById(parent_folder_id) || this.$scope.rootFolder
+ return this.$scope.$apply(() => {
+ parent_folder.children.push({
+ name: file.name,
+ id: file._id,
+ type: 'file',
+ linkedFileData,
+ created: file.created,
+ })
+ return this.recalculateDocList()
+ })
+ }
+ )
+
+ this.ide.socket.on('reciveNewFolder', (parent_folder_id, folder) => {
+ const parent_folder =
+ this.findEntityById(parent_folder_id) || this.$scope.rootFolder
+ return this.$scope.$apply(() => {
+ parent_folder.children.push({
+ name: folder.name,
+ id: folder._id,
+ type: 'folder',
+ children: [],
+ })
+ return this.recalculateDocList()
+ })
+ })
+
+ this.ide.socket.on('reciveEntityRename', (entity_id, name) => {
+ const entity = this.findEntityById(entity_id)
+ if (entity == null) {
+ return
+ }
+ return this.$scope.$apply(() => {
+ entity.name = name
+ return this.recalculateDocList()
+ })
+ })
+
+ this.ide.socket.on('removeEntity', entity_id => {
+ const entity = this.findEntityById(entity_id)
+ if (entity == null) {
+ return
+ }
+ this.$scope.$apply(() => {
+ this._deleteEntityFromScope(entity)
+ return this.recalculateDocList()
+ })
+ return this.$scope.$broadcast('entity:deleted', entity)
+ })
+
+ return this.ide.socket.on('reciveEntityMove', (entity_id, folder_id) => {
+ const entity = this.findEntityById(entity_id)
+ const folder = this.findEntityById(folder_id)
+ return this.$scope.$apply(() => {
+ this._moveEntityInScope(entity, folder)
+ return this.recalculateDocList()
+ })
+ })
+ }
+
+ selectEntity(entity) {
+ this.selected_entity_id = entity.id // For reselecting after a reconnect
+ this.ide.fileTreeManager.forEachEntity(entity => (entity.selected = false))
+ return (entity.selected = true)
+ }
+
+ toggleMultiSelectEntity(entity) {
+ entity.multiSelected = !entity.multiSelected
+ return (this.$scope.multiSelectedCount = this.multiSelectedCount())
+ }
+
+ multiSelectedCount() {
+ let count = 0
+ this.forEachEntity(function (entity) {
+ if (entity.multiSelected) {
+ return count++
+ }
+ })
+ return count
+ }
+
+ getMultiSelectedEntities() {
+ const entities = []
+ this.forEachEntity(function (e) {
+ if (e.multiSelected) {
+ return entities.push(e)
+ }
+ })
+ return entities
+ }
+
+ getFullCount() {
+ const entities = []
+ this.forEachEntity(function (e) {
+ if (!e.deleted) entities.push(e)
+ })
+ return entities.length
+ }
+
+ getMultiSelectedEntityChildNodes() {
+ // use pathnames with a leading slash to avoid
+ // problems with reserved Object properties
+ const entities = this.getMultiSelectedEntities()
+ const paths = {}
+ for (var entity of Array.from(entities)) {
+ paths['/' + this.getEntityPath(entity)] = entity
+ }
+ const prefixes = {}
+ for (var path in paths) {
+ entity = paths[path]
+ const parts = path.split('/')
+ if (parts.length <= 2) {
+ continue
+ } else {
+ // Record prefixes a/b/c.tex -> 'a' and 'a/b'
+ for (
+ let i = 1, end = parts.length - 1, asc = end >= 1;
+ asc ? i <= end : i >= end;
+ asc ? i++ : i--
+ ) {
+ prefixes['/' + parts.slice(0, i).join('/')] = true
+ }
+ }
+ }
+ const child_entities = []
+ for (path in paths) {
+ // If the path is in the prefixes, then it's a parent folder and
+ // should be ignore
+ entity = paths[path]
+ if (prefixes[path] == null) {
+ child_entities.push(entity)
+ }
+ }
+ return child_entities
+ }
+
+ clearMultiSelectedEntities() {
+ if (this.$scope.multiSelectedCount === 0) {
+ return
+ } // Be efficient, this is called a lot on 'click'
+ this.forEachEntity(entity => (entity.multiSelected = false))
+ return (this.$scope.multiSelectedCount = 0)
+ }
+
+ multiSelectSelectedEntity() {
+ const entity = this.findSelectedEntity()
+ if (entity) {
+ entity.multiSelected = true
+ }
+ this.$scope.multiSelectedCount = this.multiSelectedCount()
+ }
+
+ existsInFolder(folder_id, name) {
+ const folder = this.findEntityById(folder_id)
+ if (folder == null) {
+ return false
+ }
+ const entity = this._findEntityByPathInFolder(folder, name)
+ return entity != null
+ }
+
+ findSelectedEntity() {
+ let selected = null
+ this.forEachEntity(function (entity) {
+ if (entity.selected) {
+ return (selected = entity)
+ }
+ })
+ return selected
+ }
+
+ findEntityById(id, options) {
+ if (options == null) {
+ options = {}
+ }
+ if (this.$scope.rootFolder.id === id) {
+ return this.$scope.rootFolder
+ }
+
+ let entity = this._findEntityByIdInFolder(this.$scope.rootFolder, id)
+ if (entity != null) {
+ return entity
+ }
+
+ if (options.includeDeleted) {
+ for (entity of Array.from(this.$scope.deletedDocs)) {
+ if (entity.id === id) {
+ return entity
+ }
+ }
+ }
+
+ return null
+ }
+
+ _findEntityByIdInFolder(folder, id) {
+ for (const entity of Array.from(folder.children || [])) {
+ if (entity.id === id) {
+ return entity
+ } else if (entity.children != null) {
+ const result = this._findEntityByIdInFolder(entity, id)
+ if (result != null) {
+ return result
+ }
+ }
+ }
+
+ return null
+ }
+
+ findEntityByPath(path) {
+ return this._findEntityByPathInFolder(this.$scope.rootFolder, path)
+ }
+
+ _findEntityByPathInFolder(folder, path) {
+ if (path == null || folder == null) {
+ return null
+ }
+ if (path === '') {
+ return folder
+ }
+
+ const parts = path.split('/')
+ const name = parts.shift()
+ const rest = parts.join('/')
+
+ if (name === '.') {
+ return this._findEntityByPathInFolder(folder, rest)
+ }
+
+ for (const entity of Array.from(folder.children)) {
+ if (entity.name === name) {
+ if (rest === '') {
+ return entity
+ } else if (entity.type === 'folder') {
+ return this._findEntityByPathInFolder(entity, rest)
+ }
+ }
+ }
+ return null
+ }
+
+ forEachEntity(callback) {
+ if (callback == null) {
+ callback = function (entity, parent_folder, path) {}
+ }
+ this._forEachEntityInFolder(this.$scope.rootFolder, null, callback)
+
+ return (() => {
+ const result = []
+ for (const entity of Array.from(this.$scope.deletedDocs || [])) {
+ result.push(callback(entity))
+ }
+ return result
+ })()
+ }
+
+ _forEachEntityInFolder(folder, path, callback) {
+ return (() => {
+ const result = []
+ for (const entity of Array.from(folder.children || [])) {
+ var childPath
+ if (path != null) {
+ childPath = path + '/' + entity.name
+ } else {
+ childPath = entity.name
+ }
+ callback(entity, folder, childPath)
+ if (entity.children != null) {
+ result.push(this._forEachEntityInFolder(entity, childPath, callback))
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ }
+
+ getEntityPath(entity) {
+ return this._getEntityPathInFolder(this.$scope.rootFolder, entity)
+ }
+
+ _getEntityPathInFolder(folder, entity) {
+ for (const child of Array.from(folder.children || [])) {
+ if (child === entity) {
+ return entity.name
+ } else if (child.type === 'folder') {
+ const path = this._getEntityPathInFolder(child, entity)
+ if (path != null) {
+ return child.name + '/' + path
+ }
+ }
+ }
+ return null
+ }
+
+ getRootDocDirname() {
+ const rootDoc = this.findEntityById(this.$scope.project.rootDoc_id)
+ if (rootDoc == null) {
+ return
+ }
+ return this._getEntityDirname(rootDoc)
+ }
+
+ _getEntityDirname(entity) {
+ const path = this.getEntityPath(entity)
+ if (path == null) {
+ return
+ }
+ return path.split('/').slice(0, -1).join('/')
+ }
+
+ _findParentFolder(entity) {
+ const dirname = this._getEntityDirname(entity)
+ if (dirname == null) {
+ return
+ }
+ return this.findEntityByPath(dirname)
+ }
+
+ loadRootFolder() {
+ return (this.$scope.rootFolder = this._parseFolder(
+ __guard__(
+ this.$scope != null ? this.$scope.project : undefined,
+ x => x.rootFolder[0]
+ )
+ ))
+ }
+
+ _parseFolder(rawFolder) {
+ const folder = {
+ name: rawFolder.name,
+ id: rawFolder._id,
+ type: 'folder',
+ children: [],
+ selected: rawFolder._id === this.selected_entity_id,
+ }
+
+ for (const doc of Array.from(rawFolder.docs || [])) {
+ folder.children.push({
+ name: doc.name,
+ id: doc._id,
+ type: 'doc',
+ selected: doc._id === this.selected_entity_id,
+ })
+ }
+
+ for (const file of Array.from(rawFolder.fileRefs || [])) {
+ folder.children.push({
+ name: file.name,
+ id: file._id,
+ type: 'file',
+ selected: file._id === this.selected_entity_id,
+ linkedFileData: file.linkedFileData,
+ created: file.created,
+ })
+ }
+
+ for (const childFolder of Array.from(rawFolder.folders || [])) {
+ folder.children.push(this._parseFolder(childFolder))
+ }
+
+ return folder
+ }
+
+ loadDeletedDocs() {
+ this.$scope.deletedDocs = []
+ return Array.from(this.$scope.project.deletedDocs || []).map(doc =>
+ this.$scope.deletedDocs.push({
+ name: doc.name,
+ id: doc._id,
+ type: 'doc',
+ deleted: true,
+ })
+ )
+ }
+
+ recalculateDocList() {
+ this.$scope.docs = []
+ this.forEachEntity((entity, parentFolder, path) => {
+ if (entity.type === 'doc' && !entity.deleted) {
+ return this.$scope.docs.push({
+ doc: entity,
+ path,
+ })
+ }
+ })
+ // Keep list ordered by folders, then name
+ return this.$scope.docs.sort(function (a, b) {
+ const aDepth = (a.path.match(/\//g) || []).length
+ const bDepth = (b.path.match(/\//g) || []).length
+ if (aDepth - bDepth !== 0) {
+ return -(aDepth - bDepth) // Deeper path == folder first
+ } else if (a.path < b.path) {
+ return -1
+ } else if (a.path > b.path) {
+ return 1
+ } else {
+ return 0
+ }
+ })
+ }
+
+ getCurrentFolder() {
+ // Return the root folder if nothing is selected
+ return (
+ this._getCurrentFolder(this.$scope.rootFolder) || this.$scope.rootFolder
+ )
+ }
+
+ _getCurrentFolder(startFolder) {
+ if (startFolder == null) {
+ startFolder = this.$scope.rootFolder
+ }
+ for (const entity of Array.from(startFolder.children || [])) {
+ // The 'current' folder is either the one selected, or
+ // the one containing the selected doc/file
+ if (entity.selected) {
+ if (entity.type === 'folder') {
+ return entity
+ } else {
+ return startFolder
+ }
+ }
+
+ if (entity.type === 'folder') {
+ const result = this._getCurrentFolder(entity)
+ if (result != null) {
+ return result
+ }
+ }
+ }
+
+ return null
+ }
+
+ projectContainsFolder() {
+ for (const entity of Array.from(this.$scope.rootFolder.children)) {
+ if (entity.type === 'folder') {
+ return true
+ }
+ }
+ return false
+ }
+
+ existsInThisFolder(folder, name) {
+ for (const entity of Array.from(
+ (folder != null ? folder.children : undefined) || []
+ )) {
+ if (entity.name === name) {
+ return true
+ }
+ }
+ return false
+ }
+
+ nameExistsError(message) {
+ if (message == null) {
+ message = 'already exists'
+ }
+ const nameExists = this.ide.$q.defer()
+ nameExists.reject({ data: message })
+ return nameExists.promise
+ }
+
+ createDoc(name, parent_folder) {
+ // check if a doc/file/folder already exists with this name
+ if (parent_folder == null) {
+ parent_folder = this.getCurrentFolder()
+ }
+ if (this.existsInThisFolder(parent_folder, name)) {
+ return this.nameExistsError()
+ }
+ // We'll wait for the socket.io notification to actually
+ // add the doc for us.
+ return this.ide.$http.post(`/project/${this.ide.project_id}/doc`, {
+ name,
+ parent_folder_id: parent_folder != null ? parent_folder.id : undefined,
+ _csrf: window.csrfToken,
+ })
+ }
+
+ createFolder(name, parent_folder) {
+ // check if a doc/file/folder already exists with this name
+ if (parent_folder == null) {
+ parent_folder = this.getCurrentFolder()
+ }
+ if (this.existsInThisFolder(parent_folder, name)) {
+ return this.nameExistsError()
+ }
+ // We'll wait for the socket.io notification to actually
+ // add the folder for us.
+ return this.ide.$http.post(`/project/${this.ide.project_id}/folder`, {
+ name,
+ parent_folder_id: parent_folder != null ? parent_folder.id : undefined,
+ _csrf: window.csrfToken,
+ })
+ }
+
+ createLinkedFile(name, parent_folder, provider, data) {
+ // check if a doc/file/folder already exists with this name
+ if (parent_folder == null) {
+ parent_folder = this.getCurrentFolder()
+ }
+ if (this.existsInThisFolder(parent_folder, name)) {
+ return this.nameExistsError()
+ }
+ // We'll wait for the socket.io notification to actually
+ // add the file for us.
+ return this.ide.$http.post(
+ `/project/${this.ide.project_id}/linked_file`,
+ {
+ name,
+ parent_folder_id: parent_folder != null ? parent_folder.id : undefined,
+ provider,
+ data,
+ _csrf: window.csrfToken,
+ },
+ {
+ disableAutoLoginRedirect: true,
+ }
+ )
+ }
+
+ refreshLinkedFile(file) {
+ const parent_folder = this._findParentFolder(file)
+ const provider =
+ file.linkedFileData != null ? file.linkedFileData.provider : undefined
+ if (provider == null) {
+ console.warn(`>> no provider for ${file.name}`, file)
+ return
+ }
+ return this.ide.$http.post(
+ `/project/${this.ide.project_id}/linked_file/${file.id}/refresh`,
+ {
+ _csrf: window.csrfToken,
+ },
+ {
+ disableAutoLoginRedirect: true,
+ }
+ )
+ }
+
+ renameEntity(entity, name, callback) {
+ if (callback == null) {
+ callback = function (error) {}
+ }
+ if (entity.name === name) {
+ return
+ }
+ if (name.length >= 150) {
+ return
+ }
+ // check if a doc/file/folder already exists with this name
+ const parent_folder = this.getCurrentFolder()
+ if (this.existsInThisFolder(parent_folder, name)) {
+ return this.nameExistsError()
+ }
+ entity.renamingToName = name
+ return this.ide.$http
+ .post(
+ `/project/${this.ide.project_id}/${entity.type}/${entity.id}/rename`,
+ {
+ name,
+ _csrf: window.csrfToken,
+ }
+ )
+ .then(() => (entity.name = name))
+ .finally(() => (entity.renamingToName = null))
+ }
+
+ deleteEntity(entity, callback) {
+ // We'll wait for the socket.io notification to
+ // delete from scope.
+ if (callback == null) {
+ callback = function (error) {}
+ }
+ return this.ide.queuedHttp({
+ method: 'DELETE',
+ url: `/project/${this.ide.project_id}/${entity.type}/${entity.id}`,
+ headers: {
+ 'X-Csrf-Token': window.csrfToken,
+ },
+ })
+ }
+
+ moveEntity(entity, parent_folder) {
+ // Abort move if the folder being moved (entity) has the parent_folder as child
+ // since that would break the tree structure.
+ if (this._isChildFolder(entity, parent_folder)) {
+ return
+ }
+ // check if a doc/file/folder already exists with this name
+ if (this.existsInThisFolder(parent_folder, entity.name)) {
+ throw new Error('file exists in this location')
+ }
+ // Wait for the http response before doing the move
+ this.ide.queuedHttp
+ .post(
+ `/project/${this.ide.project_id}/${entity.type}/${entity.id}/move`,
+ {
+ folder_id: parent_folder.id,
+ _csrf: window.csrfToken,
+ }
+ )
+ .then(() => {
+ this._moveEntityInScope(entity, parent_folder)
+ })
+ }
+
+ _isChildFolder(parent_folder, child_folder) {
+ const parent_path = this.getEntityPath(parent_folder) || '' // null if root folder
+ const child_path = this.getEntityPath(child_folder) || '' // null if root folder
+ // is parent path the beginning of child path?
+ return child_path.slice(0, parent_path.length) === parent_path
+ }
+
+ _deleteEntityFromScope(entity, options) {
+ if (options == null) {
+ options = { moveToDeleted: true }
+ }
+ if (entity == null) {
+ return
+ }
+ let parent_folder = null
+ this.forEachEntity(function (possible_entity, folder) {
+ if (possible_entity === entity) {
+ return (parent_folder = folder)
+ }
+ })
+
+ if (parent_folder != null) {
+ const index = parent_folder.children.indexOf(entity)
+ if (index > -1) {
+ parent_folder.children.splice(index, 1)
+ }
+ }
+
+ if (entity.type !== 'folder' && entity.selected) {
+ this.$scope.ui.view = null
+ }
+
+ if (entity.type === 'doc' && options.moveToDeleted) {
+ entity.deleted = true
+ return this.$scope.deletedDocs.push(entity)
+ }
+ }
+
+ _moveEntityInScope(entity, parent_folder) {
+ if (Array.from(parent_folder.children).includes(entity)) {
+ return
+ }
+ this._deleteEntityFromScope(entity, { moveToDeleted: false })
+ return parent_folder.children.push(entity)
+ }
+}
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js b/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js
new file mode 100644
index 0000000000..5bc46bca48
--- /dev/null
+++ b/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js
@@ -0,0 +1,15 @@
+import App from '../../../base'
+App.controller('FileTreeController', function ($scope) {
+ $scope.openNewDocModal = () => {
+ window.dispatchEvent(
+ new CustomEvent('file-tree.start-creating', { detail: { mode: 'doc' } })
+ )
+ }
+
+ $scope.orderByFoldersFirst = function (entity) {
+ if ((entity != null ? entity.type : undefined) === 'folder') {
+ return '0'
+ }
+ return '1'
+ }
+})
diff --git a/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js b/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js
new file mode 100644
index 0000000000..9f39767db8
--- /dev/null
+++ b/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js
@@ -0,0 +1,52 @@
+import App from '../../../base'
+import iconTypeFromName from '../util/iconTypeFromName'
+App.controller(
+ 'FileTreeEntityController',
+ function ($scope, ide, $modal, $element) {
+ $scope.MAX_DEPTH = 8
+
+ $scope.select = function (e) {
+ if (e.ctrlKey || e.metaKey) {
+ e.stopPropagation()
+ const initialMultiSelectCount = ide.fileTreeManager.multiSelectedCount()
+ ide.fileTreeManager.toggleMultiSelectEntity($scope.entity)
+ if (initialMultiSelectCount === 0) {
+ // On first multi selection, also include the current active/open file.
+ return ide.fileTreeManager.multiSelectSelectedEntity()
+ }
+ } else {
+ ide.fileTreeManager.selectEntity($scope.entity)
+ return $scope.$emit('entity:selected', $scope.entity)
+ }
+ }
+
+ if ($scope.entity.type === 'doc') {
+ $scope.$watch('entity.selected', function (isSelected) {
+ if (isSelected) {
+ $scope.$emit('entity-file:selected', $scope.entity)
+ if (!_isEntryElVisible($element)) {
+ $scope.$applyAsync(function () {
+ $element[0].scrollIntoView()
+ })
+ }
+ }
+ })
+ }
+
+ function _isEntryElVisible($entryEl) {
+ const viewportEl = $('.file-tree-list')
+ const entryElTop = $entryEl.offset().top
+ const entryElBottom = entryElTop + $entryEl.outerHeight()
+ const entryListViewportElTop = viewportEl.offset().top
+ const entryListViewportElBottom =
+ entryListViewportElTop + viewportEl.height()
+
+ return (
+ entryElTop >= entryListViewportElTop &&
+ entryElBottom <= entryListViewportElBottom
+ )
+ }
+
+ $scope.iconTypeFromName = iconTypeFromName
+ }
+)
diff --git a/services/web/frontend/js/ide/file-tree/controllers/FileTreeFolderController.js b/services/web/frontend/js/ide/file-tree/controllers/FileTreeFolderController.js
new file mode 100644
index 0000000000..838205bcd3
--- /dev/null
+++ b/services/web/frontend/js/ide/file-tree/controllers/FileTreeFolderController.js
@@ -0,0 +1,23 @@
+import App from '../../../base'
+
+export default App.controller(
+ 'FileTreeFolderController',
+ function ($scope, ide, $modal, localStorage) {
+ $scope.expanded =
+ localStorage(`folder.${$scope.entity.id}.expanded`) || false
+
+ $scope.toggleExpanded = function () {
+ $scope.expanded = !$scope.expanded
+ $scope._storeCurrentStateInLocalStorage()
+ }
+
+ $scope.$on('entity-file:selected', function () {
+ $scope.expanded = true
+ $scope._storeCurrentStateInLocalStorage()
+ })
+
+ $scope._storeCurrentStateInLocalStorage = function () {
+ localStorage(`folder.${$scope.entity.id}.expanded`, $scope.expanded)
+ }
+ }
+)
diff --git a/services/web/frontend/js/ide/file-tree/directives/fileEntity.js b/services/web/frontend/js/ide/file-tree/directives/fileEntity.js
new file mode 100644
index 0000000000..08ba854f99
--- /dev/null
+++ b/services/web/frontend/js/ide/file-tree/directives/fileEntity.js
@@ -0,0 +1,43 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('fileEntity', RecursionHelper => ({
+ restrict: 'E',
+ scope: {
+ entity: '=',
+ permissions: '=',
+ depth: '=?',
+ },
+ templateUrl: 'entityListItemTemplate',
+ compile(element) {
+ return RecursionHelper.compile(
+ element,
+ function (scope, element, attrs, ctrl) {
+ // Don't freak out if we're already in an apply callback
+ scope.$originalApply = scope.$apply
+ return (scope.$apply = function (fn) {
+ if (fn == null) {
+ fn = function () {}
+ }
+ const phase = this.$root.$$phase
+ if (phase === '$apply' || phase === '$digest') {
+ return fn()
+ } else {
+ return this.$originalApply(fn)
+ }
+ })
+ }
+ )
+ },
+}))
diff --git a/services/web/frontend/js/ide/file-tree/util/fileOperationI18nNames.js b/services/web/frontend/js/ide/file-tree/util/fileOperationI18nNames.js
new file mode 100644
index 0000000000..300ca1063c
--- /dev/null
+++ b/services/web/frontend/js/ide/file-tree/util/fileOperationI18nNames.js
@@ -0,0 +1,14 @@
+let fileActionI18n
+
+if (window.fileActionI18n !== undefined) {
+ fileActionI18n = window.fileActionI18n
+}
+
+fileActionI18n = {
+ edited: 'edited',
+ renamed: 'renamed',
+ created: 'created',
+ deleted: 'deleted',
+}
+
+export default fileActionI18n
diff --git a/services/web/frontend/js/ide/file-tree/util/iconTypeFromName.js b/services/web/frontend/js/ide/file-tree/util/iconTypeFromName.js
new file mode 100644
index 0000000000..6ad913c8d4
--- /dev/null
+++ b/services/web/frontend/js/ide/file-tree/util/iconTypeFromName.js
@@ -0,0 +1,34 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS103: Rewrite code to no longer use __guard__
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+let iconTypeFromName
+
+export default iconTypeFromName = function (name) {
+ const ext = __guard__(name.split('.').pop(), x => x.toLowerCase())
+ if (['png', 'pdf', 'jpg', 'jpeg', 'gif'].includes(ext)) {
+ return 'image'
+ } else if (['csv', 'xls', 'xlsx'].includes(ext)) {
+ return 'table'
+ } else if (['py', 'r'].includes(ext)) {
+ return 'file-text'
+ } else if (['bib'].includes(ext)) {
+ return 'book'
+ } else {
+ return 'file'
+ }
+}
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/file-view/index.js b/services/web/frontend/js/ide/file-view/index.js
new file mode 100644
index 0000000000..b9502cf8eb
--- /dev/null
+++ b/services/web/frontend/js/ide/file-view/index.js
@@ -0,0 +1 @@
+import '../../features/file-view/controllers/file-view-controller'
diff --git a/services/web/frontend/js/ide/files/services/files.js b/services/web/frontend/js/ide/files/services/files.js
new file mode 100644
index 0000000000..c881f60e0a
--- /dev/null
+++ b/services/web/frontend/js/ide/files/services/files.js
@@ -0,0 +1,22 @@
+import _ from 'lodash'
+import App from '../../../base'
+
+export default App.factory('files', function (ide) {
+ const Files = {
+ getTeXFiles() {
+ const texFiles = []
+ ide.fileTreeManager.forEachEntity(function (entity, _folder, path) {
+ if (
+ entity.type === 'doc' &&
+ /.*\.(tex|md|txt|tikz)/.test(entity.name)
+ ) {
+ const cloned = _.clone(entity)
+ cloned.path = path
+ texFiles.push(cloned)
+ }
+ })
+ return texFiles
+ },
+ }
+ return Files
+})
diff --git a/services/web/frontend/js/ide/graphics/services/graphics.js b/services/web/frontend/js/ide/graphics/services/graphics.js
new file mode 100644
index 0000000000..c89fece87e
--- /dev/null
+++ b/services/web/frontend/js/ide/graphics/services/graphics.js
@@ -0,0 +1,51 @@
+import _ from 'lodash'
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.factory('graphics', function (ide) {
+ const Graphics = {
+ getGraphicsFiles() {
+ const graphicsFiles = []
+ ide.fileTreeManager.forEachEntity(function (entity, folder, path) {
+ if (
+ entity.type === 'file' &&
+ __guardMethod__(
+ entity != null ? entity.name : undefined,
+ 'match',
+ o => o.match(/.*\.(png|jpg|jpeg|pdf|eps)/i)
+ )
+ ) {
+ const cloned = _.clone(entity)
+ cloned.path = path
+ return graphicsFiles.push(cloned)
+ }
+ })
+ return graphicsFiles
+ },
+ }
+
+ return Graphics
+})
+
+function __guardMethod__(obj, methodName, transform) {
+ if (
+ typeof obj !== 'undefined' &&
+ obj !== null &&
+ typeof obj[methodName] === 'function'
+ ) {
+ return transform(obj, methodName)
+ } else {
+ return undefined
+ }
+}
diff --git a/services/web/frontend/js/ide/history/HistoryManager.js b/services/web/frontend/js/ide/history/HistoryManager.js
new file mode 100644
index 0000000000..1ae712cd35
--- /dev/null
+++ b/services/web/frontend/js/ide/history/HistoryManager.js
@@ -0,0 +1,390 @@
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS206: Consider reworking classes to avoid initClass
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import moment from 'moment'
+import ColorManager from '../colors/ColorManager'
+import displayNameForUser from './util/displayNameForUser'
+import './controllers/HistoryListController'
+import './controllers/HistoryDiffController'
+import './directives/infiniteScroll'
+let HistoryManager
+
+export default HistoryManager = (function () {
+ HistoryManager = class HistoryManager {
+ static initClass() {
+ this.prototype.BATCH_SIZE = 10
+ }
+
+ constructor(ide, $scope) {
+ this.ide = ide
+ this.$scope = $scope
+ this.reset()
+
+ this.$scope.toggleHistory = () => {
+ if (this.$scope.ui.view === 'history') {
+ return this.hide()
+ } else {
+ return this.show()
+ }
+ }
+
+ this.$scope.$watch('history.selection.updates', updates => {
+ if (updates != null && updates.length > 0) {
+ this._selectDocFromUpdates()
+ return this.reloadDiff()
+ }
+ })
+
+ this.$scope.$on('entity:selected', (event, entity) => {
+ if (this.$scope.ui.view === 'history' && entity.type === 'doc') {
+ this.$scope.history.selection.doc = entity
+ return this.reloadDiff()
+ }
+ })
+ }
+
+ show() {
+ this.$scope.ui.view = 'history'
+ return this.reset()
+ }
+
+ hide() {
+ this.$scope.ui.view = 'editor'
+ // Make sure we run the 'open' logic for whatever is currently selected
+ return this.$scope.$emit(
+ 'entity:selected',
+ this.ide.fileTreeManager.findSelectedEntity()
+ )
+ }
+
+ reset() {
+ return (this.$scope.history = {
+ updates: [],
+ nextBeforeTimestamp: null,
+ atEnd: false,
+ selection: {
+ updates: [],
+ doc: null,
+ range: {
+ fromV: null,
+ toV: null,
+ start_ts: null,
+ end_ts: null,
+ },
+ },
+ diff: null,
+ })
+ }
+
+ autoSelectRecentUpdates() {
+ if (this.$scope.history.updates.length === 0) {
+ return
+ }
+
+ this.$scope.history.updates[0].selectedTo = true
+
+ let indexOfLastUpdateNotByMe = 0
+ for (let i = 0; i < this.$scope.history.updates.length; i++) {
+ const update = this.$scope.history.updates[i]
+ if (this._updateContainsUserId(update, this.$scope.user.id)) {
+ break
+ }
+ indexOfLastUpdateNotByMe = i
+ }
+
+ return (this.$scope.history.updates[
+ indexOfLastUpdateNotByMe
+ ].selectedFrom = true)
+ }
+
+ fetchNextBatchOfUpdates() {
+ let url = `/project/${this.ide.project_id}/updates?min_count=${this.BATCH_SIZE}`
+ if (this.$scope.history.nextBeforeTimestamp != null) {
+ url += `&before=${this.$scope.history.nextBeforeTimestamp}`
+ }
+ this.$scope.history.loading = true
+ return this.ide.$http.get(url).then(response => {
+ const { data } = response
+ this._loadUpdates(data.updates)
+ this.$scope.history.nextBeforeTimestamp = data.nextBeforeTimestamp
+ if (data.nextBeforeTimestamp == null) {
+ this.$scope.history.atEnd = true
+ }
+ return (this.$scope.history.loading = false)
+ })
+ }
+
+ reloadDiff() {
+ let { diff } = this.$scope.history
+ const { updates, doc } = this.$scope.history.selection
+ const {
+ fromV,
+ toV,
+ start_ts,
+ end_ts,
+ } = this._calculateRangeFromSelection()
+
+ if (doc == null) {
+ return
+ }
+
+ if (
+ diff != null &&
+ diff.doc === doc &&
+ diff.fromV === fromV &&
+ diff.toV === toV
+ ) {
+ return
+ }
+
+ this.$scope.history.diff = diff = {
+ fromV,
+ toV,
+ start_ts,
+ end_ts,
+ doc,
+ error: false,
+ pathname: doc.name,
+ }
+
+ if (!doc.deleted) {
+ diff.loading = true
+ let url = `/project/${this.$scope.project_id}/doc/${diff.doc.id}/diff`
+ if (diff.fromV != null && diff.toV != null) {
+ url += `?from=${diff.fromV}&to=${diff.toV}`
+ }
+
+ return this.ide.$http
+ .get(url)
+ .then(response => {
+ const { data } = response
+ diff.loading = false
+ const { text, highlights } = this._parseDiff(data)
+ diff.text = text
+ return (diff.highlights = highlights)
+ })
+ .catch(function () {
+ diff.loading = false
+ return (diff.error = true)
+ })
+ } else {
+ diff.deleted = true
+ diff.restoreInProgress = false
+ diff.restoreDeletedSuccess = false
+ return (diff.restoredDocNewId = null)
+ }
+ }
+
+ restoreDeletedDoc(doc) {
+ const url = `/project/${this.$scope.project_id}/doc/${doc.id}/restore`
+ return this.ide.$http.post(url, {
+ name: doc.name,
+ _csrf: window.csrfToken,
+ })
+ }
+
+ restoreDiff(diff) {
+ const url = `/project/${this.$scope.project_id}/doc/${diff.doc.id}/version/${diff.fromV}/restore`
+ return this.ide.$http.post(url, { _csrf: window.csrfToken })
+ }
+
+ _parseDiff(diff) {
+ let row = 0
+ let column = 0
+ const highlights = []
+ let text = ''
+ const iterable = diff.diff || []
+ for (let i = 0; i < iterable.length; i++) {
+ var endColumn, endRow
+ const entry = iterable[i]
+ let content = entry.u || entry.i || entry.d
+ if (!content) {
+ content = ''
+ }
+ text += content
+ const lines = content.split('\n')
+ const startRow = row
+ const startColumn = column
+ if (lines.length > 1) {
+ endRow = startRow + lines.length - 1
+ endColumn = lines[lines.length - 1].length
+ } else {
+ endRow = startRow
+ endColumn = startColumn + lines[0].length
+ }
+ row = endRow
+ column = endColumn
+
+ const range = {
+ start: {
+ row: startRow,
+ column: startColumn,
+ },
+ end: {
+ row: endRow,
+ column: endColumn,
+ },
+ }
+
+ if (entry.i != null || entry.d != null) {
+ const name = displayNameForUser(entry.meta.user)
+ const date = moment(entry.meta.end_ts).format('Do MMM YYYY, h:mm a')
+ if (entry.i != null) {
+ highlights.push({
+ label: `Added by ${name} on ${date}`,
+ highlight: range,
+ hue: ColorManager.getHueForUserId(
+ entry.meta.user != null ? entry.meta.user.id : undefined
+ ),
+ })
+ } else if (entry.d != null) {
+ highlights.push({
+ label: `Deleted by ${name} on ${date}`,
+ strikeThrough: range,
+ hue: ColorManager.getHueForUserId(
+ entry.meta.user != null ? entry.meta.user.id : undefined
+ ),
+ })
+ }
+ }
+ }
+
+ return { text, highlights }
+ }
+
+ _loadUpdates(updates) {
+ if (updates == null) {
+ updates = []
+ }
+ let previousUpdate = this.$scope.history.updates[
+ this.$scope.history.updates.length - 1
+ ]
+
+ for (const update of Array.from(updates)) {
+ update.pathnames = [] // Used for display
+ const object = update.docs || {}
+ for (const doc_id in object) {
+ const doc = object[doc_id]
+ doc.entity = this.ide.fileTreeManager.findEntityById(doc_id, {
+ includeDeleted: true,
+ })
+ update.pathnames.push(doc.entity.name)
+ }
+
+ for (const user of Array.from(update.meta.users || [])) {
+ if (user != null) {
+ user.hue = ColorManager.getHueForUserId(user.id)
+ }
+ }
+
+ if (
+ previousUpdate == null ||
+ !moment(previousUpdate.meta.end_ts).isSame(update.meta.end_ts, 'day')
+ ) {
+ update.meta.first_in_day = true
+ }
+
+ update.selectedFrom = false
+ update.selectedTo = false
+ update.inSelection = false
+
+ previousUpdate = update
+ }
+
+ const firstLoad = this.$scope.history.updates.length === 0
+
+ this.$scope.history.updates = this.$scope.history.updates.concat(updates)
+
+ if (firstLoad) {
+ return this.autoSelectRecentUpdates()
+ }
+ }
+
+ _calculateRangeFromSelection() {
+ let end_ts, start_ts, toV
+ let fromV = (toV = start_ts = end_ts = null)
+
+ const selected_doc_id =
+ this.$scope.history.selection.doc != null
+ ? this.$scope.history.selection.doc.id
+ : undefined
+
+ for (const update of Array.from(
+ this.$scope.history.selection.updates || []
+ )) {
+ for (const doc_id in update.docs) {
+ const doc = update.docs[doc_id]
+ if (doc_id === selected_doc_id) {
+ if (fromV != null && toV != null) {
+ fromV = Math.min(fromV, doc.fromV)
+ toV = Math.max(toV, doc.toV)
+ start_ts = Math.min(start_ts, update.meta.start_ts)
+ end_ts = Math.max(end_ts, update.meta.end_ts)
+ } else {
+ ;({ fromV } = doc)
+ ;({ toV } = doc)
+ ;({ start_ts } = update.meta)
+ ;({ end_ts } = update.meta)
+ }
+ break
+ }
+ }
+ }
+
+ return { fromV, toV, start_ts, end_ts }
+ }
+
+ // Set the track changes selected doc to one of the docs in the range
+ // of currently selected updates. If we already have a selected doc
+ // then prefer this one if present.
+ _selectDocFromUpdates() {
+ let doc, doc_id
+ const affected_docs = {}
+ for (const update of Array.from(this.$scope.history.selection.updates)) {
+ for (doc_id in update.docs) {
+ doc = update.docs[doc_id]
+ affected_docs[doc_id] = doc.entity
+ }
+ }
+
+ let selected_doc = this.$scope.history.selection.doc
+ if (selected_doc != null && affected_docs[selected_doc.id] != null) {
+ // Selected doc is already open
+ } else {
+ const doc_ids = Object.keys(affected_docs)
+ if (doc_ids.length > 0) {
+ const doc_id = doc_ids[0]
+ doc = affected_docs[doc_id]
+ selected_doc = doc
+ }
+ }
+
+ this.$scope.history.selection.doc = selected_doc
+ return this.ide.fileTreeManager.selectEntity(selected_doc)
+ }
+
+ _updateContainsUserId(update, user_id) {
+ for (const user of Array.from(update.meta.users)) {
+ if ((user != null ? user.id : undefined) === user_id) {
+ return true
+ }
+ }
+ return false
+ }
+ }
+ HistoryManager.initClass()
+ return HistoryManager
+})()
diff --git a/services/web/frontend/js/ide/history/HistoryV2Manager.js b/services/web/frontend/js/ide/history/HistoryV2Manager.js
new file mode 100644
index 0000000000..d4c803db0e
--- /dev/null
+++ b/services/web/frontend/js/ide/history/HistoryV2Manager.js
@@ -0,0 +1,1007 @@
+import _ from 'lodash'
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS206: Consider reworking classes to avoid initClass
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import moment from 'moment'
+import ColorManager from '../colors/ColorManager'
+import displayNameForUser from './util/displayNameForUser'
+import HistoryViewModes from './util/HistoryViewModes'
+import './controllers/HistoryV2ListController'
+import './controllers/HistoryV2FileTreeController'
+import './controllers/HistoryV2ToolbarController'
+import './controllers/HistoryV2AddLabelModalController'
+import './controllers/HistoryV2DeleteLabelModalController'
+import './directives/infiniteScroll'
+import './directives/historyDraggableBoundary'
+import './directives/historyDroppableArea'
+import './components/historyEntriesList'
+import './components/historyEntry'
+import './components/historyLabelsList'
+import './components/historyLabel'
+import './components/historyFileTree'
+import './components/historyFileEntity'
+import { paywallPrompt } from '../../../../frontend/js/main/account-upgrade'
+let HistoryManager
+
+export default HistoryManager = (function () {
+ HistoryManager = class HistoryManager {
+ static initClass() {
+ this.prototype.MAX_RECENT_UPDATES_TO_SELECT = 5
+ this.prototype.BATCH_SIZE = 10
+ }
+
+ constructor(ide, $scope, localStorage) {
+ this.labelCurrentVersion = this.labelCurrentVersion.bind(this)
+ this.deleteLabel = this.deleteLabel.bind(this)
+ this._addLabelLocally = this._addLabelLocally.bind(this)
+ this.ide = ide
+ this.$scope = $scope
+ this.localStorage = localStorage
+ this.$scope.HistoryViewModes = HistoryViewModes
+ this._localStorageViewModeProjKey = `history.userPrefs.viewMode.${$scope.project_id}`
+ this._localStorageShowOnlyLabelsProjKey = `history.userPrefs.showOnlyLabels.${$scope.project_id}`
+ this._previouslySelectedPathname = null
+ this._loadFileTreeRequestCanceller = null
+ this.hardReset()
+
+ this.$scope.toggleHistory = () => {
+ if (this.$scope.ui.view === 'history') {
+ this.hide()
+ } else {
+ this.show()
+ this._handleHistoryUIStateChange()
+ }
+ this.ide.$timeout(() => {
+ this.$scope.$broadcast('history:toggle')
+ }, 0)
+ }
+
+ this.$scope.isHistoryLoading = () => {
+ const selection = this.$scope.history.selection
+ return (
+ this.$scope.history.loadingFileTree ||
+ (this.$scope.history.viewMode === HistoryViewModes.POINT_IN_TIME &&
+ selection.file &&
+ selection.file.loading) ||
+ (this.$scope.history.viewMode === HistoryViewModes.COMPARE &&
+ selection.diff &&
+ selection.diff.loading)
+ )
+ }
+ }
+
+ show() {
+ this.$scope.ui.view = 'history'
+ this.hardReset()
+ if (this.$scope.history.showOnlyLabels) {
+ this.fetchNextBatchOfUpdates()
+ }
+ }
+
+ hide() {
+ this.$scope.ui.view = 'editor'
+ }
+
+ _getViewModeUserPref() {
+ return (
+ this.localStorage(this._localStorageViewModeProjKey) ||
+ HistoryViewModes.POINT_IN_TIME
+ )
+ }
+
+ _getShowOnlyLabelsUserPref() {
+ return this.localStorage(this._localStorageShowOnlyLabelsProjKey) || false
+ }
+
+ _setViewModeUserPref(viewModeUserPref) {
+ if (
+ viewModeUserPref === HistoryViewModes.POINT_IN_TIME ||
+ viewModeUserPref === HistoryViewModes.COMPARE
+ ) {
+ this.localStorage(this._localStorageViewModeProjKey, viewModeUserPref)
+ }
+ }
+
+ _setShowOnlyLabelsUserPref(showOnlyLabelsUserPref) {
+ this.localStorage(
+ this._localStorageShowOnlyLabelsProjKey,
+ !!showOnlyLabelsUserPref
+ )
+ }
+
+ hardReset() {
+ this.$scope.history = {
+ isV2: true,
+ updates: [],
+ viewMode: this._getViewModeUserPref(),
+ nextBeforeTimestamp: null,
+ loading: false,
+ atEnd: false,
+ userHasFullFeature: undefined,
+ freeHistoryLimitHit: false,
+ selection: {
+ docs: {},
+ pathname: null,
+ range: {
+ fromV: null,
+ toV: null,
+ },
+ hoveredRange: {
+ fromV: null,
+ toV: null,
+ },
+ diff: null,
+ files: [],
+ file: null,
+ },
+ error: null,
+ showOnlyLabels: this._getShowOnlyLabelsUserPref(),
+ labels: null,
+ loadingFileTree: true,
+ }
+ const _deregisterFeatureWatcher = this.$scope.$watch(
+ 'project.features.versioning',
+ hasVersioning => {
+ if (hasVersioning != null) {
+ this.$scope.history.userHasFullFeature = hasVersioning
+ if (this.$scope.user.isAdmin) {
+ this.$scope.history.userHasFullFeature = true
+ }
+ _deregisterFeatureWatcher()
+ }
+ }
+ )
+ }
+
+ softReset() {
+ this.$scope.history.viewMode = this._getViewModeUserPref()
+ this.$scope.history.selection = {
+ docs: {},
+ pathname: null,
+ range: {
+ fromV: null,
+ toV: null,
+ },
+ hoveredRange: {
+ fromV: null,
+ toV: null,
+ },
+ diff: null, // When history.viewMode == HistoryViewModes.COMPARE
+ files: [], // When history.viewMode == HistoryViewModes.COMPARE
+ file: null,
+ }
+ this.$scope.history.error = null
+ this.$scope.history.showOnlyLabels = this._getShowOnlyLabelsUserPref()
+ }
+
+ toggleHistoryViewMode() {
+ if (this.$scope.history.viewMode === HistoryViewModes.COMPARE) {
+ this.softReset()
+ this.$scope.history.viewMode = HistoryViewModes.POINT_IN_TIME
+ this._setViewModeUserPref(HistoryViewModes.POINT_IN_TIME)
+ } else {
+ this.softReset()
+ this.$scope.history.viewMode = HistoryViewModes.COMPARE
+ this._setViewModeUserPref(HistoryViewModes.COMPARE)
+ }
+ this._handleHistoryUIStateChange()
+ this.ide.$timeout(() => {
+ this.$scope.$broadcast('history:toggle')
+ }, 0)
+ }
+
+ _handleHistoryUIStateChange() {
+ if (this.$scope.history.viewMode === HistoryViewModes.COMPARE) {
+ if (this.$scope.history.showOnlyLabels) {
+ this.autoSelectLabelsForComparison()
+ } else {
+ this.autoSelectRecentUpdates()
+ }
+ } else {
+ // Point-in-time mode
+ if (this.$scope.history.showOnlyLabels) {
+ this.autoSelectLabelForPointInTime()
+ } else {
+ this.autoSelectVersionForPointInTime()
+ }
+ }
+ }
+
+ setHoverFrom(fromV) {
+ const selection = this.$scope.history.selection
+ selection.hoveredRange.fromV = fromV
+ selection.hoveredRange.toV = selection.range.toV
+ this.$scope.history.hoveringOverListSelectors = true
+ }
+
+ setHoverTo(toV) {
+ const selection = this.$scope.history.selection
+ selection.hoveredRange.toV = toV
+ selection.hoveredRange.fromV = selection.range.fromV
+ this.$scope.history.hoveringOverListSelectors = true
+ }
+
+ resetHover() {
+ const selection = this.$scope.history.selection
+ selection.hoveredRange.toV = null
+ selection.hoveredRange.fromV = null
+ this.$scope.history.hoveringOverListSelectors = false
+ }
+
+ showAllUpdates() {
+ if (this.$scope.history.showOnlyLabels) {
+ this.$scope.history.showOnlyLabels = false
+ this._setShowOnlyLabelsUserPref(false)
+ this._handleHistoryUIStateChange()
+ }
+ }
+
+ showOnlyLabels() {
+ if (!this.$scope.history.showOnlyLabels) {
+ this.$scope.history.showOnlyLabels = true
+ this._setShowOnlyLabelsUserPref(true)
+ this._handleHistoryUIStateChange()
+ }
+ }
+
+ restoreFile(version, pathname) {
+ const url = `/project/${this.$scope.project_id}/restore_file`
+
+ return this.ide.$http.post(url, {
+ version,
+ pathname,
+ _csrf: window.csrfToken,
+ })
+ }
+
+ loadFileTreeForVersion(version) {
+ return this._loadFileTree(version, version)
+ }
+
+ loadFileTreeDiff(toV, fromV) {
+ return this._loadFileTree(toV, fromV)
+ }
+
+ _loadFileTree(toV, fromV) {
+ let url = `/project/${this.$scope.project_id}/filetree/diff`
+ const selection = this.$scope.history.selection
+ const query = [`from=${fromV}`, `to=${toV}`]
+ url += `?${query.join('&')}`
+
+ this.$scope.$applyAsync(
+ () => (this.$scope.history.loadingFileTree = true)
+ )
+
+ selection.file = null
+ selection.pathname = null
+
+ // If `this._loadFileTreeRequestCanceller` is not null, then we have a request inflight
+ if (this._loadFileTreeRequestCanceller != null) {
+ // Resolving it will cancel the inflight request (or, rather, ignore its result)
+ this._loadFileTreeRequestCanceller.resolve()
+ }
+ this._loadFileTreeRequestCanceller = this.ide.$q.defer()
+
+ return this.ide.$http
+ .get(url, { timeout: this._loadFileTreeRequestCanceller.promise })
+ .then(response => {
+ this.$scope.history.selection.files = response.data.diff
+ for (const file of this.$scope.history.selection.files) {
+ if (file.newPathname != null) {
+ file.oldPathname = file.pathname
+ file.pathname = file.newPathname
+ delete file.newPathname
+ }
+ }
+ this._loadFileTreeRequestCanceller = null
+ this.$scope.history.loadingFileTree = false
+ this.autoSelectFile()
+ })
+ .catch(err => {
+ if (err.status !== -1) {
+ this._loadFileTreeRequestCanceller = null
+ } else {
+ this.$scope.history.loadingFileTree = false
+ }
+ })
+ }
+
+ selectFile(file) {
+ if (file != null && file.pathname != null) {
+ this.$scope.history.selection.pathname = this._previouslySelectedPathname =
+ file.pathname
+ this.$scope.history.selection.file = file
+ if (this.$scope.history.viewMode === HistoryViewModes.POINT_IN_TIME) {
+ this.loadFileAtPointInTime()
+ } else {
+ this.reloadDiff()
+ }
+ }
+ }
+
+ autoSelectFile() {
+ const selectedPathname = null
+ const files = this.$scope.history.selection.files
+ let fileToSelect = null
+ let previouslySelectedFile = null
+ let previouslySelectedFileHasOp = false
+ const filesWithOps = this._getFilesWithOps()
+ const orderedOpTypes = ['edited', 'added', 'renamed', 'removed']
+
+ if (this._previouslySelectedPathname != null) {
+ previouslySelectedFile = _.find(files, {
+ pathname: this._previouslySelectedPathname,
+ })
+ previouslySelectedFileHasOp = _.some(filesWithOps, {
+ pathname: this._previouslySelectedPathname,
+ })
+ }
+ if (previouslySelectedFile != null && previouslySelectedFileHasOp) {
+ fileToSelect = previouslySelectedFile
+ } else {
+ for (const opType of orderedOpTypes) {
+ const fileWithMatchingOpType = _.find(filesWithOps, {
+ operation: opType,
+ })
+ if (fileWithMatchingOpType != null) {
+ fileToSelect = _.find(files, {
+ pathname: fileWithMatchingOpType.pathname,
+ })
+ break
+ }
+ }
+ if (fileToSelect == null) {
+ if (previouslySelectedFile != null) {
+ fileToSelect = previouslySelectedFile
+ } else {
+ const mainFile = _.find(files, function (file) {
+ return /main\.tex$/.test(file.pathname)
+ })
+ if (mainFile != null) {
+ fileToSelect = mainFile
+ } else {
+ const anyTeXFile = _.find(files, function (file) {
+ return /\.tex$/.test(file.pathname)
+ })
+ if (anyTeXFile != null) {
+ fileToSelect = anyTeXFile
+ } else {
+ fileToSelect = files[0]
+ }
+ }
+ }
+ }
+ }
+
+ this.selectFile(fileToSelect)
+ }
+
+ _getFilesWithOps() {
+ let filesWithOps
+ if (this.$scope.history.viewMode === HistoryViewModes.POINT_IN_TIME) {
+ const currentUpdate = this.getUpdateForVersion(
+ this.$scope.history.selection.range.toV
+ )
+ filesWithOps = []
+ if (currentUpdate != null) {
+ for (const pathname of currentUpdate.pathnames) {
+ filesWithOps.push({
+ pathname: pathname,
+ operation: 'edited',
+ })
+ }
+ for (const op of currentUpdate.project_ops) {
+ let fileWithOp
+ if (op.add != null) {
+ fileWithOp = {
+ pathname: op.add.pathname,
+ operation: 'added',
+ }
+ } else if (op.remove != null) {
+ fileWithOp = {
+ pathname: op.remove.pathname,
+ operation: 'removed',
+ }
+ } else if (op.rename != null) {
+ fileWithOp = {
+ pathname: op.rename.newPathname,
+ operation: 'renamed',
+ }
+ }
+ if (fileWithOp != null) {
+ filesWithOps.push(fileWithOp)
+ }
+ }
+ }
+ } else {
+ filesWithOps = _.reduce(
+ this.$scope.history.selection.files,
+ (curFilesWithOps, file) => {
+ if (file.operation) {
+ curFilesWithOps.push({
+ pathname: file.pathname,
+ operation: file.operation,
+ })
+ }
+ return curFilesWithOps
+ },
+ []
+ )
+ }
+ return filesWithOps
+ }
+
+ autoSelectRecentUpdates() {
+ if (this.$scope.history.updates.length === 0) {
+ return
+ }
+
+ const toV = this.$scope.history.updates[0].toV
+ let fromV = null
+
+ let indexOfLastUpdateNotByMe = 0
+ for (let i = 0; i < this.$scope.history.updates.length; i++) {
+ const update = this.$scope.history.updates[i]
+ if (
+ this._updateContainsUserId(update, this.$scope.user.id) ||
+ i > this.MAX_RECENT_UPDATES_TO_SELECT
+ ) {
+ break
+ }
+ indexOfLastUpdateNotByMe = i
+ }
+
+ fromV = this.$scope.history.updates[indexOfLastUpdateNotByMe].fromV
+ this.selectVersionsForCompare(toV, fromV)
+ }
+
+ autoSelectVersionForPointInTime() {
+ if (this.$scope.history.updates.length === 0) {
+ return
+ }
+ let versionToSelect = this.$scope.history.updates[0].toV
+ const range = this.$scope.history.selection.range
+ if (
+ range.toV != null &&
+ range.fromV != null &&
+ range.toV === range.fromV
+ ) {
+ versionToSelect = range.toV
+ }
+ this.selectVersionForPointInTime(versionToSelect)
+ }
+
+ autoSelectLastLabel() {
+ if (
+ this.$scope.history.labels == null ||
+ this.$scope.history.labels.length === 0
+ ) {
+ return
+ }
+ return this.selectLabelForPointInTime(this.$scope.history.labels[0])
+ }
+
+ expandSelectionToVersion(version) {
+ if (version > this.$scope.history.selection.range.toV) {
+ this.$scope.history.selection.range.toV = version
+ } else if (version < this.$scope.history.selection.range.fromV) {
+ this.$scope.history.selection.range.fromV = version
+ }
+ }
+
+ selectVersionForPointInTime(version) {
+ const selection = this.$scope.history.selection
+ if (
+ selection.range.toV !== version &&
+ selection.range.fromV !== version
+ ) {
+ selection.range.toV = version
+ selection.range.fromV = version
+ this.loadFileTreeForVersion(version)
+ }
+ }
+
+ selectVersionsForCompare(toV, fromV) {
+ const range = this.$scope.history.selection.range
+ if (range.toV !== toV || range.fromV !== fromV) {
+ range.toV = toV
+ range.fromV = fromV
+ this.loadFileTreeDiff(toV, fromV)
+ }
+ }
+
+ autoSelectLabelForPointInTime() {
+ const selectedUpdate = this.getUpdateForVersion(
+ this.$scope.history.selection.range.toV
+ )
+ let nSelectedLabels = 0
+
+ if (selectedUpdate != null && selectedUpdate.labels != null) {
+ nSelectedLabels = selectedUpdate.labels.length
+ }
+
+ // If the currently selected update has no labels, select the last one (version-wise)
+ if (nSelectedLabels === 0) {
+ this.autoSelectLastLabel()
+ // If the update has one label, select it
+ } else if (nSelectedLabels === 1) {
+ this.selectLabelForPointInTime(selectedUpdate.labels[0])
+ // If there are multiple labels for the update, select the latest
+ } else if (nSelectedLabels > 1) {
+ const sortedLabels = this.ide.$filter('orderBy')(
+ selectedUpdate.labels,
+ '-created_at'
+ )
+ const lastLabelFromUpdate = sortedLabels[0]
+ this.selectLabelForPointInTime(lastLabelFromUpdate)
+ }
+ }
+
+ selectLabelForPointInTime(labelToSelect) {
+ let updateToSelect = null
+
+ if (this._isLabelSelected(labelToSelect)) {
+ // Label already selected
+ return
+ }
+
+ for (const update of Array.from(this.$scope.history.updates)) {
+ if (update.toV === labelToSelect.version) {
+ updateToSelect = update
+ break
+ }
+ }
+
+ if (updateToSelect != null) {
+ this.selectVersionForPointInTime(updateToSelect.toV)
+ } else {
+ const selection = this.$scope.history.selection
+ selection.range.toV = labelToSelect.version
+ selection.range.fromV = labelToSelect.version
+ this.loadFileTreeForVersion(labelToSelect.version)
+ }
+ }
+
+ getUpdateForVersion(version) {
+ for (const update of this.$scope.history.updates) {
+ if (update.toV === version) {
+ return update
+ }
+ }
+ }
+
+ autoSelectLabelsForComparison() {
+ const labels = this.$scope.history.labels
+ let nLabels = 0
+ if (Array.isArray(labels)) {
+ nLabels = labels.length
+ }
+ if (nLabels === 0) {
+ // TODO better handling
+ } else if (nLabels === 1) {
+ this.selectVersionsForCompare(labels[0].version, labels[0].version)
+ } else if (nLabels > 1) {
+ this.selectVersionsForCompare(labels[0].version, labels[1].version)
+ }
+ }
+
+ fetchNextBatchOfUpdates() {
+ if (this.$scope.history.atEnd) {
+ return
+ }
+
+ let updatesURL = `/project/${this.ide.project_id}/updates?min_count=${this.BATCH_SIZE}`
+ if (this.$scope.history.nextBeforeTimestamp != null) {
+ updatesURL += `&before=${this.$scope.history.nextBeforeTimestamp}`
+ }
+ const labelsURL = `/project/${this.ide.project_id}/labels`
+
+ const requests = { updates: this.ide.$http.get(updatesURL) }
+
+ if (this.$scope.history.labels == null) {
+ requests.labels = this.ide.$http.get(labelsURL)
+ }
+
+ this.$scope.history.loading = true
+ return this.ide.$q
+ .all(requests)
+ .then(response => {
+ this.$scope.history.loading = false
+ const updatesData = response.updates.data
+ let lastUpdateToV = null
+
+ if (updatesData.updates.length > 0) {
+ lastUpdateToV = updatesData.updates[0].toV
+ }
+ if (response.labels != null) {
+ this.$scope.history.labels = this._loadLabels(
+ response.labels.data,
+ lastUpdateToV
+ )
+ }
+ this._loadUpdates(updatesData.updates)
+ this.$scope.history.nextBeforeTimestamp =
+ updatesData.nextBeforeTimestamp
+ if (
+ updatesData.nextBeforeTimestamp == null ||
+ this.$scope.history.freeHistoryLimitHit ||
+ this.$scope.history.updates.length === 0
+ ) {
+ this.$scope.history.atEnd = true
+ }
+ if (this.$scope.history.updates.length === 0) {
+ this.$scope.history.loadingFileTree = false
+ }
+ })
+ .catch(error => {
+ this.$scope.history.loading = false
+ const { status, statusText } = error
+ this.$scope.history.error = { status, statusText }
+ this.$scope.history.atEnd = true
+ this.$scope.history.loadingFileTree = false
+ })
+ }
+
+ _loadLabels(labels, lastUpdateToV) {
+ const sortedLabels = this._sortLabelsByVersionAndDate(labels)
+ const labelsWithoutPseudoLabel = this._deletePseudoCurrentStateLabelIfExistent(
+ sortedLabels
+ )
+ const labelsWithPseudoLabelIfNeeded = this._addPseudoCurrentStateLabelIfNeeded(
+ labelsWithoutPseudoLabel,
+ lastUpdateToV
+ )
+ return labelsWithPseudoLabelIfNeeded
+ }
+
+ _deletePseudoCurrentStateLabelIfExistent(labels) {
+ if (labels.length && labels[0].isPseudoCurrentStateLabel) {
+ labels.shift()
+ }
+ return labels
+ }
+
+ _addPseudoCurrentStateLabelIfNeeded(labels, mostRecentVersion) {
+ if (
+ (labels.length && labels[0].version !== mostRecentVersion) ||
+ labels.length === 0
+ ) {
+ const pseudoCurrentStateLabel = {
+ id: '1',
+ isPseudoCurrentStateLabel: true,
+ version: mostRecentVersion,
+ created_at: new Date().toISOString(),
+ }
+ labels.unshift(pseudoCurrentStateLabel)
+ }
+ return labels
+ }
+
+ _sortLabelsByVersionAndDate(labels) {
+ return this.ide.$filter('orderBy')(labels, [
+ 'isPseudoCurrentStateLabel',
+ '-version',
+ '-created_at',
+ ])
+ }
+
+ loadFileAtPointInTime() {
+ const toV = this.$scope.history.selection.range.toV
+ const { pathname } = this.$scope.history.selection
+ if (toV == null) {
+ return
+ }
+ let url = `/project/${this.$scope.project_id}/diff`
+ const query = [
+ `pathname=${encodeURIComponent(pathname)}`,
+ `from=${toV}`,
+ `to=${toV}`,
+ ]
+ url += `?${query.join('&')}`
+ this.$scope.history.selection.file.loading = true
+ return this.ide.$http
+ .get(url)
+ .then(response => {
+ const { text, binary } = this._parseDiff(response.data.diff)
+ this.$scope.history.selection.file.binary = binary
+ this.$scope.history.selection.file.text = text
+ this.$scope.history.selection.file.loading = false
+ })
+ .catch(function () {})
+ }
+
+ reloadDiff() {
+ let { diff } = this.$scope.history.selection
+ const { range, pathname } = this.$scope.history.selection
+ const { fromV, toV } = range
+
+ if (pathname == null) {
+ this.$scope.history.selection.diff = null
+ return
+ }
+
+ if (
+ diff != null &&
+ diff.pathname === pathname &&
+ diff.fromV === fromV &&
+ diff.toV === toV
+ ) {
+ return
+ }
+
+ this.$scope.history.selection.diff = diff = {
+ fromV,
+ toV,
+ pathname,
+ error: false,
+ }
+
+ diff.loading = true
+ let url = `/project/${this.$scope.project_id}/diff`
+ const query = [`pathname=${encodeURIComponent(pathname)}`]
+ if (diff.fromV != null && diff.toV != null) {
+ query.push(`from=${diff.fromV}`, `to=${diff.toV}`)
+ }
+ url += `?${query.join('&')}`
+ return this.ide.$http
+ .get(url)
+ .then(response => {
+ const { data } = response
+ diff.loading = false
+ const { text, highlights, binary } = this._parseDiff(data.diff)
+ diff.binary = binary
+ diff.text = text
+ diff.highlights = highlights
+ })
+ .catch(function () {
+ diff.loading = false
+ diff.error = true
+ })
+ }
+
+ labelCurrentVersion(labelComment) {
+ return this._labelVersion(
+ labelComment,
+ this.$scope.history.selection.range.toV
+ )
+ }
+
+ deleteLabel(label) {
+ const url = `/project/${this.$scope.project_id}/labels/${label.id}`
+
+ return this.ide
+ .$http({
+ url,
+ method: 'DELETE',
+ headers: {
+ 'X-CSRF-Token': window.csrfToken,
+ },
+ })
+ .then(response => {
+ return this._deleteLabelLocally(label)
+ })
+ }
+
+ _deleteLabelLocally(labelToDelete) {
+ for (let i = 0; i < this.$scope.history.updates.length; i++) {
+ const update = this.$scope.history.updates[i]
+ if (update.toV === labelToDelete.version) {
+ update.labels = _.filter(
+ update.labels,
+ label => label.id !== labelToDelete.id
+ )
+ break
+ }
+ }
+ this.$scope.history.labels = this._loadLabels(
+ _.filter(
+ this.$scope.history.labels,
+ label => label.id !== labelToDelete.id
+ ),
+ this.$scope.history.updates[0].toV
+ )
+ this._handleHistoryUIStateChange()
+ }
+
+ _isLabelSelected(label) {
+ if (label) {
+ return (
+ label.version <= this.$scope.history.selection.range.toV &&
+ label.version >= this.$scope.history.selection.range.fromV
+ )
+ } else {
+ return false
+ }
+ }
+
+ _parseDiff(diff) {
+ if (diff.binary) {
+ return { binary: true }
+ }
+ let row = 0
+ let column = 0
+ const highlights = []
+ let text = ''
+ const iterable = diff || []
+ for (let i = 0; i < iterable.length; i++) {
+ var endColumn, endRow
+ const entry = iterable[i]
+ let content = entry.u || entry.i || entry.d
+ if (!content) {
+ content = ''
+ }
+ text += content
+ const lines = content.split('\n')
+ const startRow = row
+ const startColumn = column
+ if (lines.length > 1) {
+ endRow = startRow + lines.length - 1
+ endColumn = lines[lines.length - 1].length
+ } else {
+ endRow = startRow
+ endColumn = startColumn + lines[0].length
+ }
+ row = endRow
+ column = endColumn
+
+ const range = {
+ start: {
+ row: startRow,
+ column: startColumn,
+ },
+ end: {
+ row: endRow,
+ column: endColumn,
+ },
+ }
+
+ if (entry.i != null || entry.d != null) {
+ const user =
+ entry.meta.users != null ? entry.meta.users[0] : undefined
+ const name = displayNameForUser(user)
+ const date = moment(entry.meta.end_ts).format('Do MMM YYYY, h:mm a')
+ if (entry.i != null) {
+ highlights.push({
+ label: `Added by ${name} on ${date}`,
+ highlight: range,
+ hue: ColorManager.getHueForUserId(
+ user != null ? user.id : undefined
+ ),
+ })
+ } else if (entry.d != null) {
+ highlights.push({
+ label: `Deleted by ${name} on ${date}`,
+ strikeThrough: range,
+ hue: ColorManager.getHueForUserId(
+ user != null ? user.id : undefined
+ ),
+ })
+ }
+ }
+ }
+
+ return { text, highlights }
+ }
+
+ _loadUpdates(updates) {
+ if (updates == null) {
+ updates = []
+ }
+ let previousUpdate = this.$scope.history.updates[
+ this.$scope.history.updates.length - 1
+ ]
+ const dateTimeNow = new Date()
+ const timestamp24hoursAgo = dateTimeNow.setDate(dateTimeNow.getDate() - 1)
+ let cutOffIndex = null
+
+ const iterable = updates || []
+ for (let i = 0; i < iterable.length; i++) {
+ const update = iterable[i]
+ for (const user of Array.from(update.meta.users || [])) {
+ if (user != null) {
+ user.hue = ColorManager.getHueForUserId(user.id)
+ }
+ }
+ if (
+ previousUpdate == null ||
+ !moment(previousUpdate.meta.end_ts).isSame(update.meta.end_ts, 'day')
+ ) {
+ update.meta.first_in_day = true
+ }
+
+ previousUpdate = update
+
+ if (
+ !this.$scope.history.userHasFullFeature &&
+ update.meta.end_ts < timestamp24hoursAgo
+ ) {
+ cutOffIndex = i || 1 // Make sure that we show at least one entry (to allow labelling).
+ this.$scope.history.freeHistoryLimitHit = true
+ if (this.$scope.project.owner._id === this.$scope.user.id) {
+ ga(
+ 'send',
+ 'event',
+ 'subscription-funnel',
+ 'editor-click-feature',
+ 'history'
+ )
+ paywallPrompt('history')
+ }
+ break
+ }
+ }
+
+ const firstLoad = this.$scope.history.updates.length === 0
+
+ if (!this.$scope.history.userHasFullFeature && cutOffIndex != null) {
+ updates = updates.slice(0, cutOffIndex)
+ }
+
+ this.$scope.history.updates = this.$scope.history.updates.concat(updates)
+
+ if (firstLoad) {
+ this._handleHistoryUIStateChange()
+ }
+ }
+
+ _labelVersion(comment, version) {
+ const url = `/project/${this.$scope.project_id}/labels`
+ return this.ide.$http
+ .post(url, {
+ comment,
+ version,
+ _csrf: window.csrfToken,
+ })
+ .then(response => {
+ return this._addLabelLocally(response.data)
+ })
+ }
+
+ _addLabelLocally(label) {
+ const localUpdate = _.find(
+ this.$scope.history.updates,
+ update => update.toV === label.version
+ )
+ if (localUpdate != null) {
+ localUpdate.labels = localUpdate.labels.concat(label)
+ }
+ this.$scope.history.labels = this._loadLabels(
+ this.$scope.history.labels.concat(label),
+ this.$scope.history.updates[0].toV
+ )
+ this._handleHistoryUIStateChange()
+ }
+
+ _updateContainsUserId(update, user_id) {
+ for (const user of Array.from(update.meta.users)) {
+ if ((user != null ? user.id : undefined) === user_id) {
+ return true
+ }
+ }
+ return false
+ }
+ }
+ HistoryManager.initClass()
+ return HistoryManager
+})()
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/history/components/historyEntriesList.js b/services/web/frontend/js/ide/history/components/historyEntriesList.js
new file mode 100644
index 0000000000..657c06dbc6
--- /dev/null
+++ b/services/web/frontend/js/ide/history/components/historyEntriesList.js
@@ -0,0 +1,138 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+const historyEntriesListController = function ($scope, $element, $attrs) {
+ const ctrl = this
+ ctrl.$entryListViewportEl = null
+ ctrl.isDragging = false
+
+ const _isEntryElVisible = function ($entryEl) {
+ const entryElTop = $entryEl.offset().top
+ const entryElBottom = entryElTop + $entryEl.outerHeight()
+ const entryListViewportElTop = ctrl.$entryListViewportEl.offset().top
+ const entryListViewportElBottom =
+ entryListViewportElTop + ctrl.$entryListViewportEl.height()
+
+ return (
+ entryElTop >= entryListViewportElTop &&
+ entryElBottom <= entryListViewportElBottom
+ )
+ }
+ const _getScrollTopPosForEntry = function ($entryEl) {
+ const halfViewportElHeight = ctrl.$entryListViewportEl.height() / 2
+ return $entryEl.offset().top - halfViewportElHeight
+ }
+ ctrl.onEntryLinked = function (entry, $entryEl) {
+ if (
+ !ctrl.rangeSelectionEnabled &&
+ entry.toV === ctrl.selectedHistoryVersion
+ ) {
+ $scope.$applyAsync(() => {
+ if (!_isEntryElVisible($entryEl)) {
+ ctrl.$entryListViewportEl.scrollTop(
+ _getScrollTopPosForEntry($entryEl)
+ )
+ }
+ })
+ }
+ }
+ ctrl.handleEntrySelect = entry => {
+ if (ctrl.rangeSelectionEnabled) {
+ ctrl.onRangeSelect({
+ selectedToV: entry.toV,
+ selectedFromV: entry.fromV,
+ })
+ } else {
+ ctrl.onVersionSelect({ version: entry.toV })
+ }
+ }
+ ctrl.setRangeToV = toV => {
+ if (toV > ctrl.selectedHistoryRange.fromV) {
+ ctrl.onRangeSelect({
+ selectedToV: toV,
+ selectedFromV: ctrl.selectedHistoryRange.fromV,
+ })
+ }
+ }
+ ctrl.setRangeFromV = fromV => {
+ if (fromV < ctrl.selectedHistoryRange.toV) {
+ ctrl.onRangeSelect({
+ selectedToV: ctrl.selectedHistoryRange.toV,
+ selectedFromV: fromV,
+ })
+ }
+ }
+ ctrl.initHoveredRange = () => {
+ ctrl.hoveredHistoryRange = {
+ toV: ctrl.selectedHistoryRange.toV,
+ fromV: ctrl.selectedHistoryRange.fromV,
+ }
+ }
+ ctrl.resetHoveredRange = () => {
+ ctrl.hoveredHistoryRange = { toV: null, fromV: null }
+ }
+ ctrl.setHoveredRangeToV = toV => {
+ if (toV > ctrl.hoveredHistoryRange.fromV) {
+ $scope.$applyAsync(() => (ctrl.hoveredHistoryRange.toV = toV))
+ }
+ }
+ ctrl.setHoveredRangeFromV = fromV => {
+ if (fromV < ctrl.hoveredHistoryRange.toV) {
+ $scope.$applyAsync(() => (ctrl.hoveredHistoryRange.fromV = fromV))
+ }
+ }
+ ctrl.onDraggingStart = () => {
+ $scope.$applyAsync(() => {
+ ctrl.isDragging = true
+ ctrl.initHoveredRange()
+ })
+ }
+ ctrl.onDraggingStop = (isValidDrop, boundary) => {
+ $scope.$applyAsync(() => {
+ ctrl.isDragging = false
+ if (!isValidDrop) {
+ if (boundary === 'toV') {
+ ctrl.setRangeToV(ctrl.hoveredHistoryRange.toV)
+ } else if (boundary === 'fromV') {
+ ctrl.setRangeFromV(ctrl.hoveredHistoryRange.fromV)
+ }
+ }
+ ctrl.resetHoveredRange()
+ })
+ }
+ ctrl.$onInit = () => {
+ ctrl.$entryListViewportEl = $element.find('> .history-entries')
+ ctrl.resetHoveredRange()
+ }
+}
+
+export default App.component('historyEntriesList', {
+ bindings: {
+ entries: '<',
+ users: '<',
+ loadEntries: '&',
+ loadDisabled: '<',
+ loadInitialize: '<',
+ isLoading: '<',
+ currentUser: '<',
+ freeHistoryLimitHit: '<',
+ currentUserIsOwner: '<',
+ rangeSelectionEnabled: '<',
+ selectedHistoryVersion: '
+ _.find(ctrl.users, function (user) {
+ const curUserId =
+ (user != null ? user._id : undefined) ||
+ (user != null ? user.id : undefined)
+ return curUserId === id
+ })
+ ctrl.displayName = displayNameForUser
+ ctrl.displayNameById = id => displayNameForUser(_getUserById(id))
+ ctrl.getProjectOpDoc = function (projectOp) {
+ if (projectOp.rename != null) {
+ return `${projectOp.rename.pathname} → ${projectOp.rename.newPathname}`
+ } else if (projectOp.add != null) {
+ return `${projectOp.add.pathname}`
+ } else if (projectOp.remove != null) {
+ return `${projectOp.remove.pathname}`
+ }
+ }
+ ctrl.getUserCSSStyle = function (user) {
+ const curUserId =
+ (user != null ? user._id : undefined) ||
+ (user != null ? user.id : undefined)
+ const hue = ColorManager.getHueForUserId(curUserId) || 100
+ if (ctrl.isEntrySelected() || ctrl.isEntryHoverSelected()) {
+ return { color: '#FFF' }
+ } else {
+ return { color: `hsl(${hue}, 70%, 50%)` }
+ }
+ }
+ ctrl.isEntrySelected = function () {
+ if (ctrl.rangeSelectionEnabled) {
+ return (
+ ctrl.entry.toV <= ctrl.selectedHistoryRange.toV &&
+ ctrl.entry.fromV >= ctrl.selectedHistoryRange.fromV
+ )
+ } else {
+ return ctrl.entry.toV === ctrl.selectedHistoryVersion
+ }
+ }
+
+ ctrl.isEntryHoverSelected = function () {
+ return (
+ ctrl.rangeSelectionEnabled &&
+ ctrl.entry.toV <= ctrl.hoveredHistoryRange.toV &&
+ ctrl.entry.fromV >= ctrl.hoveredHistoryRange.fromV
+ )
+ }
+
+ ctrl.onDraggingStart = () => {
+ ctrl.historyEntriesList.onDraggingStart()
+ }
+ ctrl.onDraggingStop = (isValidDrop, boundary) =>
+ ctrl.historyEntriesList.onDraggingStop(isValidDrop, boundary)
+
+ ctrl.onDrop = boundary => {
+ if (boundary === 'toV') {
+ $scope.$applyAsync(() =>
+ ctrl.historyEntriesList.setRangeToV(ctrl.entry.toV)
+ )
+ } else if (boundary === 'fromV') {
+ $scope.$applyAsync(() =>
+ ctrl.historyEntriesList.setRangeFromV(ctrl.entry.fromV)
+ )
+ }
+ }
+ ctrl.onOver = boundary => {
+ if (boundary === 'toV') {
+ $scope.$applyAsync(() =>
+ ctrl.historyEntriesList.setHoveredRangeToV(ctrl.entry.toV)
+ )
+ } else if (boundary === 'fromV') {
+ $scope.$applyAsync(() =>
+ ctrl.historyEntriesList.setHoveredRangeFromV(ctrl.entry.fromV)
+ )
+ }
+ }
+
+ ctrl.$onInit = () => {
+ ctrl.$entryEl = $element.find('> .history-entry')
+ ctrl.$entryDetailsEl = $element.find('.history-entry-details')
+ ctrl.$toVHandleEl = $element.find('.history-entry-toV-handle')
+ ctrl.$fromVHandleEl = $element.find('.history-entry-fromV-handle')
+ ctrl.historyEntriesList.onEntryLinked(ctrl.entry, ctrl.$entryEl)
+ }
+}
+
+export default App.component('historyEntry', {
+ bindings: {
+ entry: '<',
+ currentUser: '<',
+ users: '<',
+ rangeSelectionEnabled: '<',
+ isDragging: '<',
+ selectedHistoryVersion: ' {
+ const [simplifiedOldPathname, simplifiedPathname] = _getSimplifiedPaths(
+ ctrl.fileEntity.oldPathname,
+ ctrl.fileEntity.pathname
+ )
+ return `${fileOperationI18nNames.renamed} ${simplifiedOldPathname} → ${simplifiedPathname}`
+ }
+ ctrl.getFileOperationName = () => {
+ if (ctrl.fileEntity.operation === 'edited') {
+ return fileOperationI18nNames.edited
+ } else if (ctrl.fileEntity.operation === 'renamed') {
+ return fileOperationI18nNames.renamed
+ } else if (ctrl.fileEntity.operation === 'added') {
+ return fileOperationI18nNames.created
+ } else if (ctrl.fileEntity.operation === 'removed') {
+ return fileOperationI18nNames.deleted
+ } else {
+ return ''
+ }
+ }
+
+ const _getSimplifiedPaths = (path1, path2) => {
+ const path1Parts = path1.split('/')
+ const path2Parts = path2.split('/')
+ const maxIterations = Math.min(path1Parts.length, path2Parts.length) - 1
+ for (
+ var commonPartIndex = 0;
+ commonPartIndex < maxIterations;
+ commonPartIndex++
+ ) {
+ if (path1Parts[commonPartIndex] !== path2Parts[commonPartIndex]) {
+ break
+ }
+ }
+ path1Parts.splice(0, commonPartIndex)
+ path2Parts.splice(0, commonPartIndex)
+ return [path1Parts.join('/'), path2Parts.join('/')]
+ }
+
+ const _handleFolderClick = function () {
+ ctrl.isOpen = !ctrl.isOpen
+ ctrl.entityTypeIconClass = _getFolderIcon()
+ }
+
+ const _handleFileClick = () =>
+ ctrl.historyFileTreeController.handleEntityClick(ctrl.fileEntity)
+ var _getFolderIcon = function () {
+ if (ctrl.isOpen) {
+ return 'fa-folder-open'
+ } else {
+ return 'fa-folder'
+ }
+ }
+ ctrl.$onInit = function () {
+ if (ctrl.fileEntity.type === 'folder') {
+ ctrl.isOpen = true
+ ctrl.entityTypeIconClass = _getFolderIcon()
+ ctrl.handleClick = _handleFolderClick
+ } else {
+ if (ctrl.fileEntity.operation) {
+ ctrl.hasOperation = true
+ }
+ ctrl.entityTypeIconClass = `fa-${iconTypeFromName(ctrl.fileEntity.name)}`
+ ctrl.entityOpTextClass = ctrl.fileEntity.operation
+ ? `history-file-entity-name-${ctrl.fileEntity.operation}`
+ : null
+ ctrl.handleClick = _handleFileClick
+ $scope.$watch(
+ () => ctrl.historyFileTreeController.selectedPathname,
+ selectedPathname =>
+ (ctrl.isSelected = ctrl.fileEntity.pathname === selectedPathname)
+ )
+ }
+ }
+}
+
+export default App.component('historyFileEntity', {
+ require: {
+ historyFileTreeController: '^historyFileTree',
+ },
+ bindings: {
+ fileEntity: '<',
+ },
+ controller: historyFileEntityController,
+ templateUrl: 'historyFileEntityTpl',
+})
diff --git a/services/web/frontend/js/ide/history/components/historyFileTree.js b/services/web/frontend/js/ide/history/components/historyFileTree.js
new file mode 100644
index 0000000000..c33ed670ef
--- /dev/null
+++ b/services/web/frontend/js/ide/history/components/historyFileTree.js
@@ -0,0 +1,63 @@
+import _ from 'lodash'
+
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+const historyFileTreeController = function ($scope, $element, $attrs) {
+ const ctrl = this
+ ctrl.handleEntityClick = file => ctrl.onSelectedFileChange({ file })
+ ctrl._fileTree = []
+
+ $scope.$watch('$ctrl.files', function (files) {
+ if (files != null && files.length > 0) {
+ ctrl._fileTree = _.reduce(files, _reducePathsToTree, [])
+ }
+ })
+
+ function _reducePathsToTree(currentFileTree, fileObject) {
+ const filePathParts = fileObject.pathname.split('/')
+ let currentFileTreeLocation = currentFileTree
+ for (let index = 0; index < filePathParts.length; index++) {
+ var fileTreeEntity
+ var pathPart = filePathParts[index]
+ const isFile = index === filePathParts.length - 1
+ if (isFile) {
+ fileTreeEntity = _.clone(fileObject)
+ fileTreeEntity.name = pathPart
+ fileTreeEntity.type = 'file'
+ currentFileTreeLocation.push(fileTreeEntity)
+ } else {
+ fileTreeEntity = _.find(
+ currentFileTreeLocation,
+ entity => entity.name === pathPart
+ )
+ if (fileTreeEntity == null) {
+ fileTreeEntity = {
+ name: pathPart,
+ type: 'folder',
+ children: [],
+ }
+ currentFileTreeLocation.push(fileTreeEntity)
+ }
+ currentFileTreeLocation = fileTreeEntity.children
+ }
+ }
+ return currentFileTree
+ }
+}
+
+export default App.component('historyFileTree', {
+ bindings: {
+ files: '<',
+ selectedPathname: '<',
+ onSelectedFileChange: '&',
+ isLoading: '<',
+ },
+ controller: historyFileTreeController,
+ templateUrl: 'historyFileTreeTpl',
+})
diff --git a/services/web/frontend/js/ide/history/components/historyLabel.js b/services/web/frontend/js/ide/history/components/historyLabel.js
new file mode 100644
index 0000000000..e2d148a298
--- /dev/null
+++ b/services/web/frontend/js/ide/history/components/historyLabel.js
@@ -0,0 +1,37 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+const historyLabelController = function ($scope, $element, $attrs, $filter) {
+ const ctrl = this
+ ctrl.$onInit = () => {
+ if (ctrl.showTooltip == null) {
+ ctrl.showTooltip = true
+ }
+ if (ctrl.isPseudoCurrentStateLabel == null) {
+ ctrl.isPseudoCurrentStateLabel = false
+ }
+ }
+}
+
+export default App.component('historyLabel', {
+ bindings: {
+ labelText: '<',
+ labelOwnerName: ' {
+ return {
+ version: parseInt(version, 10),
+ labels,
+ }
+ })
+ }
+ })
+ ctrl.initHoveredRange = () => {
+ ctrl.hoveredHistoryRange = {
+ toV: ctrl.selectedHistoryRange.toV,
+ fromV: ctrl.selectedHistoryRange.fromV,
+ }
+ }
+ ctrl.resetHoveredRange = () => {
+ ctrl.hoveredHistoryRange = { toV: null, fromV: null }
+ }
+ ctrl.setHoveredRangeToV = toV => {
+ if (toV >= ctrl.hoveredHistoryRange.fromV) {
+ ctrl.hoveredHistoryRange.toV = toV
+ }
+ }
+ ctrl.setHoveredRangeFromV = fromV => {
+ if (fromV <= ctrl.hoveredHistoryRange.toV) {
+ ctrl.hoveredHistoryRange.fromV = fromV
+ }
+ }
+
+ ctrl.isVersionSelected = function (version) {
+ if (ctrl.rangeSelectionEnabled) {
+ return (
+ version <= ctrl.selectedHistoryRange.toV &&
+ version >= ctrl.selectedHistoryRange.fromV
+ )
+ } else {
+ return version === ctrl.selectedHistoryVersion
+ }
+ }
+ ctrl.isVersionHoverSelected = function (version) {
+ return (
+ ctrl.rangeSelectionEnabled &&
+ version <= ctrl.hoveredHistoryRange.toV &&
+ version >= ctrl.hoveredHistoryRange.fromV
+ )
+ }
+ ctrl.onDraggingStart = () => {
+ $scope.$applyAsync(() => {
+ ctrl.isDragging = true
+ ctrl.initHoveredRange()
+ })
+ }
+ ctrl.onDraggingStop = (isValidDrop, boundary) => {
+ $scope.$applyAsync(() => {
+ if (!isValidDrop) {
+ if (boundary === 'toV') {
+ ctrl.setRangeToV(ctrl.hoveredHistoryRange.toV)
+ } else if (boundary === 'fromV') {
+ ctrl.setRangeFromV(ctrl.hoveredHistoryRange.fromV)
+ }
+ }
+ ctrl.isDragging = false
+ ctrl.resetHoveredRange()
+ })
+ }
+ ctrl.onDrop = (boundary, versionWithLabel) => {
+ if (boundary === 'toV') {
+ $scope.$applyAsync(() => ctrl.setRangeToV(versionWithLabel.version))
+ } else if (boundary === 'fromV') {
+ $scope.$applyAsync(() => ctrl.setRangeFromV(versionWithLabel.version))
+ }
+ }
+ ctrl.onOver = (boundary, versionWithLabel) => {
+ if (boundary === 'toV') {
+ $scope.$applyAsync(() =>
+ ctrl.setHoveredRangeToV(versionWithLabel.version)
+ )
+ } else if (boundary === 'fromV') {
+ $scope.$applyAsync(() =>
+ ctrl.setHoveredRangeFromV(versionWithLabel.version)
+ )
+ }
+ }
+ ctrl.handleVersionSelect = versionWithLabel => {
+ if (ctrl.rangeSelectionEnabled) {
+ // TODO
+ ctrl.onRangeSelect({
+ selectedToV: versionWithLabel.version,
+ selectedFromV: versionWithLabel.version,
+ })
+ } else {
+ ctrl.onVersionSelect({ version: versionWithLabel.version })
+ }
+ }
+ ctrl.setRangeToV = version => {
+ if (version >= ctrl.selectedHistoryRange.fromV) {
+ ctrl.onRangeSelect({
+ selectedToV: version,
+ selectedFromV: ctrl.selectedHistoryRange.fromV,
+ })
+ }
+ }
+ ctrl.setRangeFromV = version => {
+ if (version <= ctrl.selectedHistoryRange.toV) {
+ ctrl.onRangeSelect({
+ selectedToV: ctrl.selectedHistoryRange.toV,
+ selectedFromV: version,
+ })
+ }
+ }
+ ctrl.buildUserView = label => {
+ const user = {
+ _id: label.user_id,
+ displayName: label.user_display_name,
+ }
+ return user
+ }
+ ctrl.displayName = displayNameForUser
+ ctrl.getUserCSSStyle = function (user, versionWithLabel) {
+ const curUserId =
+ (user != null ? user._id : undefined) ||
+ (user != null ? user.id : undefined)
+ const hue = ColorManager.getHueForUserId(curUserId) || 100
+ if (
+ ctrl.isVersionSelected(versionWithLabel.version) ||
+ ctrl.isVersionHoverSelected(versionWithLabel.version)
+ ) {
+ return { color: '#FFF' }
+ } else {
+ return { color: `hsl(${hue}, 70%, 50%)` }
+ }
+ }
+
+ ctrl.$onInit = () => {
+ ctrl.resetHoveredRange()
+ }
+}
+
+export default App.component('historyLabelsList', {
+ bindings: {
+ labels: '<',
+ rangeSelectionEnabled: '<',
+ users: '<',
+ currentUser: '<',
+ isLoading: '<',
+ selectedHistoryVersion: '
+ ide.editorManager.openDoc({ id: $scope.history.diff.restoredDocNewId }))
+ }
+)
+
+export default App.controller(
+ 'HistoryRestoreDiffModalController',
+ function ($scope, $modalInstance, diff, ide, eventTracking) {
+ $scope.state = { inflight: false }
+
+ $scope.diff = diff
+
+ $scope.restore = function () {
+ eventTracking.sendMB('history-restored')
+ $scope.state.inflight = true
+ return ide.historyManager.restoreDiff(diff).then(function () {
+ $scope.state.inflight = false
+ $modalInstance.close()
+ return ide.editorManager.openDoc(diff.doc)
+ })
+ }
+
+ return ($scope.cancel = () => $modalInstance.dismiss())
+ }
+)
diff --git a/services/web/frontend/js/ide/history/controllers/HistoryListController.js b/services/web/frontend/js/ide/history/controllers/HistoryListController.js
new file mode 100644
index 0000000000..bc8c12fc99
--- /dev/null
+++ b/services/web/frontend/js/ide/history/controllers/HistoryListController.js
@@ -0,0 +1,214 @@
+import _ from 'lodash'
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+import displayNameForUser from '../util/displayNameForUser'
+App.controller('HistoryListController', function ($scope, $modal, ide) {
+ $scope.hoveringOverListSelectors = false
+
+ $scope.projectUsers = []
+
+ $scope.$watch('project.members', function (newVal) {
+ if (newVal != null) {
+ return ($scope.projectUsers = newVal.concat($scope.project.owner))
+ }
+ })
+
+ // This method (and maybe the one below) will be removed soon. User details data will be
+ // injected into the history API responses, so we won't need to fetch user data from other
+ // local data structures.
+ const _getUserById = id =>
+ _.find($scope.projectUsers, function (user) {
+ const curUserId =
+ (user != null ? user._id : undefined) ||
+ (user != null ? user.id : undefined)
+ return curUserId === id
+ })
+
+ $scope.getDisplayNameById = id => displayNameForUser(_getUserById(id))
+
+ $scope.deleteLabel = labelDetails =>
+ $modal.open({
+ templateUrl: 'historyV2DeleteLabelModalTemplate',
+ controller: 'HistoryV2DeleteLabelModalController',
+ resolve: {
+ labelDetails() {
+ return labelDetails
+ },
+ },
+ })
+
+ $scope.loadMore = () => {
+ return ide.historyManager.fetchNextBatchOfUpdates()
+ }
+
+ $scope.recalculateSelectedUpdates = function () {
+ let beforeSelection = true
+ let afterSelection = false
+ $scope.history.selection.updates = []
+ return (() => {
+ const result = []
+ for (const update of Array.from($scope.history.updates)) {
+ var inSelection
+ if (update.selectedTo) {
+ inSelection = true
+ beforeSelection = false
+ }
+
+ update.beforeSelection = beforeSelection
+ update.inSelection = inSelection
+ update.afterSelection = afterSelection
+
+ if (inSelection) {
+ $scope.history.selection.updates.push(update)
+ }
+
+ if (update.selectedFrom) {
+ inSelection = false
+ result.push((afterSelection = true))
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ }
+
+ $scope.recalculateHoveredUpdates = function () {
+ let inHoverSelection
+ let hoverSelectedFrom = false
+ let hoverSelectedTo = false
+ for (var update of Array.from($scope.history.updates)) {
+ // Figure out whether the to or from selector is hovered over
+ if (update.hoverSelectedFrom) {
+ hoverSelectedFrom = true
+ }
+ if (update.hoverSelectedTo) {
+ hoverSelectedTo = true
+ }
+ }
+
+ if (hoverSelectedFrom) {
+ // We want to 'hover select' everything between hoverSelectedFrom and selectedTo
+ inHoverSelection = false
+ for (update of Array.from($scope.history.updates)) {
+ if (update.selectedTo) {
+ update.hoverSelectedTo = true
+ inHoverSelection = true
+ }
+ update.inHoverSelection = inHoverSelection
+ if (update.hoverSelectedFrom) {
+ inHoverSelection = false
+ }
+ }
+ }
+ if (hoverSelectedTo) {
+ // We want to 'hover select' everything between hoverSelectedTo and selectedFrom
+ inHoverSelection = false
+ return (() => {
+ const result = []
+ for (update of Array.from($scope.history.updates)) {
+ if (update.hoverSelectedTo) {
+ inHoverSelection = true
+ }
+ update.inHoverSelection = inHoverSelection
+ if (update.selectedFrom) {
+ update.hoverSelectedFrom = true
+ result.push((inHoverSelection = false))
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ }
+ }
+
+ $scope.resetHoverState = () =>
+ (() => {
+ const result = []
+ for (const update of Array.from($scope.history.updates)) {
+ delete update.hoverSelectedFrom
+ delete update.hoverSelectedTo
+ result.push(delete update.inHoverSelection)
+ }
+ return result
+ })()
+
+ return $scope.$watch('history.updates.length', () =>
+ $scope.recalculateSelectedUpdates()
+ )
+})
+
+export default App.controller(
+ 'HistoryListItemController',
+ function ($scope, eventTracking) {
+ $scope.$watch(
+ 'update.selectedFrom',
+ function (selectedFrom, oldSelectedFrom) {
+ if (selectedFrom) {
+ for (const update of Array.from($scope.history.updates)) {
+ if (update !== $scope.update) {
+ update.selectedFrom = false
+ }
+ }
+ return $scope.recalculateSelectedUpdates()
+ }
+ }
+ )
+
+ $scope.$watch('update.selectedTo', function (selectedTo, oldSelectedTo) {
+ if (selectedTo) {
+ for (const update of Array.from($scope.history.updates)) {
+ if (update !== $scope.update) {
+ update.selectedTo = false
+ }
+ }
+ return $scope.recalculateSelectedUpdates()
+ }
+ })
+
+ $scope.select = function () {
+ eventTracking.sendMB('history-view-change')
+ $scope.update.selectedTo = true
+ return ($scope.update.selectedFrom = true)
+ }
+
+ $scope.mouseOverSelectedFrom = function () {
+ $scope.history.hoveringOverListSelectors = true
+ $scope.update.hoverSelectedFrom = true
+ return $scope.recalculateHoveredUpdates()
+ }
+
+ $scope.mouseOutSelectedFrom = function () {
+ $scope.history.hoveringOverListSelectors = false
+ return $scope.resetHoverState()
+ }
+
+ $scope.mouseOverSelectedTo = function () {
+ $scope.history.hoveringOverListSelectors = true
+ $scope.update.hoverSelectedTo = true
+ return $scope.recalculateHoveredUpdates()
+ }
+
+ $scope.mouseOutSelectedTo = function () {
+ $scope.history.hoveringOverListSelectors = false
+ return $scope.resetHoverState()
+ }
+
+ return ($scope.displayName = displayNameForUser)
+ }
+)
diff --git a/services/web/frontend/js/ide/history/controllers/HistoryV2AddLabelModalController.js b/services/web/frontend/js/ide/history/controllers/HistoryV2AddLabelModalController.js
new file mode 100644
index 0000000000..3887dc2b4b
--- /dev/null
+++ b/services/web/frontend/js/ide/history/controllers/HistoryV2AddLabelModalController.js
@@ -0,0 +1,47 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.controller(
+ 'HistoryV2AddLabelModalController',
+ function ($scope, $modalInstance, ide, update) {
+ $scope.update = update
+ $scope.inputs = { labelName: null }
+ $scope.state = {
+ inflight: false,
+ error: false,
+ }
+
+ $modalInstance.opened.then(() =>
+ $scope.$applyAsync(() => $scope.$broadcast('open'))
+ )
+
+ return ($scope.addLabelModalFormSubmit = function () {
+ $scope.state.inflight = true
+ return ide.historyManager
+ .labelCurrentVersion($scope.inputs.labelName)
+ .then(function (response) {
+ $scope.state.inflight = false
+ return $modalInstance.close()
+ })
+ .catch(function (response) {
+ const { data, status } = response
+ $scope.state.inflight = false
+ if (status === 400) {
+ return ($scope.state.error = { message: data })
+ } else {
+ return ($scope.state.error = true)
+ }
+ })
+ })
+ }
+)
diff --git a/services/web/frontend/js/ide/history/controllers/HistoryV2DeleteLabelModalController.js b/services/web/frontend/js/ide/history/controllers/HistoryV2DeleteLabelModalController.js
new file mode 100644
index 0000000000..a399de199a
--- /dev/null
+++ b/services/web/frontend/js/ide/history/controllers/HistoryV2DeleteLabelModalController.js
@@ -0,0 +1,42 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.controller(
+ 'HistoryV2DeleteLabelModalController',
+ function ($scope, $modalInstance, ide, labelDetails) {
+ $scope.labelDetails = labelDetails
+ $scope.state = {
+ inflight: false,
+ error: false,
+ }
+
+ return ($scope.deleteLabel = function () {
+ $scope.state.inflight = true
+ return ide.historyManager
+ .deleteLabel(labelDetails)
+ .then(function (response) {
+ $scope.state.inflight = false
+ return $modalInstance.close()
+ })
+ .catch(function (response) {
+ const { data, status } = response
+ $scope.state.inflight = false
+ if (status === 400) {
+ return ($scope.state.error = { message: data })
+ } else {
+ return ($scope.state.error = true)
+ }
+ })
+ })
+ }
+)
diff --git a/services/web/frontend/js/ide/history/controllers/HistoryV2FileTreeController.js b/services/web/frontend/js/ide/history/controllers/HistoryV2FileTreeController.js
new file mode 100644
index 0000000000..dbf3b49403
--- /dev/null
+++ b/services/web/frontend/js/ide/history/controllers/HistoryV2FileTreeController.js
@@ -0,0 +1,22 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.controller(
+ 'HistoryV2FileTreeController',
+ function ($scope, ide) {
+ $scope.handleFileSelection = file => {
+ ide.historyManager.selectFile(file)
+ }
+ }
+)
diff --git a/services/web/frontend/js/ide/history/controllers/HistoryV2ListController.js b/services/web/frontend/js/ide/history/controllers/HistoryV2ListController.js
new file mode 100644
index 0000000000..cbfc7e5be8
--- /dev/null
+++ b/services/web/frontend/js/ide/history/controllers/HistoryV2ListController.js
@@ -0,0 +1,54 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.controller(
+ 'HistoryV2ListController',
+ function ($scope, $modal, ide) {
+ $scope.hoveringOverListSelectors = false
+ $scope.listConfig = { showOnlyLabelled: false }
+
+ $scope.projectUsers = []
+
+ $scope.$watch('project.members', function (newVal) {
+ if (newVal != null) {
+ return ($scope.projectUsers = newVal.concat($scope.project.owner))
+ }
+ })
+
+ $scope.loadMore = () => {
+ return ide.historyManager.fetchNextBatchOfUpdates()
+ }
+
+ $scope.handleVersionSelect = version =>
+ $scope.$applyAsync(() =>
+ ide.historyManager.selectVersionForPointInTime(version)
+ )
+
+ $scope.handleRangeSelect = (selectedToV, selectedFromV) =>
+ $scope.$applyAsync(() =>
+ ide.historyManager.selectVersionsForCompare(selectedToV, selectedFromV)
+ )
+
+ return ($scope.handleLabelDelete = labelDetails =>
+ $modal.open({
+ templateUrl: 'historyV2DeleteLabelModalTemplate',
+ controller: 'HistoryV2DeleteLabelModalController',
+ resolve: {
+ labelDetails() {
+ return labelDetails
+ },
+ },
+ }))
+ }
+)
diff --git a/services/web/frontend/js/ide/history/controllers/HistoryV2ToolbarController.js b/services/web/frontend/js/ide/history/controllers/HistoryV2ToolbarController.js
new file mode 100644
index 0000000000..9014486715
--- /dev/null
+++ b/services/web/frontend/js/ide/history/controllers/HistoryV2ToolbarController.js
@@ -0,0 +1,123 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+ camelcase,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.controller(
+ 'HistoryV2ToolbarController',
+ ($scope, $modal, ide, eventTracking, waitFor) => {
+ $scope.currentUpdate = null
+ $scope.currentLabel = null
+
+ $scope.restoreState = {
+ inflight: false,
+ error: false,
+ }
+
+ $scope.toolbarUIConfig = {
+ showOnlyLabels: false,
+ }
+
+ const _deregistershowOnlyLabelsWatcher = $scope.$watch(
+ 'history.showOnlyLabels',
+ showOnlyLabels => {
+ if (showOnlyLabels != null) {
+ $scope.toolbarUIConfig.showOnlyLabels = showOnlyLabels
+ _deregistershowOnlyLabelsWatcher()
+ }
+ }
+ )
+
+ $scope.$watch('toolbarUIConfig.showOnlyLabels', (newVal, oldVal) => {
+ if (newVal != null && newVal !== oldVal) {
+ if (newVal) {
+ ide.historyManager.showOnlyLabels()
+ } else {
+ ide.historyManager.showAllUpdates()
+ }
+ }
+ })
+
+ $scope.$watch('history.viewMode', (newVal, oldVal) => {
+ if (newVal != null && newVal !== oldVal) {
+ $scope.currentUpdate = ide.historyManager.getUpdateForVersion(newVal)
+ }
+ })
+
+ $scope.$watch('history.selection.range.toV', (newVal, oldVal) => {
+ if (
+ newVal != null &&
+ newVal !== oldVal &&
+ $scope.history.viewMode === $scope.HistoryViewModes.POINT_IN_TIME
+ ) {
+ $scope.currentUpdate = ide.historyManager.getUpdateForVersion(newVal)
+ }
+ })
+
+ $scope.toggleHistoryViewMode = () => {
+ ide.historyManager.toggleHistoryViewMode()
+ }
+
+ $scope.restoreDeletedFile = function () {
+ const { pathname, deletedAtV } = $scope.history.selection.file
+ if (pathname == null || deletedAtV == null) {
+ return
+ }
+
+ eventTracking.sendMB('history-v2-restore-deleted')
+ $scope.restoreState.inflight = true
+ return ide.historyManager
+ .restoreFile(deletedAtV, pathname)
+ .then(function (response) {
+ const { data } = response
+ return openEntity(data)
+ })
+ .catch(() =>
+ ide.showGenericMessageModal(
+ 'Sorry, something went wrong with the restore'
+ )
+ )
+ .finally(() => ($scope.restoreState.inflight = false))
+ }
+
+ $scope.showAddLabelDialog = () => {
+ $modal.open({
+ templateUrl: 'historyV2AddLabelModalTemplate',
+ controller: 'HistoryV2AddLabelModalController',
+ resolve: {
+ update() {
+ return $scope.history.selection.update
+ },
+ },
+ })
+ }
+
+ function openEntity(data) {
+ const { id, type } = data
+ return waitFor(() => ide.fileTreeManager.findEntityById(id), 3000)
+ .then(function (entity) {
+ if (type === 'doc') {
+ ide.editorManager.openDoc(entity)
+ ide.$timeout(() => {
+ $scope.$broadcast('history:toggle')
+ }, 0)
+ } else if (type === 'file') {
+ ide.binaryFilesManager.openFile(entity)
+ ide.$timeout(() => {
+ $scope.$broadcast('history:toggle')
+ }, 0)
+ }
+ })
+ .catch(err => console.warn(err))
+ }
+ }
+)
diff --git a/services/web/frontend/js/ide/history/directives/historyDraggableBoundary.js b/services/web/frontend/js/ide/history/directives/historyDraggableBoundary.js
new file mode 100644
index 0000000000..34aa84bba6
--- /dev/null
+++ b/services/web/frontend/js/ide/history/directives/historyDraggableBoundary.js
@@ -0,0 +1,33 @@
+import App from '../../../base'
+
+export default App.directive('historyDraggableBoundary', () => ({
+ scope: {
+ historyDraggableBoundary: '@',
+ historyDraggableBoundaryOnDragStart: '&',
+ historyDraggableBoundaryOnDragStop: '&',
+ },
+ restrict: 'A',
+ link(scope, element, attrs) {
+ element.data('selectionBoundary', {
+ boundary: scope.historyDraggableBoundary,
+ })
+ element.draggable({
+ axis: 'y',
+ opacity: false,
+ helper: 'clone',
+ revert: true,
+ scroll: true,
+ cursor: 'row-resize',
+ start(e, ui) {
+ ui.helper.data('wasProperlyDropped', false)
+ scope.historyDraggableBoundaryOnDragStart()
+ },
+ stop(e, ui) {
+ scope.historyDraggableBoundaryOnDragStop({
+ isValidDrop: ui.helper.data('wasProperlyDropped'),
+ boundary: scope.historyDraggableBoundary,
+ })
+ },
+ })
+ },
+}))
diff --git a/services/web/frontend/js/ide/history/directives/historyDroppableArea.js b/services/web/frontend/js/ide/history/directives/historyDroppableArea.js
new file mode 100644
index 0000000000..8f0b44ab38
--- /dev/null
+++ b/services/web/frontend/js/ide/history/directives/historyDroppableArea.js
@@ -0,0 +1,24 @@
+import App from '../../../base'
+
+export default App.directive('historyDroppableArea', () => ({
+ scope: {
+ historyDroppableAreaOnDrop: '&',
+ historyDroppableAreaOnOver: '&',
+ historyDroppableAreaOnOut: '&',
+ },
+ restrict: 'A',
+ link(scope, element, attrs) {
+ element.droppable({
+ accept: e => '.history-entry-toV-handle, .history-entry-fromV-handle',
+ drop: (e, ui) => {
+ const draggedBoundary = ui.draggable.data('selectionBoundary').boundary
+ ui.helper.data('wasProperlyDropped', true)
+ scope.historyDroppableAreaOnDrop({ boundary: draggedBoundary })
+ },
+ over: (e, ui) => {
+ const draggedBoundary = ui.draggable.data('selectionBoundary').boundary
+ scope.historyDroppableAreaOnOver({ boundary: draggedBoundary })
+ },
+ })
+ },
+}))
diff --git a/services/web/frontend/js/ide/history/directives/infiniteScroll.js b/services/web/frontend/js/ide/history/directives/infiniteScroll.js
new file mode 100644
index 0000000000..fa93cd925e
--- /dev/null
+++ b/services/web/frontend/js/ide/history/directives/infiniteScroll.js
@@ -0,0 +1,53 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('infiniteScroll', () => ({
+ link(scope, element, attrs, ctrl) {
+ const innerElement = element.find('.infinite-scroll-inner')
+ element.css({ 'overflow-y': 'auto' })
+
+ const atEndOfListView = function () {
+ if (attrs.infiniteScrollUpwards != null) {
+ return atTopOfListView()
+ } else {
+ return atBottomOfListView()
+ }
+ }
+
+ var atTopOfListView = () => element.scrollTop() < 30
+
+ var atBottomOfListView = () =>
+ element.scrollTop() + element.height() >= innerElement.height() - 30
+
+ const listShorterThanContainer = () =>
+ element.height() > innerElement.height()
+
+ var loadUntilFull = function () {
+ if (
+ (listShorterThanContainer() || atEndOfListView()) &&
+ !scope.$eval(attrs.infiniteScrollDisabled)
+ ) {
+ const promise = scope.$eval(attrs.infiniteScroll)
+ return promise.then(() => setTimeout(() => loadUntilFull(), 0))
+ }
+ }
+
+ element.on('scroll', event => loadUntilFull())
+
+ return scope.$watch(attrs.infiniteScrollInitialize, function (value) {
+ if (value) {
+ return loadUntilFull()
+ }
+ })
+ },
+}))
diff --git a/services/web/frontend/js/ide/history/util/HistoryViewModes.js b/services/web/frontend/js/ide/history/util/HistoryViewModes.js
new file mode 100644
index 0000000000..4ef6ab7847
--- /dev/null
+++ b/services/web/frontend/js/ide/history/util/HistoryViewModes.js
@@ -0,0 +1,17 @@
+/* eslint-disable
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+let HistoryViewModes
+
+export default HistoryViewModes = {
+ POINT_IN_TIME: 'point_in_time',
+ COMPARE: 'compare',
+}
diff --git a/services/web/frontend/js/ide/history/util/displayNameForUser.js b/services/web/frontend/js/ide/history/util/displayNameForUser.js
new file mode 100644
index 0000000000..2c72d92e47
--- /dev/null
+++ b/services/web/frontend/js/ide/history/util/displayNameForUser.js
@@ -0,0 +1,36 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+let displayNameForUser
+
+export default displayNameForUser = function (user) {
+ if (user == null) {
+ return 'Anonymous'
+ }
+ if (user.id === window.user.id) {
+ return 'you'
+ }
+ if (user.name != null) {
+ return user.name
+ }
+ let name = [user.first_name, user.last_name]
+ .filter(n => n != null)
+ .join(' ')
+ .trim()
+ if (name === '') {
+ name = user.email.split('@')[0]
+ }
+ if (name == null || name === '') {
+ return '?'
+ }
+ return name
+}
diff --git a/services/web/frontend/js/ide/hotkeys/BackspaceHighjack.js b/services/web/frontend/js/ide/hotkeys/BackspaceHighjack.js
new file mode 100644
index 0000000000..d9b792d966
--- /dev/null
+++ b/services/web/frontend/js/ide/hotkeys/BackspaceHighjack.js
@@ -0,0 +1,20 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+const rx = /INPUT|SELECT|TEXTAREA/i
+
+export default $(document).bind('keydown keypress', function (e) {
+ if (e.which === 8) {
+ // 8 == backspace
+ if (!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly) {
+ return e.preventDefault()
+ }
+ }
+})
diff --git a/services/web/frontend/js/ide/hotkeys/index.js b/services/web/frontend/js/ide/hotkeys/index.js
new file mode 100644
index 0000000000..955d996a59
--- /dev/null
+++ b/services/web/frontend/js/ide/hotkeys/index.js
@@ -0,0 +1,4 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+import './BackspaceHighjack'
+import '../../features/hotkeys-modal/controllers/hotkeys-modal-controller'
diff --git a/services/web/frontend/js/ide/human-readable-logs/HumanReadableLogs.js b/services/web/frontend/js/ide/human-readable-logs/HumanReadableLogs.js
new file mode 100644
index 0000000000..f2896a7e27
--- /dev/null
+++ b/services/web/frontend/js/ide/human-readable-logs/HumanReadableLogs.js
@@ -0,0 +1,84 @@
+import LogParser from 'libs/latex-log-parser'
+import ruleset from './HumanReadableLogsRules'
+
+export default {
+ parse(rawLog, options) {
+ let parsedLogEntries
+ if (typeof rawLog === 'string') {
+ parsedLogEntries = LogParser.parse(rawLog, options)
+ } else {
+ parsedLogEntries = rawLog
+ }
+
+ const _getRule = function (logMessage) {
+ for (const rule of ruleset) {
+ if (rule.regexToMatch.test(logMessage)) {
+ return rule
+ }
+ }
+ }
+
+ const seenErrorTypes = {} // keep track of types of errors seen
+
+ for (const entry of parsedLogEntries.all) {
+ const ruleDetails = _getRule(entry.message)
+
+ if (ruleDetails != null) {
+ var type
+ if (ruleDetails.ruleId != null) {
+ entry.ruleId = ruleDetails.ruleId
+ } else if (ruleDetails.regexToMatch != null) {
+ entry.ruleId = `hint_${ruleDetails.regexToMatch
+ .toString()
+ .replace(/\s/g, '_')
+ .slice(1, -1)}`
+ }
+ if (ruleDetails.newMessage != null) {
+ entry.message = entry.message.replace(
+ ruleDetails.regexToMatch,
+ ruleDetails.newMessage
+ )
+ }
+ // suppress any entries that are known to cascade from previous error types
+ if (ruleDetails.cascadesFrom != null) {
+ for (type of ruleDetails.cascadesFrom) {
+ if (seenErrorTypes[type]) {
+ entry.suppressed = true
+ }
+ }
+ }
+ // record the types of errors seen
+ if (ruleDetails.types != null) {
+ for (type of ruleDetails.types) {
+ seenErrorTypes[type] = true
+ }
+ }
+
+ if (ruleDetails.humanReadableHint != null) {
+ entry.humanReadableHint = ruleDetails.humanReadableHint
+ }
+
+ if (ruleDetails.humanReadableHintComponent != null) {
+ entry.humanReadableHintComponent =
+ ruleDetails.humanReadableHintComponent
+ }
+
+ if (ruleDetails.extraInfoURL != null) {
+ entry.extraInfoURL = ruleDetails.extraInfoURL
+ }
+ }
+ }
+
+ // filter out the suppressed errors (from the array entries in parsedLogEntries)
+ for (const key in parsedLogEntries) {
+ const errors = parsedLogEntries[key]
+ if (typeof errors === 'object' && errors.length > 0) {
+ parsedLogEntries[key] = Array.from(errors).filter(
+ err => !err.suppressed
+ )
+ }
+ }
+
+ return parsedLogEntries
+ },
+}
diff --git a/services/web/frontend/js/ide/human-readable-logs/HumanReadableLogsRules.js b/services/web/frontend/js/ide/human-readable-logs/HumanReadableLogsRules.js
new file mode 100644
index 0000000000..c2e0df507d
--- /dev/null
+++ b/services/web/frontend/js/ide/human-readable-logs/HumanReadableLogsRules.js
@@ -0,0 +1,562 @@
+/* eslint-disable no-useless-escape */
+import PropTypes from 'prop-types'
+
+function WikiLink({ url, children, skipPlainRendering }) {
+ if (window.wikiEnabled) {
+ return (
+
+ {children}
+
+ )
+ } else {
+ return <>{children}
+ }
+}
+
+WikiLink.propTypes = {
+ url: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired,
+}
+
+const rules = [
+ {
+ regexToMatch: /Misplaced alignment tab character \&/,
+ extraInfoURL:
+ 'https://www.overleaf.com/learn/Errors/Misplaced_alignment_tab_character_%26',
+ humanReadableHintComponent: (
+ <>
+ You have placed an alignment tab character '&' in the wrong place. If
+ you want to align something, you must write it inside an align
+ environment such as \begin
+ {'{align}'} … \end
+ {'{align}'}, \begin
+ {'{tabular}'} … \end
+ {'{tabular}'}, etc. If you want to write an ampersand '&' in text, you
+ must write \& instead.
+
+ ),
+ humanReadableHint:
+ 'You have placed an alignment tab character '&' in the wrong place. If you want to align something, you must write it inside an align environment such as \\begin{align} … \\end{align}, \\begin{tabular} … \\end{tabular}, etc. If you want to write an ampersand '&' in text, you must write \\& instead.',
+ },
+ {
+ regexToMatch: /Extra alignment tab has been changed to \\cr/,
+ extraInfoURL:
+ 'https://www.overleaf.com/learn/Errors/Extra_alignment_tab_has_been_changed_to_%5Ccr',
+ humanReadableHintComponent: (
+ <>
+ You have written too many alignment tabs in a table, causing one of them
+ to be turned into a line break. Make sure you have specified the correct
+ number of columns in your{' '}
+
+ Watch out!
+ We had to undo some of your collaborators changes before we could undo yours.
+ Dismiss
+
+
+
+ {{ annotationLabel.text }}
+
+
+
+
+ {{ updateLabels.highlightsBefore }} more update{{ updateLabels.highlightsBefore > 1 && "" || "s" }} above
+
+
+
+
+ {{ updateLabels.highlightsAfter }} more update{{ updateLabels.highlightsAfter > 1 && "" || "s" }} below
+
+
++ You need to enclose all mathematical expressions and symbols with + special markers. These special markers create a ‘math mode’. +
+
+ Use $...$ for inline math mode, and \[...\]
+ or one of the mathematical environments (e.g. equation) for display
+ math mode.
+
+ This applies to symbols such as subscripts ( _ ),
+ integrals ( \int ), Greek letters ( \alpha,{' '}
+ \beta, \delta ) and modifiers{' '}
+ {'(\\vec{x}'}, {'\\tilde{x}'}).
+
+
+
+
+
+
\
+`,
+}))
diff --git a/services/web/frontend/js/ide/pdfng/directives/pdfJsLoader.js b/services/web/frontend/js/ide/pdfng/directives/pdfJsLoader.js
new file mode 100644
index 0000000000..1953803ecb
--- /dev/null
+++ b/services/web/frontend/js/ide/pdfng/directives/pdfJsLoader.js
@@ -0,0 +1,28 @@
+/*
+ * Adapted from https://github.com/mozilla/pdfjs-dist/blob/e9492b7a725ec4edd466880223474f4295a5fb45/webpack.js
+ * The PDF.js worker needs to be loaded in a Web Worker. This can be done
+ * automatically with webpack via worker-loader.
+ * PDF.js has the above file to do this, however it uses the webpack loader
+ * module loading syntax, which prevents us from customising the loader.
+ * We need to output the worker file to the public/js directory, and so we need
+ * to customise the loader's options. However the rest of the file is identical
+ * to the one provided by PDF.js.
+ */
+/*
+ * Adapted from https://github.com/mozilla/pdfjs-dist/blob/e9492b7a725ec4edd466880223474f4295a5fb45/webpack.js
+ * The PDF.js worker needs to be loaded in a Web Worker. This can be done
+ * automatically with webpack via worker-loader.
+ * PDF.js has the above file to do this, however it uses the webpack loader
+ * module loading syntax, which prevents us from customising the loader.
+ * We need to output the worker file to the public/js directory, and so we need
+ * to customise the loader's options. However the rest of the file is identical
+ * to the one provided by PDF.js.
+ */
+var pdfjs = require('libs/pdfjs-dist/build/pdf.js')
+var PdfjsWorker = require('libs/pdfjs-dist/build/pdf.worker.js')
+
+if (typeof window !== 'undefined' && 'Worker' in window) {
+ pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker()
+}
+
+module.exports = pdfjs
diff --git a/services/web/frontend/js/ide/pdfng/directives/pdfPage.js b/services/web/frontend/js/ide/pdfng/directives/pdfPage.js
new file mode 100644
index 0000000000..fbef075c21
--- /dev/null
+++ b/services/web/frontend/js/ide/pdfng/directives/pdfPage.js
@@ -0,0 +1,166 @@
+/* eslint-disable
+ max-len,
+ new-cap,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive(
+ 'pdfPage',
+ ($timeout, pdfHighlights, pdfSpinner) => ({
+ require: '^pdfViewer',
+ template: `\
+
+
+
+
+
+
\
+`,
+ link(scope, element, attrs, ctrl) {
+ const canvasElement = $(element).find('.pdf-canvas')
+ const textElement = $(element).find('.text-layer')
+ const annotationsElement = $(element).find('.annotations-layer')
+ const highlightsElement = $(element).find('.highlights-layer')
+
+ const updatePageSize = function (size) {
+ const h = Math.floor(size[0])
+ const w = Math.floor(size[1])
+ element.height(h)
+ element.width(w)
+ canvasElement.height(h)
+ canvasElement.width(w)
+ return (scope.page.sized = true)
+ }
+
+ // keep track of our page element, so we can access it in the
+ // parent with scope.pages[i].element, and the contained
+ // elements for each part
+ scope.page.element = element
+ scope.page.elementChildren = {
+ canvas: canvasElement,
+ text: textElement,
+ annotations: annotationsElement,
+ highlights: highlightsElement,
+ container: element,
+ }
+
+ if (!scope.page.sized) {
+ if (scope.defaultPageSize != null) {
+ updatePageSize(scope.defaultPageSize)
+ } else {
+ // shouldn't get here - the default page size should now
+ // always be set before redraw is called
+ var handler = scope.$watch(
+ 'defaultPageSize',
+ function (defaultPageSize) {
+ if (defaultPageSize == null) {
+ return
+ }
+ updatePageSize(defaultPageSize)
+ return handler()
+ }
+ )
+ }
+ }
+
+ if (scope.page.current) {
+ // console.log 'we must scroll to this page', scope.page.pageNum, 'at position', scope.page.position
+ // this is the current page, we want to scroll it into view
+ // and render it immediately
+ scope.document.renderPage(scope.page)
+ ctrl.setPdfPosition(scope.page, scope.page.position)
+ }
+
+ element.on('dblclick', function (e) {
+ const offset = $(element).find('.pdf-canvas').offset()
+ const dx = e.pageX - offset.left
+ const dy = e.pageY - offset.top
+ return scope.document
+ .getPdfViewport(scope.page.pageNum)
+ .then(function (viewport) {
+ const pdfPoint = viewport.convertToPdfPoint(dx, dy)
+ const event = {
+ page: scope.page.pageNum,
+ x: pdfPoint[0],
+ y: viewport.viewBox[3] - pdfPoint[1],
+ }
+ return scope.$emit('pdfDoubleClick', event)
+ })
+ })
+
+ const highlightsLayer = new pdfHighlights({
+ highlights: highlightsElement,
+ })
+
+ scope.$on('pdf:highlights', function (event, highlights) {
+ let h
+ if (highlights == null) {
+ return
+ }
+ if (!(highlights.length > 0)) {
+ return
+ }
+ if (scope.timeoutHandler) {
+ $timeout.cancel(scope.timeoutHandler)
+ highlightsLayer.clearHighlights()
+ scope.timeoutHandler = null
+ }
+
+ // console.log 'got highlight watch in pdfPage', scope.page
+ const pageHighlights = (() => {
+ const result = []
+ for (h of Array.from(highlights)) {
+ if (h.page === scope.page.pageNum) {
+ result.push(h)
+ }
+ }
+ return result
+ })()
+ if (!pageHighlights.length) {
+ return
+ }
+ scope.document.getPdfViewport(scope.page.pageNum).then(viewport =>
+ (() => {
+ const result1 = []
+ for (const hl of Array.from(pageHighlights)) {
+ // console.log 'adding highlight', h, viewport
+ const top = viewport.viewBox[3] - hl.v
+ result1.push(
+ highlightsLayer.addHighlight(
+ viewport,
+ hl.h,
+ top,
+ hl.width,
+ hl.height
+ )
+ )
+ }
+ return result1
+ })()
+ )
+ return (scope.timeoutHandler = $timeout(function () {
+ highlightsLayer.clearHighlights()
+ return (scope.timeoutHandler = null)
+ }, 1000))
+ })
+
+ return scope.$on('$destroy', function () {
+ if (scope.timeoutHandler != null) {
+ $timeout.cancel(scope.timeoutHandler)
+ return highlightsLayer.clearHighlights()
+ }
+ })
+ },
+ })
+)
diff --git a/services/web/frontend/js/ide/pdfng/directives/pdfRenderer.js b/services/web/frontend/js/ide/pdfng/directives/pdfRenderer.js
new file mode 100644
index 0000000000..e0d3ee987c
--- /dev/null
+++ b/services/web/frontend/js/ide/pdfng/directives/pdfRenderer.js
@@ -0,0 +1,558 @@
+/* eslint-disable
+ node/handle-callback-err,
+ max-len,
+ new-cap,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS206: Consider reworking classes to avoid initClass
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+import PDFJS from './pdfJsLoader'
+import { captureMessage } from '../../../infrastructure/error-reporter'
+
+export default App.factory(
+ 'PDFRenderer',
+ function ($timeout, pdfAnnotations, pdfTextLayer, pdfSpinner) {
+ let PDFRenderer
+ return (PDFRenderer = (function () {
+ PDFRenderer = class PDFRenderer {
+ static initClass() {
+ this.prototype.JOB_QUEUE_INTERVAL = 25
+ this.prototype.PAGE_LOAD_TIMEOUT = 60 * 1000
+ this.prototype.INDICATOR_DELAY1 = 100 // time to delay before showing the indicator
+ this.prototype.INDICATOR_DELAY2 = 250 // time until the indicator starts animating
+ this.prototype.TEXTLAYER_TIMEOUT = 100
+ }
+
+ constructor(url, options) {
+ // set up external character mappings - needed for Japanese etc
+ this.url = url
+ this.options = options
+
+ this.scale = this.options.scale || 1
+
+ let disableFontFace
+ if (
+ __guard__(
+ window.location != null ? window.location.search : undefined,
+ x => x.indexOf('disable-font-face=true')
+ ) >= 0
+ ) {
+ disableFontFace = true
+ } else {
+ disableFontFace = false
+ }
+ this.pdfjs = PDFJS.getDocument({
+ url: this.url,
+ cMapUrl: window.pdfCMapsPath,
+ cMapPacked: true,
+ disableFontFace,
+ // Enable fetching with Range headers to restrict individual
+ // requests to 128kb.
+ // To do this correctly we must:
+ // a) disable auto-fetching of the whole file upfront
+ // b) disable streaming (which in this context means streaming of
+ // the response into memory). This isn't supported when using
+ // Range headers, but shouldn't be a problem since we are already
+ // limiting individual response size through chunked range
+ // requests
+ rangeChunkSize: 128 * 1024,
+ disableAutoFetch: !!this.options.disableAutoFetch,
+ disableStream: !!this.options.disableAutoFetch,
+ })
+ this.errorCallback = this.options.errorCallback
+ this.pageSizeChangeCallback = this.options.pageSizeChangeCallback
+ this.pdfjs.onProgress = this.options.progressCallback
+ this.document = this.pdfjs
+ this.navigateFn = this.options.navigateFn
+ this.spinner = new pdfSpinner()
+ this.resetState()
+ this.document.promise
+ .then(pdfDocument => {
+ return pdfDocument.getDownloadInfo().then(() => {
+ return this.options.loadedCallback()
+ })
+ })
+ .catch(exception => {
+ // error getting document
+ return this.errorCallback(exception)
+ })
+ }
+
+ resetState() {
+ this.renderQueue = []
+ if (this.queueTimer != null) {
+ clearTimeout(this.queueTimer)
+ }
+ // clear any existing timers, render tasks
+ for (const timer of Array.from(this.spinTimer || [])) {
+ clearTimeout(timer)
+ }
+ for (const page of Array.from(this.pageState || [])) {
+ __guard__(page != null ? page.loadTask : undefined, x => x.cancel())
+ __guard__(page != null ? page.renderTask : undefined, x1 =>
+ x1.cancel()
+ )
+ }
+ // initialise/reset the state
+ this.pageState = []
+ this.spinTimer = [] // timers for starting the spinners (to avoid jitter)
+ this.spinTimerDone = [] // array of pages where the spinner has activated
+ return (this.jobs = 0)
+ }
+
+ getNumPages() {
+ return this.document.promise.then(pdfDocument => pdfDocument.numPages)
+ }
+
+ getPage(pageNum) {
+ return this.document.promise.then(pdfDocument =>
+ pdfDocument.getPage(pageNum)
+ )
+ }
+
+ getPdfViewport(pageNum, scale) {
+ if (scale == null) {
+ ;({ scale } = this)
+ }
+ return this.document.promise.then(pdfDocument => {
+ return pdfDocument.getPage(pageNum).then(
+ function (page) {
+ let viewport
+ return (viewport = page.getViewport({ scale: scale }))
+ },
+ error => {
+ return typeof this.errorCallback === 'function'
+ ? this.errorCallback(error)
+ : undefined
+ }
+ )
+ })
+ }
+
+ getDestinations() {
+ return this.document.promise.then(pdfDocument =>
+ pdfDocument.getDestinations()
+ )
+ }
+
+ getDestination(dest) {
+ return this.document.promise.then(
+ pdfDocument => pdfDocument.getDestination(dest),
+ error => {
+ return typeof this.errorCallback === 'function'
+ ? this.errorCallback(error)
+ : undefined
+ }
+ )
+ }
+
+ getPageIndex(ref) {
+ return this.document.promise.then(pdfDocument => {
+ return pdfDocument.getPageIndex(ref).then(
+ idx => idx,
+ error => {
+ return typeof this.errorCallback === 'function'
+ ? this.errorCallback(error)
+ : undefined
+ }
+ )
+ })
+ }
+
+ getScale() {
+ return this.scale
+ }
+
+ setScale(scale) {
+ this.scale = scale
+ return this.resetState()
+ }
+
+ triggerRenderQueue(interval) {
+ if (interval == null) {
+ interval = this.JOB_QUEUE_INTERVAL
+ }
+ if (this.queueTimer != null) {
+ clearTimeout(this.queueTimer)
+ }
+ return (this.queueTimer = setTimeout(() => {
+ this.queueTimer = null
+ return this.processRenderQueue()
+ }, interval))
+ }
+
+ removeCompletedJob(pagenum) {
+ this.jobs = this.jobs - 1
+ return this.triggerRenderQueue(0)
+ }
+
+ renderPages(pages) {
+ if (this.shuttingDown) {
+ return
+ }
+ this.renderQueue = Array.from(pages).map(page => ({
+ element: page.elementChildren,
+ pagenum: page.pageNum,
+ }))
+ return this.triggerRenderQueue()
+ }
+
+ renderPage(page) {
+ if (this.shuttingDown) {
+ return
+ }
+ const current = {
+ element: page.elementChildren,
+ pagenum: page.pageNum,
+ }
+ this.renderQueue.push(current)
+ return this.processRenderQueue()
+ }
+
+ getPageDetails(page) {
+ return [page.element.canvas, page.pagenum]
+ }
+
+ // handle the loading indicators for each page
+
+ startIndicators() {
+ // make an array of the pages in the queue
+ this.queuedPages = []
+ for (var page of Array.from(this.renderQueue)) {
+ this.queuedPages[page.pagenum] = true
+ }
+ // clear any unfinished spinner timers on pages that aren't in the queue any more
+ for (const pagenum in this.spinTimer) {
+ if (!this.queuedPages[pagenum]) {
+ clearTimeout(this.spinTimer[pagenum])
+ delete this.spinTimer[pagenum]
+ }
+ }
+ // add indicators for any new pages in the current queue
+ return (() => {
+ const result = []
+ for (page of Array.from(this.renderQueue)) {
+ if (
+ !this.spinTimer[page.pagenum] &&
+ !this.spinTimerDone[page.pagenum]
+ ) {
+ result.push(this.startIndicator(page))
+ }
+ }
+ return result
+ })()
+ }
+
+ startIndicator(page) {
+ const [canvas, pagenum] = Array.from(this.getPageDetails(page))
+ canvas.addClass('pdfng-loading')
+ return (this.spinTimer[pagenum] = setTimeout(() => {
+ for (const queuedPage of Array.from(this.renderQueue)) {
+ if (pagenum === queuedPage.pagenum) {
+ this.spinner.add(canvas, { static: true })
+ this.spinTimerDone[pagenum] = true
+ break
+ }
+ }
+ return delete this.spinTimer[pagenum]
+ }, this.INDICATOR_DELAY1))
+ }
+
+ updateIndicator(page) {
+ const [canvas, pagenum] = Array.from(this.getPageDetails(page))
+ // did the spinner insert itself already?
+ if (this.spinTimerDone[pagenum]) {
+ return (this.spinTimer[pagenum] = setTimeout(() => {
+ this.spinner.start(canvas)
+ return delete this.spinTimer[pagenum]
+ }, this.INDICATOR_DELAY2))
+ } else {
+ // stop the existing spin timer
+ clearTimeout(this.spinTimer[pagenum])
+ // start a new one which will also start spinning
+ return (this.spinTimer[pagenum] = setTimeout(() => {
+ this.spinner.add(canvas, { static: true })
+ this.spinTimerDone[pagenum] = true
+ return (this.spinTimer[pagenum] = setTimeout(() => {
+ this.spinner.start(canvas)
+ return delete this.spinTimer[pagenum]
+ }, this.INDICATOR_DELAY2))
+ }, this.INDICATOR_DELAY1))
+ }
+ }
+
+ clearIndicator(page) {
+ const [canvas, pagenum] = Array.from(this.getPageDetails(page))
+ this.spinner.stop(canvas)
+ clearTimeout(this.spinTimer[pagenum])
+ delete this.spinTimer[pagenum]
+ return (this.spinTimerDone[pagenum] = true)
+ }
+
+ // handle the queue of pages to be rendered
+
+ processRenderQueue() {
+ let pageState
+ if (this.shuttingDown) {
+ return
+ }
+ // mark all pages in the queue as loading
+ this.startIndicators()
+ // bail out if there is already a render job running
+ if (this.jobs > 0) {
+ return
+ }
+ // take the first page in the queue
+ let page = this.renderQueue.shift()
+ // check if it is in action already
+ while (page != null && this.pageState[page.pagenum] != null) {
+ page = this.renderQueue.shift()
+ }
+ if (page == null) {
+ return
+ }
+ const [element, pagenum] = Array.from([page.element, page.pagenum])
+ this.jobs = this.jobs + 1
+
+ // update the spinner to make it spinning (signifies loading has begun)
+ this.updateIndicator(page)
+
+ let timedOut = false
+ const timer = $timeout(() => {
+ // page load timed out
+ if (loadTask.cancelled) {
+ return
+ } // return from cancelled page load
+ captureMessage(
+ `pdfng page load timed out after ${this.PAGE_LOAD_TIMEOUT}ms`
+ )
+
+ timedOut = true
+ this.clearIndicator(page)
+ // @jobs = @jobs - 1
+ // @triggerRenderQueue(0)
+ return typeof this.errorCallback === 'function'
+ ? this.errorCallback('timeout')
+ : undefined
+ }, this.PAGE_LOAD_TIMEOUT)
+
+ var loadTask = this.getPage(pagenum)
+
+ loadTask.cancel = function () {
+ return (this.cancelled = true)
+ }
+
+ this.pageState[pagenum] = pageState = { loadTask }
+
+ return loadTask
+ .then(pageObject => {
+ // page load success
+ $timeout.cancel(timer)
+ if (loadTask.cancelled) {
+ return
+ } // return from cancelled page load
+ const timePDFFetched = performance.now()
+
+ const visible = !document.hidden
+ if (!visible) {
+ // Flush the fetch time early, omit the render time.
+ if (typeof this.options.firstRenderDone === 'function') {
+ this.options.firstRenderDone({ timePDFFetched })
+ // Do not submit the actual rendering time.
+ this.options.firstRenderDone = null
+ }
+ }
+
+ pageState.renderTask = this.doRender(element, pagenum, pageObject)
+ return pageState.renderTask.promise.then(
+ () => {
+ if (typeof this.options.firstRenderDone === 'function') {
+ const timePDFRendered = performance.now()
+ this.options.firstRenderDone({
+ timePDFFetched,
+ timePDFRendered,
+ })
+ // The rendering pipeline is processed repeatedly, skip the next ones.
+ this.options.firstRenderDone = null
+ }
+
+ // render task success
+ this.clearIndicator(page)
+ pageState.complete = true
+ delete pageState.renderTask
+ return this.removeCompletedJob(pagenum)
+ },
+ () => {
+ // render task failed
+ // could display an error icon
+ pageState.complete = false
+ delete pageState.renderTask
+ return this.removeCompletedJob(pagenum)
+ }
+ )
+ })
+ .catch(error => {
+ // page load error
+ $timeout.cancel(timer)
+ return this.clearIndicator(page)
+ })
+ }
+
+ doRender(element, pagenum, page) {
+ const self = this
+ const { scale } = this
+
+ if (scale == null) {
+ // scale is undefined, returning
+ return
+ }
+
+ const canvas = $(
+ ''
+ )
+ // In Windows+IE we must have the canvas in the DOM during
+ // rendering to see the fonts defined in the DOM. If we try to
+ // render 'offscreen' then all the text will be sans-serif.
+ // Previously we rendered offscreen and added in the canvas
+ // when rendering was complete.
+ element.canvas.replaceWith(canvas)
+
+ const viewport = page.getViewport({ scale: scale })
+
+ const devicePixelRatio = window.devicePixelRatio || 1
+
+ const ctx = canvas[0].getContext('2d')
+ const backingStoreRatio =
+ ctx.webkitBackingStorePixelRatio ||
+ ctx.mozBackingStorePixelRatio ||
+ ctx.msBackingStorePixelRatio ||
+ ctx.oBackingStorePixelRatio ||
+ ctx.backingStorePixelRatio ||
+ 1
+ const pixelRatio = devicePixelRatio / backingStoreRatio
+
+ const scaledWidth = (Math.floor(viewport.width) * pixelRatio) | 0
+ const scaledHeight = (Math.floor(viewport.height) * pixelRatio) | 0
+
+ const newWidth = Math.floor(viewport.width)
+ const newHeight = Math.floor(viewport.height)
+
+ canvas[0].height = scaledHeight
+ canvas[0].width = scaledWidth
+
+ canvas.height(newHeight + 'px')
+ canvas.width(newWidth + 'px')
+
+ const oldHeight = element.canvas.height()
+ const oldWidth = element.canvas.width()
+ if (newHeight !== oldHeight || newWidth !== oldWidth) {
+ element.canvas.height(newHeight + 'px')
+ element.canvas.width(newWidth + 'px')
+ element.container.height(newHeight + 'px')
+ element.container.width(newWidth + 'px')
+ if (typeof this.pageSizeChangeCallback === 'function') {
+ this.pageSizeChangeCallback(pagenum, newHeight - oldHeight)
+ }
+ }
+
+ const textLayer = new pdfTextLayer({
+ textLayerDiv: element.text[0],
+ viewport,
+ renderer: PDFJS.renderTextLayer,
+ })
+
+ const annotationsLayer = new pdfAnnotations({
+ annotations: element.annotations[0],
+ viewport,
+ navigateFn: this.navigateFn,
+ })
+
+ const result = page.render({
+ canvasContext: ctx,
+ viewport,
+ transform: [pixelRatio, 0, 0, pixelRatio, 0, 0],
+ })
+
+ const textLayerTimeout = this.TEXTLAYER_TIMEOUT
+
+ result.promise
+ .then(function () {
+ // page render success
+ canvas.removeClass('pdfng-rendering')
+ page.getTextContent({ normalizeWhitespace: true }).then(
+ function (textContent) {
+ textLayer.setTextContent(textContent)
+ return textLayer.render(textLayerTimeout)
+ },
+ error =>
+ typeof self.errorCallback === 'function'
+ ? self.errorCallback(error)
+ : undefined
+ )
+ return page.getAnnotations().then(
+ annotations => annotationsLayer.setAnnotations(annotations),
+ error =>
+ typeof self.errorCallback === 'function'
+ ? self.errorCallback(error)
+ : undefined
+ )
+ })
+ .catch(function (error) {
+ // page render failed
+ if (error.name === 'RenderingCancelledException') {
+ // do nothing when cancelled
+ } else {
+ return typeof self.errorCallback === 'function'
+ ? self.errorCallback(error)
+ : undefined
+ }
+ })
+
+ return result
+ }
+
+ destroy() {
+ this.shuttingDown = true
+ this.resetState()
+ return this.pdfjs.promise
+ .then(function (document) {
+ document.cleanup()
+ return document.destroy()
+ })
+ .catch(() => {})
+ }
+ }
+ PDFRenderer.initClass()
+ return PDFRenderer
+ })())
+ }
+)
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
+function __guardMethod__(obj, methodName, transform) {
+ if (
+ typeof obj !== 'undefined' &&
+ obj !== null &&
+ typeof obj[methodName] === 'function'
+ ) {
+ return transform(obj, methodName)
+ } else {
+ return undefined
+ }
+}
diff --git a/services/web/frontend/js/ide/pdfng/directives/pdfSpinner.js b/services/web/frontend/js/ide/pdfng/directives/pdfSpinner.js
new file mode 100644
index 0000000000..f5ec6dab4f
--- /dev/null
+++ b/services/web/frontend/js/ide/pdfng/directives/pdfSpinner.js
@@ -0,0 +1,45 @@
+/* eslint-disable
+ max-len,
+ no-unused-vars,
+ no-useless-constructor,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.factory('pdfSpinner', function () {
+ let pdfSpinner
+ return (pdfSpinner = class pdfSpinner {
+ constructor() {}
+ // handler for spinners
+
+ add(element, options) {
+ const size = 64
+ const spinner = $(
+ ``
+ )
+ spinner.css({ 'font-size': size + 'px' })
+ return element.append(spinner)
+ }
+
+ start(element) {
+ return element.find('.fa-spinner').addClass('fa-spin')
+ }
+
+ stop(element) {
+ return element.find('.fa-spinner').removeClass('fa-spin')
+ }
+
+ remove(element) {
+ return element.find('.fa-spinner').remove()
+ }
+ })
+})
diff --git a/services/web/frontend/js/ide/pdfng/directives/pdfTextLayer.js b/services/web/frontend/js/ide/pdfng/directives/pdfTextLayer.js
new file mode 100644
index 0000000000..61b04156d9
--- /dev/null
+++ b/services/web/frontend/js/ide/pdfng/directives/pdfTextLayer.js
@@ -0,0 +1,77 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+// uses the PDFJS text layer renderer to provide invisible overlayed
+// text for searching
+
+App.factory('pdfTextLayer', function () {
+ let pdfTextLayer
+ return (pdfTextLayer = class pdfTextLayer {
+ constructor(options) {
+ this.textLayerDiv = options.textLayerDiv
+ this.divContentDone = false
+ this.viewport = options.viewport
+ this.textDivs = []
+ this.renderer = options.renderer
+ this.renderingDone = false
+ }
+
+ render(timeout) {
+ if (this.renderingDone || !this.divContentDone) {
+ return
+ }
+
+ if (this.textLayerRenderTask != null) {
+ this.textLayerRenderTask.cancel()
+ this.textLayerRenderTask = null
+ }
+
+ this.textDivs = []
+ const textLayerFrag = document.createDocumentFragment()
+
+ this.textLayerRenderTask = this.renderer({
+ textContent: this.textContent,
+ container: textLayerFrag,
+ viewport: this.viewport,
+ textDivs: this.textDivs,
+ timeout,
+ enhanceTextSelection: this.enhanceTextSelection,
+ })
+
+ const textLayerSuccess = () => {
+ this.textLayerDiv.appendChild(textLayerFrag)
+ return (this.renderingDone = true)
+ }
+
+ const textLayerFailure = function () {
+ // canceled or failed to render text layer -- skipping errors
+ }
+
+ return this.textLayerRenderTask.promise.then(
+ textLayerSuccess,
+ textLayerFailure
+ )
+ }
+
+ setTextContent(textContent) {
+ if (this.textLayerRenderTask) {
+ this.textLayerRenderTask.cancel()
+ this.textLayerRenderTask = null
+ }
+
+ this.textContent = textContent
+ return (this.divContentDone = true)
+ }
+ })
+})
diff --git a/services/web/frontend/js/ide/pdfng/directives/pdfViewer.js b/services/web/frontend/js/ide/pdfng/directives/pdfViewer.js
new file mode 100644
index 0000000000..21ffa680bf
--- /dev/null
+++ b/services/web/frontend/js/ide/pdfng/directives/pdfViewer.js
@@ -0,0 +1,861 @@
+import _ from 'lodash'
+/* eslint-disable
+ node/handle-callback-err,
+ max-len,
+ new-cap,
+ no-return-assign,
+ no-sequences,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS104: Avoid inline assignments
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+import { captureMessage } from '../../../infrastructure/error-reporter'
+import pdfTextLayer from './pdfTextLayer'
+import pdfAnnotations from './pdfAnnotations'
+import pdfHighlights from './pdfHighlights'
+import pdfRenderer from './pdfRenderer'
+import pdfPage from './pdfPage'
+import pdfSpinner from './pdfSpinner'
+App.controller(
+ 'pdfViewerController',
+ function (
+ $scope,
+ $q,
+ $timeout,
+ PDFRenderer,
+ $element,
+ pdfHighlights,
+ pdfSpinner
+ ) {
+ this.load = function () {
+ // $scope.pages = []
+
+ // Ensure previous document is torn down before loading the next one (to
+ // prevent race conditions)
+ const documentTearDown =
+ $scope.document != null ? $scope.document.destroy() : Promise.resolve()
+ // Keep track of whether the pdf has loaded (this allows rescale events to
+ // be ignored until we are ready to render the pdf).
+ $scope.isLoaded = false
+ return documentTearDown.then(() => {
+ $scope.loadCount = $scope.loadCount != null ? $scope.loadCount + 1 : 1
+ // TODO need a proper url manipulation library to add to query string
+ let url = $scope.pdfSrc
+ // add 'pdfng=true' to show that we are using the angular pdfjs viewer
+ const queryStringExists = /\?/.test(url)
+ url = url + (!queryStringExists ? '?' : '&') + 'pdfng=true'
+
+ // Take references as these must be invoked for this very URL
+ const firstRenderDone = $scope.firstRenderDone
+ const updateConsumedBandwidth = $scope.updateConsumedBandwidth
+
+ // for isolated compiles, load the pdf on-demand because nobody will overwrite it
+ const onDemandLoading = true
+ $scope.document = new PDFRenderer(url, {
+ scale: 1,
+ disableAutoFetch: onDemandLoading ? true : undefined,
+ navigateFn(ref) {
+ // this function captures clicks on the annotation links
+ $scope.navigateTo = ref
+ return $scope.$apply()
+ },
+ progressCallback(progress) {
+ updateConsumedBandwidth(progress.loaded)
+ return $scope.$emit('progress', progress)
+ },
+ loadedCallback() {
+ return $scope.$emit('loaded')
+ },
+ firstRenderDone,
+ errorCallback(error) {
+ // MissingPDFException is "expected" as the pdf file can be on a
+ // CLSI server that has been cycled out.
+ // Currently, there is NO error handling to handle this situation,
+ // but we plan to add this in the future
+ // (https://github.com/overleaf/issues/issues/2985) and this error
+ // is causing noise in Sentry so ignore it
+ if (!error || error.name !== 'MissingPDFException') {
+ captureMessage(`pdfng error ${error}`)
+ }
+ return $scope.$emit('pdf:error', error)
+ },
+ pageSizeChangeCallback(pageNum, deltaH) {
+ return $scope.$broadcast('pdf:page:size-change', pageNum, deltaH)
+ },
+ })
+
+ // we will have all the main information needed to start display
+ // after the following promise is resolved
+ $scope.loaded = $q
+ .all({
+ numPages: $scope.document.getNumPages(),
+ // get size of first page as default @ scale 1
+ pdfViewport: $scope.document.getPdfViewport(1, 1),
+ })
+ .then(function (result) {
+ $scope.pdfViewport = result.pdfViewport
+ $scope.pdfPageSize = [
+ result.pdfViewport.height,
+ result.pdfViewport.width,
+ ]
+ // console.log 'resolved q.all, page size is', result
+ $scope.$emit('loaded')
+ // we can now render the document and handle rescale events
+ $scope.isLoaded = true
+ return ($scope.numPages = result.numPages)
+ })
+ .catch(function (error) {
+ $scope.$emit('pdf:error', error)
+ return $q.reject(error)
+ })
+
+ return $scope.loaded
+ })
+ }
+
+ this.setScale = (scale, containerHeight, containerWidth) =>
+ $scope.loaded
+ .then(function () {
+ let numScale
+ if (scale == null) {
+ scale = {}
+ }
+ if (containerHeight === 0 || containerWidth === 0) {
+ numScale = 1
+ } else if (scale.scaleMode === 'scale_mode_fit_width') {
+ // TODO make this dynamic
+ numScale = (containerWidth - 40) / $scope.pdfPageSize[1]
+ } else if (scale.scaleMode === 'scale_mode_fit_height') {
+ // TODO magic numbers for jquery ui layout
+ numScale = (containerHeight - 20) / $scope.pdfPageSize[0]
+ } else if (scale.scaleMode === 'scale_mode_value') {
+ numScale = scale.scale
+ } else if (scale.scaleMode === 'scale_mode_auto') {
+ // TODO
+ } else {
+ scale.scaleMode = 'scale_mode_fit_width'
+ numScale = (containerWidth - 40) / $scope.pdfPageSize[1]
+ }
+ // TODO
+ $scope.scale.scale = numScale
+ $scope.document.setScale(numScale)
+ return ($scope.defaultPageSize = [
+ numScale * $scope.pdfPageSize[0],
+ numScale * $scope.pdfPageSize[1],
+ ])
+ })
+ // console.log 'in setScale result', $scope.scale.scale, $scope.defaultPageSize
+ .catch(function (error) {
+ $scope.$emit('pdf:error', error)
+ return $q.reject(error)
+ })
+
+ this.redraw = function (position) {
+ // console.log 'in redraw'
+ // console.log 'reseting pages array for', $scope.numPages
+ $scope.pages = __range__(0, $scope.numPages - 1, true).map(i => ({
+ pageNum: i + 1,
+ }))
+ if (position != null && position.page != null) {
+ // console.log 'position is', position.page, position.offset
+ // console.log 'setting current page', position.page
+ let pagenum = position.page
+ if (pagenum > $scope.numPages - 1) {
+ pagenum = $scope.numPages - 1
+ }
+ $scope.pages[pagenum].current = true
+ return ($scope.pages[pagenum].position = position)
+ }
+ }
+
+ this.zoomIn = function () {
+ // console.log 'zoom in'
+ const newScale = $scope.scale.scale * 1.2
+ return ($scope.forceScale = {
+ scaleMode: 'scale_mode_value',
+ scale: newScale,
+ })
+ }
+
+ this.zoomOut = function () {
+ // console.log 'zoom out'
+ const newScale = $scope.scale.scale / 1.2
+ return ($scope.forceScale = {
+ scaleMode: 'scale_mode_value',
+ scale: newScale,
+ })
+ }
+
+ this.fitWidth = () =>
+ // console.log 'fit width'
+ ($scope.forceScale = { scaleMode: 'scale_mode_fit_width' })
+
+ this.fitHeight = () =>
+ // console.log 'fit height'
+ ($scope.forceScale = { scaleMode: 'scale_mode_fit_height' })
+
+ this.checkPosition = () =>
+ // console.log 'check position'
+ ($scope.forceCheck = ($scope.forceCheck || 0) + 1)
+
+ this.showRandomHighlights = () =>
+ // console.log 'show highlights'
+ ($scope.highlights = [
+ {
+ page: 3,
+ h: 100,
+ v: 100,
+ height: 30,
+ width: 200,
+ },
+ ])
+
+ // we work with (pagenumber, % of height down page from top)
+ // pdfListView works with (pagenumber, vertical position up page from
+ // bottom measured in pts)
+
+ this.getPdfPosition = function () {
+ // console.log 'in getPdfPosition'
+ let canvasOffset, pdfOffset, viewport
+ let topPageIdx = 0
+ let topPage = $scope.pages[0]
+ // find first visible page
+ const visible = $scope.pages.some(function (page, i) {
+ if (page.visible) {
+ let ref
+ return ([topPageIdx, topPage] = Array.from((ref = [i, page]))), ref
+ }
+ return false
+ })
+ if (visible && topPage.element != null) {
+ // console.log 'found it', topPageIdx
+ } else {
+ // console.log 'CANNOT FIND TOP PAGE'
+ return
+ }
+
+ // console.log 'top page is', topPage.pageNum, topPage.elemTop, topPage.elemBottom, topPage
+ const { top } = topPage.element.offset()
+ const bottom = top + topPage.element.innerHeight()
+ const viewportTop = $element.offset().top
+ const viewportBottom = viewportTop + $element.height()
+ const topVisible = top >= viewportTop && top < viewportBottom
+ const someContentVisible = top < viewportTop && bottom > viewportTop
+ // console.log 'in PdfListView', top, topVisible, someContentVisible, viewportTop
+ if (topVisible) {
+ canvasOffset = 0
+ } else if (someContentVisible) {
+ canvasOffset = viewportTop - top
+ } else {
+ canvasOffset = null
+ }
+ // console.log 'pdfListview position = ', canvasOffset
+ // instead of using promise, check if size is known and revert to
+ // default otherwise
+ // console.log 'looking up viewport', topPage.viewport, $scope.pdfViewport
+ if (topPage.viewport) {
+ ;({ viewport } = topPage)
+ pdfOffset = viewport.convertToPdfPoint(0, canvasOffset)
+ } else {
+ // console.log 'WARNING: had to default to global page size'
+ viewport = $scope.pdfViewport
+ const scaledOffset = canvasOffset / $scope.scale.scale
+ pdfOffset = viewport.convertToPdfPoint(0, scaledOffset)
+ }
+ // console.log 'converted to offset = ', pdfOffset
+ const newPosition = {
+ page: topPageIdx,
+ offset: { top: pdfOffset[1], left: 0 },
+ pageSize: { height: viewport.viewBox[3], width: viewport.viewBox[2] },
+ }
+ return newPosition
+ }
+
+ this.computeOffset = function (page, position) {
+ // console.log 'computing offset for', page, position
+ const { element } = page
+ // console.log 'element =', $(element), 'parent =', $(element).parent()
+ const t1 = __guard__($(element).offset(), x => x.top)
+ const t2 = __guard__($(element).parent().offset(), x1 => x1.top)
+ if (!(t1 != null && t2 != null)) {
+ return $q((resolve, reject) => reject('elements destroyed'))
+ }
+ const pageTop = $(element).offset().top - $(element).parent().offset().top
+ // console.log('top of page scroll is', pageTop, 'vs', page.elemTop)
+ // console.log('inner height is', $(element).innerHeight())
+ const currentScroll = $(element).parent().scrollTop()
+ const { offset } = position
+ // convert offset to pixels
+ return $scope.document
+ .getPdfViewport(page.pageNum)
+ .then(function (viewport) {
+ page.viewport = viewport
+ const pageOffset = viewport.convertToViewportPoint(
+ offset.left,
+ offset.top
+ )
+ // if the passed-in position doesn't have the page height/width add them now
+ if (position.pageSize == null) {
+ position.pageSize = {
+ height: viewport.viewBox[3],
+ width: viewport.viewBox[2],
+ }
+ }
+ // console.log 'addition offset =', pageOffset
+ // console.log 'total', pageTop + pageOffset[1]
+ return Math.round(pageTop + pageOffset[1] + currentScroll)
+ }) // # 10 is margin
+ }
+
+ this.setPdfPosition = function (page, position) {
+ // console.log 'required pdf Position is', position
+ return this.computeOffset(page, position).then(function (offset) {
+ return $scope.$apply(() => {
+ $scope.pleaseScrollTo = offset
+ $scope.position = position
+ })
+ })
+ }
+ return this
+ }
+)
+
+export default App.directive('pdfViewer', ($q, $timeout, pdfSpinner) => ({
+ controller: 'pdfViewerController',
+ controllerAs: 'ctrl',
+ scope: {
+ pdfSrc: '=',
+ firstRenderDone: '=',
+ updateConsumedBandwidth: '=',
+ highlights: '=',
+ position: '=',
+ scale: '=',
+ pleaseJumpTo: '=',
+ },
+ template: `\
+\
+`,
+ link(scope, element, attrs, ctrl) {
+ // console.log 'in pdfViewer element is', element
+ // console.log 'attrs', attrs
+ const spinner = new pdfSpinner()
+ let layoutReady = $q.defer()
+ layoutReady.notify('waiting for layout')
+ layoutReady.promise.then(function () {})
+ // console.log 'layoutReady was resolved'
+
+ const renderVisiblePages = function () {
+ const visiblePages = getVisiblePages()
+ const pages = getExtraPages(visiblePages)
+ return scope.document.renderPages(pages)
+ }
+
+ var getVisiblePages = function () {
+ const top = element[0].scrollTop
+ const bottom = top + element[0].clientHeight
+ const visiblePages = _.filter(scope.pages, function (page) {
+ if (page.element == null) {
+ return false
+ }
+ const pageElement = page.element[0]
+ const pageTop = pageElement.offsetTop
+ const pageBottom = pageTop + pageElement.clientHeight
+ page.visible = pageTop < bottom && pageBottom > top
+ return page.visible
+ })
+ return visiblePages
+ }
+
+ var getExtraPages = function (visiblePages) {
+ const extra = []
+ if (visiblePages.length > 0) {
+ const firstVisiblePage = visiblePages[0].pageNum
+ const firstVisiblePageIdx = firstVisiblePage - 1
+ const len = visiblePages.length
+ const lastVisiblePage = visiblePages[len - 1].pageNum
+ const lastVisiblePageIdx = lastVisiblePage - 1
+ // first page after
+ if (lastVisiblePageIdx + 1 < scope.pages.length) {
+ extra.push(scope.pages[lastVisiblePageIdx + 1])
+ }
+ // page before
+ if (firstVisiblePageIdx > 0) {
+ extra.push(scope.pages[firstVisiblePageIdx - 1])
+ }
+ // second page after
+ if (lastVisiblePageIdx + 2 < scope.pages.length) {
+ extra.push(scope.pages[lastVisiblePageIdx + 2])
+ }
+ }
+ return visiblePages.concat(extra)
+ }
+
+ let rescaleTimer = null
+ const queueRescale = function (scale) {
+ // console.log 'call to queueRescale'
+ if (!scope.isLoaded) {
+ return // ignore any requests to rescale before the document is loaded
+ }
+ if (rescaleTimer != null || layoutTimer != null || elementTimer != null) {
+ return
+ }
+ // console.log 'adding to rescale queue'
+ return (rescaleTimer = setTimeout(function () {
+ doRescale(scale)
+ return (rescaleTimer = null)
+ }, 0))
+ }
+
+ let spinnerTimer = null
+ var doRescale = function (scale) {
+ // console.log 'doRescale', scale
+ if (scale == null) {
+ return
+ }
+ const origposition = angular.copy(scope.position)
+ // console.log 'origposition', origposition
+
+ if (spinnerTimer == null) {
+ spinnerTimer = setTimeout(function () {
+ spinner.add(element)
+ return (spinnerTimer = null)
+ }, 100)
+ }
+ return layoutReady.promise.then(function (parentSize) {
+ const [h, w] = Array.from(parentSize)
+ // console.log 'in promise', h, w
+ return ctrl
+ .setScale(scale, h, w)
+ .then(() =>
+ // console.log 'in setscale then', scale, h, w
+ scope.$evalAsync(function () {
+ if (spinnerTimer) {
+ clearTimeout(spinnerTimer)
+ } else {
+ spinner.remove(element)
+ }
+ // stop displaying the text layer
+ element.removeClass('pdfjs-viewer-show-text')
+ ctrl.redraw(origposition)
+ $timeout(renderVisiblePages)
+ return (scope.loadSuccess = true)
+ })
+ )
+ .catch(error => scope.$emit('pdf:error', error))
+ })
+ }
+
+ var elementTimer = null
+ var updateLayout = function () {
+ // if element is zero-sized keep checking until it is ready
+ // console.log 'checking element ready', element.height(), element.width()
+ if (element.height() === 0 || element.width() === 0) {
+ if (elementTimer != null) {
+ return
+ }
+ return (elementTimer = setTimeout(function () {
+ elementTimer = null
+ return updateLayout()
+ }, 1000))
+ } else {
+ scope.parentSize = [element.innerHeight(), element.innerWidth()]
+ // console.log 'resolving layoutReady with', scope.parentSize
+ return $timeout(function () {
+ layoutReady.resolve(scope.parentSize)
+ return scope.$emit('flash-controls')
+ })
+ }
+ }
+
+ var layoutTimer = null
+ const queueLayout = function () {
+ // console.log 'call to queue layout'
+ if (layoutTimer != null) {
+ return
+ }
+ // console.log 'added to queue layoyt'
+ layoutReady = $q.defer()
+ return (layoutTimer = setTimeout(function () {
+ // console.log 'calling update layout'
+ updateLayout()
+ // console.log 'setting layout timer to null'
+ return (layoutTimer = null)
+ }, 0))
+ }
+
+ queueLayout()
+
+ // scope.$on 'layout:pdf:view', (e, args) ->
+ // console.log 'pdf view change', element, e, args
+ // queueLayout()
+
+ scope.$on('layout:main:resize', () =>
+ // console.log 'GOT LAYOUT-MAIN-RESIZE EVENT'
+ queueLayout()
+ )
+
+ scope.$on('layout:pdf:resize', () =>
+ // FIXME we get this event twice
+ // also we need to start a new layout when we get it
+ // console.log 'GOT LAYOUT-PDF-RESIZE EVENT'
+ queueLayout()
+ )
+
+ scope.$on('pdf:error', function (event, error) {
+ if (error.name === 'RenderingCancelledException') {
+ return
+ }
+ // check if too many retries or file is missing
+ const message = (error != null ? error.message : undefined) || error
+ if (
+ scope.loadCount > 3 ||
+ /^Missing PDF/i.test(message) ||
+ /^loading/i.test(message)
+ ) {
+ scope.$emit('pdf:error:display')
+ return
+ }
+ if (scope.loadSuccess) {
+ return ctrl
+ .load()
+ .then(
+ () =>
+ // trigger a redraw
+ (scope.scale = angular.copy(scope.scale))
+ )
+ .catch(error => scope.$emit('pdf:error:display'))
+ } else {
+ scope.$emit('pdf:error:display')
+ }
+ })
+
+ scope.$on('pdf:page:size-change', function (event, pageNum, delta) {
+ // console.log 'page size change event', pageNum, delta
+ const origposition = angular.copy(scope.position)
+ // console.log 'orig position', JSON.stringify(origposition)
+ if (
+ origposition != null &&
+ pageNum - 1 < origposition.page &&
+ delta !== 0
+ ) {
+ const currentScrollTop = element.scrollTop()
+ // console.log 'adjusting scroll from', currentScrollTop, 'by', delta
+ scope.adjustingScroll = true
+ return element.scrollTop(currentScrollTop + delta)
+ }
+ })
+
+ element.on('mousedown', function (e) {
+ // We're checking that the event target isn't the directive root element
+ // to make sure that the click was within a PDF page - no point in showing
+ // the text layer when the click is outside.
+ // If the user clicks a PDF page, the mousedown target will be the canvas
+ // element (or the text layer one). Alternatively, if the event target is
+ // the root element, we can assume that the user has clicked either the
+ // grey background area or the scrollbars.
+ if (e.target !== element[0] && !_hasSelection()) {
+ element.addClass('pdfjs-viewer-show-text')
+ return _setMouseUpHandler()
+ }
+ })
+
+ let mouseUpHandler = null // keep track of the handler to avoid adding multiple times
+
+ var _setMouseUpHandler = function () {
+ if (mouseUpHandler == null) {
+ return (mouseUpHandler = $(document.body).one(
+ 'mouseup',
+ _handleSelectionMouseUp
+ ))
+ }
+ }
+
+ var _handleSelectionMouseUp = function () {
+ mouseUpHandler = null // reset handler, has now fired
+ window.setTimeout(function () {
+ const removedClass = _removeClassIfNoSelection()
+ // if we still have a selection we need to keep the handler going
+ if (!removedClass) {
+ return _setMouseUpHandler()
+ }
+ }, 10)
+ return true
+ }
+
+ var _removeClassIfNoSelection = function () {
+ if (_hasSelection()) {
+ return false // didn't remove the text layer
+ } else {
+ element.removeClass('pdfjs-viewer-show-text')
+ return true
+ }
+ }
+
+ var _hasSelection = function () {
+ const selection =
+ typeof window.getSelection === 'function'
+ ? window.getSelection()
+ : undefined
+ // check the selection collapsed state in preference to
+ // using selection.toString() as the latter is "" when
+ // the selection is hidden (e.g. while viewing logs)
+ return (
+ selection != null &&
+ _isSelectionWithinPDF(selection) &&
+ !selection.isCollapsed
+ )
+ }
+
+ var _isSelectionWithinPDF = function (selection) {
+ if (selection.rangeCount === 0) {
+ return false
+ }
+ const selectionAncestorNode = selection.getRangeAt(0)
+ .commonAncestorContainer
+ return (
+ element.find(selectionAncestorNode).length > 0 ||
+ element.is(selectionAncestorNode)
+ )
+ }
+
+ element.on('scroll', function () {
+ // console.log 'scroll event', element.scrollTop(), 'adjusting?', scope.adjustingScroll
+ // scope.scrollPosition = element.scrollTop()
+ if (scope.adjustingScroll) {
+ renderVisiblePages()
+ scope.adjustingScroll = false
+ return
+ }
+ if (scope.scrollHandlerTimeout) {
+ clearTimeout(scope.scrollHandlerTimeout)
+ }
+ return (scope.scrollHandlerTimeout = setTimeout(scrollHandler, 25))
+ })
+
+ var scrollHandler = function () {
+ renderVisiblePages()
+ const newPosition = ctrl.getPdfPosition()
+ if (newPosition != null) {
+ scope.position = newPosition
+ }
+ return (scope.scrollHandlerTimeout = null)
+ }
+
+ scope.$watch('pdfSrc', function (newVal, oldVal) {
+ // console.log 'loading pdf', newVal, oldVal
+ if (newVal == null) {
+ return
+ }
+ scope.loadCount = 0 // new pdf, so reset load count
+ scope.loadSuccess = false
+ return ctrl
+ .load()
+ .then(
+ () =>
+ // trigger a redraw
+ (scope.scale = angular.copy(scope.scale))
+ )
+ .catch(error => scope.$emit('pdf:error', error))
+ })
+
+ scope.$watch('scale', function (newVal, oldVal) {
+ // no need to set scale when initialising, done in pdfSrc
+ if (newVal === oldVal) {
+ return
+ }
+ // console.log 'XXX calling Setscale in scale watch'
+ return queueRescale(newVal)
+ })
+
+ scope.$watch('forceScale', function (newVal, oldVal) {
+ // console.log 'got change in numscale watcher', newVal, oldVal
+ if (newVal == null) {
+ return
+ }
+ return queueRescale(newVal)
+ })
+
+ // scope.$watch 'position', (newVal, oldVal) ->
+ // console.log 'got change in position watcher', newVal, oldVal
+
+ scope.$watch('forceCheck', function (newVal, oldVal) {
+ // console.log 'forceCheck', newVal, oldVal
+ if (newVal == null) {
+ return
+ }
+ scope.adjustingScroll = true // temporarily disable scroll
+ return queueRescale(scope.scale)
+ })
+
+ scope.$watch(
+ 'parentSize',
+ function (newVal, oldVal) {
+ // console.log 'XXX in parentSize watch', newVal, oldVal
+ // if newVal == oldVal
+ // console.log 'returning because old and new are the same'
+ // return
+ // return unless oldVal?
+ // console.log 'XXX calling setScale in parentSize watcher'
+ if (newVal == null) {
+ return
+ }
+ return queueRescale(scope.scale)
+ },
+ true
+ )
+
+ // scope.$watch 'elementWidth', (newVal, oldVal) ->
+ // console.log '*** watch INTERVAL element width is', newVal, oldVal
+
+ scope.$watch('pleaseScrollTo', function (newVal, oldVal) {
+ // console.log 'got request to ScrollTo', newVal, 'oldVal', oldVal
+ if (newVal == null) {
+ return
+ }
+ scope.adjustingScroll = true // temporarily disable scroll
+ // handler while we reposition
+ $(element).scrollTop(newVal)
+ return (scope.pleaseScrollTo = undefined)
+ })
+
+ scope.$watch('pleaseJumpTo', function (newPosition, oldPosition) {
+ // console.log 'in pleaseJumpTo', newPosition, oldPosition
+ if (newPosition == null) {
+ return
+ }
+ return ctrl.setPdfPosition(scope.pages[newPosition.page - 1], newPosition)
+ })
+
+ scope.$watch('navigateTo', function (newVal, oldVal) {
+ if (newVal == null) {
+ return
+ }
+ // console.log 'got request to navigate to', newVal, 'oldVal', oldVal
+ scope.navigateTo = undefined
+ // console.log 'navigate to', newVal
+ // console.log 'look up page num'
+ return scope.document.getDestination(newVal.dest).then(r =>
+ // console.log 'need to go to', r
+ // console.log 'page ref is', r[0]
+ scope.document.getPageIndex(r[0]).then(function (pidx) {
+ // console.log 'page num is', pidx
+ const page = scope.pages[pidx]
+ return scope.document
+ .getPdfViewport(page.pageNum)
+ .then(function (viewport) {
+ // console.log 'got viewport', viewport
+ const coords = viewport.convertToViewportPoint(r[2], r[3])
+ // console.log 'viewport position', coords
+ // console.log 'r is', r, 'r[1]', r[1], 'r[1].name', r[1].name
+ if (r[1].name === 'XYZ') {
+ // console.log 'XYZ:', r[2], r[3]
+ const newPosition = {
+ page: pidx,
+ offset: { top: r[3], left: r[2] },
+ }
+ return ctrl.setPdfPosition(scope.pages[pidx], newPosition)
+ }
+ })
+ })
+ )
+ }) // XXX?
+
+ scope.$watch('highlights', function (areas) {
+ // console.log 'got HIGHLIGHTS in pdfViewer', areas
+ if (areas == null) {
+ return
+ }
+ // console.log 'areas are', areas
+ const highlights = Array.from(areas || []).map(area => ({
+ page: area.page - 1,
+ highlight: {
+ left: area.h,
+ top: area.v,
+ height: area.height,
+ width: area.width,
+ },
+ }))
+ // console.log 'highlights', highlights
+
+ if (!highlights.length) {
+ return
+ }
+
+ scope.$broadcast('pdf:highlights', areas)
+
+ const first = highlights[0]
+
+ // switching between split and full pdf views can cause
+ // highlights to appear before rendering
+ if (!scope.pages) {
+ return // ignore highlight scroll if still rendering
+ }
+
+ const pageNum =
+ scope.pages[first.page] != null
+ ? scope.pages[first.page].pageNum
+ : undefined
+
+ if (pageNum == null) {
+ return // ignore highlight scroll if page not found
+ }
+
+ // use a visual offset of 72pt to match the offset in PdfController syncToCode
+ return scope.document.getPdfViewport(pageNum).then(function (viewport) {
+ const position = {
+ page: first.page,
+ offset: {
+ left: first.highlight.left,
+ top:
+ viewport.viewBox[3] -
+ first.highlight.top +
+ first.highlight.height +
+ 72,
+ },
+ }
+ return ctrl.setPdfPosition(scope.pages[first.page], position)
+ })
+ })
+
+ return scope.$on('$destroy', function () {
+ // console.log 'handle pdfng directive destroy'
+ if (elementTimer != null) {
+ clearTimeout(elementTimer)
+ }
+ if (layoutTimer != null) {
+ clearTimeout(layoutTimer)
+ }
+ if (rescaleTimer != null) {
+ clearTimeout(rescaleTimer)
+ }
+ if (spinnerTimer != null) {
+ return clearTimeout(spinnerTimer)
+ }
+ })
+ },
+}))
+
+function __range__(left, right, inclusive) {
+ const range = []
+ const ascending = left < right
+ const end = !inclusive ? right : ascending ? right + 1 : right - 1
+ for (let i = left; ascending ? i < end : i > end; ascending ? i++ : i--) {
+ range.push(i)
+ }
+ return range
+}
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/pdfng/directives/serviceWorkerManager.js b/services/web/frontend/js/ide/pdfng/directives/serviceWorkerManager.js
new file mode 100644
index 0000000000..7d0fe6ac95
--- /dev/null
+++ b/services/web/frontend/js/ide/pdfng/directives/serviceWorkerManager.js
@@ -0,0 +1,65 @@
+import { captureException } from '../../../infrastructure/error-reporter'
+const OError = require('@overleaf/o-error')
+
+let pendingWorkerSetup = Promise.resolve()
+
+function supportsServiceWorker() {
+ return 'serviceWorker' in navigator
+}
+
+export function waitForServiceWorker() {
+ return pendingWorkerSetup
+}
+
+export function loadServiceWorker(options) {
+ if (supportsServiceWorker()) {
+ const workerSetup = navigator.serviceWorker
+ .register('/serviceWorker.js', {
+ scope: '/project/',
+ })
+ .then(() => {
+ navigator.serviceWorker.addEventListener('message', event => {
+ let ctx
+ try {
+ ctx = JSON.parse(event.data)
+ } catch (e) {
+ return
+ }
+ if (!ctx || !ctx.error || !ctx.extra) return
+
+ const err = OError.tag(ctx.error, 'Error in serviceWorker')
+ const fullError = new Error()
+ fullError.name = err.name
+ fullError.message = err.message
+ fullError.stack = OError.getFullStack(err)
+ captureException(fullError, { extra: ctx.extra })
+ })
+ })
+ .catch(error =>
+ captureException(OError.tag(error, 'Cannot register serviceWorker'))
+ )
+ if (options && options.timeout > 0) {
+ const workerTimeout = new Promise(resolve => {
+ setTimeout(resolve, options.timeout)
+ })
+ pendingWorkerSetup = Promise.race([workerSetup, workerTimeout])
+ } else {
+ pendingWorkerSetup = workerSetup
+ }
+ }
+}
+
+export function unregisterServiceWorker() {
+ if (supportsServiceWorker()) {
+ if (navigator.serviceWorker.controller) {
+ navigator.serviceWorker.controller.postMessage({
+ type: 'disable',
+ })
+ }
+ navigator.serviceWorker.getRegistrations().then(registrations => {
+ registrations.forEach(worker => {
+ worker.unregister()
+ })
+ })
+ }
+}
diff --git a/services/web/frontend/js/ide/permissions/PermissionsManager.js b/services/web/frontend/js/ide/permissions/PermissionsManager.js
new file mode 100644
index 0000000000..1cd88600c9
--- /dev/null
+++ b/services/web/frontend/js/ide/permissions/PermissionsManager.js
@@ -0,0 +1,49 @@
+/* eslint-disable
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+let PermissionsManager
+
+export default PermissionsManager = class PermissionsManager {
+ constructor(ide, $scope) {
+ this.ide = ide
+ this.$scope = $scope
+ this.$scope.permissions = {
+ read: false,
+ write: false,
+ admin: false,
+ comment: false,
+ }
+ this.$scope.$watch('permissionsLevel', permissionsLevel => {
+ if (permissionsLevel != null) {
+ if (permissionsLevel === 'readOnly') {
+ this.$scope.permissions.read = true
+ this.$scope.permissions.write = false
+ this.$scope.permissions.admin = false
+ this.$scope.permissions.comment = true
+ } else if (permissionsLevel === 'readAndWrite') {
+ this.$scope.permissions.read = true
+ this.$scope.permissions.write = true
+ this.$scope.permissions.comment = true
+ } else if (permissionsLevel === 'owner') {
+ this.$scope.permissions.read = true
+ this.$scope.permissions.write = true
+ this.$scope.permissions.admin = true
+ this.$scope.permissions.comment = true
+ }
+ }
+
+ if (this.$scope.anonymous) {
+ return (this.$scope.permissions.comment = false)
+ }
+ })
+ }
+}
diff --git a/services/web/frontend/js/ide/preamble/services/preamble.js b/services/web/frontend/js/ide/preamble/services/preamble.js
new file mode 100644
index 0000000000..54705d9dcb
--- /dev/null
+++ b/services/web/frontend/js/ide/preamble/services/preamble.js
@@ -0,0 +1,44 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.factory('preamble', function (ide) {
+ var Preamble = {
+ getPreambleText() {
+ const text = ide.editorManager.getCurrentDocValue().slice(0, 5000)
+ const preamble =
+ __guard__(text.match(/([^]*)^\\begin\{document\}/m), x => x[1]) || ''
+ return preamble
+ },
+
+ getGraphicsPaths() {
+ let match
+ const preamble = Preamble.getPreambleText()
+ const graphicsPathsArgs =
+ __guard__(preamble.match(/\\graphicspath\{(.*)\}/), x => x[1]) || ''
+ const paths = []
+ const re = /\{([^}]*)\}/g
+ while ((match = re.exec(graphicsPathsArgs))) {
+ paths.push(match[1])
+ }
+ return paths
+ },
+ }
+
+ return Preamble
+})
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/references/ReferencesManager.js b/services/web/frontend/js/ide/references/ReferencesManager.js
new file mode 100644
index 0000000000..c7fa8fd0c3
--- /dev/null
+++ b/services/web/frontend/js/ide/references/ReferencesManager.js
@@ -0,0 +1,118 @@
+import _ from 'lodash'
+/* eslint-disable
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import CryptoJSSHA1 from 'crypto-js/sha1'
+let ReferencesManager
+
+export default ReferencesManager = class ReferencesManager {
+ constructor(ide, $scope) {
+ this.ide = ide
+ this.$scope = $scope
+ this.$scope.$root._references = this.state = { keys: [] }
+ this.existingIndexHash = {}
+
+ this.$scope.$on('document:closed', (e, doc) => {
+ let entity
+ if (doc.doc_id) {
+ entity = this.ide.fileTreeManager.findEntityById(doc.doc_id)
+ }
+ if (
+ __guard__(entity != null ? entity.name : undefined, x =>
+ x.match(/.*\.bib$/)
+ )
+ ) {
+ return this.indexReferencesIfDocModified(doc, true)
+ }
+ })
+
+ this.$scope.$on('references:should-reindex', (e, data) => {
+ return this.indexAllReferences(true)
+ })
+
+ // When we join the project:
+ // index all references files
+ // and don't broadcast to all clients
+ this.inited = false
+ this.$scope.$on('project:joined', e => {
+ // We only need to grab the references when the editor first loads,
+ // not on every reconnect
+ if (!this.inited) {
+ this.inited = true
+ this.ide.socket.on('references:keys:updated', keys =>
+ this._storeReferencesKeys(keys)
+ )
+ this.indexAllReferences(false)
+ }
+ })
+ }
+
+ _storeReferencesKeys(newKeys) {
+ // console.log '>> storing references keys'
+ const oldKeys = this.$scope.$root._references.keys
+ return (this.$scope.$root._references.keys = _.union(oldKeys, newKeys))
+ }
+
+ indexReferencesIfDocModified(doc, shouldBroadcast) {
+ // avoid reindexing references if the bib file has not changed since the
+ // last time they were indexed
+ const docId = doc.doc_id
+ const snapshot = doc._doc.snapshot
+ const now = Date.now()
+ const sha1 = CryptoJSSHA1(
+ 'blob ' + snapshot.length + '\x00' + snapshot
+ ).toString()
+ const CACHE_LIFETIME = 6 * 3600 * 1000 // allow reindexing every 6 hours
+ const cacheEntry = this.existingIndexHash[docId]
+ const isCached =
+ cacheEntry &&
+ cacheEntry.timestamp > now - CACHE_LIFETIME &&
+ cacheEntry.hash === sha1
+ if (!isCached) {
+ this.indexReferences([docId], shouldBroadcast)
+ this.existingIndexHash[docId] = { hash: sha1, timestamp: now }
+ }
+ }
+
+ indexReferences(docIds, shouldBroadcast) {
+ const opts = {
+ docIds,
+ shouldBroadcast,
+ _csrf: window.csrfToken,
+ }
+ return this.ide.$http
+ .post(`/project/${this.$scope.project_id}/references/index`, opts)
+ .then(response => {
+ return this._storeReferencesKeys(response.data.keys)
+ })
+ }
+
+ indexAllReferences(shouldBroadcast) {
+ const opts = {
+ shouldBroadcast,
+ _csrf: window.csrfToken,
+ }
+ return this.ide.$http
+ .post(`/project/${this.$scope.project_id}/references/indexAll`, opts)
+ .then(response => {
+ return this._storeReferencesKeys(response.data.keys)
+ })
+ }
+}
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/review-panel/RangesTracker.js b/services/web/frontend/js/ide/review-panel/RangesTracker.js
new file mode 100644
index 0000000000..6add6d35b7
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/RangesTracker.js
@@ -0,0 +1,839 @@
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+// This file is shared between document-updater and web, so that the server and client share
+// an identical track changes implementation. Do not edit it directly in web or document-updater,
+// instead edit it at https://github.com/sharelatex/ranges-tracker, where it has a suite of tests
+let RangesTracker
+
+export default RangesTracker = class RangesTracker {
+ // The purpose of this class is to track a set of inserts and deletes to a document, like
+ // track changes in Word. We store these as a set of ShareJs style ranges:
+ // {i: "foo", p: 42} # Insert 'foo' at offset 42
+ // {d: "bar", p: 37} # Delete 'bar' at offset 37
+ // We only track the inserts and deletes, not the whole document, but by being given all
+ // updates that are applied to a document, we can update these appropriately.
+ //
+ // Note that the set of inserts and deletes we store applies to the document as-is at the moment.
+ // So inserts correspond to text which is in the document, while deletes correspond to text which
+ // is no longer there, so their lengths do not affect the position of later offsets.
+ // E.g.
+ // this is the current text of the document
+ // |-----| |
+ // {i: "current ", p:12} -^ ^- {d: "old ", p: 31}
+ //
+ // Track changes rules (should be consistent with Word):
+ // * When text is inserted at a delete, the text goes to the left of the delete
+ // I.e. "foo|bar" -> "foobaz|bar", where | is the delete, and 'baz' is inserted
+ // * Deleting content flagged as 'inserted' does not create a new delete marker, it only
+ // removes the insert marker. E.g.
+ // * "abdefghijkl" -> "abfghijkl" when 'de' is deleted. No delete marker added
+ // |---| <- inserted |-| <- inserted
+ // * Deletes overlapping regular text and inserted text will insert a delete marker for the
+ // regular text:
+ // "abcdefghijkl" -> "abcdejkl" when 'fghi' is deleted
+ // |----| |--||
+ // ^- inserted 'bcdefg' \ ^- deleted 'hi'
+ // \--inserted 'bcde'
+ // * Deletes overlapping other deletes are merged. E.g.
+ // "abcghijkl" -> "ahijkl" when 'bcg is deleted'
+ // | <- delete 'def' | <- delete 'bcdefg'
+ // * Deletes by another user will consume deletes by the first user
+ // * Inserts by another user will not combine with inserts by the first user. If they are in the
+ // middle of a previous insert by the first user, the original insert will be split into two.
+ constructor(changes, comments) {
+ if (changes == null) {
+ changes = []
+ }
+ this.changes = changes
+ if (comments == null) {
+ comments = []
+ }
+ this.comments = comments
+ this.setIdSeed(RangesTracker.generateIdSeed())
+ this.resetDirtyState()
+ }
+
+ getIdSeed() {
+ return this.id_seed
+ }
+
+ setIdSeed(seed) {
+ this.id_seed = seed
+ return (this.id_increment = 0)
+ }
+
+ static generateIdSeed() {
+ // Generate a the first 18 characters of Mongo ObjectId, leaving 6 for the increment part
+ // Reference: https://github.com/dreampulse/ObjectId.js/blob/master/src/main/javascript/Objectid.js
+ const pid = Math.floor(Math.random() * 32767).toString(16)
+ const machine = Math.floor(Math.random() * 16777216).toString(16)
+ const timestamp = Math.floor(new Date().valueOf() / 1000).toString(16)
+ return (
+ '00000000'.substr(0, 8 - timestamp.length) +
+ timestamp +
+ '000000'.substr(0, 6 - machine.length) +
+ machine +
+ '0000'.substr(0, 4 - pid.length) +
+ pid
+ )
+ }
+
+ static generateId() {
+ return this.generateIdSeed() + '000001'
+ }
+
+ newId() {
+ this.id_increment++
+ const increment = this.id_increment.toString(16)
+ const id =
+ this.id_seed + '000000'.substr(0, 6 - increment.length) + increment
+ return id
+ }
+
+ getComment(comment_id) {
+ let comment = null
+ for (const c of Array.from(this.comments)) {
+ if (c.id === comment_id) {
+ comment = c
+ break
+ }
+ }
+ return comment
+ }
+
+ removeCommentId(comment_id) {
+ const comment = this.getComment(comment_id)
+ if (comment == null) {
+ return
+ }
+ this.comments = this.comments.filter(c => c.id !== comment_id)
+ return this._markAsDirty(comment, 'comment', 'removed')
+ }
+
+ moveCommentId(comment_id, position, text) {
+ return (() => {
+ const result = []
+ for (const comment of Array.from(this.comments)) {
+ if (comment.id === comment_id) {
+ comment.op.p = position
+ comment.op.c = text
+ result.push(this._markAsDirty(comment, 'comment', 'moved'))
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ }
+
+ getChange(change_id) {
+ let change = null
+ for (const c of Array.from(this.changes)) {
+ if (c.id === change_id) {
+ change = c
+ break
+ }
+ }
+ return change
+ }
+
+ getChanges(change_ids) {
+ const changes_response = []
+ const ids_map = {}
+
+ for (const change_id of Array.from(change_ids)) {
+ ids_map[change_id] = true
+ }
+
+ for (const change of Array.from(this.changes)) {
+ if (ids_map[change.id]) {
+ delete ids_map[change.id]
+ changes_response.push(change)
+ }
+ }
+
+ return changes_response
+ }
+
+ removeChangeId(change_id) {
+ const change = this.getChange(change_id)
+ if (change == null) {
+ return
+ }
+ return this._removeChange(change)
+ }
+
+ removeChangeIds(change_to_remove_ids) {
+ if (
+ !(change_to_remove_ids != null
+ ? change_to_remove_ids.length
+ : undefined) > 0
+ ) {
+ return
+ }
+ const i = this.changes.length
+ const remove_change_id = {}
+ for (const change_id of Array.from(change_to_remove_ids)) {
+ remove_change_id[change_id] = true
+ }
+
+ const remaining_changes = []
+
+ for (const change of Array.from(this.changes)) {
+ if (remove_change_id[change.id]) {
+ delete remove_change_id[change.id]
+ this._markAsDirty(change, 'change', 'removed')
+ } else {
+ remaining_changes.push(change)
+ }
+ }
+
+ return (this.changes = remaining_changes)
+ }
+
+ validate(text) {
+ let content
+ for (const change of Array.from(this.changes)) {
+ if (change.op.i != null) {
+ content = text.slice(change.op.p, change.op.p + change.op.i.length)
+ if (content !== change.op.i) {
+ throw new Error(
+ `Change (${JSON.stringify(
+ change
+ )}) doesn't match text (${JSON.stringify(content)})`
+ )
+ }
+ }
+ }
+ for (const comment of Array.from(this.comments)) {
+ content = text.slice(comment.op.p, comment.op.p + comment.op.c.length)
+ if (content !== comment.op.c) {
+ throw new Error(
+ `Comment (${JSON.stringify(
+ comment
+ )}) doesn't match text (${JSON.stringify(content)})`
+ )
+ }
+ }
+ return true
+ }
+
+ applyOp(op, metadata) {
+ if (metadata == null) {
+ metadata = {}
+ }
+ if (metadata.ts == null) {
+ metadata.ts = new Date()
+ }
+ // Apply an op that has been applied to the document to our changes to keep them up to date
+ if (op.i != null) {
+ this.applyInsertToChanges(op, metadata)
+ return this.applyInsertToComments(op)
+ } else if (op.d != null) {
+ this.applyDeleteToChanges(op, metadata)
+ return this.applyDeleteToComments(op)
+ } else if (op.c != null) {
+ return this.addComment(op, metadata)
+ } else {
+ throw new Error('unknown op type')
+ }
+ }
+
+ applyOps(ops, metadata) {
+ if (metadata == null) {
+ metadata = {}
+ }
+ return Array.from(ops).map(op => this.applyOp(op, metadata))
+ }
+
+ addComment(op, metadata) {
+ const existing = this.getComment(op.t)
+ if (existing != null) {
+ this.moveCommentId(op.t, op.p, op.c)
+ return existing
+ } else {
+ let comment
+ this.comments.push(
+ (comment = {
+ id: op.t || this.newId(),
+ op: {
+ // Copy because we'll modify in place
+ c: op.c,
+ p: op.p,
+ t: op.t,
+ },
+ metadata,
+ })
+ )
+ this._markAsDirty(comment, 'comment', 'added')
+ return comment
+ }
+ }
+
+ applyInsertToComments(op) {
+ return (() => {
+ const result = []
+ for (const comment of Array.from(this.comments)) {
+ if (op.p <= comment.op.p) {
+ comment.op.p += op.i.length
+ result.push(this._markAsDirty(comment, 'comment', 'moved'))
+ } else if (op.p < comment.op.p + comment.op.c.length) {
+ const offset = op.p - comment.op.p
+ comment.op.c =
+ comment.op.c.slice(0, +(offset - 1) + 1 || undefined) +
+ op.i +
+ comment.op.c.slice(offset)
+ result.push(this._markAsDirty(comment, 'comment', 'moved'))
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ }
+
+ applyDeleteToComments(op) {
+ const op_start = op.p
+ const op_length = op.d.length
+ const op_end = op.p + op_length
+ return (() => {
+ const result = []
+ for (const comment of Array.from(this.comments)) {
+ const comment_start = comment.op.p
+ const comment_end = comment.op.p + comment.op.c.length
+ const comment_length = comment_end - comment_start
+ if (op_end <= comment_start) {
+ // delete is fully before comment
+ comment.op.p -= op_length
+ result.push(this._markAsDirty(comment, 'comment', 'moved'))
+ } else if (op_start >= comment_end) {
+ // delete is fully after comment, nothing to do
+ } else {
+ // delete and comment overlap
+ var remaining_after, remaining_before
+ if (op_start <= comment_start) {
+ remaining_before = ''
+ } else {
+ remaining_before = comment.op.c.slice(0, op_start - comment_start)
+ }
+ if (op_end >= comment_end) {
+ remaining_after = ''
+ } else {
+ remaining_after = comment.op.c.slice(op_end - comment_start)
+ }
+
+ // Check deleted content matches delete op
+ const deleted_comment = comment.op.c.slice(
+ remaining_before.length,
+ comment_length - remaining_after.length
+ )
+ const offset = Math.max(0, comment_start - op_start)
+ const deleted_op_content = op.d
+ .slice(offset)
+ .slice(0, deleted_comment.length)
+ if (deleted_comment !== deleted_op_content) {
+ throw new Error('deleted content does not match comment content')
+ }
+
+ comment.op.p = Math.min(comment_start, op_start)
+ comment.op.c = remaining_before + remaining_after
+ result.push(this._markAsDirty(comment, 'comment', 'moved'))
+ }
+ }
+ return result
+ })()
+ }
+
+ applyInsertToChanges(op, metadata) {
+ let change
+ const op_start = op.p
+ const op_length = op.i.length
+ const op_end = op.p + op_length
+ const undoing = !!op.u
+
+ let already_merged = false
+ let previous_change = null
+ const moved_changes = []
+ const remove_changes = []
+ const new_changes = []
+
+ for (let i = 0; i < this.changes.length; i++) {
+ change = this.changes[i]
+ const change_start = change.op.p
+
+ if (change.op.d != null) {
+ // Shift any deletes after this along by the length of this insert
+ if (op_start < change_start) {
+ change.op.p += op_length
+ moved_changes.push(change)
+ } else if (op_start === change_start) {
+ // If we are undoing, then we want to cancel any existing delete ranges if we can.
+ // Check if the insert matches the start of the delete, and just remove it from the delete instead if so.
+ if (
+ undoing &&
+ change.op.d.length >= op.i.length &&
+ change.op.d.slice(0, op.i.length) === op.i
+ ) {
+ change.op.d = change.op.d.slice(op.i.length)
+ change.op.p += op.i.length
+ if (change.op.d === '') {
+ remove_changes.push(change)
+ } else {
+ moved_changes.push(change)
+ }
+ already_merged = true
+ } else {
+ change.op.p += op_length
+ moved_changes.push(change)
+ }
+ }
+ } else if (change.op.i != null) {
+ var offset
+ const change_end = change_start + change.op.i.length
+ const is_change_overlapping =
+ op_start >= change_start && op_start <= change_end
+
+ // Only merge inserts if they are from the same user
+ const is_same_user = metadata.user_id === change.metadata.user_id
+
+ // If we are undoing, then our changes will be removed from any delete ops just after. In that case, if there is also
+ // an insert op just before, then we shouldn't append it to this insert, but instead only cancel the following delete.
+ // E.g.
+ // foo|<--- about to insert 'b' here
+ // inserted 'foo' --^ ^-- deleted 'bar'
+ // should become just 'foo' not 'foob' (with the delete marker becoming just 'ar'), .
+ const next_change = this.changes[i + 1]
+ const is_op_adjacent_to_next_delete =
+ next_change != null &&
+ next_change.op.d != null &&
+ op.p === change_end &&
+ next_change.op.p === op.p
+ const will_op_cancel_next_delete =
+ undoing &&
+ is_op_adjacent_to_next_delete &&
+ next_change.op.d.slice(0, op.i.length) === op.i
+
+ // If there is a delete at the start of the insert, and we're inserting
+ // at the start, we SHOULDN'T merge since the delete acts as a partition.
+ // The previous op will be the delete, but it's already been shifted by this insert
+ //
+ // I.e.
+ // Originally: |-- existing insert --|
+ // | <- existing delete at same offset
+ //
+ // Now: |-- existing insert --| <- not shifted yet
+ // |-- this insert --|| <- existing delete shifted along to end of this op
+ //
+ // After: |-- existing insert --|
+ // |-- this insert --|| <- existing delete
+ //
+ // Without the delete, the inserts would be merged.
+ const is_insert_blocked_by_delete =
+ previous_change != null &&
+ previous_change.op.d != null &&
+ previous_change.op.p === op_end
+
+ // If the insert is overlapping another insert, either at the beginning in the middle or touching the end,
+ // then we merge them into one.
+ if (
+ this.track_changes &&
+ is_change_overlapping &&
+ !is_insert_blocked_by_delete &&
+ !already_merged &&
+ !will_op_cancel_next_delete &&
+ is_same_user
+ ) {
+ offset = op_start - change_start
+ change.op.i =
+ change.op.i.slice(0, offset) + op.i + change.op.i.slice(offset)
+ change.metadata.ts = metadata.ts
+ already_merged = true
+ moved_changes.push(change)
+ } else if (op_start <= change_start) {
+ // If we're fully before the other insert we can just shift the other insert by our length.
+ // If they are touching, and should have been merged, they will have been above.
+ // If not merged above, then it must be blocked by a delete, and will be after this insert, so we shift it along as well
+ change.op.p += op_length
+ moved_changes.push(change)
+ } else if (
+ (!is_same_user || !this.track_changes) &&
+ change_start < op_start &&
+ op_start < change_end
+ ) {
+ // This user is inserting inside a change by another user, so we need to split the
+ // other user's change into one before and after this one.
+ offset = op_start - change_start
+ const before_content = change.op.i.slice(0, offset)
+ const after_content = change.op.i.slice(offset)
+
+ // The existing change can become the 'before' change
+ change.op.i = before_content
+ moved_changes.push(change)
+
+ // Create a new op afterwards
+ const after_change = {
+ op: {
+ i: after_content,
+ p: change_start + offset + op_length,
+ },
+ metadata: {},
+ }
+ for (const key in change.metadata) {
+ const value = change.metadata[key]
+ after_change.metadata[key] = value
+ }
+ new_changes.push(after_change)
+ }
+ }
+
+ previous_change = change
+ }
+
+ if (this.track_changes && !already_merged) {
+ this._addOp(op, metadata)
+ }
+ for ({ op, metadata } of Array.from(new_changes)) {
+ this._addOp(op, metadata)
+ }
+
+ for (change of Array.from(remove_changes)) {
+ this._removeChange(change)
+ }
+
+ return (() => {
+ const result = []
+ for (change of Array.from(moved_changes)) {
+ result.push(this._markAsDirty(change, 'change', 'moved'))
+ }
+ return result
+ })()
+ }
+
+ applyDeleteToChanges(op, metadata) {
+ const op_start = op.p
+ const op_length = op.d.length
+ const op_end = op.p + op_length
+ const remove_changes = []
+ let moved_changes = []
+
+ // We might end up modifying our delete op if it merges with existing deletes, or cancels out
+ // with an existing insert. Since we might do multiple modifications, we record them and do
+ // all the modifications after looping through the existing changes, so as not to mess up the
+ // offset indexes as we go.
+ const op_modifications = []
+ for (var change of Array.from(this.changes)) {
+ var change_start
+ if (change.op.i != null) {
+ change_start = change.op.p
+ const change_end = change_start + change.op.i.length
+ if (op_end <= change_start) {
+ // Shift ops after us back by our length
+ change.op.p -= op_length
+ moved_changes.push(change)
+ } else if (op_start >= change_end) {
+ // Delete is after insert, nothing to do
+ } else {
+ // When the new delete overlaps an insert, we should remove the part of the insert that
+ // is now deleted, and also remove the part of the new delete that overlapped. I.e.
+ // the two cancel out where they overlap.
+ var delete_remaining_after,
+ delete_remaining_before,
+ insert_remaining_after,
+ insert_remaining_before
+ if (op_start >= change_start) {
+ // |-- existing insert --|
+ // insert_remaining_before -> |.....||-- new delete --|
+ delete_remaining_before = ''
+ insert_remaining_before = change.op.i.slice(
+ 0,
+ op_start - change_start
+ )
+ } else {
+ // delete_remaining_before -> |.....||-- existing insert --|
+ // |-- new delete --|
+ delete_remaining_before = op.d.slice(0, change_start - op_start)
+ insert_remaining_before = ''
+ }
+
+ if (op_end <= change_end) {
+ // |-- existing insert --|
+ // |-- new delete --||.....| <- insert_remaining_after
+ delete_remaining_after = ''
+ insert_remaining_after = change.op.i.slice(op_end - change_start)
+ } else {
+ // |-- existing insert --||.....| <- delete_remaining_after
+ // |-- new delete --|
+ delete_remaining_after = op.d.slice(change_end - op_start)
+ insert_remaining_after = ''
+ }
+
+ const insert_remaining =
+ insert_remaining_before + insert_remaining_after
+ if (insert_remaining.length > 0) {
+ change.op.i = insert_remaining
+ change.op.p = Math.min(change_start, op_start)
+ change.metadata.ts = metadata.ts
+ moved_changes.push(change)
+ } else {
+ remove_changes.push(change)
+ }
+
+ // We know what we want to preserve of our delete op before (delete_remaining_before) and what we want to preserve
+ // afterwards (delete_remaining_before). Now we need to turn that into a modification which deletes the
+ // chunk in the middle not covered by these.
+ const delete_removed_length =
+ op.d.length -
+ delete_remaining_before.length -
+ delete_remaining_after.length
+ const delete_removed_start = delete_remaining_before.length
+ const modification = {
+ d: op.d.slice(
+ delete_removed_start,
+ delete_removed_start + delete_removed_length
+ ),
+ p: delete_removed_start,
+ }
+ if (modification.d.length > 0) {
+ op_modifications.push(modification)
+ }
+ }
+ } else if (change.op.d != null) {
+ change_start = change.op.p
+ if (
+ op_end < change_start ||
+ (!this.track_changes && op_end === change_start)
+ ) {
+ // Shift ops after us back by our length.
+ // If we're tracking changes, it must be strictly before, since we'll merge
+ // below if they are touching. Otherwise, touching is fine.
+ change.op.p -= op_length
+ moved_changes.push(change)
+ } else if (op_start <= change_start && change_start <= op_end) {
+ if (this.track_changes) {
+ // If we overlap a delete, add it in our content, and delete the existing change.
+ // It's easier to do it this way, rather than modifying the existing delete in case
+ // we overlap many deletes and we'd need to track that. We have a workaround to
+ // update the delete in place if possible below.
+ const offset = change_start - op_start
+ op_modifications.push({ i: change.op.d, p: offset })
+ remove_changes.push(change)
+ } else {
+ change.op.p = op_start
+ moved_changes.push(change)
+ }
+ }
+ }
+ }
+
+ // Copy rather than modify because we still need to apply it to comments
+ op = {
+ p: op.p,
+ d: this._applyOpModifications(op.d, op_modifications),
+ }
+
+ for (change of Array.from(remove_changes)) {
+ // This is a bit of hack to avoid removing one delete and replacing it with another.
+ // If we don't do this, it causes the UI to flicker
+ if (
+ op.d.length > 0 &&
+ change.op.d != null &&
+ op.p <= change.op.p &&
+ change.op.p <= op.p + op.d.length
+ ) {
+ change.op.p = op.p
+ change.op.d = op.d
+ change.metadata = metadata
+ moved_changes.push(change)
+ op.d = '' // stop it being added
+ } else {
+ this._removeChange(change)
+ }
+ }
+
+ if (this.track_changes && op.d.length > 0) {
+ this._addOp(op, metadata)
+ } else {
+ // It's possible that we deleted an insert between two other inserts. I.e.
+ // If we delete 'user_2 insert' in:
+ // |-- user_1 insert --||-- user_2 insert --||-- user_1 insert --|
+ // it becomes:
+ // |-- user_1 insert --||-- user_1 insert --|
+ // We need to merge these together again
+ const results = this._scanAndMergeAdjacentUpdates()
+ moved_changes = moved_changes.concat(results.moved_changes)
+ for (change of Array.from(results.remove_changes)) {
+ this._removeChange(change)
+ moved_changes = moved_changes.filter(c => c !== change)
+ }
+ }
+
+ return (() => {
+ const result = []
+ for (change of Array.from(moved_changes)) {
+ result.push(this._markAsDirty(change, 'change', 'moved'))
+ }
+ return result
+ })()
+ }
+
+ _addOp(op, metadata) {
+ const change = {
+ id: this.newId(),
+ op: this._clone(op), // Don't take a reference to the existing op since we'll modify this in place with future changes
+ metadata: this._clone(metadata),
+ }
+ this.changes.push(change)
+
+ // Keep ops in order of offset, with deletes before inserts
+ this.changes.sort(function (c1, c2) {
+ const result = c1.op.p - c2.op.p
+ if (result !== 0) {
+ return result
+ } else if (c1.op.i != null && c2.op.d != null) {
+ return 1
+ } else if (c1.op.d != null && c2.op.i != null) {
+ return -1
+ } else {
+ return 0
+ }
+ })
+
+ return this._markAsDirty(change, 'change', 'added')
+ }
+
+ _removeChange(change) {
+ this.changes = this.changes.filter(c => c.id !== change.id)
+ return this._markAsDirty(change, 'change', 'removed')
+ }
+
+ _applyOpModifications(content, op_modifications) {
+ // Put in descending position order, with deleting first if at the same offset
+ // (Inserting first would modify the content that the delete will delete)
+ op_modifications.sort(function (a, b) {
+ const result = b.p - a.p
+ if (result !== 0) {
+ return result
+ } else if (a.i != null && b.d != null) {
+ return 1
+ } else if (a.d != null && b.i != null) {
+ return -1
+ } else {
+ return 0
+ }
+ })
+
+ for (const modification of Array.from(op_modifications)) {
+ if (modification.i != null) {
+ content =
+ content.slice(0, modification.p) +
+ modification.i +
+ content.slice(modification.p)
+ } else if (modification.d != null) {
+ if (
+ content.slice(
+ modification.p,
+ modification.p + modification.d.length
+ ) !== modification.d
+ ) {
+ throw new Error(
+ `deleted content does not match. content: ${JSON.stringify(
+ content
+ )}; modification: ${JSON.stringify(modification)}`
+ )
+ }
+ content =
+ content.slice(0, modification.p) +
+ content.slice(modification.p + modification.d.length)
+ }
+ }
+ return content
+ }
+
+ _scanAndMergeAdjacentUpdates() {
+ // This should only need calling when deleting an update between two
+ // other updates. There's no other way to get two adjacent updates from the
+ // same user, since they would be merged on insert.
+ let previous_change = null
+ const remove_changes = []
+ const moved_changes = []
+ for (const change of Array.from(this.changes)) {
+ if (
+ (previous_change != null ? previous_change.op.i : undefined) != null &&
+ change.op.i != null
+ ) {
+ const previous_change_end =
+ previous_change.op.p + previous_change.op.i.length
+ const previous_change_user_id = previous_change.metadata.user_id
+ const change_start = change.op.p
+ const change_user_id = change.metadata.user_id
+ if (
+ previous_change_end === change_start &&
+ previous_change_user_id === change_user_id
+ ) {
+ remove_changes.push(change)
+ previous_change.op.i += change.op.i
+ moved_changes.push(previous_change)
+ }
+ } else if (
+ (previous_change != null ? previous_change.op.d : undefined) != null &&
+ change.op.d != null &&
+ previous_change.op.p === change.op.p
+ ) {
+ // Merge adjacent deletes
+ previous_change.op.d += change.op.d
+ remove_changes.push(change)
+ moved_changes.push(previous_change)
+ } else {
+ // Only update to the current change if we haven't removed it.
+ previous_change = change
+ }
+ }
+ return { moved_changes, remove_changes }
+ }
+
+ resetDirtyState() {
+ return (this._dirtyState = {
+ comment: {
+ moved: {},
+ removed: {},
+ added: {},
+ },
+ change: {
+ moved: {},
+ removed: {},
+ added: {},
+ },
+ })
+ }
+
+ getDirtyState() {
+ return this._dirtyState
+ }
+
+ _markAsDirty(object, type, action) {
+ return (this._dirtyState[type][action][object.id] = object)
+ }
+
+ _clone(object) {
+ const clone = {}
+ for (const k in object) {
+ const v = object[k]
+ clone[k] = v
+ }
+ return clone
+ }
+}
diff --git a/services/web/frontend/js/ide/review-panel/ReviewPanelManager.js b/services/web/frontend/js/ide/review-panel/ReviewPanelManager.js
new file mode 100644
index 0000000000..cc96a898a3
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/ReviewPanelManager.js
@@ -0,0 +1,18 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+import './controllers/ReviewPanelController'
+import './controllers/TrackChangesUpgradeModalController'
+import './controllers/BulkActionsModalController'
+import './directives/reviewPanelSorted'
+import './directives/reviewPanelToggle'
+import './directives/changeEntry'
+import './directives/aggregateChangeEntry'
+import './directives/commentEntry'
+import './directives/addCommentEntry'
+import './directives/bulkActionsEntry'
+import './directives/resolvedCommentEntry'
+import './directives/resolvedCommentsDropdown'
+import './directives/reviewPanelCollapseHeight'
+import './filters/notEmpty'
+import './filters/numKeys'
+import './filters/orderOverviewEntries'
diff --git a/services/web/frontend/js/ide/review-panel/controllers/BulkActionsModalController.js b/services/web/frontend/js/ide/review-panel/controllers/BulkActionsModalController.js
new file mode 100644
index 0000000000..ab96ab81dd
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/controllers/BulkActionsModalController.js
@@ -0,0 +1,22 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.controller(
+ 'BulkActionsModalController',
+ function ($scope, $modalInstance, isAccept, nChanges) {
+ $scope.isAccept = isAccept
+ $scope.nChanges = nChanges
+ $scope.cancel = () => $modalInstance.dismiss()
+ return ($scope.confirm = () => $modalInstance.close(isAccept))
+ }
+)
diff --git a/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js b/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js
new file mode 100644
index 0000000000..fe22fd4eb0
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js
@@ -0,0 +1,1235 @@
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+import EventEmitter from '../../../utils/EventEmitter'
+import ColorManager from '../../colors/ColorManager'
+import RangesTracker from '../RangesTracker'
+
+export default App.controller(
+ 'ReviewPanelController',
+ function (
+ $scope,
+ $element,
+ ide,
+ $timeout,
+ $http,
+ $modal,
+ eventTracking,
+ localStorage
+ ) {
+ let UserTCSyncState
+ const $reviewPanelEl = $element.find('#review-panel')
+
+ const UserTypes = {
+ MEMBER: 'member', // Invited, listed in project.members
+ GUEST: 'guest', // Not invited, but logged in so has a user_id
+ ANONYMOUS: 'anonymous', // No user_id
+ }
+
+ const currentUserType = function () {
+ if ((ide.$scope.user != null ? ide.$scope.user.id : undefined) == null) {
+ return UserTypes.ANONYMOUS
+ } else {
+ const user_id = ide.$scope.user.id
+ const { project } = ide.$scope
+ if (
+ (project.owner != null ? project.owner.id : undefined) === user_id
+ ) {
+ return UserTypes.MEMBER
+ }
+ for (const member of Array.from(project.members)) {
+ if (member._id === user_id) {
+ return UserTypes.MEMBER
+ }
+ }
+ return UserTypes.GUEST
+ }
+ }
+
+ $scope.SubViews = {
+ CUR_FILE: 'cur_file',
+ OVERVIEW: 'overview',
+ }
+
+ $scope.UserTCSyncState = UserTCSyncState = {
+ SYNCED: 'synced',
+ PENDING: 'pending',
+ }
+
+ $scope.reviewPanel = {
+ trackChangesState: {},
+ trackChangesOnForEveryone: false,
+ trackChangesOnForGuests: false,
+ trackChangesForGuestsAvailable: false,
+ entries: {},
+ resolvedComments: {},
+ hasEntries: false,
+ subView: $scope.SubViews.CUR_FILE,
+ openSubView: $scope.SubViews.CUR_FILE,
+ overview: {
+ loading: false,
+ docsCollapsedState:
+ JSON.parse(
+ localStorage(`docs_collapsed_state:${$scope.project_id}`)
+ ) || {},
+ },
+ dropdown: {
+ loading: false,
+ },
+ commentThreads: {},
+ resolvedThreadIds: {},
+ rendererData: {},
+ formattedProjectMembers: {},
+ fullTCStateCollapsed: true,
+ loadingThreads: false,
+ // All selected changes. If a aggregated change (insertion + deletion) is selection, the two ids
+ // will be present. The length of this array will differ from the count below (see explanation).
+ selectedEntryIds: [],
+ // A count of user-facing selected changes. An aggregated change (insertion + deletion) will count
+ // as only one.
+ nVisibleSelectedChanges: 0,
+ }
+
+ window.addEventListener('beforeunload', function () {
+ const collapsedStates = {}
+ for (const doc in $scope.reviewPanel.overview.docsCollapsedState) {
+ const state = $scope.reviewPanel.overview.docsCollapsedState[doc]
+ if (state) {
+ collapsedStates[doc] = state
+ }
+ }
+ const valToStore =
+ Object.keys(collapsedStates).length > 0
+ ? JSON.stringify(collapsedStates)
+ : null
+ return localStorage(
+ `docs_collapsed_state:${$scope.project_id}`,
+ valToStore
+ )
+ })
+
+ $scope.$on('layout:pdf:linked', (event, state) =>
+ $scope.$broadcast('review-panel:layout')
+ )
+
+ $scope.$on('layout:pdf:resize', (event, state) =>
+ $scope.$broadcast('review-panel:layout', false)
+ )
+
+ $scope.$on('expandable-text-area:resize', event =>
+ $timeout(() => $scope.$broadcast('review-panel:layout'))
+ )
+
+ $scope.$on('review-panel:sizes', (e, sizes) =>
+ $scope.$broadcast('editor:set-scroll-size', sizes)
+ )
+
+ $scope.$watch('project.features.trackChangesVisible', function (visible) {
+ if (visible == null) {
+ return
+ }
+ if (!visible) {
+ return ($scope.ui.reviewPanelOpen = false)
+ }
+ })
+
+ $scope.$watch('project.members', function (members) {
+ $scope.reviewPanel.formattedProjectMembers = {}
+ if (($scope.project != null ? $scope.project.owner : undefined) != null) {
+ $scope.reviewPanel.formattedProjectMembers[
+ $scope.project.owner._id
+ ] = formatUser($scope.project.owner)
+ }
+ if (
+ ($scope.project != null ? $scope.project.members : undefined) != null
+ ) {
+ return (() => {
+ const result = []
+ for (const member of Array.from(members)) {
+ if (member.privileges === 'readAndWrite') {
+ if ($scope.reviewPanel.trackChangesState[member._id] == null) {
+ // An added member will have track changes enabled if track changes is on for everyone
+ _setUserTCState(
+ member._id,
+ $scope.reviewPanel.trackChangesOnForEveryone,
+ true
+ )
+ }
+ result.push(
+ ($scope.reviewPanel.formattedProjectMembers[
+ member._id
+ ] = formatUser(member))
+ )
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ }
+ })
+
+ $scope.commentState = {
+ adding: false,
+ content: '',
+ }
+
+ $scope.users = {}
+
+ $scope.reviewPanelEventsBridge = new EventEmitter()
+
+ ide.socket.on('new-comment', function (thread_id, comment) {
+ const thread = getThread(thread_id)
+ delete thread.submitting
+ thread.messages.push(formatComment(comment))
+ $scope.$apply()
+ return $timeout(() => $scope.$broadcast('review-panel:layout'))
+ })
+
+ ide.socket.on('accept-changes', function (doc_id, change_ids) {
+ if (doc_id !== $scope.editor.open_doc_id) {
+ getChangeTracker(doc_id).removeChangeIds(change_ids)
+ } else {
+ $scope.$broadcast('changes:accept', change_ids)
+ }
+ updateEntries(doc_id)
+ return $scope.$apply(function () {})
+ })
+
+ ide.socket.on('resolve-thread', (thread_id, user) =>
+ _onCommentResolved(thread_id, user)
+ )
+
+ ide.socket.on('reopen-thread', thread_id => _onCommentReopened(thread_id))
+
+ ide.socket.on('delete-thread', function (thread_id) {
+ _onThreadDeleted(thread_id)
+ return $scope.$apply(function () {})
+ })
+
+ ide.socket.on('edit-message', function (thread_id, message_id, content) {
+ _onCommentEdited(thread_id, message_id, content)
+ return $scope.$apply(function () {})
+ })
+
+ ide.socket.on('delete-message', function (thread_id, message_id) {
+ _onCommentDeleted(thread_id, message_id)
+ return $scope.$apply(function () {})
+ })
+
+ const rangesTrackers = {}
+
+ const getDocEntries = function (doc_id) {
+ if ($scope.reviewPanel.entries[doc_id] == null) {
+ $scope.reviewPanel.entries[doc_id] = {}
+ }
+ return $scope.reviewPanel.entries[doc_id]
+ }
+
+ const getDocResolvedComments = function (doc_id) {
+ if ($scope.reviewPanel.resolvedComments[doc_id] == null) {
+ $scope.reviewPanel.resolvedComments[doc_id] = {}
+ }
+ return $scope.reviewPanel.resolvedComments[doc_id]
+ }
+
+ var getThread = function (thread_id) {
+ if ($scope.reviewPanel.commentThreads[thread_id] == null) {
+ $scope.reviewPanel.commentThreads[thread_id] = { messages: [] }
+ }
+ return $scope.reviewPanel.commentThreads[thread_id]
+ }
+
+ var getChangeTracker = function (doc_id) {
+ if (rangesTrackers[doc_id] == null) {
+ rangesTrackers[doc_id] = new RangesTracker()
+ rangesTrackers[doc_id].resolvedThreadIds =
+ $scope.reviewPanel.resolvedThreadIds
+ }
+ return rangesTrackers[doc_id]
+ }
+
+ let scrollbar = {}
+ $scope.reviewPanelEventsBridge.on(
+ 'aceScrollbarVisibilityChanged',
+ function (isVisible, scrollbarWidth) {
+ scrollbar = { isVisible, scrollbarWidth }
+ return updateScrollbar()
+ }
+ )
+
+ var updateScrollbar = function () {
+ if (
+ scrollbar.isVisible &&
+ $scope.reviewPanel.subView === $scope.SubViews.CUR_FILE &&
+ !$scope.editor.showRichText
+ ) {
+ return $reviewPanelEl.css('right', `${scrollbar.scrollbarWidth}px`)
+ } else {
+ return $reviewPanelEl.css('right', '0')
+ }
+ }
+
+ $scope.$watch(
+ '!ui.reviewPanelOpen && reviewPanel.hasEntries',
+ function (open, prevVal) {
+ if (open == null) {
+ return
+ }
+ $scope.ui.miniReviewPanelVisible = open
+ if (open !== prevVal) {
+ return $timeout(() => $scope.$broadcast('review-panel:toggle'))
+ }
+ }
+ )
+
+ $scope.$watch('ui.reviewPanelOpen', function (open) {
+ if (open == null) {
+ return
+ }
+ if (!open) {
+ // Always show current file when not open, but save current state
+ $scope.reviewPanel.openSubView = $scope.reviewPanel.subView
+ $scope.reviewPanel.subView = $scope.SubViews.CUR_FILE
+ } else {
+ // Reset back to what we had when previously open
+ $scope.reviewPanel.subView = $scope.reviewPanel.openSubView
+ }
+ return $timeout(function () {
+ $scope.$broadcast('review-panel:toggle')
+ return $scope.$broadcast('review-panel:layout', false)
+ })
+ })
+
+ $scope.$watch('reviewPanel.subView', function (view) {
+ if (view == null) {
+ return
+ }
+ updateScrollbar()
+ if (view === $scope.SubViews.OVERVIEW) {
+ return refreshOverviewPanel()
+ }
+ })
+
+ $scope.$watch('editor.sharejs_doc', function (doc, old_doc) {
+ if (doc == null) {
+ return
+ }
+ // The open doc range tracker is kept up to date in real-time so
+ // replace any outdated info with this
+ rangesTrackers[doc.doc_id] = doc.ranges
+ rangesTrackers[doc.doc_id].resolvedThreadIds =
+ $scope.reviewPanel.resolvedThreadIds
+ $scope.reviewPanel.rangesTracker = rangesTrackers[doc.doc_id]
+ if (old_doc != null) {
+ old_doc.off('flipped_pending_to_inflight')
+ }
+ doc.on('flipped_pending_to_inflight', () => regenerateTrackChangesId(doc))
+ return regenerateTrackChangesId(doc)
+ })
+
+ $scope.$watch(
+ function () {
+ const entries =
+ $scope.reviewPanel.entries[$scope.editor.open_doc_id] || {}
+ const permEntries = {}
+ for (const entry in entries) {
+ const entryData = entries[entry]
+ if (!['add-comment', 'bulk-actions'].includes(entry)) {
+ permEntries[entry] = entryData
+ }
+ }
+ return Object.keys(permEntries).length
+ },
+ nEntries =>
+ ($scope.reviewPanel.hasEntries =
+ nEntries > 0 && $scope.project.features.trackChangesVisible)
+ )
+
+ var regenerateTrackChangesId = function (doc) {
+ const old_id = getChangeTracker(doc.doc_id).getIdSeed()
+ const new_id = RangesTracker.generateIdSeed()
+ getChangeTracker(doc.doc_id).setIdSeed(new_id)
+ return doc.setTrackChangesIdSeeds({ pending: new_id, inflight: old_id })
+ }
+
+ const refreshRanges = () =>
+ $http
+ .get(`/project/${$scope.project_id}/ranges`)
+ .then(function (response) {
+ const docs = response.data
+ return (() => {
+ const result = []
+ for (const doc of Array.from(docs)) {
+ if (
+ $scope.reviewPanel.overview.docsCollapsedState[doc.id] == null
+ ) {
+ $scope.reviewPanel.overview.docsCollapsedState[doc.id] = false
+ }
+ if (doc.id !== $scope.editor.open_doc_id) {
+ // this is kept up to date in real-time, don't overwrite
+ const rangesTracker = getChangeTracker(doc.id)
+ rangesTracker.comments =
+ (doc.ranges != null ? doc.ranges.comments : undefined) || []
+ rangesTracker.changes =
+ (doc.ranges != null ? doc.ranges.changes : undefined) || []
+ }
+ result.push(updateEntries(doc.id))
+ }
+ return result
+ })()
+ })
+
+ var refreshOverviewPanel = function () {
+ $scope.reviewPanel.overview.loading = true
+ return refreshRanges()
+ .then(() => ($scope.reviewPanel.overview.loading = false))
+ .catch(() => ($scope.reviewPanel.overview.loading = false))
+ }
+
+ $scope.refreshResolvedCommentsDropdown = function () {
+ $scope.reviewPanel.dropdown.loading = true
+ const q = refreshRanges()
+ q.then(() => ($scope.reviewPanel.dropdown.loading = false))
+ q.catch(() => ($scope.reviewPanel.dropdown.loading = false))
+ return q
+ }
+
+ var updateEntries = function (doc_id) {
+ let change, entry_id, key, new_entry, value
+ const rangesTracker = getChangeTracker(doc_id)
+ const entries = getDocEntries(doc_id)
+ const resolvedComments = getDocResolvedComments(doc_id)
+
+ let changed = false
+
+ // Assume we'll delete everything until we see it, then we'll remove it from this object
+ const delete_changes = {}
+ for (var id in entries) {
+ change = entries[id]
+ if (!['add-comment', 'bulk-actions'].includes(id)) {
+ for (entry_id of Array.from(change.entry_ids)) {
+ delete_changes[entry_id] = true
+ }
+ }
+ }
+ for (id in resolvedComments) {
+ change = resolvedComments[id]
+ for (entry_id of Array.from(change.entry_ids)) {
+ delete_changes[entry_id] = true
+ }
+ }
+
+ let potential_aggregate = false
+ let prev_insertion = null
+
+ for (change of Array.from(rangesTracker.changes)) {
+ changed = true
+
+ if (
+ potential_aggregate &&
+ change.op.d &&
+ change.op.p === prev_insertion.op.p + prev_insertion.op.i.length &&
+ change.metadata.user_id === prev_insertion.metadata.user_id
+ ) {
+ // An actual aggregate op.
+ entries[prev_insertion.id].type = 'aggregate-change'
+ entries[prev_insertion.id].metadata.replaced_content = change.op.d
+ entries[prev_insertion.id].entry_ids.push(change.id)
+ } else {
+ if (entries[change.id] == null) {
+ entries[change.id] = {}
+ }
+ delete delete_changes[change.id]
+ new_entry = {
+ type: change.op.i ? 'insert' : 'delete',
+ entry_ids: [change.id],
+ content: change.op.i || change.op.d,
+ offset: change.op.p,
+ metadata: change.metadata,
+ }
+ for (key in new_entry) {
+ value = new_entry[key]
+ entries[change.id][key] = value
+ }
+ }
+
+ if (change.op.i) {
+ potential_aggregate = true
+ prev_insertion = change
+ } else {
+ potential_aggregate = false
+ prev_insertion = null
+ }
+
+ if ($scope.users[change.metadata.user_id] == null) {
+ refreshChangeUsers(change.metadata.user_id)
+ }
+ }
+
+ if (rangesTracker.comments.length > 0) {
+ ensureThreadsAreLoaded()
+ }
+
+ for (const comment of Array.from(rangesTracker.comments)) {
+ var new_comment
+ changed = true
+ delete delete_changes[comment.id]
+ if ($scope.reviewPanel.resolvedThreadIds[comment.op.t]) {
+ new_comment =
+ resolvedComments[comment.id] != null
+ ? resolvedComments[comment.id]
+ : (resolvedComments[comment.id] = {})
+ delete entries[comment.id]
+ } else {
+ new_comment =
+ entries[comment.id] != null
+ ? entries[comment.id]
+ : (entries[comment.id] = {})
+ delete resolvedComments[comment.id]
+ }
+ new_entry = {
+ type: 'comment',
+ thread_id: comment.op.t,
+ entry_ids: [comment.id],
+ content: comment.op.c,
+ offset: comment.op.p,
+ }
+ for (key in new_entry) {
+ value = new_entry[key]
+ new_comment[key] = value
+ }
+ }
+
+ for (const change_id in delete_changes) {
+ const _ = delete_changes[change_id]
+ changed = true
+ delete entries[change_id]
+ delete resolvedComments[change_id]
+ }
+
+ if (changed) {
+ return $scope.$broadcast('entries:changed')
+ }
+ }
+
+ $scope.$on('editor:track-changes:changed', function () {
+ const doc_id = $scope.editor.open_doc_id
+ updateEntries(doc_id)
+
+ // For now, not worrying about entry panels for rich text
+ if (!$scope.editor.showRichText) {
+ $scope.$broadcast('review-panel:recalculate-screen-positions')
+ return $scope.$broadcast('review-panel:layout')
+ }
+ })
+
+ $scope.$on('editor:track-changes:visibility_changed', () =>
+ $timeout(() => $scope.$broadcast('review-panel:layout', false))
+ )
+
+ $scope.$on(
+ 'editor:focus:changed',
+ function (e, selection_offset_start, selection_offset_end, selection) {
+ const doc_id = $scope.editor.open_doc_id
+ const entries = getDocEntries(doc_id)
+ // All selected changes will be added to this array.
+ $scope.reviewPanel.selectedEntryIds = []
+ // Count of user-visible changes, i.e. an aggregated change will count as one.
+ $scope.reviewPanel.nVisibleSelectedChanges = 0
+ delete entries['add-comment']
+ delete entries['bulk-actions']
+
+ if (selection) {
+ entries['add-comment'] = {
+ type: 'add-comment',
+ offset: selection_offset_start,
+ length: selection_offset_end - selection_offset_start,
+ }
+ entries['bulk-actions'] = {
+ type: 'bulk-actions',
+ offset: selection_offset_start,
+ length: selection_offset_end - selection_offset_start,
+ }
+ }
+
+ for (const id in entries) {
+ const entry = entries[id]
+ let isChangeEntryAndWithinSelection = false
+ if (
+ entry.type === 'comment' &&
+ !$scope.reviewPanel.resolvedThreadIds[entry.thread_id]
+ ) {
+ entry.focused =
+ entry.offset <= selection_offset_start &&
+ selection_offset_start <= entry.offset + entry.content.length
+ } else if (entry.type === 'insert') {
+ isChangeEntryAndWithinSelection =
+ entry.offset >= selection_offset_start &&
+ entry.offset + entry.content.length <= selection_offset_end
+ entry.focused =
+ entry.offset <= selection_offset_start &&
+ selection_offset_start <= entry.offset + entry.content.length
+ } else if (entry.type === 'delete') {
+ isChangeEntryAndWithinSelection =
+ selection_offset_start <= entry.offset &&
+ entry.offset <= selection_offset_end
+ entry.focused = entry.offset === selection_offset_start
+ } else if (entry.type === 'aggregate-change') {
+ isChangeEntryAndWithinSelection =
+ entry.offset >= selection_offset_start &&
+ entry.offset + entry.content.length <= selection_offset_end
+ entry.focused =
+ entry.offset <= selection_offset_start &&
+ selection_offset_start <= entry.offset + entry.content.length
+ } else if (
+ ['add-comment', 'bulk-actions'].includes(entry.type) &&
+ selection
+ ) {
+ entry.focused = true
+ }
+
+ if (isChangeEntryAndWithinSelection) {
+ for (const entry_id of Array.from(entry.entry_ids)) {
+ $scope.reviewPanel.selectedEntryIds.push(entry_id)
+ }
+ $scope.reviewPanel.nVisibleSelectedChanges++
+ }
+ }
+
+ $scope.$broadcast('review-panel:recalculate-screen-positions')
+ return $scope.$broadcast('review-panel:layout')
+ }
+ )
+
+ $scope.acceptChanges = function (change_ids) {
+ _doAcceptChanges(change_ids)
+ eventTracking.sendMB('rp-changes-accepted', {
+ view: $scope.ui.reviewPanelOpen ? $scope.reviewPanel.subView : 'mini',
+ })
+ }
+
+ $scope.rejectChanges = function (change_ids) {
+ _doRejectChanges(change_ids)
+ eventTracking.sendMB('rp-changes-rejected', {
+ view: $scope.ui.reviewPanelOpen ? $scope.reviewPanel.subView : 'mini',
+ })
+ }
+
+ var _doAcceptChanges = function (change_ids) {
+ $http.post(
+ `/project/${$scope.project_id}/doc/${$scope.editor.open_doc_id}/changes/accept`,
+ { change_ids, _csrf: window.csrfToken }
+ )
+ return $scope.$broadcast('changes:accept', change_ids)
+ }
+
+ var _doRejectChanges = change_ids =>
+ $scope.$broadcast('changes:reject', change_ids)
+
+ const bulkAccept = function () {
+ _doAcceptChanges($scope.reviewPanel.selectedEntryIds.slice())
+ eventTracking.sendMB('rp-bulk-accept', {
+ view: $scope.ui.reviewPanelOpen ? $scope.reviewPanel.subView : 'mini',
+ nEntries: $scope.reviewPanel.nVisibleSelectedChanges,
+ })
+ }
+
+ const bulkReject = function () {
+ _doRejectChanges($scope.reviewPanel.selectedEntryIds.slice())
+ eventTracking.sendMB('rp-bulk-reject', {
+ view: $scope.ui.reviewPanelOpen ? $scope.reviewPanel.subView : 'mini',
+ nEntries: $scope.reviewPanel.nVisibleSelectedChanges,
+ })
+ }
+
+ $scope.showBulkAcceptDialog = () => showBulkActionsDialog(true)
+
+ $scope.showBulkRejectDialog = () => showBulkActionsDialog(false)
+
+ var showBulkActionsDialog = isAccept =>
+ $modal
+ .open({
+ templateUrl: 'bulkActionsModalTemplate',
+ controller: 'BulkActionsModalController',
+ resolve: {
+ isAccept() {
+ return isAccept
+ },
+ nChanges() {
+ return $scope.reviewPanel.nVisibleSelectedChanges
+ },
+ },
+ scope: $scope.$new(),
+ })
+ .result.then(function (isAccept) {
+ if (isAccept) {
+ return bulkAccept()
+ } else {
+ return bulkReject()
+ }
+ })
+
+ $scope.handleTogglerClick = function (e) {
+ e.target.blur()
+ return $scope.toggleReviewPanel()
+ }
+
+ $scope.addNewComment = function () {
+ $scope.$broadcast('comment:start_adding')
+ return $scope.toggleReviewPanel()
+ }
+
+ $scope.addNewCommentFromKbdShortcut = function () {
+ if (!$scope.project.features.trackChangesVisible) {
+ return
+ }
+ $scope.$broadcast('comment:select_line')
+ if (!$scope.ui.reviewPanelOpen) {
+ $scope.toggleReviewPanel()
+ }
+ return $timeout(function () {
+ $scope.$broadcast('review-panel:layout')
+ return $scope.$broadcast('comment:start_adding')
+ })
+ }
+
+ $scope.startNewComment = function () {
+ $scope.$broadcast('comment:select_line')
+ return $timeout(() => $scope.$broadcast('review-panel:layout'))
+ }
+
+ $scope.submitNewComment = function (content) {
+ if (content == null || content === '') {
+ return
+ }
+ const doc_id = $scope.editor.open_doc_id
+ const entries = getDocEntries(doc_id)
+ if (entries['add-comment'] == null) {
+ return
+ }
+ const { offset, length } = entries['add-comment']
+ const thread_id = RangesTracker.generateId()
+ const thread = getThread(thread_id)
+ thread.submitting = true
+ $scope.$broadcast('comment:add', thread_id, offset, length)
+ $http
+ .post(`/project/${$scope.project_id}/thread/${thread_id}/messages`, {
+ content,
+ _csrf: window.csrfToken,
+ })
+ .catch(() =>
+ ide.showGenericMessageModal(
+ 'Error submitting comment',
+ 'Sorry, there was a problem submitting your comment'
+ )
+ )
+ $scope.$broadcast('editor:clearSelection')
+ $timeout(() => $scope.$broadcast('review-panel:layout'))
+ eventTracking.sendMB('rp-new-comment', { size: content.length })
+ }
+
+ $scope.cancelNewComment = entry =>
+ $timeout(() => $scope.$broadcast('review-panel:layout'))
+
+ $scope.startReply = function (entry) {
+ entry.replying = true
+ return $timeout(() => $scope.$broadcast('review-panel:layout'))
+ }
+
+ $scope.submitReply = function (entry, entry_id) {
+ const { thread_id } = entry
+ const content = entry.replyContent
+ $http
+ .post(`/project/${$scope.project_id}/thread/${thread_id}/messages`, {
+ content,
+ _csrf: window.csrfToken,
+ })
+ .catch(() =>
+ ide.showGenericMessageModal(
+ 'Error submitting comment',
+ 'Sorry, there was a problem submitting your comment'
+ )
+ )
+
+ const trackingMetadata = {
+ view: $scope.ui.reviewPanelOpen ? $scope.reviewPanel.subView : 'mini',
+ size: entry.replyContent.length,
+ thread: thread_id,
+ }
+
+ const thread = getThread(thread_id)
+ thread.submitting = true
+ entry.replyContent = ''
+ entry.replying = false
+ $timeout(() => $scope.$broadcast('review-panel:layout'))
+ eventTracking.sendMB('rp-comment-reply', trackingMetadata)
+ }
+
+ $scope.cancelReply = function (entry) {
+ entry.replying = false
+ entry.replyContent = ''
+ return $scope.$broadcast('review-panel:layout')
+ }
+
+ $scope.resolveComment = function (entry, entry_id) {
+ entry.focused = false
+ $http.post(
+ `/project/${$scope.project_id}/thread/${entry.thread_id}/resolve`,
+ { _csrf: window.csrfToken }
+ )
+ _onCommentResolved(entry.thread_id, ide.$scope.user)
+ eventTracking.sendMB('rp-comment-resolve', {
+ view: $scope.ui.reviewPanelOpen ? $scope.reviewPanel.subView : 'mini',
+ })
+ }
+
+ $scope.unresolveComment = function (thread_id) {
+ _onCommentReopened(thread_id)
+ $http.post(`/project/${$scope.project_id}/thread/${thread_id}/reopen`, {
+ _csrf: window.csrfToken,
+ })
+ eventTracking.sendMB('rp-comment-reopen')
+ }
+
+ var _onCommentResolved = function (thread_id, user) {
+ const thread = getThread(thread_id)
+ if (thread == null) {
+ return
+ }
+ thread.resolved = true
+ thread.resolved_by_user = formatUser(user)
+ thread.resolved_at = new Date().toISOString()
+ $scope.reviewPanel.resolvedThreadIds[thread_id] = true
+ return $scope.$broadcast('comment:resolve_threads', [thread_id])
+ }
+
+ var _onCommentReopened = function (thread_id) {
+ const thread = getThread(thread_id)
+ if (thread == null) {
+ return
+ }
+ delete thread.resolved
+ delete thread.resolved_by_user
+ delete thread.resolved_at
+ delete $scope.reviewPanel.resolvedThreadIds[thread_id]
+ return $scope.$broadcast('comment:unresolve_thread', thread_id)
+ }
+
+ var _onThreadDeleted = function (thread_id) {
+ delete $scope.reviewPanel.resolvedThreadIds[thread_id]
+ delete $scope.reviewPanel.commentThreads[thread_id]
+ return $scope.$broadcast('comment:remove', thread_id)
+ }
+
+ var _onCommentEdited = function (thread_id, comment_id, content) {
+ const thread = getThread(thread_id)
+ if (thread == null) {
+ return
+ }
+ for (const message of Array.from(thread.messages)) {
+ if (message.id === comment_id) {
+ message.content = content
+ }
+ }
+ return updateEntries()
+ }
+
+ var _onCommentDeleted = function (thread_id, comment_id) {
+ const thread = getThread(thread_id)
+ if (thread == null) {
+ return
+ }
+ thread.messages = thread.messages.filter(m => m.id !== comment_id)
+ return updateEntries()
+ }
+
+ $scope.deleteThread = function (entry_id, doc_id, thread_id) {
+ _onThreadDeleted(thread_id)
+ $http({
+ method: 'DELETE',
+ url: `/project/${$scope.project_id}/doc/${doc_id}/thread/${thread_id}`,
+ headers: {
+ 'X-CSRF-Token': window.csrfToken,
+ },
+ })
+ eventTracking.sendMB('rp-comment-delete')
+ }
+
+ $scope.saveEdit = function (thread_id, comment) {
+ $http.post(
+ `/project/${$scope.project_id}/thread/${thread_id}/messages/${comment.id}/edit`,
+ {
+ content: comment.content,
+ _csrf: window.csrfToken,
+ }
+ )
+ return $timeout(() => $scope.$broadcast('review-panel:layout'))
+ }
+
+ $scope.deleteComment = function (thread_id, comment) {
+ _onCommentDeleted(thread_id, comment.id)
+ $http({
+ method: 'DELETE',
+ url: `/project/${$scope.project_id}/thread/${thread_id}/messages/${comment.id}`,
+ headers: {
+ 'X-CSRF-Token': window.csrfToken,
+ },
+ })
+ return $timeout(() => $scope.$broadcast('review-panel:layout'))
+ }
+
+ $scope.setSubView = function (subView) {
+ $scope.reviewPanel.subView = subView
+ eventTracking.sendMB('rp-subview-change', { subView })
+ }
+
+ $scope.gotoEntry = (doc_id, entry) =>
+ ide.editorManager.openDocId(doc_id, { gotoOffset: entry.offset })
+
+ $scope.toggleFullTCStateCollapse = function () {
+ if ($scope.project.features.trackChanges) {
+ return ($scope.reviewPanel.fullTCStateCollapsed = !$scope.reviewPanel
+ .fullTCStateCollapsed)
+ } else {
+ _sendAnalytics()
+ return $scope.openTrackChangesUpgradeModal()
+ }
+ }
+
+ const _sendAnalytics = () => {
+ eventTracking.send(
+ 'subscription-funnel',
+ 'editor-click-feature',
+ 'real-time-track-changes'
+ )
+ eventTracking.sendMB('track-changes-paywall-prompt')
+ }
+
+ const _setUserTCState = function (userId, newValue, isLocal) {
+ if (isLocal == null) {
+ isLocal = false
+ }
+ if ($scope.reviewPanel.trackChangesState[userId] == null) {
+ $scope.reviewPanel.trackChangesState[userId] = {}
+ }
+ const state = $scope.reviewPanel.trackChangesState[userId]
+
+ if (
+ state.syncState == null ||
+ state.syncState === UserTCSyncState.SYNCED
+ ) {
+ state.value = newValue
+ state.syncState = UserTCSyncState.SYNCED
+ } else if (
+ state.syncState === UserTCSyncState.PENDING &&
+ state.value === newValue
+ ) {
+ state.syncState = UserTCSyncState.SYNCED
+ } else if (isLocal) {
+ state.value = newValue
+ state.syncState = UserTCSyncState.PENDING
+ }
+
+ if (userId === ide.$scope.user.id) {
+ return ($scope.editor.wantTrackChanges = newValue)
+ }
+ }
+
+ const _setEveryoneTCState = function (newValue, isLocal) {
+ if (isLocal == null) {
+ isLocal = false
+ }
+ $scope.reviewPanel.trackChangesOnForEveryone = newValue
+ const { project } = $scope
+ for (const member of Array.from(project.members)) {
+ _setUserTCState(member._id, newValue, isLocal)
+ }
+ _setGuestsTCState(newValue, isLocal)
+ return _setUserTCState(project.owner._id, newValue, isLocal)
+ }
+
+ var _setGuestsTCState = function (newValue, isLocal) {
+ if (isLocal == null) {
+ isLocal = false
+ }
+ $scope.reviewPanel.trackChangesOnForGuests = newValue
+ if (
+ currentUserType() === UserTypes.GUEST ||
+ currentUserType() === UserTypes.ANONYMOUS
+ ) {
+ return ($scope.editor.wantTrackChanges = newValue)
+ }
+ }
+
+ const applyClientTrackChangesStateToServer = function () {
+ const data = {}
+ if ($scope.reviewPanel.trackChangesOnForEveryone) {
+ data.on = true
+ } else {
+ data.on_for = {}
+ for (const userId in $scope.reviewPanel.trackChangesState) {
+ const userState = $scope.reviewPanel.trackChangesState[userId]
+ data.on_for[userId] = userState.value
+ }
+ if ($scope.reviewPanel.trackChangesOnForGuests) {
+ data.on_for_guests = true
+ }
+ }
+ data._csrf = window.csrfToken
+ return $http.post(`/project/${$scope.project_id}/track_changes`, data)
+ }
+
+ const applyTrackChangesStateToClient = function (state) {
+ if (typeof state === 'boolean') {
+ _setEveryoneTCState(state)
+ return _setGuestsTCState(state)
+ } else {
+ const { project } = $scope
+ $scope.reviewPanel.trackChangesOnForEveryone = false
+ _setGuestsTCState(state.__guests__ === true)
+ for (const member of Array.from(project.members)) {
+ _setUserTCState(
+ member._id,
+ state[member._id] != null ? state[member._id] : false
+ )
+ }
+ return _setUserTCState(
+ $scope.project.owner._id,
+ state[$scope.project.owner._id] != null
+ ? state[$scope.project.owner._id]
+ : false
+ )
+ }
+ }
+
+ $scope.toggleTrackChangesForEveryone = function (onForEveryone) {
+ _setEveryoneTCState(onForEveryone, true)
+ _setGuestsTCState(onForEveryone, true)
+ return applyClientTrackChangesStateToServer()
+ }
+
+ $scope.toggleTrackChangesForGuests = function (onForGuests) {
+ _setGuestsTCState(onForGuests, true)
+ return applyClientTrackChangesStateToServer()
+ }
+
+ $scope.toggleTrackChangesForUser = function (onForUser, userId) {
+ _setUserTCState(userId, onForUser, true)
+ return applyClientTrackChangesStateToServer()
+ }
+
+ ide.socket.on('toggle-track-changes', state =>
+ $scope.$apply(() => applyTrackChangesStateToClient(state))
+ )
+
+ $scope.toggleTrackChangesFromKbdShortcut = function () {
+ if (
+ !(
+ $scope.project.features.trackChangesVisible &&
+ $scope.project.features.trackChanges
+ )
+ ) {
+ return
+ }
+ return $scope.toggleTrackChangesForUser(
+ !$scope.reviewPanel.trackChangesState[ide.$scope.user.id].value,
+ ide.$scope.user.id
+ )
+ }
+
+ const setGuestFeatureBasedOnProjectAccessLevel = projectPublicAccessLevel =>
+ ($scope.reviewPanel.trackChangesForGuestsAvailable =
+ projectPublicAccessLevel === 'tokenBased')
+
+ const onToggleTrackChangesForGuestsAvailability = function (available) {
+ // If the feature is no longer available we need to turn off the guest flag
+ if (available) {
+ return
+ }
+ if (!$scope.reviewPanel.trackChangesOnForGuests) {
+ return
+ } // Already turned off
+ if ($scope.reviewPanel.trackChangesOnForEveryone) {
+ return
+ } // Overrides guest setting
+ return $scope.toggleTrackChangesForGuests(false)
+ }
+
+ $scope.$watch(
+ 'project.publicAccesLevel',
+ setGuestFeatureBasedOnProjectAccessLevel
+ )
+
+ $scope.$watch(
+ 'reviewPanel.trackChangesForGuestsAvailable',
+ function (available) {
+ if (available != null) {
+ return onToggleTrackChangesForGuestsAvailability(available)
+ }
+ }
+ )
+
+ let _inited = false
+ ide.$scope.$on('project:joined', function () {
+ if (_inited) {
+ return
+ }
+ const { project } = ide.$scope
+ if (project.features.trackChanges) {
+ applyTrackChangesStateToClient(project.trackChangesState)
+ } else {
+ applyTrackChangesStateToClient(false)
+ }
+ setGuestFeatureBasedOnProjectAccessLevel(project.publicAccesLevel)
+ return (_inited = true)
+ })
+
+ let _refreshingRangeUsers = false
+ const _refreshedForUserIds = {}
+ var refreshChangeUsers = function (refresh_for_user_id) {
+ if (refresh_for_user_id != null) {
+ if (_refreshedForUserIds[refresh_for_user_id] != null) {
+ // We've already tried to refresh to get this user id, so stop it looping
+ return
+ }
+ _refreshedForUserIds[refresh_for_user_id] = true
+ }
+
+ // Only do one refresh at once
+ if (_refreshingRangeUsers) {
+ return
+ }
+ _refreshingRangeUsers = true
+
+ return $http
+ .get(`/project/${$scope.project_id}/changes/users`)
+ .then(function (response) {
+ const users = response.data
+ _refreshingRangeUsers = false
+ $scope.users = {}
+ // Always include ourself, since if we submit an op, we might need to display info
+ // about it locally before it has been flushed through the server
+ if (
+ (ide.$scope.user != null ? ide.$scope.user.id : undefined) != null
+ ) {
+ $scope.users[ide.$scope.user.id] = formatUser(ide.$scope.user)
+ }
+ return (() => {
+ const result = []
+ for (const user of Array.from(users)) {
+ if (user.id != null) {
+ result.push(($scope.users[user.id] = formatUser(user)))
+ } else {
+ result.push(undefined)
+ }
+ }
+ return result
+ })()
+ })
+ .catch(() => (_refreshingRangeUsers = false))
+ }
+
+ let _threadsLoaded = false
+ var ensureThreadsAreLoaded = function () {
+ if (_threadsLoaded) {
+ // We get any updates in real time so only need to load them once.
+ return
+ }
+ _threadsLoaded = true
+ $scope.reviewPanel.loadingThreads = true
+ return $http
+ .get(`/project/${$scope.project_id}/threads`)
+ .then(function (response) {
+ const threads = response.data
+ $scope.reviewPanel.loadingThreads = false
+ for (var thread_id in $scope.reviewPanel.resolvedThreadIds) {
+ const _ = $scope.reviewPanel.resolvedThreadIds[thread_id]
+ delete $scope.reviewPanel.resolvedThreadIds[thread_id]
+ }
+ for (thread_id in threads) {
+ const thread = threads[thread_id]
+ for (const comment of Array.from(thread.messages)) {
+ formatComment(comment)
+ }
+ if (thread.resolved_by_user != null) {
+ thread.resolved_by_user = formatUser(thread.resolved_by_user)
+ $scope.reviewPanel.resolvedThreadIds[thread_id] = true
+ $scope.$broadcast('comment:resolve_threads', [thread_id])
+ }
+ }
+ $scope.reviewPanel.commentThreads = threads
+ return $timeout(() => $scope.$broadcast('review-panel:layout'))
+ })
+ }
+
+ var formatComment = function (comment) {
+ comment.user = formatUser(comment.user)
+ comment.timestamp = new Date(comment.timestamp)
+ return comment
+ }
+
+ var formatUser = function (user) {
+ let isSelf, name
+ const id =
+ (user != null ? user._id : undefined) ||
+ (user != null ? user.id : undefined)
+
+ if (id == null) {
+ return {
+ email: null,
+ name: 'Anonymous',
+ isSelf: false,
+ hue: ColorManager.ANONYMOUS_HUE,
+ avatar_text: 'A',
+ }
+ }
+ if (id === window.user_id) {
+ name = 'You'
+ isSelf = true
+ } else {
+ name = [user.first_name, user.last_name]
+ .filter(n => n != null && n !== '')
+ .join(' ')
+ if (name === '') {
+ name =
+ (user.email != null ? user.email.split('@')[0] : undefined) ||
+ 'Unknown'
+ }
+ isSelf = false
+ }
+ return {
+ id,
+ email: user.email,
+ name,
+ isSelf,
+ hue: ColorManager.getHueForUserId(id),
+ avatar_text: [user.first_name, user.last_name]
+ .filter(n => n != null)
+ .map(n => n[0])
+ .join(''),
+ }
+ }
+
+ $scope.openTrackChangesUpgradeModal = () =>
+ $modal.open({
+ templateUrl: 'trackChangesUpgradeModalTemplate',
+ controller: 'TrackChangesUpgradeModalController',
+ scope: $scope.$new(),
+ })
+ }
+)
diff --git a/services/web/frontend/js/ide/review-panel/controllers/TrackChangesUpgradeModalController.js b/services/web/frontend/js/ide/review-panel/controllers/TrackChangesUpgradeModalController.js
new file mode 100644
index 0000000000..9d1e619841
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/controllers/TrackChangesUpgradeModalController.js
@@ -0,0 +1,17 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.controller(
+ 'TrackChangesUpgradeModalController',
+ ($scope, $modalInstance) => ($scope.cancel = () => $modalInstance.dismiss())
+)
diff --git a/services/web/frontend/js/ide/review-panel/directives/addCommentEntry.js b/services/web/frontend/js/ide/review-panel/directives/addCommentEntry.js
new file mode 100644
index 0000000000..e844629bfe
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/addCommentEntry.js
@@ -0,0 +1,50 @@
+import App from '../../../base'
+let content = ''
+App.directive('addCommentEntry', () => ({
+ restrict: 'E',
+ templateUrl: 'addCommentEntryTemplate',
+ scope: {
+ onStartNew: '&',
+ onSubmit: '&',
+ onCancel: '&',
+ },
+ link(scope, element, attrs) {
+ scope.state = {
+ isAdding: false,
+ content: content,
+ }
+
+ scope.$on('comment:start_adding', () => scope.startNewComment())
+ scope.$on('$destroy', function () {
+ content = scope.state.content
+ })
+
+ scope.startNewComment = function () {
+ scope.state.isAdding = true
+ scope.onStartNew()
+ setTimeout(() => scope.$broadcast('comment:new:open'))
+ }
+
+ scope.cancelNewComment = function () {
+ scope.state.isAdding = false
+ scope.state.content = ''
+ scope.onCancel()
+ }
+
+ scope.handleCommentKeyPress = function (ev) {
+ if (ev.keyCode === 13 && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+ ev.preventDefault()
+ if (scope.state.content.length > 0) {
+ scope.submitNewComment()
+ }
+ }
+ }
+
+ scope.submitNewComment = function (event) {
+ scope.onSubmit({ content: scope.state.content })
+ content = scope.state.content
+ scope.state.isAdding = false
+ scope.state.content = ''
+ }
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/aggregateChangeEntry.js b/services/web/frontend/js/ide/review-panel/directives/aggregateChangeEntry.js
new file mode 100644
index 0000000000..354f3b2491
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/aggregateChangeEntry.js
@@ -0,0 +1,67 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('aggregateChangeEntry', $timeout => ({
+ restrict: 'E',
+ templateUrl: 'aggregateChangeEntryTemplate',
+ scope: {
+ entry: '=',
+ user: '=',
+ permissions: '=',
+ onAccept: '&',
+ onReject: '&',
+ onIndicatorClick: '&',
+ onBodyClick: '&',
+ },
+ link(scope, element, attrs) {
+ scope.contentLimit = 17
+ scope.isDeletionCollapsed = true
+ scope.isInsertionCollapsed = true
+ scope.deletionNeedsCollapsing = false
+ scope.insertionNeedsCollapsing = false
+
+ element.on('click', function (e) {
+ if (
+ $(e.target).is(
+ '.rp-entry, .rp-entry-description, .rp-entry-body, .rp-entry-action-icon i'
+ )
+ ) {
+ return scope.onBodyClick()
+ }
+ })
+
+ scope.toggleDeletionCollapse = function () {
+ scope.isDeletionCollapsed = !scope.isDeletionCollapsed
+ return $timeout(() => scope.$emit('review-panel:layout'))
+ }
+
+ scope.toggleInsertionCollapse = function () {
+ scope.isInsertionCollapsed = !scope.isInsertionCollapsed
+ return $timeout(() => scope.$emit('review-panel:layout'))
+ }
+
+ scope.$watch(
+ 'entry.metadata.replaced_content.length',
+ deletionContentLength =>
+ (scope.deletionNeedsCollapsing =
+ deletionContentLength > scope.contentLimit)
+ )
+
+ return scope.$watch(
+ 'entry.content.length',
+ insertionContentLength =>
+ (scope.insertionNeedsCollapsing =
+ insertionContentLength > scope.contentLimit)
+ )
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/bulkActionsEntry.js b/services/web/frontend/js/ide/review-panel/directives/bulkActionsEntry.js
new file mode 100644
index 0000000000..be154d2d7f
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/bulkActionsEntry.js
@@ -0,0 +1,25 @@
+/* eslint-disable
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('bulkActionsEntry', () => ({
+ restrict: 'E',
+ templateUrl: 'bulkActionsEntryTemplate',
+ scope: {
+ onBulkAccept: '&',
+ onBulkReject: '&',
+ nEntries: '=',
+ },
+ link(scope, element, attrs) {
+ scope.bulkAccept = () => scope.onBulkAccept()
+ return (scope.bulkReject = () => scope.onBulkReject())
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/changeEntry.js b/services/web/frontend/js/ide/review-panel/directives/changeEntry.js
new file mode 100644
index 0000000000..fe8dc799d2
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/changeEntry.js
@@ -0,0 +1,52 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('changeEntry', $timeout => ({
+ restrict: 'E',
+ templateUrl: 'changeEntryTemplate',
+ scope: {
+ entry: '=',
+ user: '=',
+ permissions: '=',
+ onAccept: '&',
+ onReject: '&',
+ onIndicatorClick: '&',
+ onBodyClick: '&',
+ },
+ link(scope, element, attrs) {
+ scope.contentLimit = 40
+ scope.isCollapsed = true
+ scope.needsCollapsing = false
+
+ element.on('click', function (e) {
+ if (
+ $(e.target).is(
+ '.rp-entry, .rp-entry-description, .rp-entry-body, .rp-entry-action-icon i'
+ )
+ ) {
+ return scope.onBodyClick()
+ }
+ })
+
+ scope.toggleCollapse = function () {
+ scope.isCollapsed = !scope.isCollapsed
+ return $timeout(() => scope.$emit('review-panel:layout'))
+ }
+
+ return scope.$watch(
+ 'entry.content.length',
+ contentLength =>
+ (scope.needsCollapsing = contentLength > scope.contentLimit)
+ )
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/commentEntry.js b/services/web/frontend/js/ide/review-panel/directives/commentEntry.js
new file mode 100644
index 0000000000..f603afd4df
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/commentEntry.js
@@ -0,0 +1,90 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('commentEntry', $timeout => ({
+ restrict: 'E',
+ templateUrl: 'commentEntryTemplate',
+ scope: {
+ entry: '=',
+ threads: '=',
+ permissions: '=',
+ onResolve: '&',
+ onReply: '&',
+ onIndicatorClick: '&',
+ onSaveEdit: '&',
+ onDelete: '&',
+ onBodyClick: '&',
+ },
+ link(scope, element, attrs) {
+ scope.state = { animating: false }
+
+ element.on('click', function (e) {
+ if (
+ $(e.target).is(
+ '.rp-entry, .rp-comment-loaded, .rp-comment-content, .rp-comment-reply, .rp-entry-metadata'
+ )
+ ) {
+ return scope.onBodyClick()
+ }
+ })
+
+ scope.handleCommentReplyKeyPress = function (ev) {
+ if (ev.keyCode === 13 && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+ ev.preventDefault()
+ if (scope.entry.replyContent.length > 0) {
+ ev.target.blur()
+ return scope.onReply()
+ }
+ }
+ }
+
+ scope.animateAndCallOnResolve = function () {
+ scope.state.animating = true
+ element.find('.rp-entry').css('top', 0)
+ $timeout(() => scope.onResolve(), 350)
+ return true
+ }
+
+ scope.startEditing = function (comment) {
+ comment.editing = true
+ return setTimeout(() => scope.$emit('review-panel:layout'))
+ }
+
+ scope.saveEdit = function (comment) {
+ comment.editing = false
+ return scope.onSaveEdit({ comment })
+ }
+
+ scope.confirmDelete = function (comment) {
+ comment.deleting = true
+ return setTimeout(() => scope.$emit('review-panel:layout'))
+ }
+
+ scope.cancelDelete = function (comment) {
+ comment.deleting = false
+ return setTimeout(() => scope.$emit('review-panel:layout'))
+ }
+
+ scope.doDelete = function (comment) {
+ comment.deleting = false
+ return scope.onDelete({ comment })
+ }
+
+ return (scope.saveEditOnEnter = function (ev, comment) {
+ if (ev.keyCode === 13 && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+ ev.preventDefault()
+ return scope.saveEdit(comment)
+ }
+ })
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/resolvedCommentEntry.js b/services/web/frontend/js/ide/review-panel/directives/resolvedCommentEntry.js
new file mode 100644
index 0000000000..4404203937
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/resolvedCommentEntry.js
@@ -0,0 +1,36 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('resolvedCommentEntry', () => ({
+ restrict: 'E',
+ templateUrl: 'resolvedCommentEntryTemplate',
+ scope: {
+ thread: '=',
+ permissions: '=',
+ onUnresolve: '&',
+ onDelete: '&',
+ },
+ link(scope, element, attrs) {
+ scope.contentLimit = 40
+ scope.needsCollapsing = false
+ scope.isCollapsed = true
+
+ scope.toggleCollapse = () => (scope.isCollapsed = !scope.isCollapsed)
+
+ return scope.$watch(
+ 'thread.content.length',
+ contentLength =>
+ (scope.needsCollapsing = contentLength > scope.contentLimit)
+ )
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/resolvedCommentsDropdown.js b/services/web/frontend/js/ide/review-panel/directives/resolvedCommentsDropdown.js
new file mode 100644
index 0000000000..da37b51964
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/resolvedCommentsDropdown.js
@@ -0,0 +1,109 @@
+import _ from 'lodash'
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('resolvedCommentsDropdown', () => ({
+ restrict: 'E',
+ templateUrl: 'resolvedCommentsDropdownTemplate',
+ scope: {
+ entries: '=',
+ threads: '=',
+ resolvedIds: '=',
+ docs: '=',
+ permissions: '=',
+ onOpen: '&',
+ onUnresolve: '&',
+ onDelete: '&',
+ isLoading: '=',
+ },
+
+ link(scope, element, attrs) {
+ let filterResolvedComments
+ scope.state = { isOpen: false }
+
+ scope.toggleOpenState = function () {
+ scope.state.isOpen = !scope.state.isOpen
+ if (scope.state.isOpen) {
+ return scope.onOpen().then(() => filterResolvedComments())
+ }
+ }
+
+ scope.resolvedComments = []
+
+ scope.handleUnresolve = function (threadId) {
+ scope.onUnresolve({ threadId })
+ return (scope.resolvedComments = scope.resolvedComments.filter(
+ c => c.threadId !== threadId
+ ))
+ }
+
+ scope.handleDelete = function (entryId, docId, threadId) {
+ scope.onDelete({ entryId, docId, threadId })
+ return (scope.resolvedComments = scope.resolvedComments.filter(
+ c => c.threadId !== threadId
+ ))
+ }
+
+ const getDocNameById = function (docId) {
+ const doc = _.find(scope.docs, doc => doc.doc.id === docId)
+ if (doc != null) {
+ return doc.path
+ } else {
+ return null
+ }
+ }
+
+ return (filterResolvedComments = function () {
+ scope.resolvedComments = []
+
+ return (() => {
+ const result = []
+ for (var docId in scope.entries) {
+ var docEntries = scope.entries[docId]
+ result.push(
+ (() => {
+ const result1 = []
+ for (const entryId in docEntries) {
+ const entry = docEntries[entryId]
+ if (
+ entry.type === 'comment' &&
+ (scope.threads[entry.thread_id] != null
+ ? scope.threads[entry.thread_id].resolved
+ : undefined) != null
+ ) {
+ const resolvedComment = angular.copy(
+ scope.threads[entry.thread_id]
+ )
+
+ resolvedComment.content = entry.content
+ resolvedComment.threadId = entry.thread_id
+ resolvedComment.entryId = entryId
+ resolvedComment.docId = docId
+ resolvedComment.docName = getDocNameById(docId)
+
+ result1.push(scope.resolvedComments.push(resolvedComment))
+ } else {
+ result1.push(undefined)
+ }
+ }
+ return result1
+ })()
+ )
+ }
+ return result
+ })()
+ })
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/reviewPanelCollapseHeight.js b/services/web/frontend/js/ide/review-panel/directives/reviewPanelCollapseHeight.js
new file mode 100644
index 0000000000..1b39a3408f
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/reviewPanelCollapseHeight.js
@@ -0,0 +1,34 @@
+/* eslint-disable
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('reviewPanelCollapseHeight', $parse => ({
+ restrict: 'A',
+ link(scope, element, attrs) {
+ return scope.$watch(
+ () => $parse(attrs.reviewPanelCollapseHeight)(scope),
+ function (shouldCollapse) {
+ const neededHeight = element.prop('scrollHeight')
+ if (neededHeight > 0) {
+ if (shouldCollapse) {
+ return element.animate({ height: 0 }, 150)
+ } else {
+ return element.animate({ height: neededHeight }, 150)
+ }
+ } else {
+ if (shouldCollapse) {
+ return element.height(0)
+ }
+ }
+ }
+ )
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/reviewPanelSorted.js b/services/web/frontend/js/ide/review-panel/directives/reviewPanelSorted.js
new file mode 100644
index 0000000000..01861316c3
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/reviewPanelSorted.js
@@ -0,0 +1,233 @@
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('reviewPanelSorted', $timeout => ({
+ link(scope, element, attrs) {
+ let previous_focused_entry_index = 0
+
+ const layout = function (animate) {
+ let entry,
+ height,
+ i,
+ original_top,
+ overflowTop,
+ OVERVIEW_TOGGLE_HEIGHT,
+ PADDING,
+ TOOLBAR_HEIGHT,
+ top
+ if (animate == null) {
+ animate = true
+ }
+ if (animate) {
+ element.removeClass('no-animate')
+ } else {
+ element.addClass('no-animate')
+ }
+ if (scope.ui.reviewPanelOpen) {
+ PADDING = 8
+ TOOLBAR_HEIGHT = 38
+ OVERVIEW_TOGGLE_HEIGHT = 57
+ } else {
+ PADDING = 4
+ TOOLBAR_HEIGHT = 4
+ OVERVIEW_TOGGLE_HEIGHT = 0
+ }
+
+ const entries = []
+ for (const el of Array.from(element.find('.rp-entry-wrapper'))) {
+ entry = {
+ $indicator_el: $(el).find('.rp-entry-indicator'),
+ $box_el: $(el).find('.rp-entry'),
+ $callout_el: $(el).find('.rp-entry-callout'),
+ scope: angular.element(el).scope(),
+ }
+ if (scope.ui.reviewPanelOpen) {
+ entry.$layout_el = entry.$box_el
+ } else {
+ entry.$layout_el = entry.$indicator_el
+ }
+ entry.height = entry.$layout_el.height() // Do all of our DOM reads first for perfomance, see http://wilsonpage.co.uk/preventing-layout-thrashing/
+ entries.push(entry)
+ }
+ entries.sort((a, b) => a.scope.entry.offset - b.scope.entry.offset)
+
+ if (entries.length === 0) {
+ return
+ }
+
+ const line_height = scope.reviewPanel.rendererData.lineHeight
+
+ let focused_entry_index = Math.min(
+ previous_focused_entry_index,
+ entries.length - 1
+ )
+ for (i = 0; i < entries.length; i++) {
+ entry = entries[i]
+ if (entry.scope.entry.focused) {
+ focused_entry_index = i
+ break
+ }
+ }
+ const entries_after = entries.slice(focused_entry_index + 1)
+ const entries_before = entries.slice(0, focused_entry_index)
+ const focused_entry = entries[focused_entry_index]
+ previous_focused_entry_index = focused_entry_index
+
+ sl_console.log('focused_entry_index', focused_entry_index)
+
+ const positionLayoutEl = function ($callout_el, original_top, top) {
+ if (original_top <= top) {
+ $callout_el.removeClass('rp-entry-callout-inverted')
+ return $callout_el.css({
+ top: original_top + line_height - 1,
+ height: top - original_top,
+ })
+ } else {
+ $callout_el.addClass('rp-entry-callout-inverted')
+ return $callout_el.css({
+ top: top + line_height,
+ height: original_top - top,
+ })
+ }
+ }
+
+ // Put the focused entry as close to where it wants to be as possible
+ const focused_entry_top = Math.max(
+ focused_entry.scope.entry.screenPos.y,
+ TOOLBAR_HEIGHT
+ )
+ focused_entry.$box_el.css({
+ top: focused_entry_top,
+ // The entry element is invisible by default, to avoid flickering when positioning for
+ // the first time. Here we make sure it becomes visible after having a "top" value.
+ visibility: 'visible',
+ })
+ focused_entry.$indicator_el.css({ top: focused_entry_top })
+ positionLayoutEl(
+ focused_entry.$callout_el,
+ focused_entry.scope.entry.screenPos.y,
+ focused_entry_top
+ )
+
+ let previousBottom = focused_entry_top + focused_entry.$layout_el.height()
+ for (entry of Array.from(entries_after)) {
+ original_top = entry.scope.entry.screenPos.y
+ ;({ height } = entry)
+ top = Math.max(original_top, previousBottom + PADDING)
+ previousBottom = top + height
+ entry.$box_el.css({
+ top,
+ // The entry element is invisible by default, to avoid flickering when positioning for
+ // the first time. Here we make sure it becomes visible after having a "top" value.
+ visibility: 'visible',
+ })
+ entry.$indicator_el.css({ top })
+ positionLayoutEl(entry.$callout_el, original_top, top)
+ sl_console.log('ENTRY', { entry: entry.scope.entry, top })
+ }
+
+ const lastBottom = previousBottom
+
+ let previousTop = focused_entry_top
+ entries_before.reverse() // Work through backwards, starting with the one just above
+ for (i = 0; i < entries_before.length; i++) {
+ entry = entries_before[i]
+ original_top = entry.scope.entry.screenPos.y
+ ;({ height } = entry)
+ const original_bottom = original_top + height
+ const bottom = Math.min(original_bottom, previousTop - PADDING)
+ top = bottom - height
+ previousTop = top
+ entry.$box_el.css({
+ top,
+ // The entry element is invisible by default, to avoid flickering when positioning for
+ // the first time. Here we make sure it becomes visible after having a "top" value.
+ visibility: 'visible',
+ })
+ entry.$indicator_el.css({ top })
+ positionLayoutEl(entry.$callout_el, original_top, top)
+ sl_console.log('ENTRY', { entry: entry.scope.entry, top })
+ }
+
+ const lastTop = top
+ if (lastTop < TOOLBAR_HEIGHT) {
+ overflowTop = -lastTop + TOOLBAR_HEIGHT
+ } else {
+ overflowTop = 0
+ }
+ return scope.$emit('review-panel:sizes', {
+ overflowTop,
+ height: previousBottom + OVERVIEW_TOGGLE_HEIGHT,
+ })
+ }
+
+ scope.$applyAsync(() => layout())
+
+ scope.$on('review-panel:layout', function (e, animate) {
+ if (animate == null) {
+ animate = true
+ }
+ return scope.$applyAsync(() => layout(animate))
+ })
+
+ scope.$watch('reviewPanel.rendererData.lineHeight', () => layout())
+
+ // # Scroll lock with Ace
+ const scroller = element
+ const list = element.find('.rp-entry-list-inner')
+
+ // If we listen for scroll events in the review panel natively, then with a Mac trackpad
+ // the scroll is very smooth (natively done I'd guess), but we don't get polled regularly
+ // enough to keep Ace in step, and it noticeably lags. If instead, we borrow the manual
+ // mousewheel/trackpad scrolling behaviour from Ace, and turn mousewheel events into
+ // scroll events ourselves, then it makes the review panel slightly less smooth (barely)
+ // noticeable, but keeps it perfectly in step with Ace.
+ ace
+ .require('ace/lib/event')
+ .addMouseWheelListener(scroller[0], function (e) {
+ const deltaY = e.wheelY
+ const old_top = parseInt(list.css('top'))
+ const top = old_top - deltaY * 4
+ scrollAce(-top)
+ return e.preventDefault()
+ })
+
+ // We always scroll by telling Ace to scroll and then updating the
+ // review panel. This lets Ace manage the size of the scroller and
+ // when it overflows.
+ let ignoreNextAceEvent = false
+
+ const scrollPanel = function (scrollTop, height) {
+ if (ignoreNextAceEvent) {
+ return (ignoreNextAceEvent = false)
+ } else {
+ const ignoreNextPanelEvent = true
+ list.height(height)
+ // console.log({height, scrollTop, top: height - scrollTop})
+ return list.css({ top: -scrollTop })
+ }
+ }
+
+ var scrollAce = scrollTop =>
+ scope.reviewPanelEventsBridge.emit('externalScroll', scrollTop)
+
+ scope.reviewPanelEventsBridge.on('aceScroll', scrollPanel)
+ scope.$on('$destroy', () => scope.reviewPanelEventsBridge.off('aceScroll'))
+
+ return scope.reviewPanelEventsBridge.emit('refreshScrollPosition')
+ },
+}))
diff --git a/services/web/frontend/js/ide/review-panel/directives/reviewPanelToggle.js b/services/web/frontend/js/ide/review-panel/directives/reviewPanelToggle.js
new file mode 100644
index 0000000000..85c19b320b
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/directives/reviewPanelToggle.js
@@ -0,0 +1,51 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.directive('reviewPanelToggle', () => ({
+ restrict: 'E',
+ scope: {
+ onToggle: '&',
+ ngModel: '=',
+ valWhenUndefined: '=?',
+ isDisabled: '=?',
+ onDisabledClick: '&?',
+ description: '@',
+ },
+ link(scope) {
+ if (scope.disabled == null) {
+ scope.disabled = false
+ }
+ scope.onChange = (...args) => scope.onToggle({ isOn: scope.localModel })
+ scope.handleClick = function () {
+ if (scope.disabled && scope.onDisabledClick != null) {
+ return scope.onDisabledClick()
+ }
+ }
+ scope.localModel = scope.ngModel
+ return scope.$watch('ngModel', function (value) {
+ if (scope.valWhenUndefined != null && value == null) {
+ value = scope.valWhenUndefined
+ }
+ return (scope.localModel = value)
+ })
+ },
+
+ template: `\
+\
+`,
+}))
diff --git a/services/web/frontend/js/ide/review-panel/filters/notEmpty.js b/services/web/frontend/js/ide/review-panel/filters/notEmpty.js
new file mode 100644
index 0000000000..747d630ce7
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/filters/notEmpty.js
@@ -0,0 +1,11 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+export default App.filter('notEmpty', () => object =>
+ !angular.equals({}, object)
+)
diff --git a/services/web/frontend/js/ide/review-panel/filters/numKeys.js b/services/web/frontend/js/ide/review-panel/filters/numKeys.js
new file mode 100644
index 0000000000..862fd46f4e
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/filters/numKeys.js
@@ -0,0 +1,21 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.filter(
+ 'numKeys',
+ () =>
+ function (object) {
+ if (object != null) {
+ return Object.keys(object).length
+ } else {
+ return 0
+ }
+ }
+)
diff --git a/services/web/frontend/js/ide/review-panel/filters/orderOverviewEntries.js b/services/web/frontend/js/ide/review-panel/filters/orderOverviewEntries.js
new file mode 100644
index 0000000000..7ba26cdc47
--- /dev/null
+++ b/services/web/frontend/js/ide/review-panel/filters/orderOverviewEntries.js
@@ -0,0 +1,23 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.filter(
+ 'orderOverviewEntries',
+ () =>
+ function (items) {
+ const array = []
+ for (const key in items) {
+ const value = items[key]
+ value.entry_id = key
+ array.push(value)
+ }
+ array.sort((a, b) => a.offset - b.offset)
+ return array
+ }
+)
diff --git a/services/web/frontend/js/ide/services/ide.js b/services/web/frontend/js/ide/services/ide.js
new file mode 100644
index 0000000000..2a3ccd596c
--- /dev/null
+++ b/services/web/frontend/js/ide/services/ide.js
@@ -0,0 +1,168 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS103: Rewrite code to no longer use __guard__
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../base'
+import EditorWatchdogManager from '../connection/EditorWatchdogManager'
+// We create and provide this as service so that we can access the global ide
+// from within other parts of the angular app.
+App.factory(
+ 'ide',
+ function ($http, queuedHttp, $modal, $q, $filter, $timeout, eventTracking) {
+ const ide = {}
+ ide.$http = $http
+ ide.queuedHttp = queuedHttp
+ ide.$q = $q
+ ide.$filter = $filter
+ ide.$timeout = $timeout
+ ide.globalEditorWatchdogManager = new EditorWatchdogManager({
+ onTimeoutHandler: meta => {
+ eventTracking.sendMB('losing-edits', meta)
+ // clone the meta object, reportError adds additional fields into it
+ ide.reportError('losing-edits', Object.assign({}, meta))
+ },
+ })
+
+ this.recentEvents = []
+ ide.pushEvent = (type, meta) => {
+ if (meta == null) {
+ meta = {}
+ }
+ sl_console.log('event', type, meta)
+ this.recentEvents.push({ type, meta, date: new Date() })
+ if (this.recentEvents.length > 100) {
+ return this.recentEvents.shift()
+ }
+ }
+
+ ide.reportError = (error, meta) => {
+ if (meta == null) {
+ meta = {}
+ }
+ meta.user_id = window.user_id
+ meta.project_id = window.project_id
+ meta.client_id = __guard__(
+ ide.socket != null ? ide.socket.socket : undefined,
+ x => x.sessionid
+ )
+ meta.transport = __guard__(
+ __guard__(
+ ide.socket != null ? ide.socket.socket : undefined,
+ x2 => x2.transport
+ ),
+ x1 => x1.name
+ )
+ meta.client_now = new Date()
+ meta.recent_events = this.recentEvents
+ const errorObj = {}
+ if (typeof error === 'object') {
+ for (const key of Array.from(Object.getOwnPropertyNames(error))) {
+ errorObj[key] = error[key]
+ }
+ } else if (typeof error === 'string') {
+ errorObj.message = error
+ }
+ return $http.post('/error/client', {
+ error: errorObj,
+ meta,
+ _csrf: window.csrfToken,
+ })
+ }
+
+ ide.showGenericMessageModal = (title, message) =>
+ $modal.open({
+ templateUrl: 'genericMessageModalTemplate',
+ controller: 'GenericMessageModalController',
+ resolve: {
+ title() {
+ return title
+ },
+ message() {
+ return message
+ },
+ },
+ })
+
+ ide.showOutOfSyncModal = (title, message, editorContent) =>
+ $modal.open({
+ templateUrl: 'outOfSyncModalTemplate',
+ controller: 'OutOfSyncModalController',
+ backdrop: false, // not dismissable by clicking background
+ keyboard: false, // prevent dismiss via keyboard
+ resolve: {
+ title() {
+ return title
+ },
+ message() {
+ return message
+ },
+ editorContent() {
+ return editorContent
+ },
+ },
+ windowClass: 'out-of-sync-modal',
+ })
+
+ ide.showLockEditorMessageModal = (title, message) =>
+ // modal to block the editor when connection is down
+ $modal.open({
+ templateUrl: 'lockEditorModalTemplate',
+ controller: 'GenericMessageModalController',
+ backdrop: false, // not dismissable by clicking background
+ keyboard: false, // prevent dismiss via keyboard
+ resolve: {
+ title() {
+ return title
+ },
+ message() {
+ return message
+ },
+ },
+ windowClass: 'lock-editor-modal',
+ })
+
+ return ide
+ }
+)
+
+App.controller(
+ 'GenericMessageModalController',
+ function ($scope, $modalInstance, title, message) {
+ $scope.title = title
+ $scope.message = message
+
+ return ($scope.done = () => $modalInstance.close())
+ }
+)
+
+App.controller(
+ 'OutOfSyncModalController',
+ function ($scope, $window, title, message, editorContent) {
+ $scope.title = title
+ $scope.message = message
+ $scope.editorContent = editorContent
+ $scope.editorContentRows = editorContent.split('\n').length
+
+ $scope.done = () => {
+ // Reload the page to avoid staying in an inconsistent state.
+ // https://github.com/overleaf/issues/issues/3694
+ $window.location.reload()
+ }
+ }
+)
+
+function __guard__(value, transform) {
+ return typeof value !== 'undefined' && value !== null
+ ? transform(value)
+ : undefined
+}
diff --git a/services/web/frontend/js/ide/settings/controllers/ProjectNameController.js b/services/web/frontend/js/ide/settings/controllers/ProjectNameController.js
new file mode 100644
index 0000000000..f19ed81481
--- /dev/null
+++ b/services/web/frontend/js/ide/settings/controllers/ProjectNameController.js
@@ -0,0 +1,77 @@
+/* eslint-disable
+ max-len,
+ no-return-assign,
+ no-unused-vars,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+const MAX_PROJECT_NAME_LENGTH = 150
+
+export default App.controller(
+ 'ProjectNameController',
+ function ($scope, $element, settings, ide) {
+ const projectNameReadOnlyEl = $element.find('.name')[0]
+
+ $scope.state = {
+ renaming: false,
+ overflowed: false,
+ }
+
+ $scope.inputs = {}
+
+ $scope.startRenaming = function () {
+ $scope.inputs.name = $scope.project.name
+ $scope.state.renaming = true
+ return $scope.$emit('project:rename:start')
+ }
+
+ $scope.finishRenaming = function () {
+ $scope.state.renaming = false
+ const newName = $scope.inputs.name
+ if ($scope.project.name === newName) {
+ return
+ }
+ const oldName = $scope.project.name
+ $scope.project.name = newName
+ return settings
+ .saveProjectSettings({ name: $scope.project.name })
+ .catch(function (response) {
+ const { data, status } = response
+ $scope.project.name = oldName
+ if (status === 400) {
+ return ide.showGenericMessageModal('Error renaming project', data)
+ } else {
+ return ide.showGenericMessageModal(
+ 'Error renaming project',
+ 'Please try again in a moment'
+ )
+ }
+ })
+ }
+
+ ide.socket.on('projectNameUpdated', name =>
+ $scope.$apply(() => ($scope.project.name = name))
+ )
+
+ return $scope.$watch('project.name', function (name) {
+ if (name != null) {
+ window.document.title =
+ name + ` - Online LaTeX Editor ${ExposedSettings.appName}`
+ return $scope.$applyAsync(
+ () =>
+ // This ensures that the element is measured *after* the binding is done (i.e. project name is rendered).
+ ($scope.state.overflowed =
+ projectNameReadOnlyEl.scrollWidth >
+ projectNameReadOnlyEl.clientWidth)
+ )
+ }
+ })
+ }
+)
diff --git a/services/web/frontend/js/ide/settings/controllers/SettingsController.js b/services/web/frontend/js/ide/settings/controllers/SettingsController.js
new file mode 100644
index 0000000000..70954bdeec
--- /dev/null
+++ b/services/web/frontend/js/ide/settings/controllers/SettingsController.js
@@ -0,0 +1,233 @@
+import _ from 'lodash'
+/* eslint-disable
+ camelcase,
+ max-len,
+ no-return-assign,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+import isValidTeXFile from '../../../main/is-valid-tex-file'
+
+export default App.controller(
+ 'SettingsController',
+ function ($scope, settings, ide) {
+ $scope.overallThemesList = window.overallThemes
+ $scope.ui = { loadingStyleSheet: false }
+
+ const _updateCSSFile = function (theme) {
+ $scope.ui.loadingStyleSheet = true
+ const docHeadEl = document.querySelector('head')
+ const oldStyleSheetEl = document.getElementById('main-stylesheet')
+ const newStyleSheetEl = document.createElement('link')
+ newStyleSheetEl.addEventListener('load', e => {
+ return $scope.$applyAsync(() => {
+ $scope.ui.loadingStyleSheet = false
+ return docHeadEl.removeChild(oldStyleSheetEl)
+ })
+ })
+ newStyleSheetEl.setAttribute('rel', 'stylesheet')
+ newStyleSheetEl.setAttribute('id', 'main-stylesheet')
+ newStyleSheetEl.setAttribute('href', theme.path)
+ return docHeadEl.appendChild(newStyleSheetEl)
+ }
+
+ if (!['default', 'vim', 'emacs'].includes($scope.settings.mode)) {
+ $scope.settings.mode = 'default'
+ }
+
+ if (!['pdfjs', 'native'].includes($scope.settings.pdfViewer)) {
+ $scope.settings.pdfViewer = 'pdfjs'
+ }
+
+ if (
+ $scope.settings.fontFamily != null &&
+ !['monaco', 'lucida'].includes($scope.settings.fontFamily)
+ ) {
+ delete $scope.settings.fontFamily
+ }
+
+ if (
+ $scope.settings.lineHeight != null &&
+ !['compact', 'normal', 'wide'].includes($scope.settings.lineHeight)
+ ) {
+ delete $scope.settings.lineHeight
+ }
+
+ $scope.fontSizeAsStr = function (newVal) {
+ if (newVal != null) {
+ $scope.settings.fontSize = newVal
+ }
+ return $scope.settings.fontSize.toString()
+ }
+
+ $scope.getValidMainDocs = () => {
+ let filteredDocs = []
+ if ($scope.docs) {
+ // Filter the existing docs (editable files) by accepted file extensions.
+ // It's possible that an existing project has an invalid file selected as the main one.
+ // To gracefully handle that case, make sure we also show the current main file (ignoring extension).
+ filteredDocs = $scope.docs.filter(
+ doc =>
+ isValidTeXFile(doc.doc.name) ||
+ $scope.project.rootDoc_id === doc.doc.id
+ )
+ }
+ return filteredDocs
+ }
+
+ $scope.$watch('settings.editorTheme', (editorTheme, oldEditorTheme) => {
+ if (editorTheme !== oldEditorTheme) {
+ return settings.saveSettings({ editorTheme })
+ }
+ })
+
+ $scope.$watch('settings.overallTheme', (overallTheme, oldOverallTheme) => {
+ if (overallTheme !== oldOverallTheme) {
+ const chosenTheme = _.find(
+ $scope.overallThemesList,
+ theme => theme.val === overallTheme
+ )
+ if (chosenTheme != null) {
+ _updateCSSFile(chosenTheme)
+ return settings.saveSettings({ overallTheme })
+ }
+ }
+ })
+
+ $scope.$watch('settings.fontSize', (fontSize, oldFontSize) => {
+ if (fontSize !== oldFontSize) {
+ return settings.saveSettings({ fontSize: parseInt(fontSize, 10) })
+ }
+ })
+
+ $scope.$watch('settings.mode', (mode, oldMode) => {
+ if (mode !== oldMode) {
+ return settings.saveSettings({ mode })
+ }
+ })
+
+ $scope.$watch('settings.autoComplete', (autoComplete, oldAutoComplete) => {
+ if (autoComplete !== oldAutoComplete) {
+ return settings.saveSettings({ autoComplete })
+ }
+ })
+
+ $scope.$watch(
+ 'settings.autoPairDelimiters',
+ (autoPairDelimiters, oldAutoPairDelimiters) => {
+ if (autoPairDelimiters !== oldAutoPairDelimiters) {
+ return settings.saveSettings({ autoPairDelimiters })
+ }
+ }
+ )
+
+ $scope.$watch('settings.pdfViewer', (pdfViewer, oldPdfViewer) => {
+ if (pdfViewer !== oldPdfViewer) {
+ return settings.saveSettings({ pdfViewer })
+ }
+ })
+
+ $scope.$watch(
+ 'settings.syntaxValidation',
+ (syntaxValidation, oldSyntaxValidation) => {
+ if (syntaxValidation !== oldSyntaxValidation) {
+ return settings.saveSettings({ syntaxValidation })
+ }
+ }
+ )
+
+ $scope.$watch('settings.fontFamily', (fontFamily, oldFontFamily) => {
+ if (fontFamily !== oldFontFamily) {
+ return settings.saveSettings({ fontFamily })
+ }
+ })
+
+ $scope.$watch('settings.lineHeight', (lineHeight, oldLineHeight) => {
+ if (lineHeight !== oldLineHeight) {
+ return settings.saveSettings({ lineHeight })
+ }
+ })
+
+ $scope.$watch('project.spellCheckLanguage', (language, oldLanguage) => {
+ if (this.ignoreUpdates) {
+ return
+ }
+ if (oldLanguage != null && language !== oldLanguage) {
+ settings.saveProjectSettings({ spellCheckLanguage: language })
+ // Also set it as the default for the user
+ return settings.saveSettings({ spellCheckLanguage: language })
+ }
+ })
+
+ $scope.$watch('project.compiler', (compiler, oldCompiler) => {
+ if (this.ignoreUpdates) {
+ return
+ }
+ if (oldCompiler != null && compiler !== oldCompiler) {
+ return settings.saveProjectSettings({ compiler })
+ }
+ })
+
+ $scope.$watch('project.imageName', (imageName, oldImageName) => {
+ if (this.ignoreUpdates) {
+ return
+ }
+ if (oldImageName != null && imageName !== oldImageName) {
+ return settings.saveProjectSettings({ imageName })
+ }
+ })
+
+ $scope.$watch('project.rootDoc_id', (rootDoc_id, oldRootDoc_id) => {
+ if (this.ignoreUpdates) {
+ return
+ }
+ // don't save on initialisation, Angular passes oldRootDoc_id as
+ // undefined in this case.
+ if (typeof oldRootDoc_id === 'undefined') {
+ return
+ }
+ if ($scope.permissionsLevel === 'readOnly') {
+ // The user is unauthorized to persist rootDoc changes.
+ // Use the new value for this very editor session only.
+ return
+ }
+ // otherwise only save changes, null values are allowed
+ if (rootDoc_id !== oldRootDoc_id) {
+ settings.saveProjectSettings({ rootDocId: rootDoc_id }).catch(() => {
+ $scope.project.rootDoc_id = oldRootDoc_id
+ })
+ }
+ })
+
+ ide.socket.on('compilerUpdated', compiler => {
+ this.ignoreUpdates = true
+ $scope.$apply(() => {
+ return ($scope.project.compiler = compiler)
+ })
+ return delete this.ignoreUpdates
+ })
+
+ ide.socket.on('imageNameUpdated', imageName => {
+ this.ignoreUpdates = true
+ $scope.$apply(() => {
+ return ($scope.project.imageName = imageName)
+ })
+ return delete this.ignoreUpdates
+ })
+
+ return ide.socket.on('spellCheckLanguageUpdated', languageCode => {
+ this.ignoreUpdates = true
+ $scope.$apply(() => {
+ return ($scope.project.spellCheckLanguage = languageCode)
+ })
+ return delete this.ignoreUpdates
+ })
+ }
+)
diff --git a/services/web/frontend/js/ide/settings/index.js b/services/web/frontend/js/ide/settings/index.js
new file mode 100644
index 0000000000..0d15bf6b2d
--- /dev/null
+++ b/services/web/frontend/js/ide/settings/index.js
@@ -0,0 +1,5 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+import './services/settings'
+import './controllers/SettingsController'
+import './controllers/ProjectNameController'
diff --git a/services/web/frontend/js/ide/settings/services/settings.js b/services/web/frontend/js/ide/settings/services/settings.js
new file mode 100644
index 0000000000..8b96aeb017
--- /dev/null
+++ b/services/web/frontend/js/ide/settings/services/settings.js
@@ -0,0 +1,41 @@
+/* eslint-disable
+ camelcase,
+ max-len,
+*/
+// TODO: This file was created by bulk-decaffeinate.
+// Fix any style issues and re-enable lint.
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+import App from '../../../base'
+
+export default App.factory('settings', (ide, eventTracking) => ({
+ saveSettings(data) {
+ // Tracking code.
+ for (const key of Array.from(Object.keys(data))) {
+ const changedSetting = key
+ const changedSettingVal = data[key]
+ eventTracking.sendMB('setting-changed', {
+ changedSetting,
+ changedSettingVal,
+ })
+ }
+ // End of tracking code.
+
+ data._csrf = window.csrfToken
+ return ide.$http.post('/user/settings', data)
+ },
+
+ saveProjectSettings(data) {
+ data._csrf = window.csrfToken
+ return ide.$http.post(`/project/${ide.project_id}/settings`, data)
+ },
+
+ saveProjectAdminSettings(data) {
+ data._csrf = window.csrfToken
+ return ide.$http.post(`/project/${ide.project_id}/settings/admin`, data)
+ },
+}))
diff --git a/services/web/frontend/js/ide/wordcount/index.js b/services/web/frontend/js/ide/wordcount/index.js
new file mode 100644
index 0000000000..0a6113a914
--- /dev/null
+++ b/services/web/frontend/js/ide/wordcount/index.js
@@ -0,0 +1 @@
+import '../../features/word-count-modal/controllers/word-count-modal-controller'
diff --git a/services/web/frontend/js/infrastructure/error-boundary.js b/services/web/frontend/js/infrastructure/error-boundary.js
new file mode 100644
index 0000000000..1384b93abe
--- /dev/null
+++ b/services/web/frontend/js/infrastructure/error-boundary.js
@@ -0,0 +1,34 @@
+import { captureException } from './error-reporter'
+import { ErrorBoundary } from 'react-error-boundary'
+
+function errorHandler(error, componentStack) {
+ captureException(error, scope => {
+ scope.setExtra('componentStack', componentStack)
+ scope.setTag('handler', 'react-error-boundary')
+ return scope
+ })
+}
+
+function DefaultFallbackComponent() {
+ return <>
+}
+
+function withErrorBoundary(WrappedComponent, FallbackComponent) {
+ function ErrorBoundaryWrapper(props) {
+ return (
+