LDBR-4.8: Доступ по ссылке (#50)

* LDBR-4.8: Реализовать добавление юзеров по ссылке * LDBR-4.8: Реализовать приглашение на карточку (нужны тесты) * LDBR-4.8: Исправить замечания линтера * LDBR-4.8: Добавить получение инвайта при создании карточки * LDBR-4.8: Overwrite * LDBR-4.8: Исправить скобку в стиле Co-authored-by: DPeshkoff <[email protected]>
frontend-park-mail-ru · Dec 16, 2021 · 93e40be · 93e40be
1 parent 27ecc12
commit 93e40be
Show file tree

Hide file tree

Showing 13 changed files with 489 additions and 12 deletions.
diff --git a/.github/workflows/Deploy.yml b/.github/workflows/Deploy.yml
@@ -51,9 +51,10 @@ jobs:
         - name: Transfer build files to server
           uses: appleboy/scp-action@master
           with:
-            host: 95.163.213.142
+            host: ${{ secrets.HOST_IP }}
             username: ubuntu
             key: ${{ secrets.PRIVATE_KEY }}
             source: "dist/*"
             target: "/home/ubuntu/01-frontend/"
+            overwrite: true
 
diff --git a/src/actions/invite.js b/src/actions/invite.js
@@ -0,0 +1,80 @@
+'use strict';
+
+// Modules
+import Dispatcher from '../modules/Dispatcher/Dispatcher.js';
+
+/**
+ * Константа, содержащая в себе типы действий для ссылок-приглашений
+ */
+export const InviteActionTypes = {
+    GO_BOARD_INVITE: 'go/invite/board',
+    GO_CARD_INVITE: 'go/invite/card',
+    REFRESH_BOARD_LINK: 'refresh/invite/board',
+    REFRESH_CARD_LINK: 'refresh/invite/card',
+    COPY_BOARD_LINK: 'copy/invite/board',
+    COPY_CARD_LINK: 'copy/invite/card',
+};
+
+/**
+ * Объект, содержащий в себе действия в системе связанные с приглашениями.
+ */
+export const inviteActions = {
+
+    /**
+     * Приглашает пользователя в доску
+     * @param {String} accessPath
+     */
+    openBoardInvite(accessPath) {
+        Dispatcher.dispatch({
+            actionName: InviteActionTypes.GO_BOARD_INVITE,
+            data: {accessPath},
+        });
+    },
+
+    /**
+     * Приглашает пользователя в карточку
+     * @param {String} accessPath
+     */
+    openCardInvite(accessPath) {
+        Dispatcher.dispatch({
+            actionName: InviteActionTypes.GO_CARD_INVITE,
+            data: {accessPath},
+        });
+    },
+
+    /**
+     * Обновляет ссылку приглашение на доску
+     */
+    refreshBoardInvite() {
+        Dispatcher.dispatch({
+            actionName: InviteActionTypes.REFRESH_BOARD_LINK,
+        });
+    },
+
+    /**
+     * Обновляет ссылку приглашение на карточку
+     */
+    refreshCardInvite() {
+        Dispatcher.dispatch({
+            actionName: InviteActionTypes.REFRESH_CARD_LINK,
+        });
+    },
+
+    /**
+     * Скопировать приглашение на доску
+     */
+    copyBoardInvite() {
+        Dispatcher.dispatch({
+            actionName: InviteActionTypes.COPY_BOARD_LINK,
+        });
+    },
+
+    /**
+     * Скопировать приглашение на карточку
+     */
+    copyCardInvite() {
+        Dispatcher.dispatch({
+            actionName: InviteActionTypes.COPY_CARD_LINK,
+        });
+    },
+};
diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -12,6 +12,12 @@ export const Urls = {
     Card: '/card/<id>',
     Profile: '/profile',
     NotFound: '/404',
+    Invite: {
+        BoardPath: '/invite/board/',
+        Board: '/invite/board/<accessPathBoard>',
+        CardPath: '/invite/card/',
+        Card: '/invite/card/<accessPathCard>',
+    },
 };
 
 /**
@@ -91,6 +97,7 @@ export const ConstantMessages = {
     CardTitleTooLong: 'Название карточки слишком длинное',
     CardErrorOnServer: 'Не удалось создать карточку, попробуйте позднее',
     UnsuccessfulRequest: 'Неудачный запрос, попробуйте позднее :]',
+    CantCopyToClipBoard: 'Не удалось скопировать текст',
 
     WrongTagNameLength: 'Введите имя тега длиной от 1 до 40 символов',
 };

diff --git a/src/index.js b/src/index.js
@@ -42,12 +42,15 @@ window.addEventListener('DOMContentLoaded', async () => {
     const root = document.getElementById(Html.Root);
     document.getElementById('no-connection').innerHTML = '';
 
-    const boardView = new BoardsView(root);
-    Router.register(Urls.Root, boardView);
-    Router.register(Urls.Boards, boardView);
+    const boardsView = new BoardsView(root);
+    const boardView = new BoardView(root);
+    Router.register(Urls.Root, boardsView);
+    Router.register(Urls.Boards, boardsView);
+    Router.register(Urls.Invite.Board, boardView);
+    Router.register(Urls.Invite.Card, boardView);
     Router.register(Urls.Register, new RegisterView(root));
     Router.register(Urls.Login, new LoginView(root));
-    Router.register(Urls.Board, new BoardView(root));
+    Router.register(Urls.Board, boardView);
     Router.register(Urls.Profile, new ProfileView(root));
 
     UserStore.addListener(() => {

diff --git a/src/modules/Network/Network.js b/src/modules/Network/Network.js
@@ -653,6 +653,62 @@ class Network {
             `https://${this.BackendUrl}/${this._endpoints.tags}/${tgid}`,
             options);
     }
+
+    /**
+     * Метод, реализующий запрос PUT /api/boards/access/:accessPath.
+     * @param {String} accessPath ключ доступа
+     * @return {Promise<Response>} промис запроса
+     */
+    async useBoardInvite(accessPath) {
+        const options = {
+            method: 'put',
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.board}/access/` +
+                `${accessPath}`, options);
+    }
+
+    /**
+     * Метод, реализующий запрос PUT /api/boards/:bid/access.
+     * @param {Number} bid id доски
+     * @return {Promise<Response>} промис запроса
+     */
+    async refreshBoardInvite(bid) {
+        const options = {
+            method: 'put',
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.board}/${bid}/access`,
+            options);
+    }
+
+    /**
+     * Метод, реализующий запрос PUT /api/card/access/tocard/:accessPath
+     * @param {String} accessPath ключ доступа
+     * @return {Promise<Response>} промис запроса
+     */
+    async useCardInvite(accessPath) {
+        const options = {
+            method: 'put',
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.card}/access/tocard/` +
+            `${accessPath}`, options);
+    }
+
+    /**
+     * Метод, реализующий запрос PUT /api/boards/:bid/access.
+     * @param {Number} cid id карточки
+     * @return {Promise<Response>} промис запроса
+     */
+    async refreshCardInvite(cid) {
+        const options = {
+            method: 'put',
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.card}/access/${cid}`,
+            options);
+    }
 }
 
 export default new Network();
