Merge remote-tracking branch 'origin/develop' into feature/pleroma-be

2017-06-24 19:59:05 +02:00 · 2017-06-24 19:59:05 +02:00 · e874e2dc7d
parent 444513694a b284689313
commit e874e2dc7d
16 changed files with 141 additions and 38 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -33,9 +33,14 @@ button{
    border: none;
    border-radius: 5px;
    cursor: pointer;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 2px black;
+    font-size: 14px;
+    font-family: sans-serif;

    &:hover {
-        opacity: 0.8;
+        box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
    }
 }

--- a/src/App.vue
+++ b/src/App.vue
@ -13,8 +13,8 @@
    </nav>
    <div class="container" id="content">
      <div class="panel-switcher">
-        <button @click="activatePanel('sidebar')">Sidebar</button>
-        <button @click="activatePanel('timeline')">Timeline</button>
+        <button @click="activatePanel('sidebar')" class="base01-background base04">Sidebar</button>
+        <button @click="activatePanel('timeline')" class="base01-background base04">Timeline</button>
      </div>
      <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
        <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@ -4,7 +4,8 @@ const LoginForm = {
    authError: false
  }),
  computed: {
-    loggingIn () { return this.$store.state.users.loggingIn }
+    loggingIn () { return this.$store.state.users.loggingIn },
+    registrationOpen () { return this.$store.state.config.registrationOpen }
  },
  methods: {
    submit () {
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@ -15,14 +15,14 @@
          <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
        </div>
        <div class='form-group'>
-          <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
+          <div class='login-bottom'>
+            <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>Register</router-link></div>
+            <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Log in</button>
+          </div>
        </div>
        <div v-if="authError" class='form-group'>
          <div class='error base05'>{{authError}}</div>
        </div>
-        <div class='form-group'>
-          <router-link :to="{name: 'registration'}">Register new account</router-link>
-        </div>
      </form>
    </div>
  </div>
@ -42,8 +42,8 @@
  }

  .btn {
-    margin-top: 1.0em;
    min-height: 28px;
+    width: 10em;
  }

  .error {
@ -53,6 +53,18 @@
    min-height: 28px;
    line-height: 28px;
  }
+
+  .register {
+    flex: 1 1;
+  }
+
+  .login-bottom {
+    margin-top: 1.0em;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
 }

 </style>
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -4,7 +4,7 @@
      <div class="panel-heading base01-background base04">
        <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
        Notifications
-        <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button>
+        <button @click.prevent="markAsSeen" class="base05 base01-background read-button">Read!</button>
      </div>
      <div class="panel-body base03-border">
        <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -49,7 +49,7 @@ const PostStatusForm = {
  computed: {
    candidates () {
      if (this.textAtCaret.charAt(0) === '@') {
-        const matchedUsers = filter(this.users, (user) => (user.name + user.screen_name).match(this.textAtCaret.slice(1)))
+        const matchedUsers = filter(this.users, (user) => (String(user.name + user.screen_name)).match(this.textAtCaret.slice(1)))
        if (matchedUsers.length <= 0) {
          return false
        }
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@ -4,6 +4,14 @@ const registration = {
    error: false,
    registering: false
  }),
+  created () {
+    if (!this.$store.state.config.registrationOpen || !!this.$store.state.users.currentUser) {
+      this.$router.push('/main/all')
+    }
+  },
+  computed: {
+    termsofservice () { return this.$store.state.config.tos }
+  },
  methods: {
    submit () {
      this.registering = true
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -31,13 +31,18 @@
              <label for='password_confirmation'>Password confirmation</label>
              <input :disabled="registering" v-model='user.confirm' class='form-control' id='password_confirmation' type='password'>
            </div>
+            <!--
+            <div class='form-group'>
+              <label for='captcha'>Captcha</label>
+              <img src='/qvittersimplesecurity/captcha.jpg' alt='captcha' class='captcha'>
+              <input :disabled="registering" v-model='user.captcha' placeholder='Enter captcha' type='test' class='form-control' id='captcha'>
+            </div>
+            -->
            <div class='form-group'>
              <button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
            </div>
          </div>
-          <div class='terms-of-service'>
-            <h4>Terms of Service</h4>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <div class='terms-of-service' v-html="termsofservice">
          </div>
        </div>
        <div v-if="error" class='form-group'>
@ -63,7 +68,7 @@
  }

  .terms-of-service {
-    flex: 0 1 55%;
+    flex: 0 1 50%;
    margin: 0.8em;
  }

@ -99,6 +104,11 @@
    padding: 0.1em 0.2em 0.2em 0.2em;
  }

+  .captcha {
+    max-width: 350px;
+    margin-bottom: 0.4em;
+  }
+
  .btn {
    //align-self: flex-start;
    //width: 10em;
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@ -7,9 +7,10 @@ const settings = {
      hideAttachmentsLocal: this.$store.state.config.hideAttachments,
      hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
      hideNsfwLocal: this.$store.state.config.hideNsfw,
+      muteWordsString: this.$store.state.config.muteWords.join('\n'),
      autoLoadLocal: this.$store.state.config.autoLoad,
      hoverPreviewLocal: this.$store.state.config.hoverPreview,
-      muteWordsString: this.$store.state.config.muteWords.join('\n')
+      previewfile: null
    }
  },
  components: {
@ -27,15 +28,35 @@ const settings = {
      const reader = new FileReader()
      reader.onload = ({target}) => {
        const img = target.result
-
-        this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
-          if (!user.error) {
-            this.$store.commit('addNewUsers', [user])
-            this.$store.commit('setCurrentUser', user)
-          }
-        })
+        this.previewfile = img
      }
      reader.readAsDataURL(file)
+    },
+    submitAvatar () {
+      if (!this.previewfile) { return }
+
+      const img = this.previewfile
+      // eslint-disable-next-line no-undef
+      let imginfo = new Image()
+      let cropX, cropY, cropW, cropH
+      imginfo.src = this.previewfile
+      if (imginfo.height > imginfo.width) {
+        cropX = 0
+        cropW = imginfo.width
+        cropY = Math.floor((imginfo.height - imginfo.width) / 2)
+        cropH = imginfo.width
+      } else {
+        cropY = 0
+        cropH = imginfo.height
+        cropX = Math.floor((imginfo.width - imginfo.height) / 2)
+        cropW = imginfo.height
+      }
+      this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
+        if (!user.error) {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+        }
+      })
    }
  },
  watch: {
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@ -8,12 +8,17 @@
        <h2>Theme</h2>
        <style-switcher></style-switcher>
      </div>
-      <div class="setting-item">
+      <div class="setting-item" v-if="user">
        <h2>Avatar</h2>
-        <img :src="user.profile_image_url_original"></img>
+        <p>Your current avatar:</p>
+        <img :src="user.profile_image_url_original" class="old-avatar"></img>
+        <p>Set new avatar:</p>
+        <img class="new-avatar" v-bind:src="previewfile" v-if="previewfile">
+        </img>
        <div>
          <input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input>
        </div>
+        <button class="btn btn-default base05 base01-background" v-if="previewfile" @click="submitAvatar">Submit</button>
      </div>
      <div class="setting-item">
        <h2>Filtering</h2>
@ -59,6 +64,24 @@
     width: 100%;
     height: 100px;
   }
