access.html

<div class="modal" v-if="active_modal == 'access' && access_settings_space" v-cloak>
  <div class="modal-wrapper">
    <div class="modal-dialog">
      <div class="modal-content" style="width:760px">
        <div class="modal-header" style="padding-bottom:0">
          <h3 class="text-left">[[__("share")]]: {{access_settings_space.name}}</h3>
          <button type="button" class="btn btn-icon btn-light btn-round close" v-on:click=" close_modal()">
            <span class="icon icon-cross-1"></span>
          </button>
        </div>

        <div class="modal-body">
          <div class="modal-section" style="padding-top:0;padding-bottom:20px">
            <label class="radio" v-bind:class="{checked:access_settings_space.access_mode=='private'}">
              <input type="radio" name="access_mode" value="private" v-model="access_settings_space.access_mode" v-on:click="save_space_access_mode($event)"> [[__("mode_private")]]
            </label>
            <label class="radio" v-bind:class="{checked:access_settings_space.access_mode=='public'}">
              <input type="radio" name="access_mode" value="public" v-model="access_settings_space.access_mode" v-on:click="save_space_access_mode($event)">[[__("mode_public")]]
            </label>
          </div>

          <div class="modal-section" v-if="active_space" style="padding-bottom:10px">
            <h4 class="text-left"><span class="icon icon-link icon-sm"></span> [[__("access_editor_link")]] </h4>
            <p class="text-left">
              [[__("access_editor_link_desc")]]
            </p>
            
            <div class="input-group org-add-form">
              <input id="editorurl2" type="text" class="form-control input input-lg"  v-bind:value="share_base + '/s/' + access_settings_space.edit_hash + (access_settings_space.edit_slug ? '-' : '') + access_settings_space.edit_slug"/>

              <span class="input-group-btn">
                <span id="org-add-member" class="btn btn-lg btn-primary clipboard-btn" data-clipboard-target="#editorurl2" v-clipboard>
                  [[__("copy")]]
                </span>
              </span>
            </div>


            <label class="checkbox" v-bind:class="{checked:access_settings_space.editors_locking}">
              <input
                 type="checkbox"
                 v-bind:checked="access_settings_space.editors_locking"
                 v-model="access_settings_space.editors_locking" v-on:change="save_space_editors_locking($event)" />
              [[__("access_anonymous_edit_blocking")]]
            </label>
          </div>

          <!-- subsection "invite" -->
          <div id="new-editor" class="modal-section" style="padding-bottom:20px">
            <h4 class="text-left"><span class="icon icon-user-add icon-sm"></span> [[__('access_new_members')]]</h4>

            <div class="form-group">
              <span class="error-note" v-if="invite_email_error">{{invite_email_error}}</span>
              <input class="input input-block input-white"
                     v-bind:class="{error: !!invite_email_error}"
                     id="invitee_email"
                     v-model="invite_email"
                     type="email" placeholder="[[__('invite_emails')]]">

              <textarea id="invite-message"  class="input input-block input-white overflow-y-scroll"
                        v-model="invite_message" placeholder="[[__('optional_message')]]" name="Message"></textarea>

              <select class="input input-white" v-model="invite_member_role">
                <option value="viewer">[[__("role_viewer")]]</option>
                <option value="editor">[[__("role_editor")]]</option>
                <option value="admin">[[__("role_admin")]]</option>
              </select>
            </div>

            <div class="form-group">
              <button class="btn btn-primary btn-md" v-on:click="invite_member(access_settings_space, invite_email, invite_message, invite_member_role)"> [[__("invite")]] </button>
            </div>
          </div>

          
          <!-- subsection "editors list" -->
          <div class="modal-section" style="padding-bottom:60px">
            <h4 class="text-left"><span class="icon icon-user-group icon-sm"></span> [[__("access_current_members")]]</h4>
            <table class="table">
              <tr>
                <th></th>
                <th>Email / Name</th>
                <th>Role</th>
                <th></th>
              </tr>
              <tr v-for="member in access_settings_memberships" v-bind:class="member.state">
                <td>
                  <span class="editor-avatar btn btn-md btn-dark btn-icon btn-round"
                        v-if="member.user"
                        v-bind:style="background_image_style([member.user.avatar_thumb_uri])"
                        v-bind:class="{'has-avatar-image':!!member.user.avatar_thumb_uri}">
                    <span class="icon icon-user" v-if="!member.user.avatar_thumb_uri"></span>
                  </span>
                  <span class="editor-avatar btn btn-md btn-round btn-icon icon-hourglass" v-if="!member.user"></span>
                </td>
                <td>
                  <span class="editor-name"  v-if="member.user && member.state == 'active'">{{member.user.nickname}}</span>
                  <span class="editor-email" v-if="!member.user || member.state == 'pending'">(pending)</span>
                  <span class="editor-email" v-if="member.user && member.state == 'active'">({{member.user.email}})</span>
                  <span class="editor-email" v-if="!member.user || member.state == 'pending'">({{member.email_invited}})</span>
                </td>
                <td>
                  <div class="form-group">
                    <select class="input input-sm" v-model="member.role" v-on:change="update_member(access_settings_space, member, $event.currentTarget.value)" style="width:auto">
                      <option value="viewer">[[__("role_viewer")]]</option>
                      <option value="editor">[[__("role_editor")]]</option>
                      <option value="admin">[[__("role_admin")]]</option>
                    </select>
                  </div>
                </td>
                <td>
                  <button class="btn btn-sm btn-stroke-darken" v-on:click="remove_member(access_settings_space, member)">[[__("delete")]]</button>
                </td>
              </tr>
            </table>
            <p class="text-left" v-if="!access_settings_memberships.length">
              [[__("access_no_members")]]
            </p>

            <div class="form-group" style="padding-top: 40px">
              <button class="btn btn-primary btn-md" v-on:click="close_modal();"> [[__("ok")]] </button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>