Commit 36727230 authored by malyusgun's avatar malyusgun
Browse files

add partial authorization and route on the page

parent ee23b136

src/app/App.vue

+11 −20
Original line number Diff line number Diff line 
<script setup lang="ts">

import 'primeicons/primeicons.css';



const visible = ref<boolean>(false);

import cookies from '@/app/plugins/Cookie';

onMounted(() => {

  const home_uuidFromLS = cookies.get('home_uuid');

  const router = useRouter();

  if (!home_uuidFromLS) {

    router.push('/signUp');

  } else {

    router.push(`/${home_uuidFromLS}`);

  }

});

</script>



<template>

  <Suspense>

    <div>

    <router-view />

      <div class="fixed top-0 left-0 z-50">

        <Button

          label="Menu"

          iconPos="top"

          icon="pi pi-bars"

          severity="contrast"

          size="small"

          @click.prevent="visible = !visible"

        />

      </div>

      <Drawer v-model:visible="visible">

        <template #container="{ closeCallback }">

          <BaseSidebarMenu class="relative z-50" @closeCallback="closeCallback" />

        </template>

      </Drawer>

    </div>

    <template #fallback><BaseLoader /></template>

  </Suspense>

</template>

src/app/assets/main.css

+39 −0
Original line number Diff line number Diff line
@@ -8,6 +8,15 @@ 
  --gray-700: #374151;

  --gray-800: #1f2937;

  --gray-900: #111827;

  --slate-100: #f1f5f9;

  --slate-200: #e2e8f0;

  --slate-300: #cbd5e1;

  --slate-400: #94a3b8;

  --slate-500: #64748b;

  --slate-600: #475569;

  --slate-700: #334155;

  --slate-800: #1e293b;

  --slate-900: #0f172a;

  --red-100: #fee2e2;

  --red-200: #fecaca;

  --red-300: #fca5a5;
@@ -35,6 +44,15 @@ 
  --yellow-700: #a16207;

  --yellow-800: #854d0e;

  --yellow-900: #713f12;

  --lime-100: #ecfccb;

  --lime-200: #d9f99d;

  --lime-300: #bef264;

  --lime-400: #a3e635;

  --lime-500: #84cc16;

  --lime-600: #65a30d;

  --lime-700: #4d7c0f;

  --lime-800: #3f6212;

  --lime-900: #365314;

  --green-100: #dcfce7;

  --green-200: #bbf7d0;

  --green-300: #86efac;
@@ -44,6 +62,15 @@ 
  --green-700: #15803d;

  --green-800: #166534;

  --green-900: #14532d;

  --teal-100: #ccfbf1;

  --teal-200: #99f6e4;

  --teal-300: #5eead4;

  --teal-400: #2dd4bf;

  --teal-500: #14b8a6;

  --teal-600: #0d9488;

  --teal-700: #0f766e;

  --teal-800: #115e59;

  --teal-900: #134e4a;

  --sky-100: #e0f2fe;

  --sky-200: #bae6fd;

  --sky-300: #7dd3fc;
@@ -98,6 +125,15 @@ 
  --pink-700: #be185d;

  --pink-800: #9d174d;

  --pink-900: #831843;

  --rose-100: #ffe4e6;

  --rose-200: #fecdd3;

  --rose-300: #fda4af;

  --rose-400: #fb7185;

  --rose-500: #f43f5e;

  --rose-600: #e11d48;

  --rose-700: #be123c;

  --rose-800: #9f1239;

  --rose-900: #881337;

}

body {

  min-height: 100vh;
@@ -107,6 +143,9 @@ body { 
  display: flex;

  flex-flow: column;

}

#pageContainer {

  padding-top: 80px;

}

#app > main {

  flex: 1 1 auto;

}

src/app/components.d.ts

+7 −1
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@ export {} 
declare module 'vue' {

  export interface GlobalComponents {

    App: typeof import('./App.vue')['default']

    AuthorizationForm: typeof import('./../modules/authorization/AuthorizationForm.vue')['default']

    Avatar: typeof import('primevue/avatar')['default']

    BaseDivider: typeof import('./../shared/BaseDivider.vue')['default']

    BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
@@ -15,27 +16,32 @@ declare module 'vue' { 
    Button: typeof import('primevue/button')['default']

    CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']

    CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']

    DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default']

    Dialog: typeof import('primevue/dialog')['default']

    Divider: typeof import('primevue/divider')['default']

    DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']

    DividerMenu: typeof import('./../modules/entities/menu/DividerMenu.vue')['default']

    DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default']

    Drawer: typeof import('primevue/drawer')['default']

    EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']

    EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']

    EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']

    HomePage: typeof import('./../pages/HomePage.vue')['default']

    ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']

    ImageMenu: typeof import('./../modules/entities/menu/ImageMenu.vue')['default']

    ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']

    ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']

    ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']

    LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']

    MenuHeader: typeof import('./../modules/MenuHeader.vue')['default']

    page: typeof import('./../modules/Home page.vue')['default']

    PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']

    PageHeader: typeof import('./../modules/PageHeader.vue')['default']

    RouterLink: typeof import('vue-router')['RouterLink']

    RouterView: typeof import('vue-router')['RouterView']

    SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']

    SignIn: typeof import('./../pages/authorization/signIn.vue')['default']

    SignUp: typeof import('./../pages/authorization/signUp.vue')['default']

    SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']

    SpeedDial: typeof import('primevue/speeddial')['default']

    TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']

    TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']

src/app/helpers/index.ts

+27 −19
Original line number Diff line number Diff line
@@ -5,13 +5,13 @@ import type { IEntity } from '@/app/interfaces/environment'; 
import { checkIsImage } from '@/app/helpers/images';

import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';

import type { IImage } from '@/app/interfaces/entities';

import cookies from '@/app/plugins/Cookie';



export const setDefaultHomeBackground = () => {

export const setDefaultPageBackground = () => {

  const interfaceStore = useInterfaceStore();

  interfaceStore.resetHomeBackground();

  interfaceStore.resetPageBackground();

};



export const fetchForHomeEntities = () => {

export const fetchForEntities = (page_uuid: string) => {

  const dataStore = useDataStore();

  const interfaceStore = useInterfaceStore();

  const websocketStore = useWebsocketStore();
@@ -19,27 +19,29 @@ export const fetchForHomeEntities = () => { 
  const filesBuffer = filesWebsocketStore.filesBuffer;

  if (filesBuffer.length) {

    filesBuffer[0] = new Blob([filesBuffer[0].data], { type: 'image/jpeg' });

    interfaceStore.setHomeBackgroundFromDB(URL.createObjectURL(filesBuffer[0]));

    interfaceStore.setPageBackgroundFromDB(URL.createObjectURL(filesBuffer[0]));

  }

  if (!dataStore.homeEntities.length) {

    const getHomeEntitiesData = {

      event: 'getHomeEntities'

  if (!dataStore.entities.length) {

    const getEntitiesData = {

      event: 'getPageEntities',

      body: { page_uuid }

    };

    websocketStore.sendData(getHomeEntitiesData);

    websocketStore.sendData(getEntitiesData);

  }

  filesWebsocketStore.removeFirstFilesBuffer();

};



export const createHomeEntity = (newEntity: IEntity) => {

export const createEntity = (newEntity: IEntity) => {

  const websocketStore = useWebsocketStore();

  const page_uuid = cookies.get('current_page_uuid');

  if (newEntity.image_buffer) {

    websocketStore.setFileData(newEntity);

    const filesWebsocketStore = useFilesWebsocketStore();

    return filesWebsocketStore.sendData(newEntity.image_buffer);

  }

  const data = {

    event: 'createHomeEntity',

    body: newEntity

    event: 'createEntity',

    body: { ...newEntity, page_uuid }

  };

  websocketStore.sendData(data);

};
@@ -48,7 +50,7 @@ export const editEntity = (newState: IEntity) => { 
  newState = checkIsImage(newState);

  const websocketStore = useWebsocketStore();

  const data = {

    event: 'editHomeEntity',

    event: 'editEntity',

    body: { ...newState }

  };

  websocketStore.sendData(data);
@@ -57,22 +59,28 @@ export const editEntity = (newState: IEntity) => { 
export const deleteEntity = (entityUuid: string) => {

  const dataStore = useDataStore();

  const websocketStore = useWebsocketStore();

  const entities = dataStore.homeEntities;

  const entities = dataStore.entities;

  const entityToDelete = entities.find((entity) => entity.entity_uuid === entityUuid);

  const data = {

    event: 'deleteHomeEntity',

    event: 'deleteEntity',

    body: { ...entityToDelete }

  };

  websocketStore.sendData(data);

};



export const changeOrderHomeEntity = (entityUuid: string, direction: 'up' | 'down') => {

export const changeEntitiesOrder = (entityUuid: string, direction: 'up' | 'down') => {

  const websocketStore = useWebsocketStore();

  const dataStore = useDataStore();

  const entities = dataStore.entities;

  const mainEntity = entities.find((entity: IEntity) => entity.entity_uuid === entityUuid)!;

  const mainEntityIndex = entities.indexOf(mainEntity);

  const targetEntityIndex = direction === 'up' ? mainEntityIndex - 1 : mainEntityIndex + 1;

  const targetEntity = entities[targetEntityIndex];

  const data = {

    event: 'changeOrderHomeEntity',

    event: 'changeEntitiesOrder',

    body: {

      entity_uuid: entityUuid,

      direction

      main: mainEntity,

      target: targetEntity

    }

  };

  websocketStore.sendData(data);

src/app/interfaces/authorization.ts

+6 −8
Original line number Diff line number Diff line 
import type { TThemes } from '@/app/interfaces/environment';

import type { IImage } from '@/app/interfaces/entities';

import type { TColors } from '@/app/interfaces/environment';



export interface IUserData {

  user_uuid: string;

  nick_name: string;

  first_name: string;

  last_name: string;

  middle_name: string;

  first_name?: string;

  last_name?: string;

  middle_name?: string;

  email: string;

  phone_number: string;

  phone_number?: string;

  settings: IUserSettings;

}

interface IUserSettings {

  theme: TThemes;

  background: IImage;

  favoriteColor: TColors;

}