Merge remote-tracking branch 'origin/master' into todos

Author: unenglishable

README.md

@@ -1,6 +1,69 @@
 # epochtalk-vue
 
-## Project setup
+## Project setup from scratch
+
+### Install system dependencies
+
+* homebrew
+  * install postgresql
+  * install redis
+  * install asdf
+* setup postgresql
+  * `
+  CREATE USER postgres SUPERUSER;
+  CREATE DATABASE postgres WITH OWNER postgres;
+  `
+* setup asdf
+  * edit `~./zshrc` and add line to EOF `. $HOME/.asdf/asdf.sh`
+* setup node, elixir
+  * `asdf plugin add nodejs`
+  * `asdf plugin add erlang`
+  * `asdf plugin add elixir`
+* install project specific versions of node and elixir
+  * change directories into `epochtalk-vue` project
+  * run `asdf install`
+
+### Setup epoch database
+
+* checkout epoch `git clone git@github.com:epochtalk/epoch.git`
+* change directories to epoch project `cd epoch`
+* make sure correct version of elixir is installed `asdf install`
+* install deps `mix deps.get`
+* run epochtalk database migration `mix ecto.setup`
+
+### Setup old epochtalk project to run as server
+
+* checkout epochtalk `git clone git@github.com:epochtalk/epochtalk.git`
+* change directories to epochtalk project `cd epochtalk`
+* install deps `yarn install`
+* install project specific versions of system deps `asdf install`
+* create admin user
+  * `create-user <username> <email> --password <password> --admin`
+  * if this fails, attempt to start epochtalk server with and try again
+* copy `example.env` to `.env`
+* edit `.env`
+  * comment out `line 40` `# WEBSOCKET_SERVER_KEY_NAME=server.key`
+  * comment out `line 41` `# WEBSOCKET_SERVER_CERT_NAME=server.crt`
+  * comment out first section of emailer options `lines 52-62`
+    * fill out section section your email information (need to check email provider for info on how to setup smtp)
+  * change `line 34` `WEBSOCKET_SECURE=true` to `WEBSOCKET_SECURE=false`
+* enable cors so vue project can access server, edit `/server/server-options.js`
+  * inside of the `route` object, add the following code
+  ```
+  cors: {
+    origin: ['*'],
+    additionalHeaders: ['cache-control', 'x-requested-with']
+  },
+  ```
+* start the server `yarn serve`
+
+### Start vue project
+* change directories into `epochtalk-vue`
+* run the server `yarn serve`
+* to access new site visit `localhost:8000`
+* to access old site/admin panel visit `localhost:8080`
+
+## Standard setup
 ```
 yarn install
 ```

public/config.js

@@ -9,6 +9,7 @@ window.images_local_root = 'http://localhost:8080'
 window.websocket_host = 'localhost'
 window.websocket_port = '23958'
 window.post_max_length = 10000
+window.mobile_break_width = 767
 window.max_image_size = 10485760
 window.max_avatar_size = 102400
 window.portal = { enabled: false }

src/App.vue

