From 7c8dee9a9d0563de9252a8b7c0175097c070168a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 17 Jun 2019 17:15:27 +0200 Subject: [PATCH] Add ability to update/create/delete identities --- .env.sample | 4 +- js/src/App.vue | 4 +- js/src/components/Account/CreateIdentity.vue | 44 --- js/src/components/Account/Identities.vue | 54 +-- js/src/components/NavBar.vue | 53 ++- js/src/components/PictureUpload.vue | 69 +++- js/src/graphql/actor.ts | 37 +- js/src/main.ts | 6 +- js/src/plugins/notifier.ts | 32 ++ js/src/router/actor.ts | 24 +- js/src/router/index.ts | 3 +- js/src/types/actor/actor.model.ts | 3 +- js/src/types/actor/person.model.ts | 4 + js/src/views/Account/MyAccount.vue | 48 ++- js/src/views/Account/Register.vue | 1 - .../views/Account/children/EditIdentity.vue | 329 ++++++++++++++++++ js/tsconfig.json | 1 + js/tslint.json | 3 +- lib/mobilizon/actors/actors.ex | 35 +- lib/mobilizon_web/resolvers/person.ex | 73 +++- lib/mobilizon_web/schema/actors/person.ex | 28 ++ .../resolvers/person_resolver_test.exs | 229 ++++++++++++ 22 files changed, 927 insertions(+), 157 deletions(-) delete mode 100644 js/src/components/Account/CreateIdentity.vue create mode 100644 js/src/plugins/notifier.ts create mode 100644 js/src/views/Account/children/EditIdentity.vue diff --git a/.env.sample b/.env.sample index 825a3ef1c..91aab29c3 100644 --- a/.env.sample +++ b/.env.sample @@ -1,6 +1,7 @@ # Settings MOBILIZON_INSTANCE_NAME="<%= instance_name %>" MOBILIZON_INSTANCE_HOST="<%= instance_domain %>" +MOBILIZON_INSTANCE_PORT=4002 MOBILIZON_INSTANCE_EMAIL="<%= instance_email %>" MOBILIZON_INSTANCE_REGISTRATIONS_OPEN=true @@ -10,7 +11,6 @@ GRAPHQL_API_FULL_PATH="" # APP MIX_ENV=prod -MOBILIZON_INSTANCE_PORT=4002 MOBILIZON_LOGLEVEL="info" MOBILIZON_SECRET="<%= instance_secret %>" @@ -19,4 +19,4 @@ MOBILIZON_DATABASE_USERNAME="<%= database_username %>" MOBILIZON_DATABASE_PASSWORD="<%= database_password %>" MOBILIZON_DATABASE_DBNAME="<%= database_name %>" MOBILIZON_DATABASE_HOST="<%= database_host %>" -MOBILIZON_DATABASE_PORT=<%= database_port %> \ No newline at end of file +MOBILIZON_DATABASE_PORT=<%= database_port %> diff --git a/js/src/App.vue b/js/src/App.vue index 5008231a1..ef438c0c6 100644 --- a/js/src/App.vue +++ b/js/src/App.vue @@ -81,18 +81,20 @@ export default class App extends Vue { @import "~bulma/sass/elements/other.sass"; @import "~bulma/sass/elements/tag.sass"; @import "~bulma/sass/elements/title.sass"; + @import "~bulma/sass/elements/notification"; @import "~bulma/sass/grid/_all.sass"; @import "~bulma/sass/layout/_all.sass"; @import "~bulma/sass/utilities/_all"; /* Buefy imports */ + @import "~buefy/src/scss/utils/_all"; @import "~buefy/src/scss/components/datepicker"; + @import "~buefy/src/scss/components/notices"; @import "~buefy/src/scss/components/dropdown"; @import "~buefy/src/scss/components/form"; @import "~buefy/src/scss/components/modal"; @import "~buefy/src/scss/components/tag"; @import "~buefy/src/scss/components/upload"; - @import "~buefy/src/scss/utils/_all"; .router-enter-active, .router-leave-active { diff --git a/js/src/components/Account/CreateIdentity.vue b/js/src/components/Account/CreateIdentity.vue deleted file mode 100644 index ec5bdd7fe..000000000 --- a/js/src/components/Account/CreateIdentity.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - diff --git a/js/src/components/Account/Identities.vue b/js/src/components/Account/Identities.vue index c81771b1c..fb0870efa 100644 --- a/js/src/components/Account/Identities.vue +++ b/js/src/components/Account/Identities.vue @@ -6,7 +6,10 @@ - + Create a new identity - + @@ -38,6 +41,7 @@ font-size: 1.3rem; padding-bottom: 0; margin-bottom: 15px; + color: #000; &.is-current-identity { background-color: rgba(0, 0, 0, 0.1); @@ -50,33 +54,29 @@ diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue index fadee064b..727325053 100644 --- a/js/src/components/NavBar.vue +++ b/js/src/components/NavBar.vue @@ -17,43 +17,40 @@ +
-
-
- - - Sign up - - - - Log in - -
-
-
- -
- -
- {{ loggedPerson.preferredUsername }} - + +
+ +
+ avatarUrl +
+ {{ loggedPerson.preferredUsername }} +
- - My account + + My account + + + Log out +
+
+ +
+
+ + Sign up - - Log out - + Log in
diff --git a/js/src/components/PictureUpload.vue b/js/src/components/PictureUpload.vue index 20b70fcd6..5d5e8c518 100644 --- a/js/src/components/PictureUpload.vue +++ b/js/src/components/PictureUpload.vue @@ -1,29 +1,64 @@ + + diff --git a/js/src/graphql/actor.ts b/js/src/graphql/actor.ts index 82f5d0c99..61543f916 100644 --- a/js/src/graphql/actor.ts +++ b/js/src/graphql/actor.ts @@ -11,6 +11,7 @@ query($name:String!) { preferredUsername, suspended, avatar { + name, url }, banner { @@ -64,6 +65,7 @@ query { export const IDENTITIES = gql` query { identities { + id, avatar { url }, @@ -73,22 +75,51 @@ query { }`; export const CREATE_PERSON = gql` -mutation CreatePerson($preferredUsername: String!) { +mutation CreatePerson($preferredUsername: String!, $name: String!, $summary: String, $avatar: PictureInput) { createPerson( preferredUsername: $preferredUsername, name: $name, - summary: $summary + summary: $summary, + avatar: $avatar ) { + id, preferredUsername, name, summary, avatar { url - }, + } } } `; +export const UPDATE_PERSON = gql` + mutation UpdatePerson($preferredUsername: String!, $name: String, $summary: String, $avatar: PictureInput) { + updatePerson( + preferredUsername: $preferredUsername, + name: $name, + summary: $summary, + avatar: $avatar + ) { + id, + preferredUsername, + name, + summary, + avatar { + url + }, + } + } +`; + +export const DELETE_PERSON = gql` + mutation DeletePerson($preferredUsername: String!) { + deletePerson(preferredUsername: $preferredUsername) { + preferredUsername, + } + } +`; + /** * This one is used only to register the first account. Prefer CREATE_PERSON when creating another identity */ diff --git a/js/src/main.ts b/js/src/main.ts index 7ef88bf0b..d4fc48765 100644 --- a/js/src/main.ts +++ b/js/src/main.ts @@ -6,14 +6,14 @@ import GetTextPlugin from 'vue-gettext'; import App from '@/App.vue'; import router from '@/router'; import { apolloProvider } from './vue-apollo'; +import { NotifierPlugin } from '@/plugins/notifier'; const translations = require('@/i18n/translations.json'); Vue.config.productionTip = false; -Vue.use(Buefy, { - defaultContainerElement: '#mobilizon', -}); +Vue.use(Buefy); +Vue.use(NotifierPlugin); const language = (window.navigator as any).userLanguage || window.navigator.language; diff --git a/js/src/plugins/notifier.ts b/js/src/plugins/notifier.ts new file mode 100644 index 000000000..00f302e2b --- /dev/null +++ b/js/src/plugins/notifier.ts @@ -0,0 +1,32 @@ +import Vue from 'vue'; + +declare module 'vue/types/vue' { + interface Vue { + $notifier: { + success: (message: string) => void; + }; + } +} + +export class Notifier { + private readonly vue: typeof Vue; + + constructor(vue: typeof Vue) { + this.vue = vue; + } + + success(message: string) { + this.vue.prototype.$notification.open({ + message, + duration: 5000, + position: 'is-bottom-right', + type: 'is-success', + hasIcon: true, + }); + } +} + +// tslint:disable +export function NotifierPlugin(vue: typeof Vue, options?: any): void { + vue.prototype.$notifier = new Notifier(vue); +} diff --git a/js/src/router/actor.ts b/js/src/router/actor.ts index 0bb02beb4..42f3a4771 100644 --- a/js/src/router/actor.ts +++ b/js/src/router/actor.ts @@ -4,13 +4,18 @@ import CreateGroup from '@/views/Group/Create.vue'; import Group from '@/views/Group/Group.vue'; import GroupList from '@/views/Group/GroupList.vue'; import { RouteConfig } from 'vue-router'; +import EditIdentity from '@/views/Account/children/EditIdentity.vue'; export enum ActorRouteName { GROUP_LIST = 'GroupList', GROUP = 'Group', CREATE_GROUP = 'CreateGroup', PROFILE = 'Profile', - MY_ACCOUNT = 'MyAccount', +} + +export enum MyAccountRouteName { + CREATE_IDENTITY = 'CreateIdentity', + UPDATE_IDENTITY = 'UpdateIdentity', } export const actorRoutes: RouteConfig[] = [ @@ -41,10 +46,23 @@ export const actorRoutes: RouteConfig[] = [ meta: { requiredAuth: false }, }, { - path: '/my-account', - name: ActorRouteName.MY_ACCOUNT, + path: '/my-account/identity', component: MyAccount, props: true, meta: { requiredAuth: true }, + children: [ + { + path: 'create', + name: MyAccountRouteName.CREATE_IDENTITY, + component: EditIdentity, + props: { isUpdate: false }, + }, + { + path: 'update/:identityName?', + name: MyAccountRouteName.UPDATE_IDENTITY, + component: EditIdentity, + props: { isUpdate: true }, + }, + ], }, ]; diff --git a/js/src/router/index.ts b/js/src/router/index.ts index 30c3907bf..cca5e3726 100644 --- a/js/src/router/index.ts +++ b/js/src/router/index.ts @@ -4,7 +4,7 @@ import PageNotFound from '@/views/PageNotFound.vue'; import Home from '@/views/Home.vue'; import { UserRouteName, userRoutes } from './user'; import { EventRouteName, eventRoutes } from '@/router/event'; -import { ActorRouteName, actorRoutes } from '@/router/actor'; +import { ActorRouteName, actorRoutes, MyAccountRouteName } from '@/router/actor'; import { ErrorRouteName, errorRoutes } from '@/router/error'; import { authGuardIfNeeded } from '@/router/guards/auth-guard'; import Search from '@/views/Search.vue'; @@ -34,6 +34,7 @@ export const RouteName = { ...UserRouteName, ...EventRouteName, ...ActorRouteName, + ...MyAccountRouteName, ...ErrorRouteName, }; diff --git a/js/src/types/actor/actor.model.ts b/js/src/types/actor/actor.model.ts index 9014b0dd7..9f04f1da2 100644 --- a/js/src/types/actor/actor.model.ts +++ b/js/src/types/actor/actor.model.ts @@ -1,7 +1,7 @@ import { IPicture } from '@/types/picture.model'; export interface IActor { - id?: string; + id?: number; url: string; name: string; domain: string|null; @@ -13,6 +13,7 @@ export interface IActor { } export class Actor implements IActor { + id?: number; avatar: IPicture | null = null; banner: IPicture | null = null; domain: string | null = null; diff --git a/js/src/types/actor/person.model.ts b/js/src/types/actor/person.model.ts index d94e10649..3a3abcee8 100644 --- a/js/src/types/actor/person.model.ts +++ b/js/src/types/actor/person.model.ts @@ -20,6 +20,10 @@ export class Person extends Actor implements IPerson { constructor(hash: IPerson | {} = {}) { super(hash); + this.patch(hash); + } + + patch (hash: any) { Object.assign(this, hash); } } diff --git a/js/src/views/Account/MyAccount.vue b/js/src/views/Account/MyAccount.vue index 0f9cdde70..98802cc05 100644 --- a/js/src/views/Account/MyAccount.vue +++ b/js/src/views/Account/MyAccount.vue @@ -1,15 +1,18 @@