diff --git a/src/modules/Router/Router.js b/src/modules/Router/Router.js
@@ -70,6 +70,7 @@ class Router {
      * (по умолчанию: false)
      */
     go(url, replaceState = false) {
+        console.log(url);
         const {urlData, view} = this.processURL(url) || {};
         if (!urlData || !view) {
             this.go(Urls.NotFound, true);

diff --git a/src/popups/AddUser/AddUserPopUp.hbs b/src/popups/AddUser/AddUserPopUp.hbs
@@ -25,6 +25,17 @@
                             </div>
                         {{/each}}
                     </div>
+                    {{#if inviteLink}}
+                    <div class="invite-link-wrapper">
+                        <div class="invite-link__label">Ссылка-приглашение:</div>
+                        <div class="invite-link">
+                            <input class="simple-form-element invite-link__link" type="text" id="inviteLinkInputId"
+                                   value="{{inviteLink}}" autocomplete="off" readonly>
+                            <div class="invite-link__copy material-icon-copy" id="copyLinkId"></div>
+                            <div class="invite-link__reload material-icon-reload" id="refreshLinkId"></div>
+                        </div>
+                    </div>
+                    {{/if}}
                 </div>
                 <div class="horizontal-line horizontal-line_aligned"></div>
             </div>

diff --git a/src/popups/AddUser/AddUserPopUp.js b/src/popups/AddUser/AddUserPopUp.js
@@ -35,6 +35,9 @@ export default class AddUserPopUp extends BaseComponent {
             input: document.getElementById('addUserPopUpSearchInputId'),
             users: document.querySelectorAll('.search-result'),
             closeBtn: document.getElementById('addUserPopUpCloseId'),
+            inviteInput: document.getElementById('inviteLinkInputId'),
+            inviteRefreshBtn: document.getElementById('refreshLinkId'),
+            inviteCopyBtn: document.getElementById('copyLinkId'),
         };
     }
 
@@ -52,6 +55,8 @@ export default class AddUserPopUp extends BaseComponent {
         this._elements.users?.forEach((user)=>{
             user.addEventListener('click', this._callbacks.onUserClick);
         });
+        this._elements.inviteRefreshBtn?.addEventListener('click', this._callbacks.onRefreshInvite);
+        this._elements.inviteCopyBtn?.addEventListener('click', this._callbacks.onCopyInvite);
     };
 
     /**
@@ -66,13 +71,20 @@ export default class AddUserPopUp extends BaseComponent {
         this._elements.users?.forEach((user)=>{
             user.removeEventListener('click', this._callbacks.onUserClick);
         });
+        this._elements.inviteRefreshBtn?.removeEventListener('click', this._callbacks.onRefreshInvite);
+        this._elements.inviteCopyBtn?.removeEventListener('click', this._callbacks.onCopyInvite);
     }
 
     /**
      * Метод устанавливает курсор в конце строки внутри input тэга
      * @private
      */
     _setUpSearchInput() {
+        if (this.context.selectInvite) {
+            this._elements.inviteInput?.focus();
+            this._elements.inviteInput?.select();
+            return;
+        }
         this._elements.input?.focus();
         this._elements.input?.setSelectionRange(this._elements.input.value.length,
                                                 this._elements.input.value.length);

diff --git a/src/popups/AddUser/AddUserPopUp.scss b/src/popups/AddUser/AddUserPopUp.scss
@@ -54,3 +54,28 @@
         padding: 0 10px;
     }
 }
+
+.invite-link-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.invite-link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 5px;
+
+    &__link {
+        flex-grow: 1;
+    }
+
+    &__copy {
+
+    }
+
+    &__reload {
+
+    }
+
+}