@@ -102,7 +102,7 @@ main {
   .main { grid-area: main; }
 
   @include break-mobile-sm {
-    padding: 2rem 1rem 0;
+    padding: 0 1rem 0;
 
     #public-content,
     .posts #public-content {

src/api/index.js

@@ -167,7 +167,7 @@ export const usersApi = {
 }
 
 export const messagesApi = {
-  create: data => $http('/api/messages', { method: 'POST', data }),
+  create: data => $http('/api/messages', { method: 'POST', data }, true),
   page: params => $http('/api/messages', { params }),
   pageIgnored: params => $http('/api/messages/ignored', { params }),
   ignore: data => $http('/api/messages/ignore', { method: 'POST', data }),
@@ -180,7 +180,7 @@ export const messagesApi = {
   updateMessageDraft: draft => $http('/api/messages/draft', { method: 'PUT', data: { draft } }),
   convos: {
     page: (id, params) => $http(`/api/conversations/${id}`, { params }),
-    create: data => $http('/api/conversations', { method: 'POST', data }),
+    create: data => $http('/api/conversations', { method: 'POST', data }, true),
     delete: id => $http(`/api/conversations/${id}`, { method: 'DELETE' })
   }
 }

src/assets/scss/_global-components.scss

@@ -708,6 +708,58 @@ input[disabled].toggle-switch:checked + label:after { background-color: lighten(
   @include break-mobile-sm { grid-template-columns: 1fr; }
 }
 
+// Bottom actions and pagination
+.actions-bottom {
+  border-top: 1px solid $border-color;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: $base-background-color;
+  padding: 0.75rem;
+  z-index: 1000;
+  &-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
+    align-items: center;
+    column-gap: 2rem;
+    max-width: $view-maxWidth;
+    margin: 0 auto;
+  }
+  .button {
+    display: block;
+    margin-bottom: 0;
+    width: 100%;
+  }
+}
+.pagination-bottom {
+  justify-self: end;
+  ul { &.pagination { li { a { font-size: $font-size-sm; } } } }
+}
+.pagination-wrap {
+  float: right;
+  @include break-mobile-sm {
+    float: unset;
+    text-align: center;
+  }
+}
+
+@include break-mobile-sm {
+  .posts {
+    .actions-bottom {
+      .actions-bottom-grid {
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        justify-items: center;
+        column-gap: 1rem;
+      }
+      .pagination-bottom {
+        justify-self: end;
+      }
+    }
+  }
+}
+
 .pagination-slide {
   grid-template-columns: minmax(0, 3fr) minmax($sidebarWidth, 1fr);
   max-width: $view-maxWidth;
@@ -719,6 +771,7 @@ input[disabled].toggle-switch:checked + label:after { background-color: lighten(
   .pagination-controls {
     display: flex;
     justify-self: end;
+    flex: 1;
 
     button {
       background: transparent;

src/components/layout/Editor.vue

@@ -192,10 +192,10 @@
           <button class="inverted-button cancel" @click="cancel()">
             Cancel
           </button>
-          <button class="no-animate send" v-if="editorConvoMode" @click.prevent="createAction(newMessage).then(closeEditor)" :disabled="!canCreate() || !newMessage?.content?.body?.length || !newMessage?.content?.subject?.length || !newMessage?.receiver_ids?.length">
+          <button class="no-animate send" v-if="editorConvoMode" @click.prevent="createAction(newMessage).then(() => true).catch(() => false).then(c => c ? closeEditor() : null)" :disabled="!canCreate() || !newMessage?.content?.body?.length || !newMessage?.content?.subject?.length || !newMessage?.receiver_ids?.length">
             <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Send
           </button>
-          <button class="no-animate send" v-if="!editorConvoMode" @click.prevent="updateAction(newMessage).then(closeEditor)" :disabled="!canUpdate() || !newMessage?.content?.body?.length">
+          <button class="no-animate send" v-if="!editorConvoMode" @click.prevent="updateAction(newMessage).then(() => true).catch(() => false).then(c => c ? closeEditor() : null)" :disabled="!canUpdate() || !newMessage?.content?.body?.length">
             <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Send Reply
           </button>
 
@@ -207,7 +207,7 @@
           <button class="inverted-button cancel" @click="cancel()">
             Cancel
           </button>
-          <button class="send" @click.prevent="post?.id ? updateAction(posting.post).then(closeEditor) : createAction(posting.post).then(closeEditor)" :disabled="post?.id ? !canUpdate(post) : !canCreate()">
+          <button class="send" @click.prevent="post?.id ? updateAction(posting.post).then(() => true).catch(() => false).then(c => c ? closeEditor() : null) : createAction(posting.post).then(() => true).catch(() => false).then(c => c ? closeEditor() : null)" :disabled="post?.id ? !canUpdate(post) : !canCreate()">
             <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;{{ posting?.post?.id ? 'Edit Post' : 'Create Reply' }}
           </button>
 
@@ -219,7 +219,7 @@
           <button class="inverted-button cancel" @click="cancel()">
             Cancel
           </button>
-          <button class="send" @click.prevent="createAction(threadCopy).then(closeEditor);" :disabled="!threadCopy?.title.length || !canCreate() || (threadCopy?.addPoll && !threadCopy.pollValid)">
+          <button class="send" @click.prevent="createAction(threadCopy).then(() => true).catch(() => false).then(c => c ? closeEditor() : null);" :disabled="!threadCopy?.title.length || !canCreate() || (threadCopy?.addPoll && !threadCopy.pollValid)">
             <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Start Thread
           </button>
 
@@ -272,7 +272,7 @@ export default {
       if (v.editMode || v.quoteMode) return
       let rawText = v.posting.post.body || v.threadCopy.body || v.newMessage.content.body
       v.draftTimeout = setTimeout(() => saveDraft(), 10000)
-      if (clear || rawText.length && v.oldDraft !== rawText) {
+      if (clear || rawText?.length && v.oldDraft !== rawText) {
         let draftPromise
         if (props.postEditorMode || props.threadEditorMode) {
           draftPromise = postsApi.updatePostDraft

src/components/layout/Header.vue

@@ -61,7 +61,7 @@
           </a>
         </li>
         <li @click="showMobileMenu = false" >
-          <a @click="logout()"><i class="fa fa-sign-out" aria-hidden="true"></i>Logout</a>
+          <a @click="logout()"><i class="fas fa-sign-out-alt" aria-hidden="true"></i>Logout</a>
         </li>
       </ul>
     </div>
@@ -247,7 +247,9 @@
       <register-modal :show="showRegister" @close="showRegister = false" />
     </div>
   </header>
-  <div v-if="motdData && motdData.motd_html.length && !hideAnnnouncement" id="motd-spacer"></div>
+  <div v-if="motdData && motdData.motd_html.length && !hideAnnnouncement" id="motd-spacer-wrap">
+      <div id="motd-spacer" v-html="motdData?.motd_html"></div>
+  </div>
 </template>
 
 <script>
@@ -1020,6 +1022,7 @@ header {
     @include break-mobile-sm {
       font-size: $font-size-sm;
       line-height: 1.2;
+      border-top: 1px solid $breadcrumbs-border-color;
       max-height: 3.7rem;
       padding: 0 1rem;
     }
@@ -1033,5 +1036,30 @@ header {
   }
 }
 
-#motd-spacer { height: 1rem; }
+#motd-spacer-wrap {
+  @include clearfix();
+  @include pad(0 $base-grid-padding);
+  margin-bottom: $breadcrumbs-bottom-margin;
+  max-height: 3.2rem;
+  overflow-y: auto;
+  width: 100%;
+  position: relative;
+  margin-top: -1rem;
+  opacity: 0;
+
+  @include break-mobile-sm {
+    font-size: $font-size-sm;
+    line-height: 1.2;
+    max-height: 3.7rem;
+    padding: 0 1rem;
+    margin-top: 0;
+  }
+
+  #motd-spacer {
+    @include base-layout-width;
+    clear: both;
+    padding: 0.5rem 0;
+    color: #666;
+  }
+}
 </style>

src/components/layout/SimplePagination.vue

@@ -119,11 +119,11 @@ export default {
 .pagination {
   display: flex;
   flex-flow: row;
-  flex-wrap: wrap;
   align-items: center;
   margin: 0;
   padding: 0;
   list-style-type: none;
+  li { flex: 1; }
 }
 
 .pagination-control {
@@ -136,7 +136,7 @@ export default {
   display: block;
   width: 18px;
   height: 18px;
-  margin: 0 2px;
+  margin: 0 auto;
   fill: $border-color;
   &:hover { fill: $border-color; }
   &-active {

src/components/modals/auth/Register.vue

@@ -1,9 +1,12 @@
 <template>
   <modal :name="$options.name" :show="show" @close="close()" :focusInput="focusInput">
-    <template v-slot:header>Register a new account</template>
+    <template v-slot:header>
+      <span v-if="showRegisterHideConfirm">Register a new account</span>
+      <span v-if="!showRegisterHideConfirm">Confirm Account</span>
+    </template>
 
     <template v-slot:body>
-      <form action="." class="css-form">
+      <form action="." class="css-form" v-if="showRegisterHideConfirm">
         <div class='input-section'>
           <label for="email">
             Email
@@ -104,7 +107,7 @@
         </div>
 
         <div class="modal-actions">
-          <button class="" @click.prevent="register()" :disabled="!form.valid">
+          <button @click.prevent="register()" :disabled="!form.valid">
             Register
           </button>
 
@@ -117,6 +120,11 @@
           </div>
         </div>
       </form>
+
+      <div v-if="!showRegisterHideConfirm">
+        <p>Thank you for registering. Please check your email and confirm your account.</p>
+        <button @click.prevent="close()">Close</button>
+      </div>
     </template>
   </modal>
 </template>
@@ -141,10 +149,8 @@ export default {
     }
 
     /* Template Methods */
-    const register = () => {
-      $auth.register(v.form.email.val, v.form.username.val, v.form.password.val)
-      close()
-    }
+    const register = () => $auth.register(v.form.email.val, v.form.username.val, v.form.password.val)
+      .then(confirm => confirm ? v.showRegisterHideConfirm = false : close())
 
     const signInWithGoogle = () => {
       console.log('Sign in with Google!')
@@ -171,6 +177,7 @@ export default {
     const v = reactive({
       form: cloneDeep(initForm),
       focusInput: null,
+      showRegisterHideConfirm: true,
       hasGoogleCredentials: true
     })