<commit_before># Admin components, like moderation and factchecking backend

# Experimenting with sharing css styles between components via js objects
task_area_header_style = {fontSize: 24, fontWeight: 400, margin: '10px 0'}
task_area_bar = {padding: '4px 30px', fontSize: 24, borderRadius: '8px 8px 0 0', height: 35, backgroundColor: 'rgba(0,0,55,.1)'}
task_area_section_style = {margin: '10px 0px 20px 0px', position: 'relative'}
task_area_style = {cursor: 'auto', width: 3 * CONTENT_WIDTH / 4, backgroundColor: '#F4F0E9', position: 'absolute', left: CONTENT_WIDTH/4, top: -35, borderRadius: 8}



# Checks if current user has proper credentials to view this component. 
# If not, shows Auth. 
AccessControlled = ReactiveComponent
  displayName: 'AccessControlled'

  render : -> 
    current_user = fetch '/current_user'

    is_permitted = false
    for role in @props.permitted
      if current_user["is_#{role}"]
        is_permitted = true
        break

    if is_permitted
      @props.children
    else
      @root.auth_mode = 'login'
      save @root
      SPAN null

AppSettingsDash = ReactiveComponent
  displayName: 'AppSettingsDash'

  render : -> 
    customer = @data()

    DIV className: 'app_settings_dash',
      STYLE null, 
        """
        .app_settings_dash { font-size: 18px; width: #{CONTENT_WIDTH}px; margin: 20px auto; }
        .app_settings_dash label { display: block; }
        .app_settings_dash input { display: block; width: 600px; font-size: 18px; padding: 4px 8px; } 
        .app_settings_dash .input_group { margin-bottom: 12px; }
        """

      H1 style: {fontSize: 28, margin: '20px 0'}, 'Application Settings'


      if customer.identifier
        DIV null, 
          DIV className: 'input_group',
            LABEL htmlFor: 'about_page_url', 'About Page URL'
            INPUT 
              id: 'about_page_url'
              type: 'text'
              name: 'about_page_url'
              defaultValue: customer.about_page_url
              placeholder: 'The about page will then contain a window to this url.'

          DIV className: 'input_group',
            LABEL htmlFor: 'contact_email', 'Contact email'
            INPUT 
              id: 'contact_email'
              type: 'text'
              name: 'contact_email'
              defaultValue: customer.contact_email
              placeholder: 'Sender email address for notification emails. Default is <EMAIL>.'

          DIV className: 'input_group',
            LABEL htmlFor: 'app_title', 'The name of this application'
            INPUT 
              id: 'app_title'
              type: 'text'
              name: 'app_title'
              defaultValue: customer.app_title
              placeholder: 'Shows in email subject lines and in the window title.'

          DIV className: 'input_group',
            LABEL htmlFor: 'project_url', 'Project url'
            INPUT 
              id: 'project_url'
              type: 'text'
              name: 'project_url'
              defaultValue: customer.project_url
              placeholder: 'A link to the main project\'s homepage, if any.'

          DIV className: 'input_group',
            BUTTON className: 'button', onClick: @submit, 'Save'

  submit : -> 
    customer = @data()

    fields = ['about_page_url', 'contact_email', 'app_title', 'project_url']

    for f in fields
      customer[f] = $(@getDOMNode()).find("##{f}").val()

    save customer


RolesDash = ReactiveComponent
  displayName: 'RolesDash'

  render : -> 
    customer = @data()

    roles = [ 
      ['admin', 'Admins can access everything.'], 
      ['moderator', 'Moderators can review user content; they get email notifications when content needs review.'], 
      ['evaluator', 'Evaluators review factual claims in pro/con points.']
    ]

    DIV style: {width: CONTENT_WIDTH, margin: 'auto'}, 

      H1 style: {fontSize: 28, margin: '20px 0'}, 'User Roles'

      for role in roles
        DIV style: {marginTop: 12},
          H1 style: {fontSize: 18}, capitalize(role[0])
          SPAN style: {fontSize: 14}, role[1]

          PermissionBlock key: role[0]


PermissionBlock = ReactiveComponent
  displayName: 'PermissionBlock'

  render : -> 
    customer = fetch '/customer'
    users = fetch '/users'
    role = @props.key

    DIV null,
      for user_key in customer.roles[role]
        user = fetch user_key
        SPAN style: {display: 'inline-block', padding: '4px 8px', fontWeight: 400, fontSize: 15, backgroundColor: '#e1e1e1', color: 'black', borderRadius: 16, margin: '4px'}, 
          if user.name then user.name else user.email
          I style: {cursor: 'pointer', marginLeft: 8}, className: 'fa fa-close', onClick: do (user_key, role) => =>
            # remove role
            customer.roles[role] = _.without customer.roles[role], user_key
            save customer
      
      DIV style: {position: 'relative'}, 
        INPUT 
          id: 'filter'
          type: 'text'
          style: {fontSize: 18, width: 500}
          autocomplete: 'off'
          placeholder: "Add #{role}"
          onChange: (=> @local.filtered = $(@getDOMNode()).find('#filter').val(); save(@local);)
          onFocus: (e) => 
            @local.add = true
            save(@local)
            e.stopPropagation()
            $(document).on 'click.roles', (e) =><commit_msg>fix for user roles dash when there is no one currently assigned a role<commit_after># Admin components, like moderation and factchecking backend