+
+   .old-avatar {
+     width: 128px;
+     border-radius: 5px;
+   }
+
+   .new-avatar {
+     object-fit: cover;
+     width: 128px;
+     height: 128px;
+     border-radius: 5px;
+   }
+
+   .btn {
+     margin-top: 1em;
+     min-height: 28px;
+     width: 10em;
+   }
 }
 .setting-list {
   list-style-type: none;
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -4,15 +4,15 @@
      <div class="title">
        {{title}}
      </div>
-      <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+      <button @click.prevent="showNewStatuses" class="base05 base01-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
        Show new ({{timeline.newStatusCount}})
      </button>
-      <button @click.prevent class="base06 error no-press loadmore-button" v-if="timelineError">
+      <div @click.prevent class="base06 error  loadmore-text" v-if="timelineError">
          Error fetching updates
-      </button>
-      <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timelineError">
+      </div>
+      <div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
        Up-to-date
-      </button>
+      </div>
    </div>
    <div class="panel-body">
      <div class="timeline">
@ -43,18 +43,26 @@
    .loadmore-button {
      position: absolute;
      right: 0.6em;
+      font-size: 14px;

      min-width: 6em;
      height: 1.8em;
      line-height: 100%;
    }
+    .loadmore-text {
+      position: absolute;
+      right: 0.6em;
+      font-size: 14px;
+      min-width: 6em;
+      border-radius: 5px;
+      font-family: sans-serif;
+      text-align: center;
+      padding: 0 0.5em 0 0.5em;
+      opacity: 0.8;
+    }
    .error {
      background-color: rgba(255, 48, 16, 0.65);
    }
-    .no-press {
-      opacity: 0.8;
-      cursor: default;
-    }
  }


--- a/src/main.js
+++ b/src/main.js
@ -86,9 +86,16 @@ new Vue({

 window.fetch('/static/config.json')
  .then((res) => res.json())
-  .then(({name, theme, background, logo}) => {
+  .then(({name, theme, background, logo, registrationOpen}) => {
    store.dispatch('setOption', { name: 'name', value: name })
    store.dispatch('setOption', { name: 'theme', value: theme })
    store.dispatch('setOption', { name: 'background', value: background })
    store.dispatch('setOption', { name: 'logo', value: logo })
+    store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen })
+  })
+
+window.fetch('/static/terms-of-service.html')
+  .then((res) => res.text())
+  .then((html) => {
+    store.dispatch('setOption', { name: 'tos', value: html })
  })
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@ -17,9 +17,9 @@ const FRIENDS_URL = '/api/statuses/friends.json'
 const FOLLOWING_URL = '/api/friendships/create.json'
 const UNFOLLOWING_URL = '/api/friendships/destroy.json'
 const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
-const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
 const REGISTRATION_URL = '/api/account/register.json'
 const AVATAR_UPDATE_URL = '/api/qvitter/update_avatar.json'
+const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
 const QVITTER_USER_TIMELINE_URL = '/api/qvitter/statuses/user_timeline.json'
 // const USER_URL = '/api/users/show.json'

--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@ -36,9 +36,9 @@ const backendInteractorService = (credentials) => {

  const fetchMutes = () => apiService.fetchMutes({credentials})

-  const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl)
  const register = (params) => apiService.register(params)
  const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params})
+  const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl)

  const backendInteractorServiceInstance = {
    fetchStatus,
--- a/static/config.json
+++ b/static/config.json
@ -2,5 +2,6 @@
  "name": "Pleroma FE",
  "theme": "base16-pleroma-dark.css",
  "background": "/static/bg.jpg",
-  "logo": "/static/logo.png"
+  "logo": "/static/logo.png",
+  "registrationOpen": false
 }
--- a/static/terms-of-service.html
+++ b/static/terms-of-service.html
@ -0,0 +1,7 @@
+<h4>Terms of Service</h4>
+
+<p>This is a placeholder ToS.</p>
+
+<p>Edit <code>"/static/terms-of-service.html"</code> to make it fit the needs of your instance.</p>
+<br>
+<img src="/static/logo.png"/ style="display: block; margin: auto;">