Merge pull request #35 from rslvn/develop

email view update changes

README.md

@@ -142,7 +142,7 @@ See the [Features](#features) for more functionalities
     - [x] tslint
     - [x] eslint
     - [x] linting before `build`
-- [x] backend contracts in a npm package
+- [x] backend contracts in an NPM package
 
 Have a look [Trello Board](https://trello.com/b/6JN23G7A/boiler-plate) for more coming functionality
 

functions/modules/types-module/src/index.ts

@@ -179,6 +179,7 @@ export interface User extends BaseModel {
   email?: string
   profilePhoto?: Image
   coverPhoto?: Image
+  biography?: string
   privacy?: PrivacyType
   followersPrivacy?: PrivacyType
   followingPrivacy?: PrivacyType

src/components/form/ProfilePrivacyForm.vue

@@ -52,14 +52,13 @@ import { User } from 'types-module'
 import { StateNamespace } from '~/types'
 import InputWithValidation from '~/components/ui/input/InputWithValidation.vue'
 import InputNoValidation from '~/components/ui/input/InputNoValidation.vue'
-import FieldWithValue from '~/components/ui/FieldWithValue.vue'
 import { getDangerNotificationMessage, showSuccessToaster } from '~/service/notification-service'
 import { handleError } from '~/service/error-service'
 import PrivacyDropdown from '~/components/ui/dropdown/PrivacyDropdown.vue'
 import { reloadUserFromDatabase } from '~/service/rx-service'
 
 @Component({
-  components: { PrivacyDropdown, FieldWithValue, InputNoValidation, ValidationObserver, InputWithValidation }
+  components: { PrivacyDropdown, InputNoValidation, ValidationObserver, InputWithValidation }
 })
 export default class ProfilePrivacyForm extends Vue {
   @Prop({ required: true }) user: User

src/components/form/ProfileUpdateForm.vue

@@ -4,19 +4,17 @@
       <FieldWithValue
         :value="updatedUser.id"
         :label="$t('common.field.id')"
-        :disabled="true"
-        label-position="on-border"
         class="has-margin-bottom-15"
       />
 
       <FieldWithValue
         :value="updatedUser.email"
         :label="$t('common.field.email')"
-        :disabled="true"
-        label-position="on-border"
         class="has-margin-bottom-15"
       />
 
+      <hr>
+
       <InputWithValidation
         v-model="updatedUser.username"
         :label="$t('common.field.username')"
@@ -46,7 +44,7 @@
         class="has-margin-5"
       />
 
-      <InputWithValidation
+      <InputNoValidation
         v-model="updatedUser.biography"
         input-type="textarea"
         :label="$t('common.field.biography')"
@@ -89,7 +87,7 @@ import { reloadUserFromDatabase } from '~/service/rx-service'
 })
 export default class ProfileUpdateForm extends Vue {
   @Prop({ required: true }) user: User
-  updatedUser = { ...this.user }
+  updatedUser: User = { ...this.user }
 
   @StateNamespace.profile.Action updateUser: (user: User) => Promise<User>;
   @StateNamespace.loading.Action saveLoading: (loading: boolean) => Promise<void>

src/components/form/SetEmailPasswordForm.vue

@@ -8,17 +8,8 @@
     </p>
     <div class="box">
       <ValidationObserver v-slot="{ passes }" tag="form">
-        <FieldWithValue
-          v-if="!!email"
-          :value="email"
-          :label="$t('common.field.email')"
-          :disabled="true"
-          label-position="on-border"
-          class="has-margin-bottom-15"
-        />
-
         <InputWithValidation
-          v-else
+          v-if="!email"
           v-model="credentials.email"
           :label="$t('common.field.email')"
           :placeholder="$t('common.field.emailPlaceholder')"
@@ -34,7 +25,7 @@
           input-type="password"
           :label="$t('common.field.password')"
           :placeholder="$t('common.field.passwordPlaceholder')"
-          rules="required|min:4|confirmed:confirmedPassword"
+          rules="required|min:4"
           vid="password"
           label-position="on-border"
           class="has-margin-5"
@@ -45,7 +36,7 @@
           input-type="password"
           :label="$t('common.field.confirmPassword')"
           :placeholder="$t('common.field.confirmPasswordPlaceholder')"
-          rules="required"
+          rules="required|confirmed:password"
           vid="confirmedPassword"
           label-position="on-border"
           class="has-margin-5"
@@ -66,11 +57,9 @@ import { Component, Prop, Vue } from 'nuxt-property-decorator'
 import { ValidationObserver } from 'vee-validate'
 import InputWithValidation from '~/components/ui/input/InputWithValidation.vue'
 import { LoginCredentials } from '~/types'
-import FieldWithValue from '~/components/ui/FieldWithValue.vue'
 
 @Component({
   components: {
-    FieldWithValue,
     ValidationObserver,
     InputWithValidation
   }

src/components/navbar/TopImage.vue

@@ -33,11 +33,10 @@
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
-import SocialShare from '~/components/ui/social/SocialShare.vue'
 import { Routes } from '~/types'
 
 @Component({
-  components: { SocialShare }
+  components: {}
 })
 export default class TopImage extends Vue {
   get routes () {

src/components/navbar/TopShare.vue

@@ -5,7 +5,7 @@
         icon="share-variant"
         type="is-primary"
       />
-      <small class="has-text-primary">Share</small>
+      <small class="has-text-primary has-margin-left-5"> {{ $t('common.Share') }} </small>
     </template>
 
     <b-navbar-item>

src/components/ui/FieldWithValue.vue

@@ -1,16 +1,17 @@
 <template>
-  <b-field
-    :type="type"
-    :horizontal="horizontal"
-    :label="$attrs.label"
-    :label-position="labelPosition"
-  >
-    <b-input
-      :disabled="disabled"
-      :value="value"
-      type="text"
-    />
-  </b-field>
+  <nav class="level is-mobile">
+    <div class="level-left has-margin-left-5">
+      <p class="level-item">
+        <strong>{{ label }}:</strong>
+      </p>
+    </div>
+
+    <div class="level-right">
+      <p class="level-item">
+        {{ value }}
+      </p>
+    </div>
+  </nav>
 </template>
 
 <script lang="ts">
@@ -20,10 +21,7 @@ import { Component, Prop, Vue } from 'nuxt-property-decorator'
   components: {}
 })
 export default class FieldWithValue extends Vue {
-  @Prop({ type: String, required: true, default: '' }) value: any;
-  @Prop({ type: String, required: false, default: 'text' }) type: string;
-  @Prop({ type: String, required: false, default: '' }) labelPosition: string;
-  @Prop({ type: Boolean, required: false, default: false }) horizontal: boolean;
-  @Prop({ type: Boolean, required: false, default: false }) disabled: boolean;
+  @Prop({ type: String, required: true, default: '' }) readonly label: string;
+  @Prop({ required: false, default: '' }) readonly value: any;
 }
 </script>

src/components/ui/social/SocialShare.vue

@@ -50,8 +50,6 @@ export default class SocialShare extends Vue {
       }
     }
 
-    console.log('LINK', link)
-
     return link
       .replace(/@u/g, encodeURIComponent(this.pageMeta.url))
       .replace(/@t/g, encodeURIComponent(this.pageMeta.title))

src/i18n/en.ts

@@ -39,7 +39,9 @@ const messages = {
     search: 'Search',
     follow: 'Follow',
     unfollow: 'Unfollow',
-    refresh: 'refresh'
+    refresh: 'refresh',
+    share: 'share',
+    Share: 'Share'
   },
 
   topNavbar: {

src/i18n/tr.ts

@@ -40,7 +40,9 @@ const messages = {
     search: 'Ara',
     follow: 'Takip Et',
     unfollow: 'Takip Etme',
-    refresh: 'yenile'
+    refresh: 'yenile',
+    share: 'paylas',
+    Share: 'Paylas'
   },
 
   topNavbar: {