# Experimenting with sharing css styles between components via js objects
task_area_header_style = {fontSize: 24, fontWeight: 400, margin: '10px 0'}
task_area_bar = {padding: '4px 30px', fontSize: 24, borderRadius: '8px 8px 0 0', height: 35, backgroundColor: 'rgba(0,0,55,.1)'}
task_area_section_style = {margin: '10px 0px 20px 0px', position: 'relative'}
task_area_style = {cursor: 'auto', width: 3 * CONTENT_WIDTH / 4, backgroundColor: '#F4F0E9', position: 'absolute', left: CONTENT_WIDTH/4, top: -35, borderRadius: 8}



# Checks if current user has proper credentials to view this component. 
# If not, shows Auth. 
AccessControlled = ReactiveComponent
  displayName: 'AccessControlled'

  render : -> 
    current_user = fetch '/current_user'

    is_permitted = false
    for role in @props.permitted
      if current_user["is_#{role}"]
        is_permitted = true
        break

    if is_permitted
      @props.children
    else
      @root.auth_mode = 'login'
      save @root
      SPAN null

AppSettingsDash = ReactiveComponent
  displayName: 'AppSettingsDash'

  render : -> 
    customer = @data()

    DIV className: 'app_settings_dash',
      STYLE null, 
        """
        .app_settings_dash { font-size: 18px; width: #{CONTENT_WIDTH}px; margin: 20px auto; }
        .app_settings_dash label { display: block; }
        .app_settings_dash input { display: block; width: 600px; font-size: 18px; padding: 4px 8px; } 
        .app_settings_dash .input_group { margin-bottom: 12px; }
        """

      H1 style: {fontSize: 28, margin: '20px 0'}, 'Application Settings'


      if customer.identifier
        DIV null, 
          DIV className: 'input_group',
            LABEL htmlFor: 'about_page_url', 'About Page URL'
            INPUT 
              id: 'about_page_url'
              type: 'text'
              name: 'about_page_url'
              defaultValue: customer.about_page_url
              placeholder: 'The about page will then contain a window to this url.'

          DIV className: 'input_group',
            LABEL htmlFor: 'contact_email', 'Contact email'
            INPUT 
              id: 'contact_email'
              type: 'text'
              name: 'contact_email'
              defaultValue: customer.contact_email
              placeholder: 'Sender email address for notification emails. Default is <EMAIL>.'

          DIV className: 'input_group',
            LABEL htmlFor: 'app_title', 'The name of this application'
            INPUT 
              id: 'app_title'
              type: 'text'
              name: 'app_title'
              defaultValue: customer.app_title
              placeholder: 'Shows in email subject lines and in the window title.'

          DIV className: 'input_group',
            LABEL htmlFor: 'project_url', 'Project url'
            INPUT 
              id: 'project_url'
              type: 'text'
              name: 'project_url'
              defaultValue: customer.project_url
              placeholder: 'A link to the main project\'s homepage, if any.'

          DIV className: 'input_group',
            BUTTON className: 'button', onClick: @submit, 'Save'

  submit : -> 
    customer = @data()

    fields = ['about_page_url', 'contact_email', 'app_title', 'project_url']

    for f in fields
      customer[f] = $(@getDOMNode()).find("##{f}").val()

    save customer


RolesDash = ReactiveComponent
  displayName: 'RolesDash'

  render : -> 
    customer = @data()

    roles = [ 
      ['admin', 'Admins can access everything.'], 
      ['moderator', 'Moderators can review user content; they get email notifications when content needs review.'], 
      ['evaluator', 'Evaluators review factual claims in pro/con points.']
    ]

    DIV style: {width: CONTENT_WIDTH, margin: 'auto'}, 

      H1 style: {fontSize: 28, margin: '20px 0'}, 'User Roles'

      for role in roles
        DIV style: {marginTop: 12},
          H1 style: {fontSize: 18}, capitalize(role[0])
          SPAN style: {fontSize: 14}, role[1]

          PermissionBlock key: role[0]


PermissionBlock = ReactiveComponent
  displayName: 'PermissionBlock'

  render : -> 
    customer = fetch '/customer'
    users = fetch '/users'
    role = @props.key

    DIV null,
      if customer.roles[role]
        for user_key in customer.roles[role]
          user = fetch user_key
          SPAN style: {display: 'inline-block', padding: '4px 8px', fontWeight: 400, fontSize: 15, backgroundColor: '#e1e1e1', color: 'black', borderRadius: 16, margin: '4px'}, 
            if user.name then user.name else user.email
            I style: {cursor: 'pointer', marginLeft: 8}, className: 'fa fa-close', onClick: do (user_key, role) => =>
              # remove role
              customer.roles[role] = _.without customer.roles[role], user_key
              save customer
      
      DIV style: {position: 'relative'}, 
        INPUT 
          id: 'filter'
          type: 'text'
          style: {fontSize: 18, width: 500}
          autocomplete: 'off'
          placeholder: "Add #{role}"
          onChange: (=> @local.filtered = $(@getDOMNode()).find('#filter').val(); save(@local);)
          onFocus: (e) => 
            @local.add = true
            save(@local)
            e.stopPropagation()
            $(document).on 'click.roles', (e) =>
{'fraction_non_alphanumeric': 0.11183174279625684, 'fraction_numerical': 0.01723339201334198, 'mean_word_length': 2.3594771241830066, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4470439', 'n_tokens_mistral': 3364, 'n_tokens_neox': 3077, 'n_words': 961}