\n );\n }\n}\n\nexport default StickerReaction;\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { observable } from 'mobx';\nimport { OnboardingIllustrationWrapper } from '@seedlang/hoc';\nimport styled from '@emotion/styled';\nimport { AppUI } from '@seedlang/state';\nimport Text from 'components/text';\nimport autobind from 'autobind-decorator';\nimport { pixify } from '@seedlang/utils';\nimport StickerImage from 'components/sticker_image';\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100px;\n background: #FFF;\n margin-bottom: 20px;\n`;\n\nconst ImageWrapper = styled.div`\n img {\n height: 80px;\n }\n`;\n\nconst SpeechBubble = styled.div`\n position: relative;\n background-color: #fff;\n border-radius: 10px;\n padding: 15px;\n width: 260px;\n border: 2px solid #CCC;\n font-size: 15px;\n font-weight: bold;\n color: #333;\n margin-left: 20px;\n min-height: ${props => props.minHeight};\n`;\n\nconst ArrowWrapper = styled.div`\n position: absolute;\n left: -17px;\n top: 15px;\n`;\n\n@observer\nclass OnboardingIllustration extends React.Component {\n\n render () {\n return (\n ![](\"/images/speech_bubble_arrow.png\"){kind=icon}
\n You have already connected your Patreon account.
\n {`Please sign in with your ${AppUI.user?.site?.displayName} or Seedlang Credentials`}
\n \n \n this.email = el.target.value}\n />\n
\n \n \n this.password = el.target.value}\n />\n
\n \n
\n )\n }\n \n \n );\n }\n}\n\nexport default AuthenticateSignin;\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { observable, computed } from 'mobx';\nimport { AuthenticateStore } from '@seedlang/stores';\nimport AuthenticateStatus from 'components/authenticate/authenticate_status';\nimport { ServerStore } from '@seedlang/stores';\nimport FormWrapper from 'components/authenticate/form_wrapper';\nimport Text from 'components/text';\nimport Button from 'components/button/button';\nimport { isValidEmail } from '@seedlang/utils';\nimport autobind from 'autobind-decorator';\nimport { Theme } from '@seedlang/constants';\nimport Spinner from 'components/spinner';\nimport { AppUI } from '@seedlang/state';\n\n@observer\nclass AuthenticateForgotPassword extends React.Component {\n @observable email = '';\n @observable submitting = false;\n\n @computed get disabled() {\n return !isValidEmail(this.email);\n }\n\n componentDidMount() {\n ServerStore.clearMessages();\n }\n\n @autobind onSubmit(e) {\n e.preventDefault();\n if (!this.disabled) {\n this.submitting = true;\n AuthenticateStore.sendResetPasswordInstructions({data: {\n email: this.email,\n }}, this.afterSubmit);\n }\n }\n\n @autobind afterSubmit() {\n this.submitting = false;\n }\n\n render() {\n return (\n \n Please click the link in the email we have sent you.\n
\n\n Please allow a few minutes for the email to arrive and check your Spam folder.\n
\n\n The confirmation email has been resent.\n
\n\n Please allow a few minutes for the email to arrive and check your Spam folder.\n
\n\n Your email address is now confirmed.\n
\n {\n this.nextStep?.path &&\n \n{this.props.title}
\n }\n \nPatreon Account Details
\nPatreon Email
\n {AppUI.authUserStore.showData.patreonUser.email}
\n
Membership Type
\n {AppUI.authUserStore.showData.patreonUser.rewardTitle}
\n
\n
\n );\n }\n}\n\nexport default WhitelabelLogo;\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { computed, observable } from 'mobx';\nimport { OnboardingRegistrationWrapper } from '@seedlang/hoc';\nimport styled from '@emotion/styled';\nimport AuthenticateSignin from 'components/authenticate/authenticate_signin';\nimport AuthenticateForgotPassword from 'components/authenticate/authenticate_forgot_password';\nimport AuthenticateConfirm from 'components/authenticate/authenticate_confirm';\nimport Button from 'components/button/button';\nimport autobind from 'autobind-decorator';\nimport { AppUI } from '@seedlang/state';\nimport { flexCenterColumn } from '@seedlang/style_mixins';\nimport { CloseIcon } from '@seedlang/icons';\nimport Spinner from 'components/spinner';\nimport { isBlank, isPresent, sleep } from '@seedlang/utils';\nimport Alert from 'components/alert';\nimport WhitelabelLogo from \"components/whitelabel_logo\";\nimport { Link } from \"react-router\";\nimport { Theme } from '@seedlang/constants';\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 20px 0;\n position: relative;\n .patreon-logo {\n border-radius: 4px;\n width: 17px;\n margin-right: 5px;\n margin-top: 3px;\n }\n .fa-warning {\n color: #333!important;\n }\n .facebook-button {\n margin: 0 0 10px 0!important;\n }\n button {\n width: 100%;\n }\n label {\n font-size: 14px;\n margin-bottom: 0;\n }\n .form-wrapper {\n padding: 0;\n }\n`;\n\nconst RegisterButton = styled.div`\n position: relative;\n color: #FFF;\n margin: -10px 0 10px 0;\n display: flex;\n align-items: center;\n background: #333;\n padding: 5px;\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n cursor: pointer;\n img {\n width: 18px;\n margin-right: 5px;\n }\n`;\n\nconst Content = styled.div`\n ${flexCenterColumn()}\n width: 100%;\n`;\n\nconst TextLink = styled.div`\n cursor: pointer;\n font-size: 14px;\n text-decoration: underline;\n margin: ${props => props.margin};\n a {\n color: ${props => props.color};\n }\n color: ${props => props.color};\n`;\n\nconst AuthLinkWrapper = styled.div`\n margin: ${props => props.margin};\n width: 100%;\n text-align: center;\n margin-top: 20px;\n`;\n\nconst CloseIconWrapper = styled.div`\n position: absolute;\n top: 60px;\n right: -10px;\n .close-icon {\n width: 30px;\n }\n svg {\n width: 30px;\n fill: #333;\n }\n margin-top: -50px;\n`;\n\nconst WhitePanel = styled.div`\n padding: 20px;\n background: whitesmoke;\n border-radius: 10px;\n width: 100%;\n`;\n\nconst LogoWrapper = styled.div`\n width: 100%;\n display: flex;\n justify-content: center;\n padding: 20px;\n .img {\n width: 190px;\n }\n`;\n\nconst PatreonLink = styled.div`\n font-size: 14px;\n`;\n\n\n@observer\nclass OnboardingWhitelabelRegistration extends React.Component {\n @observable submittedRegistration = false;\n @observable authType = this.props.authType;\n\n static defaultProps = {\n authType: 'registration',\n }\n\n constructor(props) {\n super(props);\n AppUI.createEvent('onboarding - view sign up', {device: 'web'});\n this.initState();\n }\n\n async initState() {\n await sleep(1); // wait for routeName to update after navigation\n const routeName = AppUI.routeStore.routeName;\n\n switch (routeName) {\n case 'onboarding.confirm':\n this.authType = 'confirmEmail';\n break;\n case 'onboarding.sign_in':\n this.authType = 'signIn';\n break;\n case 'onboarding.forgot_password':\n this.authType = 'forgotPassword';\n break;\n }\n }\n\n componentDidMount() {\n if (AppUI.user?.id && !AppUI.user.guest && this.authType === 'signIn') {\n AppUI.routeToHome();\n }\n }\n\n @computed get groupId() {\n return window.location.href.split(\"/group/\")[1];\n }\n\n @autobind afterRegistration() {\n this.submittedRegistration = true;\n this.props.afterRegistration();\n }\n\n @autobind reset() {\n this.submittedRegistration = false;\n this.authType = 'registration';\n AppUI.set('expandedEmailRegistrationFields', false);\n }\n\n @autobind signIn() {\n this.authType = 'signIn';\n }\n\n @autobind onClickForgotPassword() {\n this.authType = 'forgotPassword';\n }\n\n @autobind gotoMemberships() {\n AppUI.routeStore.routeToNamed('memberships.index');\n }\n\n @autobind onConfirmationRequired(unconfirmedDetails) {\n this.authType = 'confirmEmail';\n }\n\n render() {\n return (\n \n Waiting for confirmation from the payment provider. This should take a few seconds... \n {\n this.loading ? (\n Cancel \n )\n }\n {\n !this.props.hideContactLink &&\n
\n )\n }\n\n {\n this.paymentMigration.status === 'waiting_for_patreon_cancellation' && (\n <>\n {\n this.loading ? (\n Payment Details Added Successfully
\n Now, let's finalize your switch from Patreon to unlock all features:
\n\n \n \n I've Cancelled My Patreon Membership\n \n \n You'll still maintain access to your perks and will only be charged once you subscription ends. \n
\n )\n }\n {\n !this.props.hideContactLink &&\n Thank You for Migrating Your Payment Method
}\n {\n !this.isYearly &&\nWe will start charging you {this.currencySymbol}{dollar(this.costMonthly)}.{cents(this.costMonthly)} / month once your subscription on Patreon has expired.
\n }\n {\n this.isYearly &&\nWe will start charging you {this.currencySymbol}{dollar(this.cost)}.{cents(this.cost)} / year once your subscription on Patreon has expired.
\n }\nIn the meantime, please enjoy all the benefits and perks connected to your membership.
\n {\n !this.props.onboarding &&\nSetup complete.
\nSetup complete.
\nYou're all set!
\nMigrate Your Payment Method?
\n }\n {\n isPresent(AppUI.user.paymentMigration) &&\n \n Become a Member\n
\n \n \n \n {\n this.showWorksheets &&\n
\n }\n You have successfully connected to Patreon and your Easy Catalan Membership account has been created with the following email address:
\n {AppUI.user?.email}
\n Please create a password for future logins using the email address above.
\n \n \n this.password = e.currentTarget.value}\n style={{marginBottom: 10}}\n />\n
\n\n \n \n this.passwordConfirmation = e.currentTarget.value}\n />\n
\n\n \n {this.props.dateString}\n
\n \n {`${this.props.dailyXpCount.xp || 0} Total XP`}\n
\n {\n this.props.xpBreakdowns && this.props.xpBreakdowns.map((item) => {\n return (\n What is XP?
\nXP stands for \"experience points\", and is given for performing learning activities across Seedlang.
\nWhat is a Streak?
\nA \"streak\" is the number of consecutive days in which you meet your XP requirements.
\nWhat if I lose my streak?
\nYou can extend your streak by an extra day by reaching {AppUI.user.streakExtendGoal}XP in one day.
\nThis can be enabled or disabled on the settings page.
\nIf you are a Pro member, you can also repair your streak once a month by clicking this button.
\nCan I update my time zone?
\nYes, you can do this by going to your settings page.
\n\n\n \n
\n );\n }\n}\n\nexport default SeedlangLogoWithBold;\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { computed } from 'mobx';\nimport ErrorBoundary from 'components/hoc/error_boundary.js';\nimport styled from '@emotion/styled';\nimport { Link } from 'react-router';\nimport ReactTooltip from 'react-tooltip';\nimport { Theme } from '@seedlang/constants';\nimport { isPresent } from '@seedlang/utils';\n\nconst Wrapper = styled.div`\n border-radius: ${(props) => props.borderRadius};\n padding: ${(props) => props.padding};\n background: ${(props) => props.selected ? (props.bgHover || \"#14c7f1\") : (props.background || \"#1499b7\")};\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin: 0 0 0 10px;\n font-weight: 400;\n color: white;\n font-size: 14px;\n height: 40px;\n position: relative;\n &:hover {\n background: ${props => props.bgHover ? props.bgHover : '#14c7f1'}; ;\n }\n .classroom-icon {\n svg {\n margin-top: -5px;\n width: 24px;\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n svg {\n fill: #FFF;\n width: ${(props) => props.width};\n margin: ${(props) => props.margin};\n }\n`;\n\nconst TextWrapper = styled.div`\n margin-left: ${props => props.marginLeft};\n font-size: ${props => props.fontSize};\n`;\n\nconst Label = styled.div`\n background: ${props => props.background || Theme.green};\n color: white;\n font-size: 11px;\n line-height: 13px;\n padding: 1px 5px 2px 5px;\n position: absolute;\n left: -3px;\n top: -3px;\n border-radius: 5px;\n border: 2px solid rgba(255, 255, 255, 0.8);\n`;\n\n@observer\nclass HeaderLink extends React.Component {\n\n @computed get padding() {\n if (this.props.padding) {\n return this.props.padding;\n }\n return this.props.showText ? \"8px 10px\" : \"8px 15px\";\n }\n\n static defaultProps = {\n iconWidth: \"20px\",\n textMarginLeft: \"5px\"\n }\n\n render() {\n return (\n - \n {\n this.props.languageIds.map(item => {\n return (\n
\n Go Pro\n {\n AppUI.user.discount && AppUI.layout.viewportWidth > 899 &&\n - 47% Off\n }\n
\n \n \n }\n {\n !this.simplifiedHeader && AppUI.userIsSignedIn && !AppUI.user.guest &&\n - \n
- \n
- \n
- \n Admin\n \n }\n {\n (AppUI.user.admin || AppUI.user.translator) &&\n
- \n
- \n Video\n \n }\n
\n }\n
\n }\n {\n AppUI.userIsSignedInAndNotGuest &&\n
\n Become a Member\n
\n \n \n }\n {\n !AppUI.whiteLabelMobileView && (!AppUI.userIsSignedIn || AppUI.user.guest) &&\n - \n
- \n
- \n \n Admin\n \n \n }\n
- \n {\n this.props.links.map(item => {\n return (\n
![](\"/images/seedlang_mark.png\")
\n Powered by Seedlang\n ![](\"/images/instagram_icon.png\"){kind=icon}
\n ![](\"/images/tiktok_icon.png\"){kind=icon}
\n ![](\"/images/youtube_icon.png\"){kind=icon}
\n \n \n {\n times(this.props.numSegments, (num) => {\n return (\n \n
\n );\n }\n}\n\nexport default Meter;\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { observable } from 'mobx';\nimport autobind from 'autobind-decorator';\nimport styled from '@emotion/styled';\nimport { Theme } from '@seedlang/constants';\nimport { pixify } from '@seedlang/utils';\n\nconst Wrapper = styled.div`\n width: 100%;\n overflow: hidden;\n flex: 1;\n height: 20px;\n display: flex;\n align-items: ${(props) => props.alignItems};\n justify-content: center;\n`;\n\nconst ProgressBackground = styled.div`\n cursor: pointer;\n width: 100%;\n position: relative;\n transition: all 0.2s ease;\n height: 8px;\n border-radius: 10px;\n background: #CCC;\n`;\n\nconst Bar = styled.div`\n background: ${(props) => props.background};\n width: ${(props) => props.width};\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n border-top-left-radius: 10px;\n border-bottom-left-radius: 10px;\n pointer-events: none;\n`;\n\n@observer\nclass AudioPlayerProgress extends React.Component {\n @observable hoverPercentage = 0;\n @observable mousedOver = false;\n\n static defaultProps = {\n alignItems: \"center\",\n }\n\n componentWillUnmount() {\n this.reset();\n }\n\n progressPosition() {\n let position;\n if (this.refs.progressBar) {\n position = (this.refs.progressBar.offsetWidth) * (this.props.currentTime / this.props.duration);\n }\n return isNaN(position) || !position ? 0 : position;\n }\n\n @autobind getHoverPercentage(e) {\n this.hoverPercentage = ((e.pageX - this.refs.progressBar.getBoundingClientRect().left) / this.refs.progressBar.offsetWidth) * 100;\n }\n\n @autobind onMouseOver(e) {\n this.mousedOver = true;\n window.addEventListener('mousemove', this.getHoverPercentage, true);\n }\n\n @autobind reset() {\n this.hoverPercentage = 0;\n this.mousedOver = false;\n window.removeEventListener('mousemove', this.getHoverPercentage, true);\n }\n\n @autobind onClick() {\n if (this.props.onClick) {\n this.props.onClick(this.hoverPercentage);\n }\n }\n\n render() {\n return (\n - \n
\n {this.props.description}: {kFormatter(this.props.current)}\n
\n \n Next level: {kFormatter(this.props.currentGoal)}\n
\n \n \n );\n }\n}\n\nexport default BadgeWrapper(Badge);\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport Badge from 'components/badge';\nimport { CommunityBadgeIcon, SentencewriterIcon, PluralIcon, TranslateIcon, BrainIcon, TriviamasterIcon, DerDieDasIcon, MagnifyWordsIcon, BookIcon, ShakespeareIcon, MicrophoneBadgeIcon, CardsIcon, ClockfaceIcon } from '@seedlang/icons';\nimport { BadgeCollectionWrapper } from '@seedlang/hoc';\nimport styled from '@emotion/styled';\nimport { AppUI } from '@seedlang/state';\n\nconst Wrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n width: 100%;\n`;\n\nconst EmptyBadges = styled.div`\n padding: 0 20px 20px 20px;\n font-weight: bold;\n`;\n\nconst ICONS = {\n sentencewriter: SentencewriterIcon,\n storyteller: ShakespeareIcon,\n interviewMe: MicrophoneBadgeIcon,\n deckmaster: CardsIcon,\n backInTime: ClockfaceIcon,\n storymaster: BookIcon,\n gendermaster: DerDieDasIcon,\n vocabmaster: MagnifyWordsIcon,\n brainiac: BrainIcon,\n triviamaster: TriviamasterIcon,\n translationmaster: TranslateIcon,\n pluralmaster: PluralIcon,\n community: CommunityBadgeIcon,\n};\n\n@observer\nclass BadgeCollection extends React.Component {\n\n render() {\n return (\n {this.props.targetLanguage.xp.toLocaleString('en')} total XP
\n \n \n );\n }\n}\n\nexport default ErrorBoundary(LevelBadgeWithFlag);\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { computed } from 'mobx';\nimport ErrorBoundary from 'components/hoc/error_boundary.js';\nimport Text from 'components/text';\n\n@observer\nclass TriviaRecordScore extends React.Component {\n\n @computed get fontSize() {\n const numDigits = this.props.won.toString().length + this.props.lost.toString().length;\n const fontSizes = {8: 15, 7: 18, 6: 21, 5: 23, 4: 26, 3:31, 2: 36};\n return fontSizes[numDigits];\n }\n\n render() {\n return (\n \n {`${this.props.won} Games Won`}\n
\n \n {`${this.props.lost} Games Lost`}\n
\n \n {`${this.props.tied} Games Tied`}\n
\n \n \n );\n }\n}\n\nexport default ErrorBoundary(TriviaRecord);\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport ErrorBoundary from 'components/hoc/error_boundary.js';\nimport styled from '@emotion/styled';\nimport { pixify } from '@seedlang/utils';\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n padding: 2px 5px;\n border-radius: 5px;\n width: ${(props) => props.width};\n margin: 0 2px;\n background: #e8e8e8;\n justify-content: center;\n`;\n\nconst Icon = styled.div`\n width: 8px;\n height: 8px;\n background-color: ${(props) => props.backgroundColor};\n color: white;\n`;\n\nconst Label = styled.div`\n font-weight: bold;\n font-size: ${(props) => props.fontSize};\n margin: 0 5px;\n`;\n\n@observer\nclass Legend extends React.Component {\n\n static defaultProps = {\n width: \"110px\",\n fontSize: 12,\n }\n\n render() {\n return (\n ![\"\"](\"/images/empty_daily_review_summaries_chart.png\"){kind=spacer}
\n \n }\n {\n !this.loading && !AppUI.user.isMember &&\n \n \n }\n {\n this.loading && Markdown Formatting
\n\nHere are some of our markdown styling options. Copy and paste some of this text into your post to see how it works, and then edit it to make it your own!
\n\n Header Text
\n\n# Header Text (biggest)
\n ## Header Text (next biggest)
\n ### Header Text (next biggest)
\n\n Bolding and Italics
\n\nItalics with *asterisks* or _underscores_.
\n Bold with **asterisks** or __underscores__.
\n Italics and bold with **_asterisks and underscores_**.
\n\n Tables
\n\n \n\nLinks
\n\n[I'm a link](https://www.google.com)
\n\n Images
\n\n
\n\n Horizontal Rules
\n\nThree or more dashes create a line: ---
\n \n \n \n {this.props.message}\n \n {\n !this.props.showCloseButton &&\n \n \n Yes\n \n \n No\n \n \n }\n {\n this.props.showCloseButton &&\n \n \n Close\n \n \n }\n \n
\n );\n }\n}\n\nexport default Confirmation;","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { observable } from 'mobx';\nimport styled from '@emotion/styled';\nimport Confirmation from \"../confirmation\";\nimport ReactTooltip from 'react-tooltip';\nimport { AppUI } from '@seedlang/state';\nimport autobind from 'autobind-decorator';\n\nconst Wrapper = styled.div`\n position: relative;\n display: flex;\n margin: ${props => props.margin};\n`;\n\n@observer\nclass DeleteButton extends React.Component {\n @observable showConfirmation = false;\n\n constructor (props) {\n super();\n this.id = Math.random();\n }\n\n static defaultProps = {\n right: \"40px\",\n left: \"auto\",\n top: \"-30px\",\n faIcon: \"fa-times\",\n }\n\n @autobind onConfirm() {\n this.showConfirmation = false;\n if ((AppUI.user.canDeleteRecords || this.props.allowDeletion) && this.props.onConfirm) {\n this.props.onConfirm();\n }\n }\n\n render() {\n return (\n 
\n \n \n \n {\n Constants.FEEDBACK_OPTIONS.map(item => {\n if (isBlank(item.site) || item.site.includes(AppUI.site.id)) {\n return (\n this.props.onClick(item.feedbackType)}\n >\n \n \n
\n );\n }\n}\n\nexport default ErrorBoundary(FeedbackPicker);\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport { FeedbackListWrapper } from '@seedlang/hoc';\nimport styled from '@emotion/styled';\nimport { Constants } from '@seedlang/constants';\nimport ReactTooltip from 'react-tooltip';\nimport { AppUI } from '@seedlang/state';\nimport FeedbackItem from 'components/feedback/feedback_item';\nimport Emoticon from 'components/feedback/emoticon';\nimport { isPresent } from '@seedlang/utils';\n\nconst Wrapper = styled.div`\n display: flex;\n margin-top: 10px;\n overflow: auto;\n`;\n\nconst Count = styled.div`\n margin-left: 5px;\n color: #333;\n font-size: 11px;\n font-weight: bold;\n`;\n\nconst TooltipText = styled.div`\n font-size: 12px;\n`;\n\n@observer\nclass FeedbackList extends React.Component {\n\n render() {\n return (\n {item.users.filter(item => isPresent(item.name)).map(item => item.name && item.name.trim()).join(\", \")}
\n reacted with :{item.feedbackType}:
\n \");\n }\n\n @computed get htmlSource() {\n if (this.props.htmlText) {\n return this.props.htmlText;\n } else if (this.props.markdown) {\n return this.formatNewline(this.md.enable(['newline']).render(this.props.markdown));\n } return null;\n }\n\n\n\n render() {\n return (\n
Move Thread
\n {\n ForumUI.forumStore.indexData.map(item => {\n if (item.title !== 'All Forums') {\n return (\n- \n
\n \n \n {this.props.children}\n \n
\n \n {\n this.messageIsDisplayed &&\n \n { this.props.message }\n
\n );\n }\n return ;\n }\n\n render() {\n return this._error();\n }\n}\n\nexport default FormError;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { observer } from 'mobx-react';\nimport FormLabel from 'components/form_factory/form_label';\nimport FormError from 'components/form_factory/form_error';\nimport autobind from 'autobind-decorator';\nimport styled from '@emotion/styled';\n\nconst Wrapper = styled.div`\n margin: ${(props) => props.margin};\n`;\n\n@observer\nclass FormInput extends React.Component {\n\n static propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.string,\n required: PropTypes.bool,\n store: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n form: PropTypes.object.isRequired,\n disabled: PropTypes.bool,\n defaultValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),\n type: PropTypes.string,\n };\n\n static defaultProps = {\n disabled: false,\n defaultValue: '',\n type: 'text',\n margin: '0 0 10px 0',\n }\n\n constructor(props) {\n super(props);\n this.props.form.registerComponent(this.props);\n }\n\n componentWillUnmount() {\n // this.props.form.unregisterComponent(this.props);\n }\n\n @autobind onChange() {\n this.props.onChange(this.props.name, this.refs.input.value);\n }\n\n getValue() {\n return this.props.store.formCache[this.props.name] || '';\n }\n\n getError() {\n return this.props.store.getError(this.props.name);\n }\n\n name() {\n if (this.props.name.indexOf('.') !== -1) {\n const ary = this.props.name.split('.');\n return `${ary[0]}[${ary[1]}]`;\n }\n return this.props.name;\n }\n\n render() {\n return (\n - \n {\n isPresent(this.props.value) && this.props.value.map((item) => {\n return (\n
- {item.id} \n )\n })\n }\n
- \n {\n this.props.options && this.props.options.map((item) => {\n return (\n
\n
\n );\n }\n}\n\nexport default UserSearch;\n","import React from 'react';\nimport { observer } from 'mobx-react';\nimport autobind from 'autobind-decorator';\nimport { pixify } from '@seedlang/utils';\nimport { ChatUI, AppUI } from '@seedlang/state';\nimport UserProfileImages from 'components/user/user_profile_images';\nimport DeleteButton from 'components/button/delete_button';\nimport Form from 'components/form_factory/form';\nimport FormFactory from 'components/form_factory/form_factory';\nimport UserSearch from 'components/user_search';\nimport styled from '@emotion/styled';\nimport Button from 'components/button/button';\nimport { Theme } from '@seedlang/constants';\n\nconst Wrapper = styled.div`\n margin: 10px;\n overflow: auto;\n height: ${(props) => props.height};\n input[type=\"checkbox\"] {\n width: 30px;\n }\n`;\n\nconst SearchWrapper = styled.div`\n margin: 10px 0 0 0;\n`;\n\n@observer\nclass ChatCreatorEdit extends React.Component {\n\n // this.userStore.setFilter('id', `![${this.chatStore.formCache.users.map(item => item.id)}]`, {refresh: true});\n\n constructor(props) {\n super(props);\n this.form = new FormFactory(ChatUI.chatStore, {\n ids: {chatId: this.props.params.chatId},\n onAfterCreate: this.onAfterCreateChat,\n onAfterUpdate: ChatUI.onAfterUpdateChat,\n });\n ChatUI.chatStore.registerFormField('users', true);\n if (props.params.chatId) {\n ChatUI.chatStore.initializeFormCacheValue('users', ChatUI.chatStore.showData.users);\n }\n if (props.params && props.params.userId) {\n ChatUI.userStore.getShow({ids: {userId: props.params.userId}}, this.afterGetUser)\n }\n }\n\n componentWillUnmount() {\n ChatUI.userStore.clearIndexData();\n }\n\n @autobind onAfterCreateChat(resp) {\n ChatUI.chatStore.getIndex({}, ChatUI.afterGetIndex.bind(ChatUI));\n if (ChatUI.layout.isMobile) {\n ChatUI.clearOverlays();\n } else {\n AppUI.gotoChat(resp.id);\n }\n }\n\n @autobind onToggleUserInFormData(user) {\n if (user.id === ChatUI.user.id) { return null }\n if (ChatUI.chatStore.formCache.users.find(item => item.id === user.id)) {\n ChatUI.chatStore.formCache.users = ChatUI.chatStore.formCache.users.filter(item => item.id !== user.id);\n } else {\n ChatUI.chatStore.formCache.users.push(user);\n }\n }\n\n @autobind onClear() {\n if (this.form.store.dirtyForm) {\n this.form.onClear();\n }\n }\n\n @autobind afterGetUser(resp) {\n ChatUI.userStore.setShowData(resp);\n ChatUI.chatStore.formCache.users.push(ChatUI.userStore.showData);\n ChatUI.chatStore.resetPristine();\n }\n\n fields() {\n return (\n \n { this.form.input({ name: 'title', required: true }) }\n
\n )\n }\n\n render() {\n return (\n \n \n
\n \n {\n (!DeckUI.deck.triviaDeck || DeckUI.user.admin) &&\n this.props.resetCard()}\n disabled={this.props.disableResetCard}\n >\n DeckUI.skipAnimationGotoLastCard()}\n disabled={DeckUI.userDeck.currentUserCardIsFirstInDeck}\n >\n DeckUI.skipAnimationNextCard()}\n disabled={DeckUI.isLastCard}\n >\n DeckUI.gotoDeckGrammar()}\n >\n DeckUI.resetDeck()}\n >\n DeckUI.gotoShortcuts()}\n >\n DeckUI.gotoDeckSettings()}\n >\n DeckUI.gotoReportBug()}\n >\n
\n \n \n \n
\n Previous Card\n \n }\n {\n (DeckUI.user.admin || AppUI.isDevelopment) &&\n \n \n
\n Next Card\n \n }\n {\n DeckUI.showDeckGrammar &&\n \n \n
\n );\n }\n}\n\nexport default HalfCircleCurvedArrow;\n","import React from 'react';\nimport { LanguageIcon } from '@seedlang/icons';\nimport HalfCircleCurvedArrow from 'components/svg/half_circle_curved_arrow';\nimport styled from '@emotion/styled';\nimport { Theme } from '@seedlang/constants';\n\nconst Wrapper = styled.div`\n margin: ${(props) => props.margin};\n width: ${(props) => props.width};\n height: ${(props) => props.width};\n position: relative;\n cursor: pointer;\n`;\n\nconst ArrowWrapper = styled.div`\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: ${Theme.z[\"foreground\"]};\n width: ${(props) => props.width};\n height: ${(props) => props.width};\n transform: scale(1.01);\n svg {\n width: ${(props) => props.width};\n .background {\n fill: ${(props) => props.background};\n }\n .arrow {\n fill: ${(props) => props.arrowColor};\n }\n }\n`;\n\nclass LanguageButton extends React.Component {\n\n static defaultProps = {\n background: \"#FFF\",\n arrowColor: \"#717171\",\n width: \"20px\",\n }\n\n render() {\n return (\n ');\n return ;\n } else if (this.props.type === 'number') {\n return this.value;\n } else if (!this.value && this.props.placeholder) {\n return ;\n }\n return (\n
cdate
mdate
' }\n ],\n template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',\n template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',\n height: this.props.smallRichText ? 220 : 600,\n image_caption: true,\n quickbars_selection_toolbar: 'bold italic forecolor | quicklink h2 h3 | quicktable',\n noneditable_class: 'mceNonEditable',\n toolbar_mode: 'sliding',\n spellchecker_ignore_list: ['Ephox', 'Moxiecode'],\n content_style: '.mymention{ color: gray; }',\n contextmenu: 'link image table',\n table_header_type: 'sectionCells',\n table_use_colgroups: false,\n relative_urls: false,\n convert_urls: false,\n document_base_url: `https://${window.location.hostname}`,\n invalid_styles: {\n '*' : 'border border-width border-collapse border-style border-color border-bottom-width border-top-width border-right-width border-left-width',\n 'table': 'width height',\n 'tr' : 'width height',\n 'th' : 'width height',\n 'td' : 'width height',\n 'col' : 'width'\n },\n indent: false,\n\n }}\n />\n {\n !this.props.noSaveButton &&\n mdate