├── .prettierrc
├── .vscode
    └── extensions.json
├── images
    ├── map.png
    ├── post.png
    └── upload.png
├── .firebaserc
├── postcss.config.js
├── .deepsource.toml
├── tailwind.config.js
├── src
    ├── assets
    │   ├── add.svg
    │   ├── logo.svg
    │   ├── github-logo.svg
    │   ├── Twitter.svg
    │   ├── icons8-trash-can.svg
    │   ├── favicon.svg
    │   ├── kofi.svg
    │   ├── discord-logo.svg
    │   └── base.css
    ├── pages
    │   ├── Home.vue
    │   ├── Memories.vue
    │   ├── Friends.vue
    │   ├── Posts.vue
    │   ├── About.vue
    │   ├── Map.vue
    │   ├── Login.vue
    │   └── Blog.vue
    ├── index.css
    ├── components
    │   ├── Graph.vue
    │   ├── ui
    │   │   ├── errorToast.vue
    │   │   ├── Button.vue
    │   │   ├── Input.vue
    │   │   ├── BeRealPhotos.vue
    │   │   ├── reactToAll.vue
    │   │   ├── myCheckbox.vue
    │   │   └── Carousel.vue
    │   ├── posts
    │   │   ├── Realmoji.vue
    │   │   ├── uploadPostImage.vue
    │   │   ├── PopupModal.vue
    │   │   ├── uploadProfilePicture.vue
    │   │   ├── singlePostComponent.vue
    │   │   ├── uploadRealmoji.vue
    │   │   └── uploadPost.vue
    │   ├── login
    │   │   └── countrypicker.vue
    │   └── layout
    │   │   └── Navbar.vue
    ├── App.vue
    ├── main.js
    ├── store
    │   └── index.js
    └── data
    │   └── countries.js
├── .eslintrc.cjs
├── .github
    ├── semantic.yml
    ├── dependabot.yml
    └── workflows
    │   ├── firebase-hosting-pull-request.yml
    │   └── firebase-hosting-merge.yml
├── .gitignore
├── firebase.json
├── vite.config.js
├── index.html
├── server.js
├── package.json
└── README.md


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "bracketSameLine": true
3 | }


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/images/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaratekHD/befake/main/images/map.png


--------------------------------------------------------------------------------
/images/post.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaratekHD/befake/main/images/post.png


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "befake-623af"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/images/upload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaratekHD/befake/main/images/upload.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/.deepsource.toml:
--------------------------------------------------------------------------------
 1 | version = 1
 2 | 
 3 | [[analyzers]]
 4 | name = "javascript"
 5 | 
 6 |   [analyzers.meta]
 7 |   plugins = ["vue"]
 8 | 
 9 | [[transformers]]
10 | name = "prettier"
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/src/assets/add.svg:
--------------------------------------------------------------------------------
1 | <svg class="prefix__w-24 prefix__h-24 prefix__rp" width="107" height="107" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45.857 18.344v27.513H18.344v15.286h27.513v27.005h15.286V61.143h27.005V45.857H61.143V18.344H45.857z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require("@rushstack/eslint-patch/modern-module-resolution");
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   extends: [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/eslint-config-prettier",
10 |   ],
11 | };
12 | 


--------------------------------------------------------------------------------
/.github/semantic.yml:
--------------------------------------------------------------------------------
1 | # Always validate the PR title AND all the commits
2 | titleAndCommits: true
3 | # Allows use of Merge commits (eg on github: "Merge branch 'master' into feature/ride-unicorns")
4 | # this is only relevant when using commitsOnly: true (or titleAndCommits: true)
5 | allowMergeCommits: true
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>


--------------------------------------------------------------------------------
/src/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import loginComponent from "./Login.vue";
 3 | import postsComponent from "./Posts.vue";
 4 | 
 5 | export default {
 6 |   components: {
 7 |     loginComponent,
 8 |     postsComponent,
 9 |   },
10 | };
11 | </script>
12 | 
13 | <template>
14 |   <loginComponent v-if="!this.$store.state.loggedIn" />
15 |   <postsComponent v-else />
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   background-color: black;
 7 | }
 8 | 
 9 | /* chrommium based browsers */
10 | input::-webkit-outer-spin-button,
11 | input::-webkit-inner-spin-button {
12 |   -webkit-appearance: none;
13 |   margin: 0;
14 | }
15 | 
16 | /* Firefox */
17 | input[type="number"] {
18 |   -moz-appearance: textfield;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/Graph.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import * as d3 from "d3";
 3 | export default {
 4 |   mounted() {
 5 |     const width = 960;
 6 |     const height = 500;
 7 |     const svg = d3.select("svg").attr("width", width).attr("height", height);
 8 |     const g = svg.append("g");
 9 |   },
10 | };
11 | </script>
12 | <template>
13 |   <span class="text-9xl text-white">Hello</span>
14 |   <svg></svg>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | # Fetch and update latest `npm` packages
 4 | - package-ecosystem: npm
 5 |   directory: '/'
 6 |   schedule:
 7 |     interval: daily
 8 |     time: '00:00'
 9 |   open-pull-requests-limit: 10
10 |   reviewers:
11 |     - xkristofx
12 |   assignees:
13 |     - xkristofx
14 |   commit-message:
15 |     prefix: fix
16 |     prefix-development: chore
17 |     include: scope
18 | 


--------------------------------------------------------------------------------
/src/components/ui/errorToast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="fixed left-3 bottom-20 z-50">
 3 |     <div
 4 |       class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
 5 |       role="alert">
 6 |       <strong class="font-bold">Error! </strong>
 7 |       <span class="block sm:inline">{{ text }}</span>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | <script>
12 | export default {
13 |   props: ["text"],
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | .firebase
30 | 
31 | # lockfiles
32 | package-lock.json
33 | 
34 | #other
35 | zzHELP.txt


--------------------------------------------------------------------------------
/src/assets/github-logo.svg:
--------------------------------------------------------------------------------
1 | <svg  viewBox="0 0 64 64" id="i-github" xmlns="http://www.w3.org/2000/svg">
2 |     <path stroke-width="0" fill="white" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "dist",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*",
 7 |       "**/node_modules/**"
 8 |     ],
 9 |     "rewrites": [
10 |       {
11 |         "source": "**",
12 |         "destination": "/index.html"
13 |       }
14 |     ]
15 |   },
16 |   "functions": [
17 |     {
18 |       "source": "functions",
19 |       "codebase": "default",
20 |       "ignore": [
21 |         "node_modules",
22 |         ".git",
23 |         "firebase-debug.log",
24 |         "firebase-debug.*.log"
25 |       ]
26 |     }
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/posts/Realmoji.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: ["realmoji"],
 4 | };
 5 | </script>
 6 | <template>
 7 |   <div class="flex flex-col items-center mb-2">
 8 |     <div class="relative">
 9 |       <img
10 |         referrerpolicy="no-referrer"
11 |         v-bind:src="realmoji.media.url"
12 |         class="w-24 rounded-[50%]" />
13 | 
14 |       <span class="absolute top-[50px] left-[60px] text-5xl"
15 |         >{{ realmoji.emoji }}
16 |       </span>
17 |     </div>
18 |     <span class="font-bold ml-4">{{ realmoji.user.username }}</span>
19 |   </div>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/ui/Button.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import PulseLoader from "vue-spinner/src/PulseLoader.vue";
 3 | 
 4 | export default {
 5 |   components: {
 6 |     PulseLoader,
 7 |   },
 8 |   props: {
 9 |     loading: {
10 |       type: Boolean,
11 |       default: false,
12 |     },
13 |   },
14 | };
15 | </script>
16 | <template>
17 |   <button
18 |     @click="this.$emit('clickedd')"
19 |     class="bg-white hover:bg-amber-100 text-black font-bold py-2 px-4 rounded flex m-1 items-center">
20 |     <slot></slot>
21 |     <PulseLoader v-if="loading" color="black"></PulseLoader>
22 |   </button>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/.github/workflows/firebase-hosting-pull-request.yml:
--------------------------------------------------------------------------------
 1 | # This file was auto-generated by the Firebase CLI
 2 | # https://github.com/firebase/firebase-tools
 3 | 
 4 | name: Deploy to Firebase Hosting on PR
 5 | "on": pull_request
 6 | jobs:
 7 |   build_and_preview:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: actions/checkout@v3
11 |       - run: npm install
12 |       - run: npm run build
13 |       - uses: FirebaseExtended/action-hosting-deploy@v0
14 |         with:
15 |           repoToken: "${{ secrets.GITHUB_TOKEN }}"
16 |           firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_BEFAKE_623AF }}"
17 |           projectId: befake-623af
18 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from "url";
 2 | 
 3 | import { defineConfig } from "vite";
 4 | import vue from "@vitejs/plugin-vue";
 5 | import vueJsx from "@vitejs/plugin-vue-jsx";
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   plugins: [vue(), vueJsx()],
10 |   resolve: {
11 |     alias: {
12 |       "@": fileURLToPath(new URL("./src", import.meta.url)),
13 |     },
14 |   },
15 |   // remove console logs
16 |   esbuild: {
17 |     drop: ["debugger"],
18 |     pure: [
19 |       "console.log",
20 |       "console.warn",
21 |       "console.error",
22 |       "console.debug",
23 |       "console.trace",
24 |     ],
25 |   },
26 | });
27 | 


--------------------------------------------------------------------------------
/src/components/ui/Input.vue:
--------------------------------------------------------------------------------
 1 | <!-- BaseInput.vue component -->
 2 | 
 3 | <template>
 4 |   <input
 5 |     :type="typeOfInput"
 6 |     :value="modelValue"
 7 |     @input="updateValue"
 8 |     @keyup.enter="this.$emit('enterPressed')"
 9 |     :placeholder="placeholder"
10 |     class="border border-gray-300 rounded-lg w-full p-2 text-black m-1" />
11 | </template>
12 | 
13 | <script setup>
14 | const props = defineProps({
15 |   typeOfInput: String,
16 |   modelValue: String,
17 |   placeholder: String,
18 | });
19 | 
20 | const emit = defineEmits(["update:modelValue"]);
21 | 
22 | const updateValue = (event) => {
23 |   emit("update:modelValue", event.target.value);
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/.github/workflows/firebase-hosting-merge.yml:
--------------------------------------------------------------------------------
 1 | # This file was auto-generated by the Firebase CLI
 2 | # https://github.com/firebase/firebase-tools
 3 | 
 4 | name: Deploy to Firebase Hosting on merge
 5 | 'on':
 6 |   push:
 7 |     branches:
 8 |       - main
 9 | jobs:
10 |   build_and_deploy:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v3
14 |       - run: npm install
15 |       - run: npm run build
16 |       - uses: FirebaseExtended/action-hosting-deploy@v0
17 |         with:
18 |           repoToken: '${{ secrets.GITHUB_TOKEN }}'
19 |           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BEFAKE_623AF }}'
20 |           channelId: live
21 |           projectId: befake-623af
22 | 


--------------------------------------------------------------------------------
/src/assets/Twitter.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204">
3 |   <path fill="#1d9bf0" d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"/>
4 | </svg>


--------------------------------------------------------------------------------
/src/pages/Memories.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { mapState } from "vuex";
 3 | import BeRealPhotos from "../components/ui/BeRealPhotos.vue";
 4 | export default {
 5 |   components: {
 6 |     BeRealPhotos,
 7 |   },
 8 |   data() {
 9 |     return {
10 |       isfetch: true,
11 |     };
12 |   },
13 |   beforeMount() {
14 |     this.$store.dispatch("getMemories");
15 |   },
16 |   computed: {
17 |     ...mapState({
18 |       memories: (state) => state.memories,
19 |     }),
20 |   },
21 | };
22 | </script>
23 | <template>
24 |   <div>
25 |     <p class="text-center text-2xl font-bold">Memories</p>
26 |     <div v-for="m in memories" class="m-4 flex flex-col items-center">
27 |       <p class="text-xl font-bold">{{ m.memoryDay }}</p>
28 |       <BeRealPhotos :primary="m.primary.url" :secondary="m.secondary.url" />
29 |     </div>
30 |   </div>
31 | </template>
32 | 


--------------------------------------------------------------------------------
/src/assets/icons8-trash-can.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 170.91 206.535" width="85.455" height="103.268" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path style="mix-blend-mode:normal" d="M68.38 0a8.52 8.52 0 00-6.1 2.468 8.523 8.523 0 00-2.55 6.067H8.647a8.523 8.523 0 00-7.483 4.233 8.527 8.527 0 000 8.6 8.523 8.523 0 007.483 4.234h153.6a8.55 8.55 0 007.5-4.234 8.527 8.527 0 000-8.6 8.55 8.55 0 00-7.5-4.233h-51.083a8.507 8.507 0 00-2.534-6.067 8.56 8.56 0 00-6.116-2.466z" font-family="none"/><path d="M58.48 40.584v.017H15.113c-1.14-.05-2.282.057-3.4.317-1.85.46-3.548 1.506-4.9 3.016-1.569 1.72-2.555 4.016-2.784 6.484-.043.93-.01 1.86.1 2.783l12.084 142.785v.8c.083.591.2 1.176.35 1.75v.116c1.316 4.614 5.046 7.776 9.3 7.884h119.184c4.254-.108 7.984-3.27 9.3-7.884v-.116c.15-.574.267-1.159.35-1.75v-.8L166.781 53.2c.11-.922.143-1.854.1-2.783-.229-2.468-1.215-4.764-2.784-6.484-1.352-1.51-3.05-2.555-4.9-3.016a12.573 12.573 0 00-3.4-.317H110.48v-.017z"/></g></svg>


--------------------------------------------------------------------------------
/src/components/ui/BeRealPhotos.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data() {
 4 |     return {
 5 |       hideSecondaryPhoto: false,
 6 |       reverse: false,
 7 |     };
 8 |   },
 9 |   props: ["primary", "secondary"],
10 | };
11 | </script>
12 | <template>
13 |   <div class="bg-black rounded-lg shadow-md border border-white p-3 sm:w-[40%]">
14 |     <div class="relative top-0 left-0 justify-center">
15 |       <img
16 |         loading="lazy"
17 |         referrerpolicy="no-referrer"
18 |         v-bind:src="reverse ? secondary : primary"
19 |         class="relative top-0 left-0 rounded-md w-[100%]"
20 |         @click="hideSecondaryPhoto = !hideSecondaryPhoto"
21 |         alt="postImage" />
22 |       <img
23 |         loading="lazy"
24 |         referrerpolicy="no-referrer"
25 |         v-bind:src="reverse ? primary : secondary"
26 |         class="absolute top-2 left-2 w-[35%] rounded-md border-2 border-black"
27 |         @click="reverse = !reverse"
28 |         v-if="!hideSecondaryPhoto"
29 |         alt="postImage" />
30 |     </div>
31 |   </div>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/src/assets/favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
 7 |     <meta
 8 |       http-equiv="Cache-Control"
 9 |       content="no-cache, no-store, must-revalidate" />
10 |     <meta http-equiv="Pragma" content="no-cache" />
11 |     <meta http-equiv="Expires" content="0" />
12 |     <script>
13 |       //check if the url
14 |       if (
15 |         window.location.hostname == "befake-623af.web.app" ||
16 |         window.location.hostname == "befake-623af.firebaseapp.com"
17 |       ) {
18 |         window.location.href = "https://befake.ong";
19 |       }
20 |     </script>
21 |     <script
22 |       async
23 |       src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5228052771918993"
24 |       crossorigin="anonymous"></script>
25 |     <title>BeFake</title>
26 |   </head>
27 |   <body>
28 |     <div id="app"></div>
29 |     <script type="module" src="/src/main.js"></script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .bounce-enter-active {
 3 |   animation: bounce-in 0.5s;
 4 | }
 5 | .bounce-leave-active {
 6 |   animation: bounce-in 0.5s reverse;
 7 | }
 8 | @keyframes bounce-in {
 9 |   0% {
10 |     transform: scale(0);
11 |   }
12 |   50% {
13 |     transform: scale(1.25);
14 |   }
15 |   100% {
16 |     transform: scale(1);
17 |   }
18 | }
19 | @-webkit-keyframes bounce-in {
20 |   0% {
21 |     -webkit-transform: scale(0);
22 |   }
23 |   50% {
24 |     -webkit-transform: scale(1.25);
25 |   }
26 |   100% {
27 |     -webkit-transform: scale(1);
28 |   }
29 | }
30 | </style>
31 | <script>
32 | import errorToast from "./components/ui/errorToast.vue";
33 | import NavbarVue from "./components/layout/Navbar.vue";
34 | export default {
35 |   components: {
36 |     errorToast,
37 |     NavbarVue,
38 |   },
39 | };
40 | </script>
41 | 
42 | <template>
43 |   <Transition name="bounce">
44 |     <errorToast
45 |       v-if="this.$store.state.error.show"
46 |       :text="this.$store.state.error.text" />
47 |   </Transition>
48 |   <div class="bg-black text-white">
49 |     <NavbarVue />
50 |     <router-view class="mt-20 z-30" />
51 |   </div>
52 | </template>
53 | 


--------------------------------------------------------------------------------
/src/components/posts/uploadPostImage.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: ["secondary"],
 4 |   data() {
 5 |     return {
 6 |       file: null,
 7 |       imageurl: null,
 8 |     };
 9 |   },
10 |   methods: {
11 |     onFileChange(e) {
12 |       if (e.target.files[0].size > 1048576) {
13 |         this.$store.commit("error", "File size too large. Max 1MB");
14 |         // clear file input
15 |         e.target.value = "";
16 |         return;
17 |       }
18 |       if (e.target.files[0].size < 1024) {
19 |         this.$store.commit("error", "File size too small. Min 1KB");
20 |         // clear file input
21 |         e.target.value = "";
22 |         return;
23 |       }
24 |       this.file = e.target.files[0];
25 |       this.imageurl = URL.createObjectURL(this.file);
26 |       this.$emit("upload", this.file, this.secondary);
27 |     },
28 |   },
29 | };
30 | </script>
31 | <template>
32 |   <div class="border-2 border-white w-[350px] h-[485px]">
33 |     <input type="file" accept="image/*" @change="onFileChange" />
34 |     <div>
35 |       <img :src="imageurl" v-if="imageurl" alt="image uploaded" />
36 |     </div>
37 |   </div>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | // code written by Rob--W author of cors-anywhere
 2 | // Listen on a specific host via the HOST environment variable
 3 | var host = process.env.HOST || "0.0.0.0";
 4 | // Listen on a specific port via the PORT environment variable
 5 | var port = process.env.PORT || 8080;
 6 | 
 7 | var cors_proxy = require("cors-anywhere");
 8 | cors_proxy
 9 |   .createServer({
10 |     originBlacklist: [],
11 |     originWhitelist: [],
12 |     requireHeader: ["origin", "x-requested-with"],
13 |     removeHeaders: [
14 |       "cookie",
15 |       "cookie2",
16 |       // Strip Heroku-specific headers
17 |       "x-request-start",
18 |       "x-request-id",
19 |       "via",
20 |       "connect-time",
21 |       "total-route-time",
22 |       // Other Heroku added debug headers
23 |       // 'x-forwarded-for',
24 |       // 'x-forwarded-proto',
25 |       // 'x-forwarded-port',
26 |     ],
27 |     redirectSameOrigin: true,
28 |     httpProxyOptions: {
29 |       // Do not add X-Forwarded-For, etc. headers, because Heroku already adds it.
30 |       xfwd: false,
31 |     },
32 |   })
33 |   .listen(port, host, function () {
34 |     console.log("Running CORS Anywhere on " + host + ":" + port);
35 |   });
36 | 


--------------------------------------------------------------------------------
/src/assets/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    width="2000"
 4 |    height="2000"
 5 |    version="1.1"
 6 |    id="svg10"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:svg="http://www.w3.org/2000/svg">
 9 |   <defs
10 |      id="defs14" />
11 |   <path
12 |      d="M250 0h1500a250 250 45 01250 250v1500a250 250 135 01-250 250H250A250 250 45 010 1750V250A250 250 135 01250 0z"
13 |      fill-rule="evenodd"
14 |      id="bkg" />
15 |   <g
16 |      fill-rule="evenodd"
17 |      id="logo">
18 |     <path
19 |        d="M796.77 500A296.663 296.663 0 00500.1 796.671a296.663 296.663 0 0081.52 203.318 296.663 296.663 0 00-81.52 203.34A296.663 296.663 0 00796.77 1500a296.663 296.663 0 00268.337-170.644l156.334 160.892 541.779-3.791-421.208-428.418a296.663 296.663 0 00157.89-261.368A296.663 296.663 0 001203.252 500a296.663 296.663 0 00-202.857 81.06A296.663 296.663 0 00796.77 500z"
20 |        fill="#fff"
21 |        id="lett" />
22 |     <path
23 |        d="M806.675 578.474a224.399 224.399 0 00-224.399 224.399A224.399 224.399 0 00699.56 999.419a224.399 224.399 0 00-119.475 197.708 224.399 224.399 0 00224.399 224.4 224.399 224.399 0 00192.887-112.244V684.888a224.399 224.399 0 00-190.696-106.414z"
24 |        id="cut" />
25 |   </g>
26 | </svg>
27 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import VueSelect from "vue-select";
 3 | import Home from "./pages/Home.vue";
 4 | import About from "./pages/About.vue";
 5 | import Friends from "./pages/Friends.vue";
 6 | import Map from "./pages/Map.vue";
 7 | import "./index.css";
 8 | import App from "./App.vue";
 9 | import VueClipboard from "vue3-clipboard";
10 | import { createRouter, createWebHistory } from "vue-router";
11 | import VueGtag from "vue-gtag";
12 | import store from "./store/index.js";
13 | import VueGoogleMaps from "@fawmi/vue-google-maps";
14 | import Memories from "./pages/Memories.vue";
15 | 
16 | const routes = [
17 |   { path: "/", component: Home },
18 |   { path: "/about", component: About },
19 |   { path: "/search", component: Friends },
20 |   { path: "/map", component: Map },
21 |   { path: "/memories", component: Memories },
22 | ];
23 | 
24 | const router = createRouter({
25 |   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
26 |   history: createWebHistory(),
27 |   routes, // short for `routes: routes`
28 | });
29 | 
30 | const app = createApp(App);
31 | app.use(store);
32 | app.use(router);
33 | app.use(
34 |   VueGtag,
35 |   {
36 |     config: { id: "G-ZJ1LQLNXRG" },
37 |   },
38 |   router
39 | );
40 | app.use(VueClipboard, {
41 |   autoSetContainer: true,
42 |   appendToBody: true,
43 | });
44 | app.use(VueGoogleMaps, {
45 |   load: {
46 |     key: "AIzaSyCEYjMqd66uqA-4AXsI0V-1ZyLz23dFEyY",
47 |   },
48 | });
49 | app.component("v-select", VueSelect);
50 | app.config.globalProperties.window = window;
51 | 
52 | app.mount("#app");
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "befake",
 3 |   "version": "1.2.8",
 4 |   "scripts": {
 5 |     "dev": "concurrently -k \"vite --host\" \"node server.js\"",
 6 |     "build": "run-p build-only",
 7 |     "deploy": "run-p deploy-only",
 8 |     "preview": "vite preview --port 4173",
 9 |     "build-only": "vite build",
10 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
11 |   },
12 |   "dependencies": {
13 |     "@fawmi/vue-google-maps": "0.9.67",
14 |     "@fortawesome/fontawesome-svg-core": "^6.4.0",
15 |     "@fortawesome/free-brands-svg-icons": "^6.4.0",
16 |     "@fortawesome/free-regular-svg-icons": "^6.4.0",
17 |     "@fortawesome/free-solid-svg-icons": "^6.4.0",
18 |     "@fortawesome/vue-fontawesome": "^3.0.3",
19 |     "d3": "^7.6.1",
20 |     "i": "^0.3.7",
21 |     "js-sha256": "^0.9.0",
22 |     "moment": "^2.29.4",
23 |     "npm": "^9.2.0",
24 |     "uuid": "^9.0.0",
25 |     "vue": "^3.2.37",
26 |     "vue-browser-geolocation": "^1.8.0",
27 |     "vue-gtag": "^2.0.1",
28 |     "vue-router": "^4.1.5",
29 |     "vue-select": "^4.0.0-beta.6",
30 |     "vue-simple-spinner": "^1.2.10",
31 |     "vue-spinner": "^1.0.4",
32 |     "vue3-clipboard": "^1.0.0",
33 |     "vuex": "^4.0.2"
34 |   },
35 |   "devDependencies": {
36 |     "@rushstack/eslint-patch": "^1.1.0",
37 |     "@vitejs/plugin-vue": "^2.3.3",
38 |     "@vitejs/plugin-vue-jsx": "^1.3.10",
39 |     "@vue/eslint-config-prettier": "^7.0.0",
40 |     "autoprefixer": "^10.4.7",
41 |     "concurrently": "^8.2.1",
42 |     "cors-anywhere": "^0.4.4",
43 |     "eslint": "^8.5.0",
44 |     "eslint-plugin-vue": "^9.0.0",
45 |     "npm-run-all": "^4.1.5",
46 |     "postcss": "^8.4.14",
47 |     "prettier": "^2.5.1",
48 |     "tailwindcss": "^3.1.5",
49 |     "vite": "^2.9.12"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components/posts/PopupModal.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import MyButton from "../ui/Button.vue";
 3 | export default {
 4 |   components: { MyButton },
 5 | };
 6 | </script>
 7 | 
 8 | <style scoped>
 9 | .modal-mask {
10 |   position: fixed;
11 |   z-index: 9998;
12 |   top: 0;
13 |   left: 0;
14 |   width: 100%;
15 |   height: 100%;
16 |   background-color: rgba(0, 0, 0, 0.5);
17 |   display: table;
18 |   transition: opacity 0.3s ease;
19 | }
20 | 
21 | .modal-wrapper {
22 |   display: table-cell;
23 |   vertical-align: middle;
24 | }
25 | 
26 | .modal-container {
27 |   width: 350px;
28 |   margin: 0px auto;
29 |   padding: 20px 30px;
30 |   background-color: #c3edf5;
31 |   border-radius: 2px;
32 |   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
33 |   transition: all 0.3s ease;
34 |   font-family: Helvetica, Arial, sans-serif;
35 | }
36 | 
37 | .modal-header h3 {
38 |   margin-top: 0;
39 |   color: #42b983;
40 | }
41 | 
42 | .modal-body {
43 |   margin: 20px 0;
44 | }
45 | 
46 | .modal-default-button {
47 |   float: right;
48 | }
49 | 
50 | .modal-enter {
51 |   opacity: 0;
52 | }
53 | 
54 | .modal-leave-active {
55 |   opacity: 0;
56 | }
57 | 
58 | .modal-enter .modal-container,
59 | .modal-leave-active .modal-container {
60 |   -webkit-transform: scale(1.1);
61 |   transform: scale(1.1);
62 | }
63 | </style>
64 | 
65 | <template>
66 |   <transition name="modal">
67 |     <div class="modal-mask">
68 |       <div class="modal-wrapper">
69 |         <div class="modal-container">
70 |           <div class="modal-body">
71 |             <slot name="body"> </slot>
72 |           </div>
73 | 
74 |           <div class="modal-footer">
75 |             <MyButton @click="$emit('close')"> close </MyButton>
76 |           </div>
77 |         </div>
78 |       </div>
79 |     </div>
80 |   </transition>
81 | </template>
82 | 


--------------------------------------------------------------------------------
/src/components/ui/reactToAll.vue:
--------------------------------------------------------------------------------
 1 | <!-- create simple vue.js component -->
 2 | <script>
 3 | import PopupModal from "../posts/PopupModal.vue";
 4 | import MyButton from "../ui/Button.vue";
 5 | import UploadRealmoji from "../posts/uploadRealmoji.vue";
 6 | export default {
 7 |   name: "ReactToAll",
 8 |   components: {
 9 |     PopupModal,
10 |     MyButton,
11 |     UploadRealmoji,
12 |   },
13 |   data() {
14 |     return {
15 |       showPopup: false,
16 |       popupTitle: "React to all posts",
17 |       popupContent: "Are you sure you want to react to all posts?",
18 |       file: null,
19 |       imageurl: null,
20 |       loading: false,
21 |       image: {},
22 |     };
23 |   },
24 |   methods: {
25 |     closePopup() {
26 |       this.showPopup = false;
27 |     },
28 |   },
29 | };
30 | </script>
31 | 
32 | <style scoped>
33 | .text-rainbow {
34 |   background-image: linear-gradient(
35 |     to left,
36 |     rgb(240, 130, 240),
37 |     rgb(190, 112, 245),
38 |     rgb(0, 195, 255),
39 |     rgb(0, 255, 0),
40 |     rgb(255, 255, 0),
41 |     rgb(255, 165, 0),
42 |     rgb(255, 79, 79)
43 |   );
44 |   -webkit-background-clip: text;
45 |   background-clip: text;
46 |   -webkit-text-fill-color: transparent;
47 | }
48 | </style>
49 | 
50 | <template>
51 |   <span
52 |     class="cursor-pointer text-rainbow sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
53 |     @click="showPopup = true"
54 |     >{{ popupTitle }}</span
55 |   >
56 |   <PopupModal v-if="showPopup" @close="closePopup">
57 |     <template v-slot:body>
58 |       <div class="flex items-center flex-col gap-2 text-black">
59 |         <h3 class="font-bold">{{ popupTitle }}</h3>
60 |         <p class="pb-10">{{ popupContent }}</p>
61 |       </div>
62 |       <UploadRealmoji />
63 |     </template>
64 |   </PopupModal>
65 | </template>
66 | 


--------------------------------------------------------------------------------
/src/assets/kofi.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    id="Layer_1"
 4 |    data-name="Layer 1"
 5 |    viewBox="0 0 20 13.12"
 6 |    version="1.1"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:svg="http://www.w3.org/2000/svg"
 9 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
10 |    xmlns:cc="http://creativecommons.org/ns#"
11 |    xmlns:dc="http://purl.org/dc/elements/1.1/">
12 |   <defs
13 |      id="defs4">
14 |     <style
15 |        id="style2">.cls-1{fill:#fff;stroke:#323a47;stroke-linecap:round;stroke-linejoin:round;}.cls-2{fill:#ff5e5b;}</style>
16 |   </defs>
17 |   <title
18 |      id="title6">Kofi Cup</title>
19 |   <g
20 |      id="layer1">
21 |     <path
22 |        id="cup"
23 |        class="cls-1"
24 |        d="m 15.54,7.29 a 5.87,5.87 0 0 1 -1.33,0 V 2.82 h 0.9 a 2,2 0 0 1 2.06,2.09 2.21,2.21 0 0 1 -1.63,2.38 M 19.41,4.14 A 4.34,4.34 0 0 0 17.63,1.34 4.8,4.8 0 0 0 14.91,0.5 H 1.17 A 0.72,0.72 0 0 0 0.5,1.21 c 0,0 0,0.15 0,0.15 0,0 0,6.08 0,9.33 a 2,2 0 0 0 2.08,1.91 h 9.28 a 3,3 0 0 0 0.42,-0.05 2.65,2.65 0 0 0 1.87,-2.91 c 3.44,0.19 5.87,-2.24 5.26,-5.47"
25 |        style="stroke:#000000;stroke-opacity:1" />
26 |     <path
27 |        id="heart"
28 |        class="cls-2"
29 |        d="m 5.4472656,3.4042969 a 2.57,2.57 0 0 0 -0.8476562,0.125 2.1,2.1 0 0 0 -0.5703125,3.4101562 c 0.9799983,1.1399978 3.1699219,3.1406249 3.1699219,3.1406249 a 0.19,0.19 0 0 0 0.140625,0.03711 0.19,0.19 0 0 0 0.140625,-0.03711 c 0,0 2.1899234,-2.0006271 3.1699222,-3.1406249 A 2.1,2.1 0 0 0 10.080078,3.5292969 2.57,2.57 0 0 0 9.2324219,3.4042969 2.57,2.57 0 0 0 7.3398438,4.2890625 2.57,2.57 0 0 0 5.4472656,3.4042969 Z" />
30 |   </g>
31 |   <metadata
32 |      id="metadata606">
33 |     <rdf:RDF>
34 |       <cc:Work
35 |          rdf:about="">
36 |         <dc:title>Kofi Cup</dc:title>
37 |       </cc:Work>
38 |     </rdf:RDF>
39 |   </metadata>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/src/assets/discord-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#5865F2"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="71" height="55" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/src/components/login/countrypicker.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import countries from "../../data/countries.js";
 3 | export default {
 4 |   data() {
 5 |     return {
 6 |       countries: countries,
 7 |       selectedCountry: undefined,
 8 |       oldCountry: null,
 9 |     };
10 |   },
11 |   methods: {
12 |     selectCountry(value) {
13 |       console.log(value);
14 |       if (value == null) return;
15 |       localStorage.setItem("previousCountry", value.isoCode);
16 |       this.$emit("asdfasdf", value.dialCode);
17 |       const papa = document.querySelector("div.vs__selected-options");
18 |       const flag = document.createElement("img");
19 |       flag.src = value.flag;
20 |       flag.classList.add("w-auto");
21 |       flag.classList.add("h-7");
22 |       flag.classList.add("flag_icon");
23 |       flag.classList.add("rounded");
24 |       flag.classList.add("mr-2");
25 |       flag.classList.add("border");
26 |       flag.classList.add("border-gray-300");
27 |       papa.insertBefore(flag, papa.firstChild);
28 |     },
29 |     rmFlag() {
30 |       this.oldCountry = this.selectedCountry;
31 |       document.querySelectorAll(".flag_icon").forEach((e) => e.remove());
32 |       localStorage.setItem("previousCountry", null);
33 |     },
34 |     retriveCC() {
35 |       if (this.oldCountry !== null) {
36 |         this.selectCountry(this.oldCountry);
37 |         this.selectedCountry = this.oldCountry;
38 |       }
39 |     },
40 |   },
41 |   mounted() {
42 |     if (localStorage.getItem("previousCountry") !== "null") {
43 |       const index = this.countries.findIndex(
44 |         (e) => e.isoCode === localStorage.getItem("previousCountry")
45 |       );
46 |       this.selectCountry(this.countries[index]);
47 |       this.selectedCountry = this.countries[index];
48 |     }
49 |   },
50 |   emits: ["asdfasdf"],
51 | };
52 | </script>
53 | 
54 | <style>
55 | @import "vue-select/dist/vue-select.css";
56 | .vs__dropdown-toggle {
57 |   border: none;
58 | }
59 | </style>
60 | 
61 | <template>
62 |   <v-select
63 |     placeholder="Choose your country"
64 |     v-model="selectedCountry"
65 |     :options="countries"
66 |     class="bg-white border border-gray-300 rounded-lg w-full p-1 text-black max-w-sm"
67 |     @open="rmFlag"
68 |     @update:modelValue="rmFlag"
69 |     @close="retriveCC" />
70 | </template>
71 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 2 | :root {
 3 |   --vt-c-white: #ffffff;
 4 |   --vt-c-white-soft: #f8f8f8;
 5 |   --vt-c-white-mute: #f2f2f2;
 6 | 
 7 |   --vt-c-black: #181818;
 8 |   --vt-c-black-soft: #222222;
 9 |   --vt-c-black-mute: #282828;
10 | 
11 |   --vt-c-indigo: #2c3e50;
12 | 
13 |   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 |   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 |   --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 |   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 | 
18 |   --vt-c-text-light-1: var(--vt-c-indigo);
19 |   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 |   --vt-c-text-dark-1: var(--vt-c-white);
21 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 | 
24 | /* semantic color variables for this project */
25 | :root {
26 |   --color-background: var(--vt-c-white);
27 |   --color-background-soft: var(--vt-c-white-soft);
28 |   --color-background-mute: var(--vt-c-white-mute);
29 | 
30 |   --color-border: var(--vt-c-divider-light-2);
31 |   --color-border-hover: var(--vt-c-divider-light-1);
32 | 
33 |   --color-heading: var(--vt-c-text-light-1);
34 |   --color-text: var(--vt-c-text-light-1);
35 | 
36 |   --section-gap: 160px;
37 | }
38 | 
39 | @media (prefers-color-scheme: dark) {
40 |   :root {
41 |     --color-background: var(--vt-c-black);
42 |     --color-background-soft: var(--vt-c-black-soft);
43 |     --color-background-mute: var(--vt-c-black-mute);
44 | 
45 |     --color-border: var(--vt-c-divider-dark-2);
46 |     --color-border-hover: var(--vt-c-divider-dark-1);
47 | 
48 |     --color-heading: var(--vt-c-text-dark-1);
49 |     --color-text: var(--vt-c-text-dark-2);
50 |   }
51 | }
52 | 
53 | *,
54 | *::before,
55 | *::after {
56 |   box-sizing: border-box;
57 |   margin: 0;
58 |   position: relative;
59 |   font-weight: normal;
60 | }
61 | 
62 | body {
63 |   min-height: 100vh;
64 |   color: var(--color-text);
65 |   background: var(--color-background);
66 |   transition: color 0.5s, background-color 0.5s;
67 |   line-height: 1.6;
68 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
69 |     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
70 |   font-size: 15px;
71 |   text-rendering: optimizeLegibility;
72 |   -webkit-font-smoothing: antialiased;
73 |   -moz-osx-font-smoothing: grayscale;
74 | }
75 | 


--------------------------------------------------------------------------------
/src/components/ui/myCheckbox.vue:
--------------------------------------------------------------------------------
 1 | <!-- CustomInput.vue -->
 2 | <script>
 3 | export default {
 4 |   props: ["modelValue"],
 5 |   emits: ["update:modelValue"],
 6 |   computed: {
 7 |     value: {
 8 |       get() {
 9 |         return this.modelValue;
10 |       },
11 |       set(value) {
12 |         this.$emit("update:modelValue", value);
13 |       },
14 |     },
15 |   },
16 |   data() {
17 |     return {
18 |       id: null,
19 |     };
20 |   },
21 |   mounted() {
22 |     this.id = this._uid;
23 |   },
24 | };
25 | </script>
26 | 
27 | <style scoped>
28 | input[type="checkbox"] {
29 |   opacity: 0;
30 |   position: absolute;
31 | }
32 | 
33 | input[type="checkbox"] + label > svg {
34 |   display: inline-block;
35 |   background: none;
36 |   margin: -1px 4px 0 0;
37 |   vertical-align: middle;
38 |   cursor: pointer;
39 | }
40 | 
41 | input[type="checkbox"] + label > svg > path.checkmark {
42 |   fill: none;
43 | }
44 | 
45 | input[type="checkbox"]:checked + label > svg > path.checkmark {
46 |   fill: rgb(44, 187, 93);
47 |   /* fill: rgb(0,0,0); */
48 | }
49 | 
50 | .bkg {
51 |   fill: rgb(0, 0, 0);
52 |   /* fill: rgb(255, 255, 255); */
53 | }
54 | 
55 | .stroker {
56 |   fill: rgb(255, 255, 255);
57 | }
58 | </style>
59 | 
60 | <template>
61 |   <input :id="id" type="checkbox" class="m-1 w-5 h-5" v-model="value" />
62 |   <label :for="id" class="m-1 w-5 h-5">
63 |     <svg
64 |       class="w-5 h-5"
65 |       viewBox="0 0 22 22"
66 |       version="1.1"
67 |       id="svg6"
68 |       xmlns="http://www.w3.org/2000/svg"
69 |       xmlns:svg="http://www.w3.org/2000/svg">
70 |       <defs id="defs312" />
71 |       <path
72 |         id="pt0"
73 |         class="stroker"
74 |         d="M 4.4,0 A 4.4,4.4 0 0 0 0,4.4 V 17.6 A 4.4,4.4 0 0 0 4.4,22 H 17.6 A 4.4,4.4 0 0 0 22,17.6 V 4.4 A 4.4,4.4 0 0 0 17.6,0 Z" />
75 |       <path
76 |         class="bkg"
77 |         fill-rule="evenodd"
78 |         d="m 5,1 h 12 a 4,4 0 0 1 4,4 v 12 a 4,4 0 0 1 -4,4 H 5 A 4,4 0 0 1 1,17 V 5 A 4,4 0 0 1 5,1 Z"
79 |         id="bkg" />
80 |       <path
81 |         d="M 9.0913131,13.767469 5.9748234,10.390643 C 5.031576,9.4473947 3.6204779,11.15656 4.5599523,12.096034 l 3.8295845,4.089921 a 0.99984227,0.99984227 0 0 0 1.4110983,0 L 17.459804,7.5193973 C 18.372867,6.5799229 16.91272,4.8292556 16.052478,5.814006 Z"
82 |         class="checkmark"
83 |         id="checkmark" />
84 |     </svg>
85 |   </label>
86 | </template>
87 | 


--------------------------------------------------------------------------------
/src/pages/Friends.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import MyInput from "../components/ui/Input.vue";
 3 | import MyButton from "../components/ui/Button.vue";
 4 | export default {
 5 |   components: { MyInput, MyButton },
 6 |   data() {
 7 |     return {
 8 |       username: "",
 9 |       profiles: [],
10 |       nonefound: false,
11 |     };
12 |   },
13 |   methods: {
14 |     search() {
15 |       fetch(
16 |         `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/search/profile?query=${this.username}&limit=20`,
17 |         {
18 |           headers: {
19 |             authorization: `Bearer ${localStorage.getItem("token")}`,
20 |             // accept: "*/*",
21 |             // "bereal-platform": "iOS",
22 |             // "bereal-os-version": "14.7.1",
23 |             // "accept-language": "en-US;q=1.0",
24 |             // "bereal-device-id": "BE707B57-FDF8-4764-87FB-96367BB32018",
25 |             // "bereal-app-language": "en-US",
26 |             // "user-agent":
27 |             //   "BeReal/0.28.2 (AlexisBarreyat.BeReal; build:8425; iOS 14.7.1) 1.0.0/BRApiKit",
28 |             // "bereal-timezone": "America/Los_Angeles",
29 |             // "bereal-device-language": "en",
30 |             // "bereal-app-version": "0.28.2-(8425)",
31 |           },
32 |         }
33 |       )
34 |         .then((res) => res.json())
35 |         .then((res) => {
36 |           this.profiles = res.data;
37 |           this.nonefound = res.data.length === 0;
38 |         });
39 |     },
40 |   },
41 | };
42 | </script>
43 | <template>
44 |   <div class="flex flex-col items-center m-10">
45 |     <div class="flex items-center">
46 |       <MyInput
47 |         v-model="username"
48 |         placeholder="Username"
49 |         typeOfInput="text"
50 |         class="w-96"
51 |         @enter="search" />
52 |       <MyButton @click="search">Search</MyButton>
53 |     </div>
54 |     <div class="flex flex-col items-center">
55 |       <div v-if="nonefound">
56 |         <div class="text-2xl text-red-800">No users found</div>
57 |       </div>
58 |       <div v-for="i in profiles" :key="i.id">
59 |         <div class="flex items-center gap-3">
60 |           <img
61 |             :src="
62 |               i.profilePicture
63 |                 ? i.profilePicture.url
64 |                 : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQotrbW-vxBRCZIOODdVJZ5NTaTjOnFveV500Dve9g&s'
65 |             "
66 |             class="w-24 h-24 rounded-[50%]"
67 |             alt="prof_pic" />
68 |           <div class="flex flex-col">
69 |             <div class="text-2xl">{{ i.username }}</div>
70 |             <div class="text-xl">{{ i.mutualFriends }} mutual friends</div>
71 |           </div>
72 |         </div>
73 |       </div>
74 |     </div>
75 |   </div>
76 | </template>
77 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # BeFake
 2 | ## Features
 3 | 
 4 | 1. See friends' posts without posting anything yourself
 5 | 
 6 |    BeFake allows you to see your friends' posts without posting anything yourself. You can also screenshot their posts without them getting notified. You can also see the location (if available), date and time, retakes, comments, and realmoji reactions on all posts. You can even write your own comments straight from BeFake. Support for realmoji reactions is coming soon.
 7 | 
 8 |    <!-- add an image -->
 9 | 
10 |    ![BeFake Posts](images/post.png)
11 | 
12 | 2. Upload your own posts and realmoji reactions!
13 | 
14 |    You can also upload your own posts with photos from your camera roll, which will be visible to your friends. GIFs are also supported, meaning your BeReal can be a GIF! The BeFake client also supports custom location with longitude and latitude.
15 | 
16 |    ![BeFake Upload](images/upload.png)
17 | 
18 | 3. Interactive Map
19 |    See where your friends are posting from on an interactive map.The map is interactive, so you can zoom in and out, and move around. You can also click on a marker to see the details of the post in a popup on the map! Once logged in see [https://befake.ong/map](https://befake.ong/map) to see the map. Note: The map is does not work well on mobile devices.
20 |    ![BeFake Map](images/map.png)
21 | 
22 | ## Development Setup
23 | 
24 | See [Vite Configuration Reference](https://vitejs.dev/config/).
25 | 
26 | ## Project Setup
27 | 
28 | ```sh
29 | npm install
30 | ```
31 | 
32 | ### Compile and Hot-Reload for Development
33 | 
34 | ```sh
35 | npm run dev
36 | ```
37 | 
38 | ### Lint with [ESLint](https://eslint.org/)
39 | 
40 | ```sh
41 | npm run lint
42 | ```
43 | 
44 | # Contributing
45 | 
46 | Thank you for considering contributing to Befake! We are grateful for your interest in helping to improve the project and make it even better.
47 | 
48 | There are many ways that you can contribute to the project, including but not limited to:
49 | 
50 | - Reporting bugs and submitting feature requests
51 | - Submitting pull requests for bug fixes and new features
52 | 
53 | Before you start contributing, please take a moment to read through the following guidelines:
54 | 
55 | - Familiarize yourself with the project and its goals.
56 | - Check the existing issues to see if your bug or feature request has already been reported. If it has, please add your thoughts to the existing issue.
57 | - Follow the project's code style and conventions.
58 | - Test your changes thoroughly before submitting a pull request.
59 | - Make sure your pull request targets the correct branch (usually master).
60 | - Thank you for your contributions! Every bug report, feature request, and code change helps make befake better for everyone.
61 | 
62 | # Donations
63 | 
64 | This project is free and open source. If you would like to support the development of this project, you can donate to the project [here](https://ko-fi.com/rahulvaidun)
65 | 


--------------------------------------------------------------------------------
/src/components/ui/Carousel.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | // import { mapState } from "vuex";
  3 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
  4 | import { library } from "@fortawesome/fontawesome-svg-core";
  5 | import {
  6 |   faChevronLeft,
  7 |   faChevronRight,
  8 | } from "@fortawesome/free-solid-svg-icons";
  9 | 
 10 | library.add(faChevronLeft, faChevronRight);
 11 | 
 12 | export default {
 13 |   components: {
 14 |     FontAwesomeIcon,
 15 |   },
 16 |   props: ["length"],
 17 |   data() {
 18 |     return {
 19 |       curr: 0,
 20 |     };
 21 |   },
 22 |   methods: {
 23 |     next() {
 24 |       this.curr === this.length - 1 ? (this.curr = 0) : this.curr++;
 25 |       const cp = this.$refs.carousel.children[this.curr];
 26 |       console.log(cp);
 27 |       if (cp.scrollIntoViewIfNeeded)
 28 |         cp.scrollIntoViewIfNeeded({ behavior: "smooth" });
 29 |       else if (cp.scrollIntoView) {
 30 |         cp.scrollIntoView({ behavior: "smooth" });
 31 |       }
 32 |     },
 33 |     prev() {
 34 |       this.curr === 0 ? (this.curr = this.length - 1) : this.curr--;
 35 |       const cp = this.$refs.carousel.children[this.curr];
 36 | 
 37 |       if (cp.scrollIntoViewIfNeeded)
 38 |         cp.scrollIntoViewIfNeeded({ behavior: "smooth" });
 39 |       else if (cp.scrollIntoView) {
 40 |         cp.scrollIntoView({ behavior: "smooth" });
 41 |       }
 42 |     },
 43 |     scrollHandler(e) {
 44 |       // massive shoutout to stackoverflow user klaas leussink for this solution
 45 |       // https://stackoverflow.com/questions/65952068/determine-if-a-snap-scroll-elements-snap-scrolling-event-is-complete
 46 |       var atSnappingPoint = e.target.scrollLeft % e.target.offsetWidth === 0;
 47 |       var timeOut = atSnappingPoint ? 0 : 150;
 48 | 
 49 |       console.log("here");
 50 |       clearTimeout(e.target.scrollTimeout);
 51 |       e.target.scrollTimeout = setTimeout(() => {
 52 |         if (!timeOut) {
 53 |           console.log("snapped");
 54 |           const index = e.target.scrollLeft / e.target.offsetWidth;
 55 |           this.curr = index;
 56 |           this.$emit("scroll", index);
 57 |         } else {
 58 |           console.log("user stopped scrolling");
 59 |         }
 60 |       }, timeOut);
 61 |     },
 62 |   },
 63 | };
 64 | </script>
 65 | <style>
 66 | .scrollbar-hide {
 67 |   -ms-overflow-style: none;
 68 | }
 69 | .scrollbar-hide::-webkit-scrollbar {
 70 |   display: none;
 71 | }
 72 | </style>
 73 | <template>
 74 |   <div class="relative w-[400px]">
 75 |     <div
 76 |       class="flex snap-x snap-mandatory overflow-x-scroll scroll-smooth scrollbar-hide"
 77 |       ref="carousel"
 78 |       @scroll="scrollHandler">
 79 |       <slot></slot>
 80 |     </div>
 81 |     <button
 82 |       @click="prev"
 83 |       class="p-1 rounded-full shadow bg-white/80 text-gray-800 hover:bg-white absolute top-[50%] left-[1%]">
 84 |       <font-awesome-icon :icon="['fas', 'chevron-left']" />
 85 |     </button>
 86 |     <button
 87 |       @click="next"
 88 |       class="p-1 rounded-full shadow bg-white/80 text-gray-800 hover:bg-white absolute top-[50%] left-[95%]">
 89 |       <font-awesome-icon :icon="['fas', 'chevron-right']" />
 90 |     </button>
 91 |     <div class="absolute bottom-4 right-0 left-0">
 92 |       <div class="flex items-center justify-center gap-2">
 93 |         <div
 94 |           class="transition-all w-3 h-3 bg-white rounded-full"
 95 |           v-for="(_, i) in length"
 96 |           :class="{ 'p-2': curr === i, 'bg-opacity-50': curr !== i }"></div>
 97 |       </div>
 98 |     </div>
 99 |   </div>
100 | </template>
101 | 


--------------------------------------------------------------------------------
/src/pages/Posts.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import moment from "moment";
  3 | import { defineComponent } from "vue";
  4 | import singlePostComponentVue from "../components/posts/singlePostComponent.vue";
  5 | import { copyText } from "vue3-clipboard";
  6 | import PulseLoader from "vue-spinner/src/PulseLoader.vue";
  7 | import { event } from "vue-gtag";
  8 | import NavbarVue from "../components/layout/Navbar.vue";
  9 | import UploadPost from "../components/posts/uploadPost.vue";
 10 | import { mapState } from "vuex";
 11 | import UploadProfilePicture from "../components/posts/uploadProfilePicture.vue";
 12 | import ReactToAll from "../components/ui/reactToAll.vue";
 13 | import Carousel from "../components/ui/Carousel.vue";
 14 | export default {
 15 |   components: {
 16 |     singlePostComponentVue,
 17 |     PulseLoader,
 18 |     NavbarVue,
 19 |     UploadPost,
 20 |     UploadProfilePicture,
 21 |     ReactToAll,
 22 |     Carousel,
 23 |   },
 24 |   async beforeMount() {
 25 |     event("view_posts", {
 26 |       event_category: "posts",
 27 |       event_label: "view_posts",
 28 |     });
 29 |     Promise.all([
 30 |       this.$store.dispatch("getPosts"),
 31 |       // this.$store.dispatch("getUser"),
 32 |       // fetch(
 33 |       //   "https://arcane-woodland-79412.herokuapp.com/https://mobile.bereal.com/api/relationships/friends",
 34 |       //   {
 35 |       //     method: "GET",
 36 |       //     headers: {
 37 |       //       accept: "application/json",
 38 |       //       "content-type": "application/json",
 39 |       //       "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
 40 |       //       authorization: localStorage.getItem("token") ?? "",
 41 |       //       "accept-language": "en-US,en;q=0.9",
 42 |       //     },
 43 |       //   }
 44 |       // )
 45 |       //   .then((res) => res.json())
 46 |       //   .then((data) => {
 47 |       //     this.friends = data.data;
 48 |       //   }),
 49 |     ])
 50 |       .then(() => {
 51 |         this.isfetch = false;
 52 |       })
 53 |       .catch((err) => {
 54 |         console.log(err);
 55 |         this.$store.commit("error", "Something went wrong while getting posts");
 56 |       });
 57 |   },
 58 |   data() {
 59 |     return {
 60 |       phone: "",
 61 |       sessionInfo: "",
 62 |       code: "",
 63 |       friends: [],
 64 |       memories: [],
 65 |       isfetch: true,
 66 |     };
 67 |   },
 68 |   methods: {
 69 |     timenow() {
 70 |       return moment().format("MMMM Do YYYY, h:mm:ss a");
 71 |     },
 72 |   },
 73 |   computed: {
 74 |     ...mapState({
 75 |       user: (state) => state.user,
 76 |       posts: (state) => state.posts,
 77 |       // userPosted: (state) => state.userPosted,
 78 |     }),
 79 |   },
 80 | };
 81 | </script>
 82 | <template>
 83 |   <div class="p-3 md:p-0 max-w-xl mx-auto flex flex-col gap-10">
 84 |     <div>
 85 |       <a
 86 |         class="cursor-pointer text-red-500 rounded-md font-bold sm:hidden"
 87 |         href="https://ko-fi.com/rahulvaidun">
 88 |         Donate
 89 |       </a>
 90 |       <p class="sm:hidden">
 91 |         <span class="text-red-600">NEW! </span>
 92 |         Always post on time even when you're not online :)
 93 |       </p>
 94 |     </div>
 95 |     <UploadPost v-if="!isfetch && !posts.posted" :user="user" />
 96 |     <div
 97 |       v-for="post in posts"
 98 |       v-if="!isfetch"
 99 |       :key="post.id"
100 |       class="flex flex-col justify-center items-center dark:text-white">
101 |       <single-post-component-vue
102 |         :post="post.posts"
103 |         class="mt-10"
104 |         :user="post.user" />
105 |       <!-- <Carousel :length="post.posts.length" v-else>
106 |       </Carousel> -->
107 |     </div>
108 |     <div v-else class="grid h-screen place-items-center">
109 |       <pulse-loader color="white"></pulse-loader>
110 |     </div>
111 |   </div>
112 |   <!-- <UploadProfilePicture :user="user" /> -->
113 | </template>
114 | 


--------------------------------------------------------------------------------
/src/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex m-10 justify-around">
 3 |     <div class="flex-col items-center">
 4 |       <div class="flex flex-col max-w-2xl space-y-3 items-center">
 5 |         <img
 6 |           src="https://raw.githubusercontent.com/rvaidun/rvaidun.github.io/main/images/myphoto.jpeg"
 7 |           alt="Photo of Rahul Vaidun"
 8 |           class="rounded-full w-48" />
 9 |         <h1 class="text-5xl font-bold">Hi! 👋</h1>
10 |         <p class="text-base">
11 |           This website was created by
12 |           <span class="font-bold">Rahul Vaidun</span> I am a 20 year old college
13 |           student from California majoring in Computer Science.
14 |         </p>
15 | 
16 |         <p class="text-base">
17 |           I created this website as a side project to learn more about Vue.js
18 |           and web development. I also wanted to reverse engineer BeReal's API
19 |           and create a web app that would allow users to view their BeReal data.
20 |           This happens to allow users to also view their friends BeReals without
21 |           posting their own BeReals and screenshot BeReals. This website was
22 |           designed from ground up to work on mobile devices. All the styling is
23 |           done with <span class="font-bold">Tailwind CSS</span>
24 |         </p>
25 |         <p class="text-base">
26 |           If you are interested in viewing the source code or making your own
27 |           contributions to BeFake check out our
28 |           <a class="text-blue-600" href="https://github.com/rvaidun/befake"
29 |             >github repository</a
30 |           >
31 |         </p>
32 |         <p class="text-3xl font-bold">Features</p>
33 |         <p class="indent-5">
34 |           See friends' posts without posting anything yourself BeFake allows you
35 |           to see your friends' posts without posting anything yourself. You can
36 |           also screenshot their posts without them getting notified. You can
37 |           also see the location (if available), date and time, retakes,
38 |           comments, and realmoji reactions on all posts. You can even write your
39 |           own comments straight from BeFake.
40 |         </p>
41 | 
42 |         <p>
43 |           2. Upload your own posts and realmoji reactions! You can also upload
44 |           your own posts with photos from your camera roll, which will be
45 |           visible to your friends. GIFs are also supported, meaning your BeReal
46 |           can be a GIF! The BeFake client also supports custom location with
47 |           longitude and latitude.
48 |         </p>
49 |         <div class="flex flex-col items-center text-white">
50 |           <h1 class="text-3xl font-bold">Contact me</h1>
51 |           <div class="flex flex-col items-center space-y-1 text-blue-600">
52 |             <a href="https://www.twitter.com/rahulvaidun/">Twitter </a>
53 |             <a href="https://www.linkedin.com/in/rahulvaidun/">LinkedIn </a>
54 |             <a href="https://www.github.com/rvaidun/">Github </a>
55 |             <a href="https://www.instagram.com/rahulvaidun/">Instagram </a>
56 |             <!-- email -->
57 |             <a href="mailto:rahul@befake.fr">Email</a>
58 |             <a href="https://ko-fi.com/rahulvaidun" class="font-bold"
59 |               >Donation</a
60 |             >
61 |           </div>
62 |         </div>
63 |       </div>
64 |       <div class="pt-10 flex flex-col items-center">
65 |         <h1 class="text-3xl font-bold">Contributors:</h1>
66 |         <div class="flex items-center flex-col">
67 |           <a
68 |             class="text-green-600 text-xl underline"
69 |             href="https://github.com/xKRISTOFx"
70 |             >xKRISTOFx</a
71 |           >
72 |           <div class="pt-2 flex flex-col items-center">
73 |             <!-- place in spans text to look good:Student at Technikum Nowoczesnych Technologii, Kleszczów, Poland I made numerous improvements to the application, improved selection of countries, responding to all bereals at once and many other minor ones. Contact Click on my green nickname -->
74 |             <p>
75 |               Student at Technikum Nowoczesnych Technologii, Kleszczów, Poland
76 |             </p>
77 |             <p>
78 |               I made numerous improvements to the application, improved
79 |               selection of countries,
80 |             </p>
81 |             <p>
82 |               implemented responding to all bereals at once and many other minor
83 |               ones.
84 |             </p>
85 |             <p>Contact:</p>
86 |             <p>⬆️Click on my green nickname⬆️</p>
87 |           </div>
88 |         </div>
89 |       </div>
90 |     </div>
91 |   </div>
92 | </template>
93 | 


--------------------------------------------------------------------------------
/src/components/layout/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import MyButton from "../ui/Button.vue";
  3 | // importing reacttoall.vue
  4 | import ReactToAll from "../ui/reactToAll.vue";
  5 | export default {
  6 |   components: { MyButton, ReactToAll },
  7 |   data() {
  8 |     return {
  9 |       copy: JSON.stringify({
 10 |         token: localStorage.getItem("token") ?? "",
 11 |         refreshToken: localStorage.getItem("refreshToken") ?? "",
 12 |         expiration: localStorage.getItem("expiration") ?? "",
 13 |         user_id: localStorage.getItem("user_id") ?? "",
 14 |         fbrefreshtoken: localStorage.getItem("fbrefreshtoken") ?? "",
 15 |         fbtoken: localStorage.getItem("fbtoken") ?? "",
 16 |       }),
 17 |       hideNavbar: true,
 18 |       showNav: false,
 19 |     };
 20 |   },
 21 | };
 22 | </script>
 23 | <style scoped>
 24 | .githublogo::before {
 25 |   content: url("../../assets/github-logo.svg");
 26 |   display: inline-block;
 27 |   width: 40px;
 28 | }
 29 | /* we will explain what these classes do next! */
 30 | .fade-enter-active,
 31 | .fade-leave-active {
 32 |   transition: opacity 0.3s ease;
 33 | }
 34 | 
 35 | .fade-enter-from,
 36 | .fade-leave-to {
 37 |   opacity: 0;
 38 | }
 39 | 
 40 | .slide-enter-active,
 41 | .slide-leave-active,
 42 | .v-leave-from {
 43 |   transform: translateY(0%);
 44 |   transition: all 0.3s ease-in-out;
 45 | }
 46 | 
 47 | .slide-enter-from {
 48 |   transform: translateY(100%);
 49 | }
 50 | .slide-leave-to {
 51 |   transform: translateY(100%);
 52 | }
 53 | </style>
 54 | 
 55 | <template>
 56 |   <nav class="fixed top-0 w-full text-white bg-black mb-3 z-30">
 57 |     <div class="max-w-8xl py-2 sm:mx-8 mr-2">
 58 |       <div class="flex justify-between items-center flex-row">
 59 |         <div class="flex items-center">
 60 |           <!-- logo -->
 61 |           <router-link
 62 |             to="/"
 63 |             class="flex items-center cursor-pointer"
 64 |             v-clipboard:copy="copy">
 65 |             <img
 66 |               src="../../assets/favicon.svg"
 67 |               class="w-12 rounded-full object-cover mr-2"
 68 |               alt="logo" />
 69 |             <span class="text-3xl font-bold">BeFake</span>
 70 |           </router-link>
 71 |         </div>
 72 |         <div class="hidden md:flex items-center">
 73 |           <a
 74 |             href="https://github.com/rvaidun/befake"
 75 |             target="_blank"
 76 |             class="cursor-pointer text-blue-500 sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold githublogo">
 77 |           </a>
 78 |           <a
 79 |             class="cursor-pointer text-red-500 sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
 80 |             href="https://ko-fi.com/rahulvaidun"
 81 |             target="_blank">
 82 |             Donate
 83 |           </a>
 84 | 
 85 |           <react-to-all v-if="this.$store.state.loggedIn" />
 86 | 
 87 |           <router-link
 88 |             class="cursor-pointer text-white sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
 89 |             to="/map"
 90 |             @click="() => (showNav = false)">
 91 |             Map
 92 |           </router-link>
 93 |           <router-link
 94 |             class="cursor-pointer text-white sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
 95 |             to="/about"
 96 |             @click="() => (showNav = false)">
 97 |             About
 98 |           </router-link>
 99 |           <router-link
100 |             class="cursor-pointer text-white sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
101 |             to="/memories"
102 |             @click="() => (showNav = false)">
103 |             memories
104 |           </router-link>
105 |           <a
106 |             class="cursor-pointer text-white sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
107 |             @click="this.$store.commit('logout')"
108 |             v-if="this.$store.state.loggedIn">
109 |             Logout
110 |           </a>
111 |         </div>
112 |         <a
113 |           @click="showNav = true"
114 |           class="md:hidden flex flex-col justify-between w-[24px] h-[18px]">
115 |           <span class="h-[1px] w-[100%] bg-white rounded-lg"></span>
116 |           <span class="h-[1px] w-[100%] bg-white rounded-lg"></span>
117 |           <span class="h-[1px] w-[100%] bg-white rounded-lg"></span>
118 |         </a>
119 |         <!-- links -->
120 |         <Transition name="fade">
121 |           <div
122 |             v-if="showNav"
123 |             class="fixed inset-0 flex flex-col justify-end w-full gap-4 z-40 bg-[#000000b5]"
124 |             @click="showNav = false"></div>
125 |         </Transition>
126 |         <Transition name="slide">
127 |           <div
128 |             v-if="showNav"
129 |             @click="(e) => e.stopPropagation()"
130 |             class="flex flex-col gap-4 bg-black p-8 w-full z-50 fixed bottom-0">
131 |             <a
132 |               href="https://github.com/rvaidun/befake"
133 |               target="_blank"
134 |               class="cursor-pointer text-blue-500 sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold githublogo">
135 |             </a>
136 |             <a
137 |               class="cursor-pointer text-red-500 sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
138 |               href="https://ko-fi.com/rahulvaidun"
139 |               target="_blank">
140 |               Donate
141 |             </a>
142 | 
143 |             <react-to-all v-if="this.$store.state.loggedIn" />
144 | 
145 |             <router-link
146 |               class="cursor-pointer text-white sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
147 |               to="/map"
148 |               @click="() => (showNav = false)">
149 |               Map
150 |             </router-link>
151 |             <router-link
152 |               class="cursor-pointer text-white sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
153 |               to="/about"
154 |               @click="() => (showNav = false)">
155 |               About
156 |             </router-link>
157 | 
158 |             <router-link
159 |               class="cursor-pointer text-white sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
160 |               to="/memories"
161 |               @click="() => (showNav = false)">
162 |               Memoriues
163 |             </router-link>
164 |             <a
165 |               class="cursor-pointer text-white sm:py-2 py-[0.6px] sm:px-3 rounded-md font-bold"
166 |               @click="this.$store.commit('logout')"
167 |               v-if="this.$store.state.loggedIn">
168 |               Logout
169 |             </a>
170 |           </div>
171 |         </Transition>
172 |       </div>
173 |     </div>
174 |   </nav>
175 | </template>
176 | 


--------------------------------------------------------------------------------
/src/components/posts/uploadProfilePicture.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import MyButton from "../ui/Button.vue";
  3 | import { v4 as uuidv4 } from "uuid";
  4 | import moment from "moment";
  5 | export default {
  6 |   props: ["user"],
  7 |   data() {
  8 |     return {
  9 |       file: null,
 10 |       imageurl: null,
 11 |       loading: false,
 12 |       image: {},
 13 |     };
 14 |   },
 15 |   methods: {
 16 |     onFileChange(e) {
 17 |       console.log(e);
 18 |       this.file = e.target.files[0];
 19 |       this.imageurl = URL.createObjectURL(this.file);
 20 |     },
 21 |     async uploadPhotoToBeReal(file) {
 22 |       const getUploadUrl = () => {
 23 |         return fetch(
 24 |           `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/person/me/profile-picture`,
 25 |           {
 26 |             headers: {
 27 |               authorization: `Bearer ${localStorage.getItem("token")}`,
 28 |               accept: "*/*",
 29 |               "bereal-platform": "iOS",
 30 |               "bereal-os-version": "14.7.1",
 31 |               "accept-language": "en-US;q=1.0",
 32 |               "user-agent":
 33 |                 "BeReal/0.28.2 (AlexisBarreyat.BeReal; build:8425; iOS 14.7.1) 1.0.0/BRApiKit",
 34 |               "bereal-app-language": "en-US",
 35 |               "bereal-timezone": "America/Los_Angeles",
 36 |               "bereal-device-language": "en",
 37 |             },
 38 |           }
 39 |         )
 40 |           .then((res) => {
 41 |             if (!res.ok) {
 42 |               throw new Error("Failed to get upload url");
 43 |             }
 44 |             return res.json();
 45 |           })
 46 |           .then((data) => {
 47 |             return data;
 48 |           });
 49 |       };
 50 |       const putPhoto = (url, file, h) => {
 51 |         return fetch(`${this.$store.state.proxyUrl}/${url}`, {
 52 |           method: "PUT",
 53 |           headers: h,
 54 |           body: file,
 55 |         })
 56 |           .then((res) => {
 57 |             if (!res.ok) {
 58 |               throw new Error("Failed to upload photo");
 59 |             }
 60 |             return res.json();
 61 |           })
 62 |           .then((data) => {
 63 |             console.log(data);
 64 |           });
 65 |       };
 66 |       const postRealmoji = (d) => {
 67 |         return fetch(
 68 |           `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/content/realmojis/instant?postId=${this.postID}&postUserId=${this.postOwnerID}`,
 69 |           {
 70 |             method: "PUT",
 71 |             headers: {
 72 |               "content-type": "application/json",
 73 |               authorization: `Bearer ${localStorage.getItem("token")}`,
 74 |               accept: "*/*",
 75 |               "bereal-platform": "iOS",
 76 |               "bereal-os-version": "14.7.1",
 77 |               "accept-language": "en-US;q=1.0",
 78 |               "bereal-app-language": "en-US",
 79 |               "user-agent":
 80 |                 "BeReal/0.31.0 (AlexisBarreyat.BeReal; build:8586; iOS 14.7.1) 1.0.0/BRApiKit",
 81 |               "bereal-timezone": "America/Los_Angeles",
 82 |               "bereal-device-language": "en",
 83 |               "bereal-app-version": "0.31.0-(8586)",
 84 |             },
 85 |             body: JSON.stringify({
 86 |               media: {
 87 |                 path: d.data.path,
 88 |                 bucket: d.data.bucket,
 89 |                 width: 500,
 90 |                 height: 500,
 91 |               },
 92 |             }),
 93 |           }
 94 |         )
 95 |           .then((res) => {
 96 |             if (!res.ok) {
 97 |               throw new Error("Failed to upload photo");
 98 |             }
 99 |             return res.json();
100 |           })
101 |           .then((data) => {
102 |             console.log(data);
103 |             return data;
104 |           });
105 |       };
106 | 
107 |       return new Promise((resolve, reject) => {
108 |         if (!file) {
109 |           reject("No file");
110 |         }
111 |         let uud;
112 |         getUploadUrl()
113 |           .then((uploadUrlData) => {
114 |             console.log(uploadUrlData);
115 |             uud = uploadUrlData;
116 |           })
117 |           .then(() => {
118 |             putPhoto(uud.data.url, file, uud.data.headers);
119 |             console.log(uud);
120 |           })
121 |           .then(() => postRealmoji(uud))
122 |           .then(() => {
123 |             resolve("Realmoji uploaded successfully!");
124 |           })
125 |           .catch((err) => {
126 |             reject(err);
127 |           });
128 |       });
129 |     },
130 |     async submitRealMoji() {
131 |       this.loading = true;
132 |       // call uploadPhotosToBeReal with primary and secondary images and on any response make loading false
133 |       this.uploadPhotoToBeReal(this.file)
134 |         .then(() => {
135 |           this.loading = false;
136 |           this.file = null;
137 |           this.imageurl = null;
138 |           this.$store.dispatch("getPosts");
139 |         })
140 |         .catch((e) => {
141 |           this.loading = false;
142 |           this.$store.commit("error", e);
143 |         });
144 |     },
145 |   },
146 | 
147 |   components: { MyButton },
148 | };
149 | </script>
150 | <template>
151 |   <div class="flex sm:flex-row flex-col justify-center items-center gap-3 p-3">
152 |     <img
153 |       referrerpolicy="no-referrer"
154 |       v-bind:src="
155 |         user.profilePicture
156 |           ? user.profilePicture.url
157 |           : 'https://ui-avatars.com/api/?length=1' +
158 |             '&name=' +
159 |             user.username +
160 |             '&background=' +
161 |             color
162 |       "
163 |       class="w-24 rounded-[50%] border-2"
164 |       @error="
165 |         'https://ui-avatars.com/api/?length=1' +
166 |           '&name=' +
167 |           user.username +
168 |           '&background=' +
169 |           color
170 |       "
171 |       alt="ppic" />
172 | 
173 |     <div>
174 |       <label>
175 |         <div
176 |           class="border-white w-24 h-24 rounded-[50%] border-2 cursor-pointer">
177 |           <input
178 |             type="file"
179 |             style="display: none"
180 |             name="image"
181 |             @change="onFileChange" />
182 | 
183 |           <div v-if="!file">
184 |             <img src="../../assets/add.svg" alt="plus" />
185 |           </div>
186 |           <div v-else class="cursor-pointer">
187 |             <img :src="imageurl" class="w-24 rounded-[50%]" alt="zamkor" />
188 |           </div>
189 |         </div>
190 |       </label>
191 |     </div>
192 | 
193 |     <div>
194 |       <MyButton @clickedd="submitProfilePicture" :loading="false"
195 |         >Update Profile Picture</MyButton
196 |       >
197 |     </div>
198 |   </div>
199 | </template>
200 | 


--------------------------------------------------------------------------------
/src/pages/Map.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .vue-map-container img[src*="https://cdn.bereal.network/Photos"]
  3 | {
  4 |   border-radius: 50%;
  5 | }
  6 | .vue-map-containe img[src*="ui-avatars.com"] {
  7 |   border-radius: 50%;
  8 | }
  9 | </style>
 10 | <template>
 11 |   <GMapMap
 12 |     :center="center"
 13 |     :zoom="4"
 14 |     map-type-id="terrain"
 15 |     style="height: 100vh"
 16 |     :options="mapStyles">
 17 |     <GMapMarker
 18 |       :key="index"
 19 |       v-for="(m, index) in markers"
 20 |       :position="m.position"
 21 |       :clickable="true"
 22 |       :draggable="false"
 23 |       :icon="{
 24 |         url: m.pic,
 25 |         scaledSize: { width: 50, height: 50 },
 26 |       }"
 27 |       @click="
 28 |         center = m.position;
 29 |         openMarker(index);
 30 |       ">
 31 |       <GMapInfoWindow
 32 |         :closeclick="true"
 33 |         @closeclick="openMarker(null)"
 34 |         :opened="openedMarkerID === index">
 35 |         <singlePostComponent :post="m.post" class="" />
 36 |       </GMapInfoWindow>
 37 |     </GMapMarker>
 38 |   </GMapMap>
 39 | </template>
 40 | <script>
 41 | import singlePostComponent from "../components/posts/singlePostComponent.vue";
 42 | import sha256 from "js-sha256";
 43 | export default {
 44 |   name: "App",
 45 |   data() {
 46 |     return {
 47 |       mapStyles: {
 48 |         styles: [
 49 |           {
 50 |             elementType: "geometry",
 51 |             stylers: [
 52 |               {
 53 |                 color: "#242f3e",
 54 |               },
 55 |             ],
 56 |           },
 57 |           {
 58 |             elementType: "labels.text.fill",
 59 |             stylers: [
 60 |               {
 61 |                 color: "#746855",
 62 |               },
 63 |             ],
 64 |           },
 65 |           {
 66 |             elementType: "labels.text.stroke",
 67 |             stylers: [
 68 |               {
 69 |                 color: "#242f3e",
 70 |               },
 71 |             ],
 72 |           },
 73 |           {
 74 |             featureType: "administrative.locality",
 75 |             elementType: "labels.text.fill",
 76 |             stylers: [
 77 |               {
 78 |                 color: "#d59563",
 79 |               },
 80 |             ],
 81 |           },
 82 |           {
 83 |             featureType: "poi",
 84 |             elementType: "labels.text.fill",
 85 |             stylers: [
 86 |               {
 87 |                 color: "#d59563",
 88 |               },
 89 |             ],
 90 |           },
 91 |           {
 92 |             featureType: "poi.park",
 93 |             elementType: "geometry",
 94 |             stylers: [
 95 |               {
 96 |                 color: "#263c3f",
 97 |               },
 98 |             ],
 99 |           },
100 |           {
101 |             featureType: "poi.park",
102 |             elementType: "labels.text.fill",
103 |             stylers: [
104 |               {
105 |                 color: "#6b9a76",
106 |               },
107 |             ],
108 |           },
109 |           {
110 |             featureType: "road",
111 |             elementType: "geometry",
112 |             stylers: [
113 |               {
114 |                 color: "#38414e",
115 |               },
116 |             ],
117 |           },
118 |           {
119 |             featureType: "road",
120 |             elementType: "geometry.stroke",
121 |             stylers: [
122 |               {
123 |                 color: "#212a37",
124 |               },
125 |             ],
126 |           },
127 |           {
128 |             featureType: "road",
129 |             elementType: "labels.text.fill",
130 |             stylers: [
131 |               {
132 |                 color: "#9ca5b3",
133 |               },
134 |             ],
135 |           },
136 |           {
137 |             featureType: "road.highway",
138 |             elementType: "geometry",
139 |             stylers: [
140 |               {
141 |                 color: "#746855",
142 |               },
143 |             ],
144 |           },
145 |           {
146 |             featureType: "road.highway",
147 |             elementType: "geometry.stroke",
148 |             stylers: [
149 |               {
150 |                 color: "#1f2835",
151 |               },
152 |             ],
153 |           },
154 |           {
155 |             featureType: "road.highway",
156 |             elementType: "labels.text.fill",
157 |             stylers: [
158 |               {
159 |                 color: "#f3d19c",
160 |               },
161 |             ],
162 |           },
163 |           {
164 |             featureType: "transit",
165 |             elementType: "geometry",
166 |             stylers: [
167 |               {
168 |                 color: "#2f3948",
169 |               },
170 |             ],
171 |           },
172 |           {
173 |             featureType: "transit.station",
174 |             elementType: "labels.text.fill",
175 |             stylers: [
176 |               {
177 |                 color: "#d59563",
178 |               },
179 |             ],
180 |           },
181 |           {
182 |             featureType: "water",
183 |             elementType: "geometry",
184 |             stylers: [
185 |               {
186 |                 color: "#17263c",
187 |               },
188 |             ],
189 |           },
190 |           {
191 |             featureType: "water",
192 |             elementType: "labels.text.fill",
193 |             stylers: [
194 |               {
195 |                 color: "#515c6d",
196 |               },
197 |             ],
198 |           },
199 |           {
200 |             featureType: "water",
201 |             elementType: "labels.text.stroke",
202 |             stylers: [
203 |               {
204 |                 color: "#17263c",
205 |               },
206 |             ],
207 |           },
208 |         ],
209 |       },
210 |       openedMarkerID: null,
211 |       center: { lat: 0, lng: 0 },
212 |       markers: [],
213 |     };
214 |   },
215 |   async beforeMount() {
216 |     await this.$store.dispatch("getPosts");
217 |     this.markers = this.$store.state.posts
218 |       .filter((p) => p.location)
219 |       .map((post) => {
220 |         console.log(post);
221 |         return {
222 |           position: {
223 |             lat: post.location._latitude,
224 |             lng: post.location._longitude,
225 |             // gravatar identicon
226 |           },
227 |           pic: post.user.profilePicture
228 |             ? post.user.profilePicture.url
229 |             : `https://ui-avatars.com/api/?length=1&name=${
230 |                 post.user.username
231 |               }&background=${sha256(post.user.username).substring(0, 3)}`,
232 |           post: post,
233 |         };
234 |       });
235 |     // find the center of lat and lng for markers and make this the center
236 | 
237 |     this.markers.forEach((m) => {
238 |       this.center.lat += m.position.lat;
239 |       this.center.lng += m.position.lng;
240 |     });
241 |     this.center.lat /= this.markers.length;
242 |     this.center.lng /= this.markers.length;
243 |     console.log(this.markers);
244 |   },
245 |   methods: {
246 |     openMarker(id) {
247 |       this.openedMarkerID = id;
248 |     },
249 |   },
250 |   components: {
251 |     singlePostComponent,
252 |   },
253 | };
254 | </script>
255 | 


--------------------------------------------------------------------------------
/src/components/posts/singlePostComponent.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import { defineComponent } from "vue";
  3 | import moment from "moment";
  4 | import PopupModal from "./PopupModal.vue";
  5 | import MyButton from "../ui/Button.vue";
  6 | import MyInput from "../ui/Input.vue";
  7 | import UploadRealmoji from "./uploadRealmoji.vue";
  8 | import Realmoji from "./Realmoji.vue";
  9 | import Carousel from "../ui/Carousel.vue";
 10 | export default defineComponent({
 11 |   props: ["post", "user"],
 12 |   data() {
 13 |     return {
 14 |       curpost: this.post[0],
 15 |       reverseGeo: "",
 16 |       revbgeo: "",
 17 |       showModal: false,
 18 |       comment: "",
 19 |       submitCommentLoading: false,
 20 |       hideSecondaryPhoto: false,
 21 |       isOwner: false,
 22 |       showEmojis: false,
 23 |     };
 24 |   },
 25 |   methods: {
 26 |     reverseImages() {
 27 |       const temp = this.curpost.primary.url;
 28 |       this.curpost.primary.url = this.curpost.secondary.url;
 29 |       this.curpost.secondary.url = temp;
 30 |     },
 31 |     postdate() {
 32 |       return moment(this.curpost.creationDate).format("MM-DD-YYYY h:mm:ss");
 33 |     },
 34 |     cleancomment(s) {
 35 |       s = s.replaceAll("<", "&lt;");
 36 |       return s.replace(
 37 |         /@\w+/g,
 38 |         "<span class='font-bold text-blue-200'>$&</span>"
 39 |       );
 40 |     },
 41 |     submitComment() {
 42 |       this.submitCommentLoading = true;
 43 |       fetch(
 44 |         `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/content/comments?postId=${this.curpost.id}&postUserId=${this.user.id}`,
 45 |         {
 46 |           method: "POST",
 47 |           headers: {
 48 |             "content-type": "application/json",
 49 |             authorization: `Bearer ${localStorage.getItem("token")}`,
 50 |           },
 51 |           body: JSON.stringify({
 52 |             content: this.comment,
 53 |           }),
 54 |         }
 55 |       )
 56 |         .then(() => {
 57 |           this.comment = "";
 58 |           this.$store.dispatch("getPosts");
 59 |           this.submitCommentLoading = false;
 60 |         })
 61 |         .catch(() => {
 62 |           this.submitCommentLoading = false;
 63 |           this.comment = "";
 64 |           this.$store.commit(
 65 |             "error",
 66 |             "An error occured while submitting your comment. Please try again later."
 67 |           );
 68 |         });
 69 |     },
 70 |     scrollCarousel(i) {
 71 |       this.curpost = this.post[i];
 72 |     },
 73 |   },
 74 |   computed: {
 75 |     color() {
 76 |       let letters = "0123456789ABCDEF";
 77 |       let color = "";
 78 |       for (let i = 0; i < 6; i++) {
 79 |         color += letters[this.user.username.charCodeAt(i) % 16];
 80 |       }
 81 |       return color;
 82 |     },
 83 |   },
 84 |   async beforeMount() {
 85 |     if (this.curpost.location) {
 86 |       fetch(
 87 |         `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?location=${this.curpost.location.longitude},${this.curpost.location.latitude}&langCode=fr&outSR=&forStorage=false&f=pjson`
 88 |       )
 89 |         .then((res) => res.json())
 90 |         .then((data) => {
 91 |           this.revbgeo = data;
 92 |           this.reverseGeo = data.address.City + ", " + data.address.CntryName;
 93 |         })
 94 |         .catch((err) => {
 95 |           console.log("error in reverse geocoding");
 96 |         });
 97 |     }
 98 |     if (this.$store.state.user.id === this.user.id) {
 99 |       this.isOwner = true;
100 |     }
101 |   },
102 |   components: {
103 |     PopupModal,
104 |     MyButton,
105 |     MyInput,
106 |     UploadRealmoji,
107 |     Realmoji,
108 |     Carousel,
109 |   },
110 | });
111 | </script>
112 | <template>
113 |   <div
114 |     class="block w-[100%] bg-black rounded-lg shadow-md sm:w-auto border border-white p-3 sm:max-w-fit sm:h-[100%]">
115 |     <div class="flex flex-col">
116 |       <div class="flex items-center sm:justify-center">
117 |         <img
118 |           referrerpolicy="no-referrer"
119 |           v-bind:src="
120 |             user.profilePicture
121 |               ? user.profilePicture.url
122 |               : 'https://ui-avatars.com/api/?length=1' +
123 |                 '&name=' +
124 |                 user.username +
125 |                 '&background=' +
126 |                 color
127 |           "
128 |           class="w-10 rounded-[50%] sm:w-28 m-3"
129 |           @error="
130 |             'https://ui-avatars.com/api/?length=1' +
131 |               '&name=' +
132 |               user.username +
133 |               '&background=' +
134 |               color
135 |           "
136 |           alt="pofilepic" />
137 |         <div>
138 |           <div>
139 |             <span class="font-bold ml-3">
140 |               {{ user.username }}
141 |             </span>
142 |           </div>
143 |           <div class="mt-[-3%]">
144 |             <span class="ml-3 text-sm cursor-pointer" @click="showModal = true">
145 |               {{ reverseGeo }}
146 |             </span>
147 |           </div>
148 |           <div class="mt-[-3%]" v-if="curpost.music">
149 |             <span class="ml-3 text-sm">
150 |               {{ curpost.music.track }} - {{ curpost.music.artist }}
151 |             </span>
152 |             <audio controls v-if="curpost.music.preview">
153 |               <source :src="curpost.music.preview" type="audio/mpeg" />
154 |               Your browser does not support the audio element.
155 |             </audio>
156 |           </div>
157 |         </div>
158 |         <div>
159 |           <!-- Add trash icon -->
160 |           <img
161 |             class="cursor-pointer h-6 ml-20"
162 |             @click="this.$store.dispatch('deletePost')"
163 |             v-if="isOwner"
164 |             src="../../assets/icons8-trash-can.svg"
165 |             alt="trash" />
166 |         </div>
167 |         <PopupModal v-if="showModal" @close="showModal = false">
168 |           <template v-slot:body>
169 |             <iframe
170 |               title="map"
171 |               class="ml-3"
172 |               width="300"
173 |               height="300"
174 |               style="border: 0"
175 |               loading="lazy"
176 |               v-if="curpost.location"
177 |               allowfullscreen
178 |               referrerpolicy="no-referrer-when-downgrade"
179 |               :src="`https://www.google.com/maps/embed/v1/place?key=AIzaSyBR4u3SrXLjJ7sdfvj3ltu4DvjVmiXnh18&q=${this.curpost.location.latitude}, ${this.curpost.location.longitude}`">
180 |             </iframe>
181 |           </template>
182 |         </PopupModal>
183 |       </div>
184 |       <div class="flex items-center justify-center">
185 |         <Carousel
186 |           v-if="post.length > 1"
187 |           :length="post.length"
188 |           @scroll="scrollCarousel">
189 |           <div
190 |             class="relative flex-shrink-0 snap-start w-[100%] snap-normal"
191 |             v-for="p in post">
192 |             <img
193 |               referrerpolicy="no-referrer"
194 |               v-bind:src="p.primary.url"
195 |               class="relative top-0 left-0 rounded-md w-[400px]"
196 |               @click="hideSecondaryPhoto = !hideSecondaryPhoto"
197 |               alt="postImage" />
198 |             <img
199 |               referrerpolicy="no-referrer"
200 |               v-bind:src="p.secondary.url"
201 |               class="absolute top-2 left-2 w-[35%] rounded-md border-2 border-black"
202 |               @click="reverseImages"
203 |               v-if="!hideSecondaryPhoto"
204 |               alt="postImage" />
205 |           </div>
206 |         </Carousel>
207 |         <div class="relative top-0 left-0 justify-center" v-else>
208 |           <img
209 |             referrerpolicy="no-referrer"
210 |             v-bind:src="curpost.primary.url"
211 |             class="relative top-0 left-0 rounded-md sm:w-[400px] w-[100%]"
212 |             @click="hideSecondaryPhoto = !hideSecondaryPhoto"
213 |             alt="postImage" />
214 |           <img
215 |             referrerpolicy="no-referrer"
216 |             v-bind:src="curpost.secondary.url"
217 |             class="absolute top-2 left-2 w-[35%] rounded-md border-2 border-black"
218 |             @click="reverseImages"
219 |             v-if="!hideSecondaryPhoto"
220 |             alt="postImage" />
221 |         </div>
222 |       </div>
223 | 
224 |       <div class="flex items-center font-bold mt-2 justify-center">
225 |         <span> {{ postdate() }} </span>
226 |         <span class="ml-3">Retakes - {{ curpost.retakeCounter }}</span>
227 |       </div>
228 |       <div class="flex flex-col">
229 |         <span v-if="curpost.caption">
230 |           <span class="font-bold">{{ user.username + ": " }} </span>
231 |           {{ curpost.caption }}
232 |         </span>
233 |       </div>
234 |       <div v-if="curpost.comments" class="flex flex-col sm:w-[500px]">
235 |         <div v-for="c in curpost.comments">
236 |           <span class="font-bold"> {{ c.user.username + ": " }}</span>
237 |           <span v-html="cleancomment(c.content)"></span>
238 |         </div>
239 |       </div>
240 |       <div class="flex gap-3 items-center overflow-auto mt-4">
241 |         <Realmoji :key="e.id" :realmoji="e" v-for="e in curpost.realMojis" />
242 |       </div>
243 |       <div class="flex justify-end">
244 |         <UploadRealmoji
245 |           v-if="!isOwner"
246 |           :postID="curpost.id"
247 |           :postOwnerID="user.id" />
248 |       </div>
249 |     </div>
250 |     <div class="flex mb-5">
251 |       <MyInput
252 |         @enterPressed="submitComment"
253 |         v-model="comment"
254 |         placeholder="Comment"
255 |         typeOfInput="text" />
256 |       <MyButton @clickedd="submitComment" :loading="submitCommentLoading"
257 |         >Submit</MyButton
258 |       >
259 |     </div>
260 |   </div>
261 | </template>
262 | 


--------------------------------------------------------------------------------
/src/components/posts/uploadRealmoji.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import MyButton from "../ui/Button.vue";
  3 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
  4 | import { library } from "@fortawesome/fontawesome-svg-core";
  5 | import { faFaceSmile } from "@fortawesome/free-solid-svg-icons";
  6 | import PulseLoader from "vue-spinner/src/PulseLoader.vue";
  7 | library.add(faFaceSmile);
  8 | 
  9 | export default {
 10 |   props: ["postID", "postOwnerID"],
 11 |   data() {
 12 |     return {
 13 |       file: null,
 14 |       imageurl: null,
 15 |       loading: false,
 16 |       image: {},
 17 |       user: this.$store.state.user,
 18 |       showRealmoji: false,
 19 |     };
 20 |   },
 21 |   methods: {
 22 |     onFileChange(e) {
 23 |       console.log(e);
 24 |       this.file = e.target.files[0];
 25 |       if (!this.file) return;
 26 |       this.imageurl = URL.createObjectURL(this.file);
 27 |       this.submitRealMoji();
 28 |     },
 29 |     async uploadPhotoToBeReal(file) {
 30 |       // https://cdn.bereal.network/Photos/WGpTqIX0diZQu3UjoZE8FnUAzNi2/realmoji/WGpTqIX0diZQu3UjoZE8FnUAzNi2-realmoji-instant-1669332458.webp
 31 |       // upload 2 files
 32 |       // get proxy url from state
 33 |       const getUploadUrl = () => {
 34 |         return fetch(
 35 |           `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/content/realmojis/upload-url?mimeType=image/webp`,
 36 |           {
 37 |             headers: {
 38 |               authorization: `Bearer ${localStorage.getItem("token")}`,
 39 |               accept: "*/*",
 40 |               "bereal-platform": "iOS",
 41 |               "bereal-os-version": "14.7.1",
 42 |               "accept-language": "en-US;q=1.0",
 43 |               "user-agent":
 44 |                 "BeReal/0.28.2 (AlexisBarreyat.BeReal; build:8425; iOS 14.7.1) 1.0.0/BRApiKit",
 45 |               "bereal-app-language": "en-US",
 46 |               "bereal-timezone": "America/Los_Angeles",
 47 |               "bereal-device-language": "en",
 48 |             },
 49 |           }
 50 |         )
 51 |           .then((res) => {
 52 |             if (!res.ok) {
 53 |               throw new Error("Failed to get upload url");
 54 |             }
 55 |             return res.json();
 56 |           })
 57 |           .then((data) => {
 58 |             return data;
 59 |           });
 60 |       };
 61 |       const putPhoto = (url, file, h) => {
 62 |         return fetch(`${this.$store.state.proxyUrl}/${url}`, {
 63 |           method: "PUT",
 64 |           headers: h,
 65 |           body: file,
 66 |         }).then((res) => {
 67 |           if (!res.ok) {
 68 |             throw new Error("Failed to upload photo");
 69 |           }
 70 |           return "success";
 71 |         });
 72 |       };
 73 |       const postRealmoji = (d, postid, postuserid) => {
 74 |         return fetch(
 75 |           `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/content/realmojis/instant?postId=${postid}&postUserId=${postuserid}`,
 76 |           {
 77 |             method: "PUT",
 78 |             headers: {
 79 |               "content-type": "application/json",
 80 |               authorization: `Bearer ${localStorage.getItem("token")}`,
 81 |               accept: "*/*",
 82 |               "bereal-platform": "iOS",
 83 |               "bereal-os-version": "14.7.1",
 84 |               "accept-language": "en-US;q=1.0",
 85 |               "bereal-app-language": "en-US",
 86 |               "user-agent":
 87 |                 "BeReal/0.31.0 (AlexisBarreyat.BeReal; build:8586; iOS 14.7.1) 1.0.0/BRApiKit",
 88 |               "bereal-timezone": "America/Los_Angeles",
 89 |               "bereal-device-language": "en",
 90 |               "bereal-app-version": "0.31.0-(8586)",
 91 |             },
 92 |             body: JSON.stringify({
 93 |               media: {
 94 |                 path: d.data.path,
 95 |                 bucket: d.data.bucket,
 96 |                 width: 500,
 97 |                 height: 500,
 98 |               },
 99 |             }),
100 |           }
101 |         )
102 |           .then((res) => {
103 |             if (!res.ok) {
104 |               throw new Error("Failed to upload photo");
105 |             }
106 |             return res.json();
107 |           })
108 |           .then((data) => {
109 |             console.log(data);
110 |             return data;
111 |           });
112 |       };
113 | 
114 |       return new Promise((resolve, reject) => {
115 |         let uud;
116 |         getUploadUrl()
117 |           .then((uploadUrlData) => {
118 |             console.log(uploadUrlData);
119 |             uud = uploadUrlData;
120 |           })
121 |           .then(() => putPhoto(uud.data.url, file, uud.data.headers))
122 |           .then(() => {
123 |             if (this.postID) {
124 |               return postRealmoji(uud, this.postID, this.postOwnerID);
125 |             }
126 |             const promises = [];
127 |             this.$store.state.posts.forEach((post) => {
128 |               if (this.$store.state.user.id != post.user.id) {
129 |                 post.posts.forEach((p) => {
130 |                   promises.push(postRealmoji(uud, p.id, post.user.id));
131 |                 });
132 |               }
133 |             });
134 |             return Promise.all(promises);
135 |           })
136 |           .then(() => {
137 |             resolve("Realmoji uploaded successfully!");
138 |           })
139 |           .catch((err) => {
140 |             reject(err);
141 |           });
142 |       });
143 |     },
144 |     async submitRealMoji() {
145 |       if (this.file === undefined || this.file === null) {
146 |         this.$store.commit("error", "No image selected");
147 |         return;
148 |       }
149 |       this.loading = true;
150 |       // call uploadPhotosToBeReal with primary and secondary images and on any response make loading false
151 |       this.uploadPhotoToBeReal(this.file)
152 |         .then(() => {
153 |           this.loading = false;
154 |           this.file = null;
155 |           this.imageurl = null;
156 |           this.$store.dispatch("getPosts");
157 |         })
158 |         .catch((e) => {
159 |           this.loading = false;
160 |           this.$store.commit("error", e);
161 |         });
162 |     },
163 |     async submitPreset(emoji) {
164 |       const postPreset = (e, postid, postuserid) =>
165 |         fetch(
166 |           `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/content/realmojis?postId=${postid}&postUserId=${postuserid}`,
167 |           {
168 |             method: "PUT",
169 |             headers: {
170 |               authorization: `Bearer ${localStorage.getItem("token") ?? ""}`,
171 |               accept: "application/json",
172 |               "content-type": "application/json",
173 |               "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
174 |               "accept-language": "en-US,en;q=0.9",
175 |             },
176 |             body: JSON.stringify({
177 |               emoji: e,
178 |             }),
179 |           }
180 |         );
181 | 
182 |       console.log(emoji);
183 |       this.loading = true;
184 |       if (!this.postID) {
185 |         const promises = [];
186 |         this.$store.state.posts.forEach((post) => {
187 |           if (this.$store.state.user.id != post.user.id) {
188 |             post.posts.forEach((p) => {
189 |               promises.push(postPreset(emoji, p.id, post.user.id));
190 |             });
191 |           }
192 |         });
193 |         Promise.all(promises).then((res) => {
194 |           this.loading = false;
195 |           this.showRealmoji = false;
196 |           this.$store.dispatch("getPosts");
197 |         });
198 |         return;
199 |       }
200 |       postPreset(emoji, this.postID, this.postOwnerID).then((res) => {
201 |         this.loading = false;
202 |         this.showRealmoji = false;
203 |         if (!res.ok) {
204 |           throw new Error("Failed to upload photo");
205 |         }
206 |         this.$store.dispatch("getPosts");
207 |       });
208 |     },
209 |   },
210 | 
211 |   components: { MyButton, FontAwesomeIcon, PulseLoader },
212 | };
213 | </script>
214 | <template>
215 |   <div class="flex gap-3 items-center overflow-x-hidden">
216 |     <div class="flex image-container gap-3" :class="{ revealed: showRealmoji }">
217 |       <div
218 |         v-for="(realmoji, i) in user.realmojis"
219 |         :key="i"
220 |         class="relative cursor-pointer w-24 flex-shrink-0">
221 |         <img
222 |           referrerpolicy="no-referrer"
223 |           v-bind:src="realmoji.media.url"
224 |           class="w-24 rounded-[50%]"
225 |           @click="submitPreset(realmoji.emoji)" />
226 | 
227 |         <span class="absolute top-[50px] left-[60px] text-5xl"
228 |           >{{ realmoji.emoji }}
229 |         </span>
230 |       </div>
231 |       <label :for="postID">
232 |         <div
233 |           class="border-white w-24 h-24 rounded-[50%] border-2 cursor-pointer">
234 |           <input
235 |             type="file"
236 |             :id="postID"
237 |             style="display: none"
238 |             name="image"
239 |             @change="onFileChange" />
240 | 
241 |           <div v-if="!file" class="cursor-pointer">
242 |             <img src="../../assets/add.svg" alt="plus" />
243 |           </div>
244 |           <div v-else class="cursor-pointer">
245 |             <img
246 |               :src="imageurl"
247 |               class="w-24 rounded-[50%]"
248 |               alt="realmoji to upload" />
249 |           </div>
250 |         </div>
251 |       </label>
252 |     </div>
253 | 
254 |     <font-awesome-icon
255 |       :icon="['fas', 'face-smile']"
256 |       class="text-6xl cursor-pointer"
257 |       @click="showRealmoji = !showRealmoji"
258 |       v-if="!loading" />
259 |     <pulse-loader color="white" v-else></pulse-loader>
260 |   </div>
261 | </template>
262 | <style>
263 | .image-container {
264 |   display: flex;
265 |   overflow-x: scroll;
266 |   overflow-y: hidden;
267 |   transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
268 |   transform: translateX(-100%);
269 |   opacity: 0;
270 |   pointer-events: none;
271 | }
272 | 
273 | .revealed {
274 |   transform: translateX(0);
275 |   opacity: 1;
276 |   pointer-events: all;
277 | }
278 | </style>
279 | 


--------------------------------------------------------------------------------
/src/components/posts/uploadPost.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import UploadPostImage from "./uploadPostImage.vue";
  3 | import { v4 as uuidv4 } from "uuid";
  4 | import moment from "moment";
  5 | import { mapState } from "vuex";
  6 | import MyButton from "../ui/Button.vue";
  7 | import MyInput from "../ui/Input.vue";
  8 | import MyCheckbox from "../ui/myCheckbox.vue";
  9 | export default {
 10 |   data() {
 11 |     return {
 12 |       loading: false,
 13 |       primary: {},
 14 |       secondary: {},
 15 |       location: {
 16 |         postwithlocation: false,
 17 |         lat: null,
 18 |         lng: null,
 19 |         devicelocation: false,
 20 |       },
 21 |       postontime: false,
 22 |       public: false,
 23 |       retakes: null,
 24 |       caption: "",
 25 |     };
 26 |   },
 27 |   components: { UploadPostImage, MyButton, MyInput, MyCheckbox },
 28 |   methods: {
 29 |     async upload(file, secondary) {
 30 |       if (secondary) {
 31 |         this.secondary.file = file;
 32 |       } else {
 33 |         this.primary.file = file;
 34 |       }
 35 |     },
 36 |     uploadPhotosToBeReal(primaryPhoto, secondaryPhoto) {
 37 |       // get upload url from BeReal
 38 |       const getUploadUrl = () => {
 39 |         return fetch(
 40 |           `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/content/posts/upload-url?mimeType=image/webp`,
 41 |           {
 42 |             headers: {
 43 |               authorization: `Bearer ${localStorage.getItem("token")}`,
 44 |               accept: "*/*",
 45 |               "bereal-platform": "iOS",
 46 |               "bereal-os-version": "14.7.1",
 47 |               "accept-language": "en-US;q=1.0",
 48 |               "user-agent":
 49 |                 "BeReal/0.28.2 (AlexisBarreyat.BeReal; build:8425; iOS 14.7.1) 1.0.0/BRApiKit",
 50 |               "bereal-app-language": "en-US",
 51 |               "bereal-timezone": "America/Los_Angeles",
 52 |               "bereal-device-language": "en",
 53 |             },
 54 |           }
 55 |         )
 56 |           .then((res) => {
 57 |             if (!res.ok) {
 58 |               throw new Error("Failed to get upload url");
 59 |             }
 60 |             return res.json();
 61 |           })
 62 |           .then((data) => {
 63 |             console.log(data);
 64 |             return data;
 65 |           });
 66 |       };
 67 | 
 68 |       const putPhoto = (url, file, h) => {
 69 |         console.log(file);
 70 |         return fetch(`${this.$store.state.proxyUrl}/${url}`, {
 71 |           method: "PUT",
 72 |           headers: h,
 73 |           body: file,
 74 |         }).then((res) => {
 75 |           if (!res.ok) {
 76 |             throw new Error("Failed to upload photo");
 77 |           }
 78 |           return "success";
 79 |         });
 80 |       };
 81 | 
 82 |       // post new request to bereals post endpoint
 83 |       const postBeReal = async (uploadUrlData) => {
 84 |         let taken_at;
 85 |         if (this.postontime) {
 86 |           taken_at = await this.getRandomTimeInBetween();
 87 |         } else {
 88 |           taken_at = moment().format("YYYY-MM-DDTHH:mm:ss.SSSZ");
 89 |         }
 90 |         // const taken_at = moment
 91 |         //   .unix(1692470202)
 92 |         //   .format("YYYY-MM-DDTHH:mm:ss.SSSZ");
 93 |         let payload = {
 94 |           visibility: ["friends"],
 95 |           isLate: false,
 96 |           retakeCounter: Number(this.retakes),
 97 |           takenAt: taken_at,
 98 |           backCamera: {
 99 |             bucket: uploadUrlData.data[0].bucket,
100 |             height: 1500,
101 |             width: 2000,
102 |             path: uploadUrlData.data[0].path,
103 |           },
104 |           frontCamera: {
105 |             bucket: uploadUrlData.data[1].bucket,
106 |             height: 1500,
107 |             width: 2000,
108 |             path: uploadUrlData.data[1].path,
109 |           },
110 |         };
111 |         if (this.location.postwithlocation) {
112 |           payload.location = {
113 |             latitude: this.location.lat,
114 |             longitude: this.location.lng,
115 |           };
116 |         }
117 |         if (this.caption && this.caption !== "") {
118 |           payload.caption = this.caption;
119 |         }
120 |         console.log(JSON.stringify(payload));
121 |         return fetch(
122 |           `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/content/posts`,
123 |           {
124 |             method: "POST",
125 |             headers: {
126 |               "content-type": "application/json",
127 |               authorization: `Bearer ${localStorage.getItem("token")}`,
128 |               accept: "*/*",
129 |               "bereal-platform": "iOS",
130 |               "bereal-os-version": "14.7.1",
131 |               "accept-language": "en-US;q=1.0",
132 |               "bereal-app-language": "en-US",
133 |               "user-agent":
134 |                 "BeReal/0.28.2 (AlexisBarreyat.BeReal; build:8425; iOS 14.7.1) 1.0.0/BRApiKit",
135 |               "bereal-timezone": "America/Los_Angeles",
136 |               "bereal-device-language": "en",
137 |             },
138 |             body: JSON.stringify(payload),
139 |           }
140 |         ).then((res) => {
141 |           if (!res.ok) throw new Error("Failed to post BeReal");
142 |         });
143 |       };
144 | 
145 |       return new Promise((resolve, reject) => {
146 |         // if no photos to upload
147 |         let uud;
148 | 
149 |         getUploadUrl()
150 |           .then((uploadUrlData) => {
151 |             uud = uploadUrlData;
152 |             console.log(uud);
153 |           })
154 |           .then(() =>
155 |             Promise.all([
156 |               putPhoto(uud.data[0].url, primaryPhoto, uud.data[0].headers),
157 |               putPhoto(uud.data[1].url, secondaryPhoto, uud.data[1].headers),
158 |             ])
159 |           )
160 |           .then(() => postBeReal(uud))
161 |           .then(() => resolve("Successfully uploaded post to BeReal"))
162 |           .catch((e) => reject(e));
163 |       });
164 |     },
165 | 
166 |     submitPost() {
167 |       console.log(this.primary.file, this.secondary.file);
168 |       if (
169 |         this.primary.file === undefined ||
170 |         this.secondary.file === undefined
171 |       ) {
172 |         this.$store.commit(
173 |           "error",
174 |           "Primary and secondary images are required"
175 |         );
176 |         return;
177 |       }
178 |       this.loading = true;
179 |       // call uploadPhotosToBeReal with primary and secondary images and on any response make loading false
180 |       this.uploadPhotosToBeReal(this.primary.file, this.secondary.file)
181 |         .then(() => {
182 |           this.loading = false;
183 |           this.$store.dispatch("getPosts");
184 |         })
185 |         .catch((e) => {
186 |           this.loading = false;
187 |           this.$store.commit("error", e);
188 |         });
189 |     },
190 |     getRandomTimeInBetween() {
191 |       console.log(this.$store.state.user.region);
192 |       return fetch(
193 |         `${this.$store.state.proxyUrl}/https://mobile.bereal.com/api/bereal/moments/last/${this.$store.state.user.region}`,
194 |         {
195 |           method: "GET",
196 |           headers: {
197 |             origin: "https://mobile.bereal.com",
198 |             "content-type": "application/json",
199 |             authorization: `Bearer ${localStorage.getItem("token")}`,
200 |           },
201 |         }
202 |       )
203 |         .then((res) => {
204 |           return res.json();
205 |         })
206 |         .then((data) => {
207 |           console.log(data);
208 |           const dateA = moment(data.startDate, "YYYY-MM-DDTHH:mm:ss.SSSZ");
209 |           const dateB = moment(data.endDate, "YYYY-MM-DDTHH:mm:ss.SSSZ");
210 | 
211 |           const randomDate = moment(
212 |             dateA + Math.random() * (dateB - dateA)
213 |           ).format("YYYY-MM-DDTHH:mm:ss.SSSZ");
214 |           return randomDate;
215 |         });
216 |     },
217 |   },
218 |   computed: mapState(["user"]),
219 | };
220 | </script>
221 | <template>
222 |   <div class="flex flex-col justify-center items-center dark:text-white">
223 |     <div
224 |       class="block p-3 w-[100%] sm:p-6, sm:w-auto rounded-lg border border-gray-200 shadow-md bg-black">
225 |       <div class="flex flex-col">
226 |         <div class="flex items-center sm:justify-center">
227 |           <img
228 |             referrerpolicy="no-referrer"
229 |             v-bind:src="
230 |               user.profilePicture
231 |                 ? user.profilePicture.url
232 |                 : 'https://ui-avatars.com/api/?length=1' +
233 |                   '&name=' +
234 |                   user.username
235 |             "
236 |             class="w-10 rounded-[50%] sm:w-28"
237 |             @error="
238 |               'https://ui-avatars.com/api/?length=1' + '&name=' + user.username
239 |             "
240 |             alt="avatar" />
241 |           <div>
242 |             <div>
243 |               <span class="font-bold ml-3">
244 |                 {{ user.username }}
245 |               </span>
246 |             </div>
247 |           </div>
248 |         </div>
249 |       </div>
250 |       Upload a post
251 |       <div class="sm:flex">
252 |         <p>First box is back camera. Second box is front camera.</p>
253 |         <UploadPostImage :secondary="false" @upload="upload" class="m-1" />
254 |         <UploadPostImage :secondary="true" @upload="upload" class="m-1" />
255 |       </div>
256 |       <div class="d-flex align-items-center">
257 |         <MyInput v-model="caption" placeholder="Caption" typeOfInput="text" />
258 |         <MyInput v-model="retakes" placeholder="Retakes" typeOfInput="number" />
259 |       </div>
260 |       <MyCheckbox class="m-1" v-model="public" />
261 |       <span class="m-1">Public</span>
262 |       <br />
263 |       <MyCheckbox class="m-1" v-model="location.postwithlocation" />
264 |       <span class="m-1">Post with location</span>
265 |       <div v-if="location.postwithlocation">
266 |         <MyInput
267 |           v-model="location.lat"
268 |           placeholder="Latitude"
269 |           typeOfInput="number" />
270 |         <MyInput
271 |           v-model="location.lng"
272 |           placeholder="Longitude"
273 |           typeOfInput="number" />
274 |       </div>
275 |       <br />
276 |       <MyCheckbox class="m-1" v-model="postontime" />
277 |       <span class="m-1">Post on time</span>
278 | 
279 |       <!-- Submit -->
280 |       <div class="flex justify-center">
281 |         <MyButton @clickedd="submitPost" :loading="loading"> Submit </MyButton>
282 |       </div>
283 |     </div>
284 |   </div>
285 | </template>
286 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
  1 | import { createStore } from "vuex";
  2 | import { event } from "vue-gtag";
  3 | const store = createStore({
  4 |   state() {
  5 |     return {
  6 |       proxyUrl: "http://localhost:8080", // cors-anywhere server
  7 |       // proxyUrl: "/proxy",
  8 |       loggedIn: localStorage.getItem("token") ? true : false,
  9 |       posts: [],
 10 |       user: {},
 11 |       userPosted: false,
 12 |       error: {
 13 |         text: "",
 14 |         show: false,
 15 |       },
 16 |     };
 17 |   },
 18 |   mutations: {
 19 |     error(state, payload) {
 20 |       console.log("in error mutation");
 21 |       state.error.text = payload;
 22 |       state.error.show = true;
 23 |       setTimeout(() => {
 24 |         state.error.show = false;
 25 |         console.log("in error after timeout");
 26 |       }, 5000);
 27 |     },
 28 |     logout(state) {
 29 |       localStorage.removeItem("token");
 30 |       localStorage.removeItem("expiration");
 31 |       localStorage.removeItem("refreshToken");
 32 |       localStorage.removeItem("user_id");
 33 |       localStorage.removeItem("fbrefreshtoken");
 34 |       localStorage.removeItem("fbtoken");
 35 |       state.loggedIn = false;
 36 |     },
 37 |     login(state) {
 38 |       state.loggedIn = true;
 39 |     },
 40 |     user(state, user) {
 41 |       state.user = user;
 42 |     },
 43 |     posts(state, posts) {
 44 |       state.posts = posts;
 45 |     },
 46 |     setposted(state, posted) {
 47 |       state.userPosted = posted;
 48 |     },
 49 |   },
 50 |   actions: {
 51 |     async login({ commit, dispatch }) {
 52 |       dispatch("getUser");
 53 |       commit("login");
 54 |     },
 55 |     refresh({ commit, state }) {
 56 |       console.log("in refresh");
 57 |       if (Date.now() > localStorage.getItem("expiration")) {
 58 |         console.log("in refresh if");
 59 |         return fetch(
 60 |           `${state.proxyUrl}/https://securetoken.googleapis.com/v1/token?key=AIzaSyDwjfEeparokD7sXPVQli9NsTuhT6fJ6iA`,
 61 |           {
 62 |             method: "POST",
 63 |             headers: {
 64 |               "content-type": "application/json",
 65 |               "x-firebase-client":
 66 |                 "apple-platform/ios apple-sdk/19F64 appstore/true deploy/cocoapods device/iPhone13,2 fire-abt/8.15.0 fire-analytics/8.15.0 fire-auth/8.15.0 fire-db/8.15.0 fire-dl/8.15.0 fire-fcm/8.15.0 fire-fiam/8.15.0 fire-fst/8.15.0 fire-fun/8.15.0 fire-install/8.15.0 fire-ios/8.15.0 fire-perf/8.15.0 fire-rc/8.15.0 fire-str/8.15.0 firebase-crashlytics/8.15.0 os-version/15.5 xcode/13F100",
 67 |               accept: "*/*",
 68 |               "x-client-version": "iOS/FirebaseSDK/8.15.0/FirebaseCore-iOS",
 69 |               "x-firebase-client-log-type": "0",
 70 |               "x-ios-bundle-identifier": "AlexisBarreyat.BeReal",
 71 |               "accept-language": "en",
 72 |               "user-agent":
 73 |                 "FirebaseAuth.iOS/8.15.0 AlexisBarreyat.BeReal/0.22.4 iPhone/15.5 hw/iPhone13_2",
 74 |               "x-firebase-locale": "en",
 75 |             },
 76 |             body: JSON.stringify({
 77 |               grant_type: "refresh_token",
 78 |               refresh_token: localStorage.getItem("fbrefreshtoken"),
 79 |             }),
 80 |           }
 81 |         )
 82 |           .then((res) => {
 83 |             if (!res.ok) {
 84 |               throw Error(res.statusText);
 85 |             }
 86 |             return res.json();
 87 |           })
 88 |           .then((tokendata) => {
 89 |             localStorage.setItem("fbrefreshtoken", tokendata.refresh_token);
 90 |             localStorage.setItem("fbtoken", tokendata.id_token);
 91 |             localStorage.setItem("user_id", tokendata.user_id);
 92 |             return fetch(
 93 |               `${state.proxyUrl}/https://auth.bereal.team/token?grant_type=firebase`,
 94 |               {
 95 |                 method: "POST",
 96 |                 headers: {
 97 |                   accept: "application/json",
 98 |                   "content-type": "application/json",
 99 |                   "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
100 |                   "accept-language": "en-US,en;q=0.9",
101 |                 },
102 |                 body: JSON.stringify({
103 |                   grant_type: "firebase",
104 |                   client_id: "android",
105 |                   client_secret: "F5A71DA-32C7-425C-A3E3-375B4DACA406",
106 |                   token: tokendata.id_token,
107 |                 }),
108 |               }
109 |             )
110 |               .then((res) => {
111 |                 if (!res.ok) {
112 |                   throw Error(res.statusText);
113 |                 }
114 |                 return res.json();
115 |               })
116 |               .then((data) => {
117 |                 localStorage.setItem("token", data.access_token);
118 |                 localStorage.setItem("refreshToken", data.refresh_token);
119 |                 localStorage.expiration =
120 |                   Date.now() + parseInt(data.expires_in) * 1000;
121 |                 return true;
122 |               });
123 |           })
124 |           .catch((err) => {
125 |             console.log("error while refreshing");
126 |             console.log(err);
127 |           });
128 |       } else {
129 |         return Promise.resolve(true);
130 |       }
131 |     },
132 |     async getPosts({ commit, state, dispatch }) {
133 |       return dispatch("refresh")
134 |         .then(() => {
135 |           console.log("successfully refreshed");
136 |           return Promise.all([
137 |             fetch(
138 |               `${state.proxyUrl}/https://mobile.bereal.com/api/feeds/friends-v1`,
139 |               {
140 |                 method: "GET",
141 |                 headers: {
142 |                   accept: "application/json",
143 |                   "content-type": "application/json",
144 |                   "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
145 |                   "accept-language": "en-US,en;q=0.9",
146 |                   authorization:
147 |                     `Bearer ${localStorage.getItem("token")}` ?? "",
148 |                 },
149 |               }
150 |             )
151 |               .then((res) => {
152 |                 if (!res.ok) throw new Error("Error getting posts");
153 |                 return res.json();
154 |               })
155 |               .then((data) => {
156 |                 // reverse data.friendsPosts
157 |                 data.friendsPosts.reverse();
158 |                 // for each post in data.friendsPosts reverse the posts
159 |                 // data.friendsPosts.forEach((post) => {
160 |                 //   post.posts.reverse();
161 |                 // });
162 |                 // if data.userPosts exist and data.friendsPosts exist and data.friendsPosts.length > 0 then prepend the userPosts object to the friendsPosts array
163 |                 if (data.userPosts && data.friendsPosts) {
164 |                   data.friendsPosts.unshift(data.userPosts);
165 |                 }
166 | 
167 |                 commit("posts", data.friendsPosts);
168 |               }),
169 |             fetch(`${state.proxyUrl}/https://mobile.bereal.com/api/person/me`, {
170 |               method: "GET",
171 |               headers: {
172 |                 accept: "application/json",
173 |                 "content-type": "application/json",
174 |                 "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
175 |                 "accept-language": "en-US,en;q=0.9",
176 |                 authorization: `Bearer ${localStorage.getItem("token")}` ?? "",
177 |               },
178 |             })
179 |               .then((res) => {
180 |                 if (!res.ok) throw new Error("Error getting user");
181 |                 return res.json();
182 |               })
183 |               .then((data) => {
184 |                 commit("user", data);
185 |               }),
186 |           ]);
187 |         })
188 |         .then(() => {
189 |           return true;
190 |         })
191 |         .catch((err) => {
192 |           reject(err);
193 |         });
194 |     },
195 |     async getUser({ commit, state, dispatch }) {
196 |       // const x = await dispatch("refresh");
197 |       // if (!x) return Promise.reject("error refreshing the token");
198 |       // return dispatch("refresh").then((res) => {
199 |       //   // fetch(`${state.proxyUrl}/https://mobile.bereal.com/api/person/me`, {
200 |       //   //   method: "GET",
201 |       //   //   headers: {
202 |       //   //     accept: "application/json",
203 |       //   //     "content-type": "application/json",
204 |       //   //     "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
205 |       //   //     "accept-language": "en-US,en;q=0.9",
206 |       //   //     authorization: localStorage.getItem("token") ?? "",
207 |       //   //   },
208 |       //   // })
209 |       //   //   .then((res) => res.json())
210 |       //   //   .then((data) => {
211 |       //   //     commit("user", data);
212 |       //   //   });
213 |       // });
214 |     },
215 |     async deletePost({ commit, state, dispatch }) {
216 |       fetch(`${state.proxyUrl}/https://mobile.bereal.com/api/content/posts`, {
217 |         method: "DELETE",
218 |         headers: {
219 |           accept: "application/json",
220 |           "content-type": "application/json",
221 |           "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
222 |           "accept-language": "en-US,en;q=0.9",
223 |           authorization: `Bearer ${localStorage.getItem("token") ?? ""}`,
224 |         },
225 |         body: JSON.stringify({
226 |           data: {
227 |             uid: state.user.id,
228 |           },
229 |         }),
230 |       }).then((res) => {
231 |         if (res.ok) {
232 |           commit("setposted", false);
233 |           dispatch("getPosts");
234 |           event("post", "delete");
235 |         } else {
236 |           commit("error", "Error deleting post");
237 |         }
238 |       });
239 |     },
240 |     async getMemories({ commit, state, dispatch }) {
241 |       fetch(`${state.proxyUrl}/https://mobile.bereal.com/api/feeds/memories`, {
242 |         method: "GET",
243 |         headers: {
244 |           accept: "application/json",
245 |           "content-type": "application/json",
246 |           "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
247 |           authorization: `Bearer ${localStorage.getItem("token") ?? ""}`,
248 |           "accept-language": "en-US,en;q=0.9",
249 |         },
250 |       })
251 |         .then((res) => res.json())
252 |         .then((data) => {
253 |           console.log(data);
254 |           state.memories = data.data;
255 |         });
256 |     },
257 |   },
258 | });
259 | 
260 | export default store;
261 | 


--------------------------------------------------------------------------------
/src/pages/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="!sessionInfo">
  3 |     <div class="text-center text-white pt-10">
  4 |       <h1 class="font-bold mt-0 mb-6 text-7xl">BeFake</h1>
  5 |       <h3 class="text-2xl font-bold mb-8">A BeReal Viewer</h3>
  6 |     </div>
  7 |     <div
  8 |       class="flex items-center justify-center mt-[75%] flex-col sm:flex-row sm:mt-[15%]">
  9 |       <VueCountryCode @asdfasdf="setCountryCode" />
 10 |       <MyInput
 11 |         @enterPressed="sendCode"
 12 |         typeOfInput="tel"
 13 |         v-model="phone"
 14 |         placeholder="Phone Number"
 15 |         class="max-w-sm" />
 16 |       <MyButton @clickedd="sendCode" :loading="loading">Send</MyButton>
 17 |     </div>
 18 |   </div>
 19 | 
 20 |   <div v-else>
 21 |     <div
 22 |       class="flex items-center justify-center mt-[75%] flex-col sm:flex-row sm:mt-[25%]">
 23 |       <span class="mr-2 dark:text-white"
 24 |         >Enter the OTP sent to your phone number:
 25 |       </span>
 26 |       <MyInput
 27 |         @enterPressed="verifyCode"
 28 |         v-model="code"
 29 |         placeholder="123456"
 30 |         class="max-w-sm"
 31 |         typeOfInput="number" />
 32 |       <MyButton @clickedd="verifyCode" :loading="loading">Verify</MyButton>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | <script>
 37 | import PulseLoader from "vue-spinner/src/PulseLoader.vue";
 38 | import MyButton from "../components/ui/Button.vue";
 39 | import VueCountryCode from "../components/login/countrypicker.vue";
 40 | import MyInput from "../components/ui/Input.vue";
 41 | 
 42 | import { event } from "vue-gtag";
 43 | export default {
 44 |   components: { PulseLoader, MyButton, VueCountryCode, MyInput },
 45 |   props: ["login"],
 46 |   data() {
 47 |     return {
 48 |       cc: "+1",
 49 |       phone: "",
 50 |       sessionInfo: "",
 51 |       code: "",
 52 |       loading: false,
 53 |       vonage: false,
 54 |     };
 55 |   },
 56 |   methods: {
 57 |     handleError(message) {
 58 |       this.$store.commit("error", message);
 59 |       event("error", {
 60 |         event_category: "login",
 61 |         event_label: message,
 62 |       });
 63 |     },
 64 |     setCountryCode(country) {
 65 |       console.log(country);
 66 |       this.cc = country;
 67 |       console.log(this.cc);
 68 |     },
 69 |     async sendCode() {
 70 |       event("send_code", {
 71 |         event_category: "login",
 72 |         event_label: "send_code",
 73 |       });
 74 |       this.loading = true;
 75 |       // Check if phone number is valid
 76 |       // check if the string starts with a +
 77 |       console.log(this.phone);
 78 |       if (this.phone.startsWith("{")) {
 79 |         console.log("phone number starts with {");
 80 |         try {
 81 |           const j = JSON.parse(this.phone);
 82 |           if (
 83 |             j.token &&
 84 |             j.refreshToken &&
 85 |             j.expiration &&
 86 |             j.user_id &&
 87 |             j.fbrefreshtoken &&
 88 |             j.fbtoken
 89 |           ) {
 90 |             localStorage.setItem("token", j.token);
 91 |             localStorage.setItem("refreshToken", j.refreshToken);
 92 |             localStorage.setItem("expiration", j.expiration);
 93 |             localStorage.setItem("user_id", j.user_id);
 94 |             localStorage.setItem("fbrefreshtoken", j.fbrefreshtoken);
 95 |             localStorage.setItem("fbtoken", j.fbtoken);
 96 |             await this.$store.dispatch("login");
 97 |           } else {
 98 |             throw "invalid json";
 99 |           }
100 |         } catch (err) {
101 |           this.handleError("invalid json");
102 |         }
103 |         this.loading = false;
104 |         return;
105 |       }
106 |       fetch(
107 |         "https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyClient?key=AIzaSyDwjfEeparokD7sXPVQli9NsTuhT6fJ6iA",
108 |         {
109 |           method: "POST",
110 |           headers: {
111 |             "content-type": "application/json",
112 |             accept: "*/*",
113 |             "x-client-version": "iOS/FirebaseSDK/9.6.0/FirebaseCore-iOS",
114 |             "x-ios-bundle-identifier": "AlexisBarreyat.BeReal",
115 |             "accept-language": "en",
116 |             "user-agent":
117 |               "FirebaseAuth.iOS/9.6.0 AlexisBarreyat.BeReal/0.31.0 iPhone/14.7.1 hw/iPhone9_1",
118 |             "x-firebase-locale": "en",
119 |             "x-firebase-gmpid": "1:405768487586:ios:28c4df089ca92b89",
120 |           },
121 |           body: JSON.stringify({
122 |             appToken:
123 |               "54F80A258C35A916B38A3AD83CA5DDD48A44BFE2461F90831E0F97EBA4BB2EC7",
124 |           }),
125 |         }
126 |       )
127 |         .then((response) => response.json())
128 |         .then((data) => {
129 |           console.log("this is the data receipt:", data.receipt);
130 |           fetch(
131 |             "https://www.googleapis.com/identitytoolkit/v3/relyingparty/sendVerificationCode?key=AIzaSyDwjfEeparokD7sXPVQli9NsTuhT6fJ6iA",
132 |             {
133 |               method: "POST",
134 |               headers: {
135 |                 "content-type": "application/json",
136 |                 accept: "*/*",
137 |                 "x-client-version": "iOS/FirebaseSDK/9.6.0/FirebaseCore-iOS",
138 |                 "x-ios-bundle-identifier": "AlexisBarreyat.BeReal",
139 |                 "accept-language": "en",
140 |                 "user-agent":
141 |                   "FirebaseAuth.iOS/9.6.0 AlexisBarreyat.BeReal/0.28.2 iPhone/14.7.1 hw/iPhone9_1",
142 |                 "x-firebase-locale": "en",
143 |                 "x-firebase-gmpid": "1:405768487586:ios:28c4df089ca92b89",
144 |               },
145 |               body: JSON.stringify({
146 |                 iosReceipt: data.receipt,
147 |                 phoneNumber: this.cc + this.phone,
148 |               }),
149 |             }
150 |           )
151 |             .then((response) => response.json())
152 |             .then((data) => {
153 |               if (data.error) {
154 |                 if (data.error.message === "APP_NOT_VERIFIED") {
155 |                   // handle app not verified
156 |                   fetch("https://auth.bereal.team/api/vonage/request-code", {
157 |                     method: "POST",
158 |                     headers: {
159 |                       accept: "application/json",
160 |                       "content-type": "application/json",
161 |                       "user-agent":
162 |                         "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
163 |                       "accept-language": "en-US,en;q=0.9",
164 |                     },
165 |                     body: JSON.stringify({
166 |                       phoneNumber: this.cc + this.phone,
167 |                       deviceId: "ntbgbuk8ly5gjvv3",
168 |                     }),
169 |                   })
170 |                     .then((response) => {
171 |                       if (!response.ok) {
172 |                         console.log("vonage error");
173 |                       }
174 |                       return response.json();
175 |                     })
176 |                     .then((data2) => {
177 |                       console.log("vonage data", data2);
178 |                       return {
179 |                         sessionInfo: data2.vonageRequestId,
180 |                         vonage: true,
181 |                       };
182 |                     });
183 |                 } else {
184 |                   console.log(
185 |                     "sendVerificationCode responded with an error",
186 |                     data.error.message
187 |                   );
188 |                 }
189 |               } else {
190 |                 return data; // this is the sessionInfo
191 |               }
192 |             })
193 |             .then((data) => {
194 |               this.sessionInfo = data.sessionInfo;
195 |               if (data.vonage) {
196 |                 this.vonage = true;
197 |               }
198 |               this.loading = false;
199 |             })
200 |             .catch((error) => {
201 |               this.handleError(error);
202 |               this.loading = false;
203 |             });
204 |         });
205 |     },
206 |     verifyCode() {
207 |       event("verify_code", {
208 |         event_category: "login",
209 |         event_label: "verify_code",
210 |       });
211 | 
212 |       this.loading = true;
213 |       if (this.vonage) {
214 |         fetch(
215 |           `${this.$store.state.proxyUrl}/https://auth.bereal.team/api/vonage/check-code`,
216 |           {
217 |             method: "POST",
218 |             headers: {
219 |               accept: "application/json",
220 |               "content-type": "application/json",
221 |               "user-agent": "BeReal/7242 CFNetwork/1333.0.4 Darwin/21.5.0",
222 |               "accept-language": "en-US,en;q=0.9",
223 |             },
224 |             body: JSON.stringify({
225 |               code: this.code,
226 |               vonageRequestId: this.sessionInfo,
227 |             }),
228 |           }
229 |         )
230 |           .then((res) => {
231 |             if (!res.ok) {
232 |               throw Error(res.statusText);
233 |             }
234 |             return res.json();
235 |           })
236 |           .then((vdata) =>
237 |             fetch(
238 |               `${this.$store.state.proxyUrl}/https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyCustomToken?key=AIzaSyDwjfEeparokD7sXPVQli9NsTuhT6fJ6iA`,
239 |               {
240 |                 method: "POST",
241 |                 body: JSON.stringify({
242 |                   token: vdata.token,
243 |                   returnSecureToken: true,
244 |                 }),
245 |               }
246 |             )
247 |           )
248 |           .then((res) => {
249 |             if (!res.ok) {
250 |               throw Error(res.statusText);
251 |             }
252 |             return res.json();
253 |           })
254 |           .then((idtokendata) => {
255 |             // this needs to be set since the store is using it
256 |             localStorage.setItem("fbrefreshtoken", idtokendata.refreshToken);
257 |             return this.$store.dispatch("refresh");
258 |           })
259 |           .then(() => {
260 |             this.loading = false;
261 |             this.$store.dispatch("login");
262 |           })
263 |           .catch((e) => {
264 |             this.handleError(e);
265 |             this.loading = false;
266 |           });
267 |         return;
268 |       }
269 |       fetch(
270 |         `https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPhoneNumber?key=AIzaSyDwjfEeparokD7sXPVQli9NsTuhT6fJ6iA`,
271 |         {
272 |           method: "POST",
273 |           headers: {
274 |             "content-type": "application/json",
275 |             "x-firebase-client":
276 |               "apple-platform/ios apple-sdk/19F64 appstore/true deploy/cocoapods device/iPhone9,1 fire-abt/8.15.0 fire-analytics/8.15.0 fire-auth/8.15.0 fire-db/8.15.0 fire-dl/8.15.0 fire-fcm/8.15.0 fire-fiam/8.15.0 fire-fst/8.15.0 fire-fun/8.15.0 fire-install/8.15.0 fire-ios/8.15.0 fire-perf/8.15.0 fire-rc/8.15.0 fire-str/8.15.0 firebase-crashlytics/8.15.0 os-version/14.7.1 xcode/13F100",
277 |             accept: "*/*",
278 |             "x-client-version": "iOS/FirebaseSDK/8.15.0/FirebaseCore-iOS",
279 |             "x-firebase-client-log-type": "0",
280 |             "x-ios-bundle-identifier": "AlexisBarreyat.BeReal",
281 |             "accept-language": "en",
282 |             "user-agent":
283 |               "FirebaseAuth.iOS/8.15.0 AlexisBarreyat.BeReal/0.22.4 iPhone/14.7.1 hw/iPhone9_1",
284 |             "x-firebase-locale": "en",
285 |           },
286 |           body: JSON.stringify({
287 |             sessionInfo: this.sessionInfo,
288 |             code: this.code,
289 |             operation: "SIGN_UP_OR_IN",
290 |           }),
291 |         }
292 |       )
293 |         .then((res) => res.json())
294 |         .then((idtokendata) => {
295 |           // this needs to be set since the store is using it
296 |           localStorage.setItem("fbrefreshtoken", idtokendata.refreshToken);
297 |           return this.$store.dispatch("refresh");
298 |         })
299 |         .then(() => {
300 |           this.loading = false;
301 |           this.$store.dispatch("login");
302 |         })
303 |         .catch((e) => {
304 |           this.handleError(e);
305 |           this.loading = false;
306 |         });
307 |     },
308 |   },
309 | };
310 | </script>
311 | 


--------------------------------------------------------------------------------
/src/pages/Blog.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   data() {
  4 |     return {
  5 |       reading: this.$route.params.id,
  6 |       posts: [
  7 |         {
  8 |           title: "What is Bereal?",
  9 |           description:
 10 |             "A web app that allows you to view your friends BeReal posts without posting anything yourself.",
 11 |           date: "2021-05-01",
 12 |           contentMarkdown: `
 13 |           <div class="container mx-auto">
 14 |   <h1 class="text-4xl font-bold mb-4">Bereal App: Embrace Authenticity and Connect with Like-Minded Individuals</h1>
 15 | 
 16 |   <h2 class="text-2xl font-bold mb-2">Introduction</h2>
 17 |   <p class="mb-4">In a world filled with filters and carefully curated social media profiles, finding authentic connections can be a daunting task. However, the Bereal app has emerged as a breath of fresh air, offering a space where individuals can be their true selves and connect with like-minded people. This blog post explores the unique features and benefits of the Bereal app, highlighting how it is revolutionizing social networking in an era dominated by superficiality.</p>
 18 | 
 19 |   <h2 class="text-2xl font-bold mb-2">Authenticity in the Digital Age</h2>
 20 |   <p class="mb-4">In an era where digital platforms often encourage users to present idealized versions of themselves, the Bereal app sets itself apart by valuing authenticity. This refreshing approach empowers individuals to showcase their genuine personalities, passions, and experiences, fostering an environment that celebrates uniqueness and vulnerability. By embracing imperfections and rejecting the pressures of portraying an unrealistically perfect image, the Bereal app encourages users to connect on a deeper level, forming genuine bonds based on shared interests, values, and experiences.</p>
 21 | 
 22 |   <h2 class="text-2xl font-bold mb-2">A Safe Space for Real Connections</h2>
 23 |   <p class="mb-4">The Bereal app provides a safe and inclusive space for individuals to engage in meaningful conversations without fear of judgment or prejudice. Through its robust moderation system and community guidelines, the app ensures that users can express themselves freely while maintaining a respectful environment. By curating a community of like-minded individuals who appreciate honesty and genuine interactions, Bereal creates an atmosphere where users can feel comfortable sharing their thoughts, dreams, and challenges, fostering empathy, understanding, and emotional support.</p>
 24 | 
 25 |   <h2 class="text-2xl font-bold mb-2">Connecting Like-Minded Individuals</h2>
 26 |   <p class="mb-4">One of the most significant advantages of the Bereal app is its ability to connect users with like-minded individuals who share their passions, interests, and values. Whether it's through dedicated groups, forums, or personalized recommendations, the app facilitates the discovery of communities that resonate with individual users' identities. This targeted approach allows users to find their tribe, fostering a sense of belonging and connection in a world that can often feel disconnected. From discussing shared hobbies to engaging in meaningful debates on important topics, Bereal brings together individuals who are eager to learn, grow, and connect with others who truly understand them.</p>
 27 | 
 28 |   <h2 class="text-2xl font-bold mb-2">Nurturing Personal Growth and Self-Discovery</h2>
 29 |   <p class="mb-4">The Bereal app recognizes that personal growth and self-discovery are integral parts of the human experience. Through its innovative features, such as thought-provoking prompts, inspirational content, and expert-led discussions, the app encourages users to explore their passions, expand their knowledge, and challenge their perspectives. By creating an environment that values introspection and curiosity, Bereal empowers individuals to embark on a journey of self-improvement and self-discovery. Users can engage in constructive conversations, exchange ideas, and gain valuable insights that can positively impact their lives and help them navigate their personal and professional journeys.</p>
 30 | 
 31 |   <h2 class="text-2xl font-bold mb-2">Conclusion</h2>
 32 |   <p class="mb-4">In a digital landscape often characterized by superficiality and pretense, the Bereal app stands out as a haven for authentic connections. By fostering an environment that celebrates individuality, encourages vulnerability, and connects like-minded individuals, Bereal offers a refreshing alternative to traditional social media platforms. It provides a safe space for genuine interactions, nurtures personal growth and self-discovery, and facilitates meaningful connections that have the potential to positively impact users' lives. Embrace authenticity and connect with your true tribe on the Bereal app – a social networking experience like no other.</p>
 33 | </div>
 34 |         `,
 35 |         },
 36 |         {
 37 |           title: "Introduction to Reverse Engineering",
 38 |           description:
 39 |             "Reverse engineering is a process of discovering the technological principles of a device, object, or system through analysis of its structure, function, and operation.",
 40 |           date: "2023-05-03",
 41 |           contentMarkdown: `
 42 |           <div class="container mx-auto">
 43 |   <h1 class="text-4xl font-bold mb-4">Reverse Engineering: Unveiling the Secrets of Technology</h1>
 44 | 
 45 |   <h2 class="text-2xl font-bold mb-2">Introduction</h2>
 46 |   <p class="mb-4">Technology surrounds us, from the devices we use to the software we interact with daily. But have you ever wondered how these technologies work under the hood? Reverse engineering is the process of unraveling the intricacies of technology to understand its inner workings. In this blog post, we'll delve into the fascinating world of reverse engineering, exploring its principles, techniques, and real-world applications.</p>
 47 | 
 48 |   <h2 class="text-2xl font-bold mb-2">Understanding Reverse Engineering</h2>
 49 |   <p class="mb-4">Reverse engineering involves dissecting a technology, whether it's a software program, a hardware device, or even a communication protocol, to understand its structure, functionality, and underlying algorithms. The process typically starts with studying the technology's external behavior and then deconstructing it to reveal the hidden design and implementation details.</p>
 50 | 
 51 |   <h2 class="text-2xl font-bold mb-2">The Tools of the Trade</h2>
 52 |   <p class="mb-4">Reverse engineers rely on a variety of tools to aid their investigation. Disassemblers and decompilers are essential software tools that convert machine code or compiled binaries back into human-readable programming languages. Debuggers allow analysts to step through the code, inspect variables, and understand program flow. Additionally, tools like hex editors, network analyzers, and packet sniffers help examine and manipulate data at various levels.</p>
 53 | 
 54 |   <h2 class="text-2xl font-bold mb-2">Reverse Engineering Techniques</h2>
 55 |   <p class="mb-4">Reverse engineering employs various techniques to uncover the inner workings of technology. Static analysis involves examining the code or binary without executing it. This includes studying assembly code, identifying function calls, and analyzing data structures. Dynamic analysis, on the other hand, involves executing the technology and observing its behavior in a controlled environment, often using debugging tools to monitor memory and register states.</p>
 56 | 
 57 |   <h2 class="text-2xl font-bold mb-2">Real-World Applications</h2>
 58 |   <p class="mb-4">Reverse engineering finds applications in multiple domains, ranging from software security to hardware design and beyond. In the realm of software security, reverse engineering allows analysts to identify vulnerabilities, discover malware behavior, and develop patches or countermeasures. It also plays a crucial role in software interoperability by deciphering proprietary file formats or network protocols to enable compatibility with other systems.</p>
 59 | 
 60 |   <p class="mb-4">In the hardware domain, reverse engineering aids in understanding integrated circuits, identifying chip vulnerabilities, and analyzing communication protocols. This knowledge can be invaluable for hardware manufacturers, researchers, and enthusiasts to improve designs, identify flaws, or develop compatible accessories.</p>
 61 | 
 62 |   <h2 class="text-2xl font-bold mb-2">Ethical Considerations</h2>
 63 |   <p class="mb-4">While reverse engineering is a powerful tool for understanding technology, it's essential to consider ethical boundaries. Respect for intellectual property rights and licensing agreements is crucial. Reverse engineering should be undertaken within legal and ethical frameworks, focusing on research, security analysis, and interoperability rather than malicious intent or illegal activities.</p>
 64 | 
 65 |   <h2 class="text-2xl font-bold mb-2">Conclusion</h2>
 66 |   <p class="mb-4">Reverse engineering allows us to demystify technology, enabling us to understand and improve upon existing systems. It empowers us to enhance software security, develop interoperability solutions, and gain valuable insights into complex technologies. As we continue to advance in the digital age, the art and science of reverse engineering will play an ever more significant role in unraveling the secrets of technology and propelling innovation forward.</p>
 67 | </div>
 68 | 
 69 |         `,
 70 |         },
 71 |         {
 72 |           title: "Man in the middle proxies with Reverse Engineering",
 73 |           description:
 74 |             "Reverse engineering is a process of discovering the technological principles of a device, object, or system through analysis of its structure, function, and operation.",
 75 |           date: "2023-05-03",
 76 |           contentMarkdown: `
 77 |           <div class="container mx-auto">
 78 |   <h1 class="text-4xl font-bold mb-4">mitmproxy: Empowering Reverse Engineering with Man-in-the-Middle Proxies</h1>
 79 | 
 80 |   <h2 class="text-2xl font-bold mb-2">Introduction</h2>
 81 |   <p class="mb-4">Reverse engineering is an essential process in understanding and analyzing the inner workings of software and systems. When it comes to network-based applications, mitmproxy stands out as a powerful tool for intercepting and analyzing network traffic. In this blog post, we'll explore what mitmproxy is, how it works, and how it can be utilized in the field of reverse engineering.</p>
 82 | 
 83 |   <h2 class="text-2xl font-bold mb-2">Understanding mitmproxy</h2>
 84 |   <p class="mb-4">mitmproxy is an open-source command-line tool that acts as a man-in-the-middle (MitM) proxy, allowing users to intercept, inspect, and modify network traffic between a client and server. By placing itself between the client and the server, mitmproxy enables real-time visibility and manipulation of network communications, providing valuable insights into the protocols, data formats, and security aspects of network-based applications.</p>
 85 | 
 86 |   <h2 class="text-2xl font-bold mb-2">Features and Capabilities</h2>
 87 |   
 88 |   <h3 class="text-xl font-bold mb-2">Traffic Interception</h3>
 89 |   <p class="mb-4">mitmproxy captures and intercepts network traffic, allowing analysts to examine the requests and responses exchanged between the client and server. This interception capability enables the inspection of HTTP, HTTPS, and other protocols, giving visibility into the data transmitted, headers exchanged, and cookies utilized.</p>
 90 | 
 91 |   <h3 class="text-xl font-bold mb-2">SSL/TLS Decryption</h3>
 92 |   <p class="mb-4">In the case of encrypted traffic, mitmproxy can act as a certificate authority, generating and signing SSL certificates on the fly. This enables the decryption and analysis of secure communications, providing insights into encrypted protocols, data payloads, and cryptographic algorithms utilized.</p>
 93 | 
 94 |   <h3 class="text-xl font-bold mb-2">Request and Response Modification</h3>
 95 |   <p class="mb-4">mitmproxy allows analysts to modify requests and responses in real-time. This capability is particularly useful in reverse engineering scenarios, where analysts can tamper with parameters, headers, or payloads to observe the behavior of the application under different conditions.</p>
 96 | 
 97 |   <h3 class="text-xl font-bold mb-2">Scripting and Automation</h3>
 98 |   <p class="mb-4">mitmproxy provides a powerful scripting interface, allowing analysts to write custom scripts to automate tasks and extend the functionality of the tool. This scripting capability enables the creation of complex analysis workflows, data extraction, or even the development of custom MitM attacks for testing and research purposes.</p>
 99 | 
100 |   <h2 class="text-2xl font-bold mb-2">Utilizing mitmproxy in Reverse Engineering</h2>
101 |   
102 |   <h3 class="text-xl font-bold mb-2">Protocol Analysis</h3>
103 |   <p class="mb-4">By intercepting and inspecting network traffic, mitmproxy enables analysts to understand the underlying protocols utilized by the application. This understanding can aid in protocol reverse engineering, identification of message formats, or uncovering hidden functionalities.</p>
104 | 
105 |   <h3 class="text-xl font-bold mb-2">API Testing and Fuzzing</h3>
106 |   <p class="mb-4">mitmproxy allows analysts to modify requests and responses, making it an excellent tool for testing and fuzzing APIs. By altering parameters, payloads, or headers, analysts can explore different attack vectors, test error handling mechanisms, or uncover potential security vulnerabilities.</p>
107 | 
108 |   <h3 class="text-xl font-bold mb-2">Reverse Engineering Mobile Apps</h3>
109 |   <p class="mb-4">Mobile applications often communicate with backend servers through APIs. By using mitmproxy in conjunction with mobile application reverse engineering techniques, analysts can intercept and inspect the API calls made by the app, understand the data flow, and gain insights into the app's behavior and communication protocols.</p>
110 | 
111 |   <h3 class="text-xl font-bold mb-2">Security Analysis</h3>
112 |   <p class="mb-4">mitmproxy's SSL/TLS decryption capabilities make it a valuable tool for security analysis. Analysts can examine the cryptographic algorithms employed, verify certificate chains, and inspect the security posture of the application by analyzing the cipher suites, renegotiation, or certificate validation processes.</p>
113 | 
114 |   <h2 class="text-2xl font-bold mb-2">Conclusion</h2>
115 |   <p class="mb-4">mitmproxy, with its powerful interception, analysis, and modification capabilities, is a valuable tool in the field of reverse engineering.</p>
116 | </div>
117 | 
118 |         `,
119 |         },
120 |         {
121 |           title: "SSL Pinning Bypass with Reverse Engineering",
122 |           description:
123 |             "Reverse engineering is a process of discovering the technological principles of a device, object, or system through analysis of its structure, function, and operation.",
124 |           date: "2023-05-03",
125 |           contentMarkdown: `
126 |           <div class="container mx-auto">
127 |   <h1 class="text-4xl font-bold mb-4">SSL Pinning: Enhancing Security in Mobile Applications</h1>
128 | 
129 |   <h2 class="text-2xl font-bold mb-2">Introduction</h2>
130 |   <p class="mb-4">In the world of mobile application security, SSL pinning has emerged as a vital technique for protecting sensitive data and ensuring secure communication between mobile apps and servers. In this article, we'll explore what SSL pinning is, how it works, the benefits it offers, and potential ways to bypass it.</p>
131 | 
132 |   <h2 class="text-2xl font-bold mb-2">Understanding SSL/TLS</h2>
133 |   <p class="mb-4">Secure Sockets Layer (SSL) and its successor, Transport Layer Security (TLS), are cryptographic protocols that establish secure connections between a client (such as a mobile app) and a server. SSL/TLS encryption safeguards data transmitted over the network, preventing unauthorized interception and eavesdropping.</p>
134 | 
135 |   <h2 class="text-2xl font-bold mb-2">The Challenge</h2>
136 |   <p class="mb-4">While SSL/TLS encryption provides a layer of security, it is not immune to attacks. Man-in-the-Middle (MitM) attacks, where an attacker intercepts the communication between the client and server, can bypass SSL/TLS protection. In such scenarios, attackers can monitor, modify, or even inject malicious content into the communication channel.</p>
137 | 
138 |   <h2 class="text-2xl font-bold mb-2">Introducing SSL Pinning</h2>
139 |   <p class="mb-4">SSL pinning is a technique that strengthens the security of SSL/TLS connections by associating a specific digital certificate or public key with a particular server. Instead of solely relying on the trusted certificate authorities (CAs) installed on the device, SSL pinning ensures that only the predefined certificate or key is accepted during the SSL/TLS handshake process.</p>
140 | 
141 |   <h2 class="text-2xl font-bold mb-2">How SSL Pinning Works</h2>
142 |   <p class="mb-4">SSL pinning involves two types of pins: <strong>certificate pinning</strong> and <strong>public key pinning</strong>.</p>
143 | 
144 |   <h3 class="text-xl font-bold mb-2">Certificate Pinning</h3>
145 |   <p class="mb-4">Certificate pinning involves associating a specific SSL certificate with the server's domain. The mobile app is configured to accept connections only if the presented certificate matches the pinned certificate. This prevents attackers from using rogue or compromised certificates to establish illegitimate connections.</p>
146 | 
147 |   <h3 class="text-xl font-bold mb-2">Public Key Pinning</h3>
148 |   <p class="mb-4">Public key pinning, also known as key or fingerprint pinning, involves associating a specific public key with the server's domain. The mobile app validates the server's public key during the SSL/TLS handshake, ensuring that only the expected key is accepted. This protects against attacks where an attacker presents a different but valid certificate.</p>
149 | 
150 |   <h2 class="text-2xl font-bold mb-2">Benefits of SSL Pinning</h2>
151 |   
152 |   <h3 class="text-xl font-bold mb-2">Protection against Certificate Authority Compromise</h3>
153 |   <p class="mb-4">By relying on predefined certificates or public keys, SSL pinning mitigates the risk of compromise or misissuance of certificates by trusted CAs. Even if an attacker manages to obtain a fraudulent certificate, SSL pinning ensures that the connection is rejected, preventing unauthorized access.</p>
154 | 
155 |   <h3 class="text-xl font-bold mb-2">Defense against MitM Attacks</h3>
156 |   <p class="mb-4">SSL pinning strengthens the security of SSL/TLS connections by making them resistant to MitM attacks. Even if an attacker intercepts the communication and tries to present a different certificate, SSL pinning ensures that only the pinned certificate or public key is accepted, protecting the integrity and confidentiality of the data.</p>
157 | 
158 |   <h3 class="text-xl font-bold mb-2">Protection of Sensitive Data</h3>
159 |   <p class="mb-4">Mobile applications often handle sensitive user data, such as personal information or financial details. SSL pinning provides an additional layer of security, reducing the risk of data leakage during transit. It ensures that the app establishes a secure and authenticated connection with the server, safeguarding the confidentiality of sensitive information.</p>
160 | 
161 |   <h2 class="text-2xl font-bold mb-2">Bypassing SSL Pinning</h2>
162 | 
163 |   <h3 class="text-xl font-bold mb-2">Jailbreaking or Rooting</h3>
164 |   <p class="mb-4">In jailbroken or rooted devices, attackers can gain access to the underlying system and modify the SSL pinning mechanism. By patching the app or manipulating the operating system, they can disable or bypass SSL pinning.</p>
165 | </div>
166 | 
167 |         `,
168 |         },
169 |         {
170 |           title: "Reverse Engineering Mobile Apps",
171 |           description:
172 |             "Reverse engineering is a process of discovering the technological principles of a device, object, or system through analysis of its structure, function, and operation.",
173 |           date: "2023-05-03",
174 |           contentMarkdown: `
175 |           <div class="container mx-auto">
176 |   <h1 class="text-4xl font-bold mb-4">Reverse Engineering Mobile Apps with SSL Pinning</h1>
177 | 
178 |   <h2 class="text-2xl font-bold mb-2">Introduction</h2>
179 |   <p class="mb-4">Mobile applications often implement SSL pinning to enhance the security of their network communications. SSL pinning strengthens the protection against man-in-the-middle attacks by associating specific SSL certificates or public keys with the server. However, in certain scenarios, it becomes necessary to reverse engineer mobile apps with SSL pinning for various reasons, such as security analysis, vulnerability assessment, or interoperability testing. In this article, we'll explore the process of reverse engineering mobile apps with SSL pinning.</p>
180 | 
181 |   <h2 class="text-2xl font-bold mb-2">Understanding SSL Pinning</h2>
182 |   <p class="mb-4">SSL pinning is a technique that binds a specific SSL certificate or public key to a mobile app, ensuring that only the predefined certificate or key is accepted during the SSL/TLS handshake. This technique prevents attackers from intercepting and tampering with the network traffic by presenting unauthorized certificates.</p>
183 | 
184 |   <h2 class="text-2xl font-bold mb-2">Reverse Engineering Process</h2>
185 |   
186 |   <h3 class="text-xl font-bold mb-2">1. Obtain the App</h3>
187 |   <p class="mb-4">First, acquire the mobile app you want to reverse engineer. You can either download the app from official app stores or extract it from your own device using tools like ADB (Android Debug Bridge) for Android or iFunBox for iOS.</p>
188 | 
189 |   <h3 class="text-xl font-bold mb-2">2. Set Up the Environment</h3>
190 |   <p class="mb-4">Prepare your reverse engineering environment. Install a virtual machine with the necessary tools like a disassembler, decompiler, and debugger. Popular choices include IDA Pro, Ghidra, Frida, and Xcode for iOS apps.</p>
191 | 
192 |   <h3 class="text-xl font-bold mb-2">3. Identify SSL Pinning Implementation</h3>
193 |   <p class="mb-4">Analyze the app's code to identify the SSL pinning implementation. Look for code snippets related to SSL certificate handling, trust evaluation, or public key verification. Common libraries used for SSL pinning in mobile apps include TrustKit, OkHttp, AFNetworking, and Alamofire.</p>
194 | 
195 |   <h3 class="text-xl font-bold mb-2">4. Bypass SSL Pinning</h3>
196 |   <p class="mb-4">Once you understand how SSL pinning is implemented in the app, you need to bypass it to intercept and analyze the network traffic. There are multiple approaches you can take:</p>
197 | 
198 |   <ul class="list-disc ml-8 mb-4">
199 |     <li class="mb-2">**Instrumentation**: Use a dynamic analysis tool like Frida to instrument the SSL pinning library's functions. You can modify the implementation to accept any certificate or public key, effectively bypassing SSL pinning.</li>
200 |     <li class="mb-2">**Certificate Manipulation**: Replace the pinned certificate or public key with a trusted certificate of your choice. This can be achieved by patching the app's binary or intercepting the certificate during runtime and swapping it with your own certificate.</li>
201 |     <li class="mb-2">**Custom Trust Manager**: Implement a custom SSL/TLS trust manager that accepts any certificate. This involves modifying the app's code to replace the default trust manager with your custom implementation.</li>
202 |   </ul>
203 | 
204 |   <h3 class="text-xl font-bold mb-2">5. Analyze Network Traffic</h3>
205 |   <p class="mb-4">With SSL pinning bypassed, set up a proxy tool like mitmproxy or Burp Suite to intercept the network traffic between the app and the server. This allows you to inspect and modify the requests and responses, gaining insights into the app's communication protocols, data formats, and potential security vulnerabilities.</p>
206 | 
207 |   <h3 class="text-xl font-bold mb-2">6. Extract and Analyze Data</h3>
208 |   <p class="mb-4">Extract the intercepted data from the proxy tool and analyze it in-depth. Look for sensitive information, API endpoints, data encryption, or potential weaknesses in the implementation. This step may involve manual inspection, scripting, or automated analysis tools depending on the complexity of the app.</p>
209 | 
210 |   <h3 class="text-xl font-bold mb-2">7. Patching and Testing</h3>
211 |   <p class="mb-4">Based on the analysis findings, you can patch the app to fix vulnerabilities or modify its behavior. This step is often performed to test the effectiveness of security enhancements, verify the impact of identified vulnerabilities, or develop patches for secure deployment.</p>
212 | 
213 |   <h2 class="text-2xl font-bold mb-2">Ethical Considerations</h2>
214 |   <p class="mb-4">It's important to note that reverse engineering mobile apps with SSL pinning should be conducted ethically and legally. Ensure that you have proper authorization to analyze and modify the app. Respect the app developer's intellectual property rights and adhere to applicable laws and regulations.</p>
215 | </div>
216 | 
217 |         `,
218 |         },
219 |         {
220 |           title: "What is an API?",
221 |           description:
222 |             "An API (Application Programming Interface) is a set of rules that are shared by a particular service. These rules determine in which format and with which command set your application can access the service, as well as what data this service can return in the response. ",
223 |           date: "2023-05-03",
224 |           contentMarkdown: `
225 |           <div class="container mx-auto">
226 |   <h1 class="text-4xl font-bold mb-4">Demystifying APIs: Unlocking the Power of Connectivity</h1>
227 | 
228 |   <h2 class="text-2xl font-bold mb-2">Introduction</h2>
229 |   <p class="mb-4">In the digital age, where seamless integration and data sharing are crucial for success, APIs have emerged as powerful tools driving innovation across industries. APIs, or Application Programming Interfaces, have revolutionized the way software systems communicate with each other, enabling businesses to harness the vast potential of interconnectedness. In this blog post, we will delve into the world of APIs, exploring their definition, functionality, and their impact on modern technology.</p>
230 | 
231 |   <h2 class="text-2xl font-bold mb-2">1. Understanding APIs</h2>
232 |   <p class="mb-4">An API serves as an intermediary that enables different software applications to interact with each other. It defines a set of rules and protocols that facilitate communication and data exchange between two or more systems. Essentially, an API acts as a bridge, allowing developers to access specific features or functionalities of an application, platform, or service without having to understand the underlying complexities.</p>
233 | 
234 |   <h2 class="text-2xl font-bold mb-2">2. How APIs Work</h2>
235 |   <p class="mb-4">At a fundamental level, APIs function as messengers that transmit requests and responses between two software applications. They operate on a request-response model, where one system, known as the client, sends a request to another system, known as the server. The server processes the request and sends back a response, typically in a standardized data format such as JSON (JavaScript Object Notation) or XML (eXtensible Markup Language). This structured data can be used by the client to perform various tasks or integrate with other systems.</p>
236 | 
237 |   <h2 class="text-2xl font-bold mb-2">3. Types of APIs</h2>
238 |   <p class="mb-4">APIs come in different forms, each serving a specific purpose. Here are some common types:</p>
239 | 
240 |   <ul class="list-disc ml-8 mb-4">
241 |     <li class="mb-2">Web APIs: These are the most prevalent type of APIs and are primarily used for web development. Web APIs provide access to web-based services, allowing developers to retrieve or manipulate data using HTTP (Hypertext Transfer Protocol).</li>
242 |     <li class="mb-2">REST APIs: Representational State Transfer (REST) APIs are a popular architectural style for designing web APIs. They utilize the HTTP protocol and standard web protocols to enable communication between systems, typically using JSON as the data format.</li>
243 |     <li class="mb-2">SOAP APIs: Simple Object Access Protocol (SOAP) APIs are older but still widely used. SOAP APIs rely on XML for data transmission and often require more complex configurations compared to REST APIs.</li>
244 |     <li class="mb-2">GraphQL APIs: GraphQL APIs provide a flexible query language that allows clients to request specific data requirements and retrieve only the necessary information. They offer increased efficiency and reduced over-fetching compared to traditional REST APIs.</li>
245 |   </ul>
246 | 
247 |   <h2 class="text-2xl font-bold mb-2">4. The Power of APIs</h2>
248 |   <p class="mb-4">APIs have transformed the way businesses operate, innovate, and collaborate. Here are some key benefits:</p>
249 | 
250 |   <ul class="list-disc ml-8 mb-4">
251 |     <li class="mb-2">Integration: APIs enable systems to seamlessly integrate with each other, allowing businesses to leverage multiple services or platforms and create a unified experience for users.</li>
252 |     <li class="mb-2">Innovation and Development: By exposing functionalities through APIs, organizations can encourage third-party developers to build applications or services that extend the capabilities of their core products, fostering innovation and driving growth.</li>
253 |     <li class="mb-2">Efficiency and Scalability: APIs enable businesses to automate processes, streamline workflows, and scale their operations by leveraging external services or cloud-based resources.</li>
254 |     <li class="mb-2">Partner Ecosystems: APIs facilitate the creation of partner ecosystems, where organizations can collaborate, share data securely, and create mutually beneficial relationships, expanding their reach and services.</li>
255 |     <li class="mb-2">Improved User Experience: APIs enable developers to create dynamic, personalized experiences by integrating data from various sources, enhancing the user experience and customer satisfaction.</li>
256 |   </ul>
257 | 
258 |   <h2 class="text-2xl font-bold mb-2">5. Real-World API Applications</h2>
259 |   <p class="mb-4">APIs have become ubiquitous across industries, powering numerous applications and services. Some notable examples include:</p>
260 | 
261 |   <ul class="list-disc ml-8 mb-4">
262 |     <li class="mb-2">Social Media Integration: APIs provided by platforms like Facebook, Twitter, and Instagram allow developers to integrate social media functionalities into their applications, such as login, sharing, and retrieving user data.</li>
263 |     <li class="mb-2">Payment Gateways: APIs offered by payment gateways like PayPal</li>
264 |   </ul>
265 | </div>
266 | 
267 | `,
268 |         },
269 |         {
270 |           title: "JWTs and Authentication",
271 |           description:
272 |             "JSON Web Tokens (JWTs) are a popular method for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.",
273 |           date: "2023-05-03",
274 |           contentMarkdown: `
275 |           <div class="container mx-auto py-8">
276 |     <h1 class="text-4xl font-bold mb-8">Understanding JWT and Its Role in Authentication</h1>
277 | 
278 |     <div class="rounded-lg shadow-md p-6">
279 |       <p class="text-lg mb-6">In today's digital landscape, authentication is a crucial aspect of securing online systems and protecting user data. One widely adopted method of authentication is JSON Web Tokens (JWT). JWT is a compact, self-contained format for securely transmitting information between parties as a JSON object. In this blog post, we will delve into the world of JWT, exploring its structure, working principles, and its importance in authentication.</p>
280 | 
281 |       <h2 class="text-2xl font-bold mb-4">What is JWT?</h2>
282 | 
283 |       <p class="mb-6">JWT, or JSON Web Token, is an open standard (RFC 7519) that defines a secure way to transmit information between two parties as a JSON object. It consists of three main parts: a header, a payload, and a signature. These three components are base64url encoded and concatenated with periods to form the complete JWT.</p>
284 | 
285 |       <ol class="list-decimal ml-8 mb-6">
286 |         <li class="mb-2">Header: The header typically consists of two parts: the type of the token, which is JWT, and the signing algorithm used to secure the token, such as HMAC SHA256 or RSA.</li>
287 |         <li class="mb-2">Payload: The payload contains the claims or statements about the user and additional data. Claims can be divided into three categories: registered, public, and private. Registered claims are predefined and include details such as the issuer, subject, expiration time, and audience. Public claims are custom-defined and shareable between parties, while private claims are specific to the parties involved in the token exchange.</li>
288 |         <li class="mb-2">Signature: The signature is created by combining the encoded header, encoded payload, a secret key, and the chosen signing algorithm. The signature ensures the integrity of the token and allows parties to verify its authenticity.</li>
289 |       </ol>
290 | 
291 |       <h2 class="text-2xl font-bold mb-4">Working Principle of JWT</h2>
292 | 
293 |       <p class="mb-6">The process of JWT authentication involves three parties: the client, the server, and the authentication server (also known as the identity provider). Let's walk through the steps involved:</p>
294 | 
295 |       <ol class="list-decimal ml-8 mb-6">
296 |         <li class="mb-2">Authentication: The client sends their credentials (username and password) to the server for authentication.</li>
297 |         <li class="mb-2">Token Generation: Upon successful authentication, the server generates a JWT containing relevant information about the user.</li>
298 |         <li class="mb-2">Token Exchange: The server sends the JWT back to the client, who stores it securely, typically in local storage or a cookie.</li>
299 |         <li class="mb-2">Subsequent Requests: For subsequent requests, the client includes the JWT in the Authorization header or as a parameter in the request.</li>
300 |         <li class="mb-2">Token Verification: The server receives the request and validates the JWT by checking its signature and expiration time. If the token is valid, the server processes the request and responds accordingly.</li>
301 |         <li class="mb-2">Token Refresh (Optional): If the token has expired, the client can send a refresh token to the authentication server to obtain a new JWT without re-authenticating. This process helps maintain session persistence.</li>
302 |       </ol>
303 | 
304 |       <h2 class="text-2xl font-bold mb-4">Benefits of JWT</h2>
305 | 
306 |       <p class="mb-6">JWT offers several advantages for authentication in web applications:</p>
307 | 
308 |       <ul class="list-disc ml-8 mb-6">
309 |         <li class="mb-2">Stateless and Scalable: JWTs are stateless, meaning the server does not need to store session information. This scalability allows for easy deployment in distributed systems and enables horizontal scaling.</li>
310 |         <li class="mb-2">Enhanced Security: The signature within the JWT ensures data integrity, preventing tampering and unauthorized access. Additionally, JWTs can be encrypted to protect sensitive information.</li>
311 |         <li class="mb-2">Cross-Domain Communication: JWTs can be used across different domains or systems, making them suitable for implementing single sign-on (SSO) and integrating microservices.</li>
312 |         <li class="mb-2">Decentralized Authentication: By including relevant user information in the JWT payload, the server can make authorization decisions without consulting a database, reducing database queries and enhancing performance.</li>
313 |       </ul>
314 | 
315 |       <p class="font-bold">Conclusion</p>
316 | 
317 |       <p>JSON Web Tokens (JWT) have become a popular choice for implementing authentication in modern web applications. With their compact structure, secure transmission, and versatility, JWTs offer an efficient and scalable method for verifying the authenticity of users. By understanding the working principles and benefits of JWT, developers can build robust and secure authentication systems that protect user data and ensure a seamless user experience.</p>
318 |     </div>
319 |   </div>`,
320 |         },
321 |       ],
322 |     };
323 |   },
324 | };
325 | </script>
326 | 
327 | <template>
328 |   <div class="flex flex-col space-y-10" v-if="!$route.params.id">
329 |     <router-link
330 |       v-for="(post, i) in posts"
331 |       :key="post.title"
332 |       :to="`/read/${i}`">
333 |       <div class="bg-gray-400 rounded-sm">
334 |         <p class="text-4xl font-bold">{{ post.title }}</p>
335 |         <p>{{ post.description }}</p>
336 |         <p>{{ post.date }}</p>
337 |         <!-- <div v-html="post.contentMarkdown"></div> -->
338 |       </div>
339 |     </router-link>
340 |   </div>
341 |   <div v-else>
342 |     <div class="">
343 |       <p class="text-4xl font-bold">{{ posts[$route.params.id].title }}</p>
344 |       <p>{{ posts[$route.params.id].description }}</p>
345 |       <p>{{ posts[$route.params.id].date }}</p>
346 |       <p class="text-2xl">By Rahul Vaidun</p>
347 |       <div v-html="posts[$route.params.id].contentMarkdown"></div>
348 |     </div>
349 |   </div>
350 | </template>
351 | 


--------------------------------------------------------------------------------
/src/data/countries.js:
--------------------------------------------------------------------------------
   1 | const countries = [
   2 |   {
   3 |     name: "Afghanistan",
   4 |     dialCode: "+93",
   5 |     isoCode: "AF",
   6 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/af.svg",
   7 |   },
   8 |   {
   9 |     name: "Aland Islands",
  10 |     dialCode: "+358",
  11 |     isoCode: "AX",
  12 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ax.svg",
  13 |   },
  14 |   {
  15 |     name: "Albania",
  16 |     dialCode: "+355",
  17 |     isoCode: "AL",
  18 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/al.svg",
  19 |   },
  20 |   {
  21 |     name: "Algeria",
  22 |     dialCode: "+213",
  23 |     isoCode: "DZ",
  24 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/dz.svg",
  25 |   },
  26 |   {
  27 |     name: "American Samoa",
  28 |     dialCode: "+1684",
  29 |     isoCode: "AS",
  30 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/as.svg",
  31 |   },
  32 |   {
  33 |     name: "Andorra",
  34 |     dialCode: "+376",
  35 |     isoCode: "AD",
  36 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ad.svg",
  37 |   },
  38 |   {
  39 |     name: "Angola",
  40 |     dialCode: "+244",
  41 |     isoCode: "AO",
  42 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ao.svg",
  43 |   },
  44 |   {
  45 |     name: "Anguilla",
  46 |     dialCode: "+1264",
  47 |     isoCode: "AI",
  48 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ai.svg",
  49 |   },
  50 |   {
  51 |     name: "Antarctica",
  52 |     dialCode: "+672",
  53 |     isoCode: "AQ",
  54 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/aq.svg",
  55 |   },
  56 |   {
  57 |     name: "Antigua and Barbuda",
  58 |     dialCode: "+1268",
  59 |     isoCode: "AG",
  60 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ag.svg",
  61 |   },
  62 |   {
  63 |     name: "Argentina",
  64 |     dialCode: "+54",
  65 |     isoCode: "AR",
  66 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ar.svg",
  67 |   },
  68 |   {
  69 |     name: "Armenia",
  70 |     dialCode: "+374",
  71 |     isoCode: "AM",
  72 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/am.svg",
  73 |   },
  74 |   {
  75 |     name: "Aruba",
  76 |     dialCode: "+297",
  77 |     isoCode: "AW",
  78 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/aw.svg",
  79 |   },
  80 |   {
  81 |     name: "Ascension Island",
  82 |     dialCode: "+247",
  83 |     isoCode: "AC",
  84 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ac.svg",
  85 |   },
  86 |   {
  87 |     name: "Australia",
  88 |     dialCode: "+61",
  89 |     isoCode: "AU",
  90 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/au.svg",
  91 |   },
  92 |   {
  93 |     name: "Austria",
  94 |     dialCode: "+43",
  95 |     isoCode: "AT",
  96 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/at.svg",
  97 |   },
  98 |   {
  99 |     name: "Azerbaijan",
 100 |     dialCode: "+994",
 101 |     isoCode: "AZ",
 102 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/az.svg",
 103 |   },
 104 |   {
 105 |     name: "Bahamas",
 106 |     dialCode: "+1242",
 107 |     isoCode: "BS",
 108 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bs.svg",
 109 |   },
 110 |   {
 111 |     name: "Bahrain",
 112 |     dialCode: "+973",
 113 |     isoCode: "BH",
 114 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bh.svg",
 115 |   },
 116 |   {
 117 |     name: "Bangladesh",
 118 |     dialCode: "+880",
 119 |     isoCode: "BD",
 120 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bd.svg",
 121 |   },
 122 |   {
 123 |     name: "Barbados",
 124 |     dialCode: "+1246",
 125 |     isoCode: "BB",
 126 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bb.svg",
 127 |   },
 128 |   {
 129 |     name: "Belarus",
 130 |     dialCode: "+375",
 131 |     isoCode: "BY",
 132 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/by.svg",
 133 |   },
 134 |   {
 135 |     name: "Belgium",
 136 |     dialCode: "+32",
 137 |     isoCode: "BE",
 138 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/be.svg",
 139 |   },
 140 |   {
 141 |     name: "Belize",
 142 |     dialCode: "+501",
 143 |     isoCode: "BZ",
 144 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bz.svg",
 145 |   },
 146 |   {
 147 |     name: "Benin",
 148 |     dialCode: "+229",
 149 |     isoCode: "BJ",
 150 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bj.svg",
 151 |   },
 152 |   {
 153 |     name: "Bermuda",
 154 |     dialCode: "+1441",
 155 |     isoCode: "BM",
 156 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bm.svg",
 157 |   },
 158 |   {
 159 |     name: "Bhutan",
 160 |     dialCode: "+975",
 161 |     isoCode: "BT",
 162 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bt.svg",
 163 |   },
 164 |   {
 165 |     name: "Bolivia",
 166 |     dialCode: "+591",
 167 |     isoCode: "BO",
 168 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bo.svg",
 169 |   },
 170 |   {
 171 |     name: "Bosnia and Herzegovina",
 172 |     dialCode: "+387",
 173 |     isoCode: "BA",
 174 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ba.svg",
 175 |   },
 176 |   {
 177 |     name: "Botswana",
 178 |     dialCode: "+267",
 179 |     isoCode: "BW",
 180 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bw.svg",
 181 |   },
 182 |   {
 183 |     name: "Brazil",
 184 |     dialCode: "+55",
 185 |     isoCode: "BR",
 186 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/br.svg",
 187 |   },
 188 |   {
 189 |     name: "British Indian Ocean Territory",
 190 |     dialCode: "+246",
 191 |     isoCode: "IO",
 192 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/io.svg",
 193 |   },
 194 |   {
 195 |     name: "Brunei Darussalam",
 196 |     dialCode: "+673",
 197 |     isoCode: "BN",
 198 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bn.svg",
 199 |   },
 200 |   {
 201 |     name: "Bulgaria",
 202 |     dialCode: "+359",
 203 |     isoCode: "BG",
 204 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bg.svg",
 205 |   },
 206 |   {
 207 |     name: "Burkina Faso",
 208 |     dialCode: "+226",
 209 |     isoCode: "BF",
 210 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bf.svg",
 211 |   },
 212 |   {
 213 |     name: "Burundi",
 214 |     dialCode: "+257",
 215 |     isoCode: "BI",
 216 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bi.svg",
 217 |   },
 218 |   {
 219 |     name: "Cambodia",
 220 |     dialCode: "+855",
 221 |     isoCode: "KH",
 222 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/kh.svg",
 223 |   },
 224 |   {
 225 |     name: "Cameroon",
 226 |     dialCode: "+237",
 227 |     isoCode: "CM",
 228 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cm.svg",
 229 |   },
 230 |   {
 231 |     name: "Canada",
 232 |     dialCode: "+1",
 233 |     isoCode: "CA",
 234 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ca.svg",
 235 |   },
 236 |   {
 237 |     name: "Cape Verde",
 238 |     dialCode: "+238",
 239 |     isoCode: "CV",
 240 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cv.svg",
 241 |   },
 242 |   {
 243 |     name: "Cayman Islands",
 244 |     dialCode: "+1345",
 245 |     isoCode: "KY",
 246 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ky.svg",
 247 |   },
 248 |   {
 249 |     name: "Central African Republic",
 250 |     dialCode: "+236",
 251 |     isoCode: "CF",
 252 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cf.svg",
 253 |   },
 254 |   {
 255 |     name: "Chad",
 256 |     dialCode: "+235",
 257 |     isoCode: "TD",
 258 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/td.svg",
 259 |   },
 260 |   {
 261 |     name: "Chile",
 262 |     dialCode: "+56",
 263 |     isoCode: "CL",
 264 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cl.svg",
 265 |   },
 266 |   {
 267 |     name: "China",
 268 |     dialCode: "+86",
 269 |     isoCode: "CN",
 270 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cn.svg",
 271 |   },
 272 |   {
 273 |     name: "Christmas Island",
 274 |     dialCode: "+61",
 275 |     isoCode: "CX",
 276 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cx.svg",
 277 |   },
 278 |   {
 279 |     name: "Cocos (Keeling) Islands",
 280 |     dialCode: "+61",
 281 |     isoCode: "CC",
 282 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cc.svg",
 283 |   },
 284 |   {
 285 |     name: "Colombia",
 286 |     dialCode: "+57",
 287 |     isoCode: "CO",
 288 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/co.svg",
 289 |   },
 290 |   {
 291 |     name: "Comoros",
 292 |     dialCode: "+269",
 293 |     isoCode: "KM",
 294 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/km.svg",
 295 |   },
 296 |   {
 297 |     name: "Congo",
 298 |     dialCode: "+242",
 299 |     isoCode: "CG",
 300 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cg.svg",
 301 |   },
 302 |   {
 303 |     name: "Cook Islands",
 304 |     dialCode: "+682",
 305 |     isoCode: "CK",
 306 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ck.svg",
 307 |   },
 308 |   {
 309 |     name: "Costa Rica",
 310 |     dialCode: "+506",
 311 |     isoCode: "CR",
 312 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cr.svg",
 313 |   },
 314 |   {
 315 |     name: "Croatia",
 316 |     dialCode: "+385",
 317 |     isoCode: "HR",
 318 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/hr.svg",
 319 |   },
 320 |   {
 321 |     name: "Cuba",
 322 |     dialCode: "+53",
 323 |     isoCode: "CU",
 324 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cu.svg",
 325 |   },
 326 |   {
 327 |     name: "Cyprus",
 328 |     dialCode: "+357",
 329 |     isoCode: "CY",
 330 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cy.svg",
 331 |   },
 332 |   {
 333 |     name: "Czech Republic",
 334 |     dialCode: "+420",
 335 |     isoCode: "CZ",
 336 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cz.svg",
 337 |   },
 338 |   {
 339 |     name: "Democratic Republic of the Congo",
 340 |     dialCode: "+243",
 341 |     isoCode: "CD",
 342 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/cd.svg",
 343 |   },
 344 |   {
 345 |     name: "Denmark",
 346 |     dialCode: "+45",
 347 |     isoCode: "DK",
 348 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/dk.svg",
 349 |   },
 350 |   {
 351 |     name: "Djibouti",
 352 |     dialCode: "+253",
 353 |     isoCode: "DJ",
 354 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/dj.svg",
 355 |   },
 356 |   {
 357 |     name: "Dominica",
 358 |     dialCode: "+1767",
 359 |     isoCode: "DM",
 360 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/dm.svg",
 361 |   },
 362 |   {
 363 |     name: "Dominican Republic",
 364 |     dialCode: "+1849",
 365 |     isoCode: "DO",
 366 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/do.svg",
 367 |   },
 368 |   {
 369 |     name: "Ecuador",
 370 |     dialCode: "+593",
 371 |     isoCode: "EC",
 372 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ec.svg",
 373 |   },
 374 |   {
 375 |     name: "Egypt",
 376 |     dialCode: "+20",
 377 |     isoCode: "EG",
 378 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/eg.svg",
 379 |   },
 380 |   {
 381 |     name: "El Salvador",
 382 |     dialCode: "+503",
 383 |     isoCode: "SV",
 384 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sv.svg",
 385 |   },
 386 |   {
 387 |     name: "Equatorial Guinea",
 388 |     dialCode: "+240",
 389 |     isoCode: "GQ",
 390 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gq.svg",
 391 |   },
 392 |   {
 393 |     name: "Eritrea",
 394 |     dialCode: "+291",
 395 |     isoCode: "ER",
 396 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/er.svg",
 397 |   },
 398 |   {
 399 |     name: "Estonia",
 400 |     dialCode: "+372",
 401 |     isoCode: "EE",
 402 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ee.svg",
 403 |   },
 404 |   {
 405 |     name: "Eswatini",
 406 |     dialCode: "+268",
 407 |     isoCode: "SZ",
 408 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sz.svg",
 409 |   },
 410 |   {
 411 |     name: "Ethiopia",
 412 |     dialCode: "+251",
 413 |     isoCode: "ET",
 414 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/et.svg",
 415 |   },
 416 |   {
 417 |     name: "Falkland Islands (Malvinas)",
 418 |     dialCode: "+500",
 419 |     isoCode: "FK",
 420 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/fk.svg",
 421 |   },
 422 |   {
 423 |     name: "Faroe Islands",
 424 |     dialCode: "+298",
 425 |     isoCode: "FO",
 426 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/fo.svg",
 427 |   },
 428 |   {
 429 |     name: "Fiji",
 430 |     dialCode: "+679",
 431 |     isoCode: "FJ",
 432 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/fj.svg",
 433 |   },
 434 |   {
 435 |     name: "Finland",
 436 |     dialCode: "+358",
 437 |     isoCode: "FI",
 438 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/fi.svg",
 439 |   },
 440 |   {
 441 |     name: "France",
 442 |     dialCode: "+33",
 443 |     isoCode: "FR",
 444 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/fr.svg",
 445 |   },
 446 |   {
 447 |     name: "French Guiana",
 448 |     dialCode: "+594",
 449 |     isoCode: "GF",
 450 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gf.svg",
 451 |   },
 452 |   {
 453 |     name: "French Polynesia",
 454 |     dialCode: "+689",
 455 |     isoCode: "PF",
 456 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pf.svg",
 457 |   },
 458 |   {
 459 |     name: "Gabon",
 460 |     dialCode: "+241",
 461 |     isoCode: "GA",
 462 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ga.svg",
 463 |   },
 464 |   {
 465 |     name: "Gambia",
 466 |     dialCode: "+220",
 467 |     isoCode: "GM",
 468 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gm.svg",
 469 |   },
 470 |   {
 471 |     name: "Georgia",
 472 |     dialCode: "+995",
 473 |     isoCode: "GE",
 474 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ge.svg",
 475 |   },
 476 |   {
 477 |     name: "Germany",
 478 |     dialCode: "+49",
 479 |     isoCode: "DE",
 480 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/de.svg",
 481 |   },
 482 |   {
 483 |     name: "Ghana",
 484 |     dialCode: "+233",
 485 |     isoCode: "GH",
 486 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gh.svg",
 487 |   },
 488 |   {
 489 |     name: "Gibraltar",
 490 |     dialCode: "+350",
 491 |     isoCode: "GI",
 492 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gi.svg",
 493 |   },
 494 |   {
 495 |     name: "Greece",
 496 |     dialCode: "+30",
 497 |     isoCode: "GR",
 498 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gr.svg",
 499 |   },
 500 |   {
 501 |     name: "Greenland",
 502 |     dialCode: "+299",
 503 |     isoCode: "GL",
 504 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gl.svg",
 505 |   },
 506 |   {
 507 |     name: "Grenada",
 508 |     dialCode: "+1473",
 509 |     isoCode: "GD",
 510 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gd.svg",
 511 |   },
 512 |   {
 513 |     name: "Guadeloupe",
 514 |     dialCode: "+590",
 515 |     isoCode: "GP",
 516 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gp.svg",
 517 |   },
 518 |   {
 519 |     name: "Guam",
 520 |     dialCode: "+1671",
 521 |     isoCode: "GU",
 522 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gu.svg",
 523 |   },
 524 |   {
 525 |     name: "Guatemala",
 526 |     dialCode: "+502",
 527 |     isoCode: "GT",
 528 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gt.svg",
 529 |   },
 530 |   {
 531 |     name: "Guernsey",
 532 |     dialCode: "+44-1481",
 533 |     isoCode: "GG",
 534 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gg.svg",
 535 |   },
 536 |   {
 537 |     name: "Guinea",
 538 |     dialCode: "+224",
 539 |     isoCode: "GN",
 540 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gn.svg",
 541 |   },
 542 |   {
 543 |     name: "Guinea-Bissau",
 544 |     dialCode: "+245",
 545 |     isoCode: "GW",
 546 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gw.svg",
 547 |   },
 548 |   {
 549 |     name: "Guyana",
 550 |     dialCode: "+592",
 551 |     isoCode: "GY",
 552 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gy.svg",
 553 |   },
 554 |   {
 555 |     name: "Haiti",
 556 |     dialCode: "+509",
 557 |     isoCode: "HT",
 558 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ht.svg",
 559 |   },
 560 |   {
 561 |     name: "Holy See (Vatican City State)",
 562 |     dialCode: "+379",
 563 |     isoCode: "VA",
 564 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/va.svg",
 565 |   },
 566 |   {
 567 |     name: "Honduras",
 568 |     dialCode: "+504",
 569 |     isoCode: "HN",
 570 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/hn.svg",
 571 |   },
 572 |   {
 573 |     name: "Hong Kong",
 574 |     dialCode: "+852",
 575 |     isoCode: "HK",
 576 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/hk.svg",
 577 |   },
 578 |   {
 579 |     name: "Hungary",
 580 |     dialCode: "+36",
 581 |     isoCode: "HU",
 582 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/hu.svg",
 583 |   },
 584 |   {
 585 |     name: "Iceland",
 586 |     dialCode: "+354",
 587 |     isoCode: "IS",
 588 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/is.svg",
 589 |   },
 590 |   {
 591 |     name: "India",
 592 |     dialCode: "+91",
 593 |     isoCode: "IN",
 594 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/in.svg",
 595 |   },
 596 |   {
 597 |     name: "Indonesia",
 598 |     dialCode: "+62",
 599 |     isoCode: "ID",
 600 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/id.svg",
 601 |   },
 602 |   {
 603 |     name: "Iran",
 604 |     dialCode: "+98",
 605 |     isoCode: "IR",
 606 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ir.svg",
 607 |   },
 608 |   {
 609 |     name: "Iraq",
 610 |     dialCode: "+964",
 611 |     isoCode: "IQ",
 612 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/iq.svg",
 613 |   },
 614 |   {
 615 |     name: "Ireland",
 616 |     dialCode: "+353",
 617 |     isoCode: "IE",
 618 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ie.svg",
 619 |   },
 620 |   {
 621 |     name: "Isle of Man",
 622 |     dialCode: "+44-1624",
 623 |     isoCode: "IM",
 624 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/im.svg",
 625 |   },
 626 |   {
 627 |     name: "Israel",
 628 |     dialCode: "+972",
 629 |     isoCode: "IL",
 630 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/il.svg",
 631 |   },
 632 |   {
 633 |     name: "Italy",
 634 |     dialCode: "+39",
 635 |     isoCode: "IT",
 636 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/it.svg",
 637 |   },
 638 |   {
 639 |     name: "Ivory Coast / Cote d'Ivoire",
 640 |     dialCode: "+225",
 641 |     isoCode: "CI",
 642 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ci.svg",
 643 |   },
 644 |   {
 645 |     name: "Jamaica",
 646 |     dialCode: "+1876",
 647 |     isoCode: "JM",
 648 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/jm.svg",
 649 |   },
 650 |   {
 651 |     name: "Japan",
 652 |     dialCode: "+81",
 653 |     isoCode: "JP",
 654 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/jp.svg",
 655 |   },
 656 |   {
 657 |     name: "Jersey",
 658 |     dialCode: "+44-1534",
 659 |     isoCode: "JE",
 660 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/je.svg",
 661 |   },
 662 |   {
 663 |     name: "Jordan",
 664 |     dialCode: "+962",
 665 |     isoCode: "JO",
 666 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/jo.svg",
 667 |   },
 668 |   {
 669 |     name: "Kazakhstan",
 670 |     dialCode: "+77",
 671 |     isoCode: "KZ",
 672 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/kz.svg",
 673 |   },
 674 |   {
 675 |     name: "Kenya",
 676 |     dialCode: "+254",
 677 |     isoCode: "KE",
 678 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ke.svg",
 679 |   },
 680 |   {
 681 |     name: "Kiribati",
 682 |     dialCode: "+686",
 683 |     isoCode: "KI",
 684 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ki.svg",
 685 |   },
 686 |   {
 687 |     name: "Korea, Democratic People's Republic of Korea",
 688 |     dialCode: "+850",
 689 |     isoCode: "KP",
 690 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/kp.svg",
 691 |   },
 692 |   {
 693 |     name: "Korea, Republic of South Korea",
 694 |     dialCode: "+82",
 695 |     isoCode: "KR",
 696 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/kr.svg",
 697 |   },
 698 |   {
 699 |     name: "Kosovo",
 700 |     dialCode: "+383",
 701 |     isoCode: "XK",
 702 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/xk.svg",
 703 |   },
 704 |   {
 705 |     name: "Kuwait",
 706 |     dialCode: "+965",
 707 |     isoCode: "KW",
 708 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/kw.svg",
 709 |   },
 710 |   {
 711 |     name: "Kyrgyzstan",
 712 |     dialCode: "+996",
 713 |     isoCode: "KG",
 714 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/kg.svg",
 715 |   },
 716 |   {
 717 |     name: "Laos",
 718 |     dialCode: "+856",
 719 |     isoCode: "LA",
 720 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/la.svg",
 721 |   },
 722 |   {
 723 |     name: "Latvia",
 724 |     dialCode: "+371",
 725 |     isoCode: "LV",
 726 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/lv.svg",
 727 |   },
 728 |   {
 729 |     name: "Lebanon",
 730 |     dialCode: "+961",
 731 |     isoCode: "LB",
 732 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/lb.svg",
 733 |   },
 734 |   {
 735 |     name: "Lesotho",
 736 |     dialCode: "+266",
 737 |     isoCode: "LS",
 738 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ls.svg",
 739 |   },
 740 |   {
 741 |     name: "Liberia",
 742 |     dialCode: "+231",
 743 |     isoCode: "LR",
 744 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/lr.svg",
 745 |   },
 746 |   {
 747 |     name: "Libya",
 748 |     dialCode: "+218",
 749 |     isoCode: "LY",
 750 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ly.svg",
 751 |   },
 752 |   {
 753 |     name: "Liechtenstein",
 754 |     dialCode: "+423",
 755 |     isoCode: "LI",
 756 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/li.svg",
 757 |   },
 758 |   {
 759 |     name: "Lithuania",
 760 |     dialCode: "+370",
 761 |     isoCode: "LT",
 762 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/lt.svg",
 763 |   },
 764 |   {
 765 |     name: "Luxembourg",
 766 |     dialCode: "+352",
 767 |     isoCode: "LU",
 768 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/lu.svg",
 769 |   },
 770 |   {
 771 |     name: "Macau",
 772 |     dialCode: "+853",
 773 |     isoCode: "MO",
 774 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mo.svg",
 775 |   },
 776 |   {
 777 |     name: "Madagascar",
 778 |     dialCode: "+261",
 779 |     isoCode: "MG",
 780 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mg.svg",
 781 |   },
 782 |   {
 783 |     name: "Malawi",
 784 |     dialCode: "+265",
 785 |     isoCode: "MW",
 786 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mw.svg",
 787 |   },
 788 |   {
 789 |     name: "Malaysia",
 790 |     dialCode: "+60",
 791 |     isoCode: "MY",
 792 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/my.svg",
 793 |   },
 794 |   {
 795 |     name: "Maldives",
 796 |     dialCode: "+960",
 797 |     isoCode: "MV",
 798 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mv.svg",
 799 |   },
 800 |   {
 801 |     name: "Mali",
 802 |     dialCode: "+223",
 803 |     isoCode: "ML",
 804 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ml.svg",
 805 |   },
 806 |   {
 807 |     name: "Malta",
 808 |     dialCode: "+356",
 809 |     isoCode: "MT",
 810 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mt.svg",
 811 |   },
 812 |   {
 813 |     name: "Marshall Islands",
 814 |     dialCode: "+692",
 815 |     isoCode: "MH",
 816 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mh.svg",
 817 |   },
 818 |   {
 819 |     name: "Martinique",
 820 |     dialCode: "+596",
 821 |     isoCode: "MQ",
 822 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mq.svg",
 823 |   },
 824 |   {
 825 |     name: "Mauritania",
 826 |     dialCode: "+222",
 827 |     isoCode: "MR",
 828 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mr.svg",
 829 |   },
 830 |   {
 831 |     name: "Mauritius",
 832 |     dialCode: "+230",
 833 |     isoCode: "MU",
 834 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mu.svg",
 835 |   },
 836 |   {
 837 |     name: "Mayotte",
 838 |     dialCode: "+262",
 839 |     isoCode: "YT",
 840 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/yt.svg",
 841 |   },
 842 |   {
 843 |     name: "Mexico",
 844 |     dialCode: "+52",
 845 |     isoCode: "MX",
 846 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mx.svg",
 847 |   },
 848 |   {
 849 |     name: "Micronesia, Federated States of Micronesia",
 850 |     dialCode: "+691",
 851 |     isoCode: "FM",
 852 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/fm.svg",
 853 |   },
 854 |   {
 855 |     name: "Moldova",
 856 |     dialCode: "+373",
 857 |     isoCode: "MD",
 858 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/md.svg",
 859 |   },
 860 |   {
 861 |     name: "Monaco",
 862 |     dialCode: "+377",
 863 |     isoCode: "MC",
 864 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mc.svg",
 865 |   },
 866 |   {
 867 |     name: "Mongolia",
 868 |     dialCode: "+976",
 869 |     isoCode: "MN",
 870 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mn.svg",
 871 |   },
 872 |   {
 873 |     name: "Montenegro",
 874 |     dialCode: "+382",
 875 |     isoCode: "ME",
 876 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/me.svg",
 877 |   },
 878 |   {
 879 |     name: "Montserrat",
 880 |     dialCode: "+1664",
 881 |     isoCode: "MS",
 882 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ms.svg",
 883 |   },
 884 |   {
 885 |     name: "Morocco",
 886 |     dialCode: "+212",
 887 |     isoCode: "MA",
 888 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ma.svg",
 889 |   },
 890 |   {
 891 |     name: "Mozambique",
 892 |     dialCode: "+258",
 893 |     isoCode: "MZ",
 894 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mz.svg",
 895 |   },
 896 |   {
 897 |     name: "Myanmar",
 898 |     dialCode: "+95",
 899 |     isoCode: "MM",
 900 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mm.svg",
 901 |   },
 902 |   {
 903 |     name: "Namibia",
 904 |     dialCode: "+264",
 905 |     isoCode: "NA",
 906 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/na.svg",
 907 |   },
 908 |   {
 909 |     name: "Nauru",
 910 |     dialCode: "+674",
 911 |     isoCode: "NR",
 912 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/nr.svg",
 913 |   },
 914 |   {
 915 |     name: "Nepal",
 916 |     dialCode: "+977",
 917 |     isoCode: "NP",
 918 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/np.svg",
 919 |   },
 920 |   {
 921 |     name: "Netherlands",
 922 |     dialCode: "+31",
 923 |     isoCode: "NL",
 924 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/nl.svg",
 925 |   },
 926 |   {
 927 |     name: "Netherlands Antilles",
 928 |     dialCode: "+599",
 929 |     isoCode: "AN",
 930 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/an.svg",
 931 |   },
 932 |   {
 933 |     name: "New Caledonia",
 934 |     dialCode: "+687",
 935 |     isoCode: "NC",
 936 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/nc.svg",
 937 |   },
 938 |   {
 939 |     name: "New Zealand",
 940 |     dialCode: "+64",
 941 |     isoCode: "NZ",
 942 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/nz.svg",
 943 |   },
 944 |   {
 945 |     name: "Nicaragua",
 946 |     dialCode: "+505",
 947 |     isoCode: "NI",
 948 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ni.svg",
 949 |   },
 950 |   {
 951 |     name: "Niger",
 952 |     dialCode: "+227",
 953 |     isoCode: "NE",
 954 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ne.svg",
 955 |   },
 956 |   {
 957 |     name: "Nigeria",
 958 |     dialCode: "+234",
 959 |     isoCode: "NG",
 960 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ng.svg",
 961 |   },
 962 |   {
 963 |     name: "Niue",
 964 |     dialCode: "+683",
 965 |     isoCode: "NU",
 966 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/nu.svg",
 967 |   },
 968 |   {
 969 |     name: "Norfolk Island",
 970 |     dialCode: "+672",
 971 |     isoCode: "NF",
 972 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/nf.svg",
 973 |   },
 974 |   {
 975 |     name: "North Macedonia",
 976 |     dialCode: "+389",
 977 |     isoCode: "MK",
 978 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mk.svg",
 979 |   },
 980 |   {
 981 |     name: "Northern Mariana Islands",
 982 |     dialCode: "+1670",
 983 |     isoCode: "MP",
 984 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mp.svg",
 985 |   },
 986 |   {
 987 |     name: "Norway",
 988 |     dialCode: "+47",
 989 |     isoCode: "NO",
 990 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/no.svg",
 991 |   },
 992 |   {
 993 |     name: "Oman",
 994 |     dialCode: "+968",
 995 |     isoCode: "OM",
 996 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/om.svg",
 997 |   },
 998 |   {
 999 |     name: "Pakistan",
1000 |     dialCode: "+92",
1001 |     isoCode: "PK",
1002 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pk.svg",
1003 |   },
1004 |   {
1005 |     name: "Palau",
1006 |     dialCode: "+680",
1007 |     isoCode: "PW",
1008 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pw.svg",
1009 |   },
1010 |   {
1011 |     name: "Palestine",
1012 |     dialCode: "+970",
1013 |     isoCode: "PS",
1014 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ps.svg",
1015 |   },
1016 |   {
1017 |     name: "Panama",
1018 |     dialCode: "+507",
1019 |     isoCode: "PA",
1020 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pa.svg",
1021 |   },
1022 |   {
1023 |     name: "Papua New Guinea",
1024 |     dialCode: "+675",
1025 |     isoCode: "PG",
1026 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pg.svg",
1027 |   },
1028 |   {
1029 |     name: "Paraguay",
1030 |     dialCode: "+595",
1031 |     isoCode: "PY",
1032 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/py.svg",
1033 |   },
1034 |   {
1035 |     name: "Peru",
1036 |     dialCode: "+51",
1037 |     isoCode: "PE",
1038 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pe.svg",
1039 |   },
1040 |   {
1041 |     name: "Philippines",
1042 |     dialCode: "+63",
1043 |     isoCode: "PH",
1044 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ph.svg",
1045 |   },
1046 |   {
1047 |     name: "Pitcairn",
1048 |     dialCode: "+872",
1049 |     isoCode: "PN",
1050 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pn.svg",
1051 |   },
1052 |   {
1053 |     name: "Poland",
1054 |     dialCode: "+48",
1055 |     isoCode: "PL",
1056 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pl.svg",
1057 |   },
1058 |   {
1059 |     name: "Portugal",
1060 |     dialCode: "+351",
1061 |     isoCode: "PT",
1062 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pt.svg",
1063 |   },
1064 |   {
1065 |     name: "Puerto Rico",
1066 |     dialCode: "+1939",
1067 |     isoCode: "PR",
1068 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pr.svg",
1069 |   },
1070 |   {
1071 |     name: "Qatar",
1072 |     dialCode: "+974",
1073 |     isoCode: "QA",
1074 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/qa.svg",
1075 |   },
1076 |   {
1077 |     name: "Reunion",
1078 |     dialCode: "+262",
1079 |     isoCode: "RE",
1080 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/re.svg",
1081 |   },
1082 |   {
1083 |     name: "Romania",
1084 |     dialCode: "+40",
1085 |     isoCode: "RO",
1086 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ro.svg",
1087 |   },
1088 |   {
1089 |     name: "Russia",
1090 |     dialCode: "+7",
1091 |     isoCode: "RU",
1092 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ru.svg",
1093 |   },
1094 |   {
1095 |     name: "Rwanda",
1096 |     dialCode: "+250",
1097 |     isoCode: "RW",
1098 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/rw.svg",
1099 |   },
1100 |   {
1101 |     name: "Saint Barthelemy",
1102 |     dialCode: "+590",
1103 |     isoCode: "BL",
1104 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/bl.svg",
1105 |   },
1106 |   {
1107 |     name: "Saint Helena, Ascension and Tristan Da Cunha",
1108 |     dialCode: "+290",
1109 |     isoCode: "SH",
1110 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sh.svg",
1111 |   },
1112 |   {
1113 |     name: "Saint Kitts and Nevis",
1114 |     dialCode: "+1869",
1115 |     isoCode: "KN",
1116 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/kn.svg",
1117 |   },
1118 |   {
1119 |     name: "Saint Lucia",
1120 |     dialCode: "+1758",
1121 |     isoCode: "LC",
1122 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/lc.svg",
1123 |   },
1124 |   {
1125 |     name: "Saint Martin",
1126 |     dialCode: "+590",
1127 |     isoCode: "MF",
1128 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/mf.svg",
1129 |   },
1130 |   {
1131 |     name: "Saint Pierre and Miquelon",
1132 |     dialCode: "+508",
1133 |     isoCode: "PM",
1134 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/pm.svg",
1135 |   },
1136 |   {
1137 |     name: "Saint Vincent and the Grenadines",
1138 |     dialCode: "+1784",
1139 |     isoCode: "VC",
1140 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/vc.svg",
1141 |   },
1142 |   {
1143 |     name: "Samoa",
1144 |     dialCode: "+685",
1145 |     isoCode: "WS",
1146 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ws.svg",
1147 |   },
1148 |   {
1149 |     name: "San Marino",
1150 |     dialCode: "+378",
1151 |     isoCode: "SM",
1152 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sm.svg",
1153 |   },
1154 |   {
1155 |     name: "Sao Tome and Principe",
1156 |     dialCode: "+239",
1157 |     isoCode: "ST",
1158 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/st.svg",
1159 |   },
1160 |   {
1161 |     name: "Saudi Arabia",
1162 |     dialCode: "+966",
1163 |     isoCode: "SA",
1164 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sa.svg",
1165 |   },
1166 |   {
1167 |     name: "Senegal",
1168 |     dialCode: "+221",
1169 |     isoCode: "SN",
1170 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sn.svg",
1171 |   },
1172 |   {
1173 |     name: "Serbia",
1174 |     dialCode: "+381",
1175 |     isoCode: "RS",
1176 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/rs.svg",
1177 |   },
1178 |   {
1179 |     name: "Seychelles",
1180 |     dialCode: "+248",
1181 |     isoCode: "SC",
1182 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sc.svg",
1183 |   },
1184 |   {
1185 |     name: "Sierra Leone",
1186 |     dialCode: "+232",
1187 |     isoCode: "SL",
1188 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sl.svg",
1189 |   },
1190 |   {
1191 |     name: "Singapore",
1192 |     dialCode: "+65",
1193 |     isoCode: "SG",
1194 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sg.svg",
1195 |   },
1196 |   {
1197 |     name: "Sint Maarten",
1198 |     dialCode: "+1721",
1199 |     isoCode: "SX",
1200 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sx.svg",
1201 |   },
1202 |   {
1203 |     name: "Slovakia",
1204 |     dialCode: "+421",
1205 |     isoCode: "SK",
1206 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sk.svg",
1207 |   },
1208 |   {
1209 |     name: "Slovenia",
1210 |     dialCode: "+386",
1211 |     isoCode: "SI",
1212 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/si.svg",
1213 |   },
1214 |   {
1215 |     name: "Solomon Islands",
1216 |     dialCode: "+677",
1217 |     isoCode: "SB",
1218 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sb.svg",
1219 |   },
1220 |   {
1221 |     name: "Somalia",
1222 |     dialCode: "+252",
1223 |     isoCode: "SO",
1224 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/so.svg",
1225 |   },
1226 |   {
1227 |     name: "South Africa",
1228 |     dialCode: "+27",
1229 |     isoCode: "ZA",
1230 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/za.svg",
1231 |   },
1232 |   {
1233 |     name: "South Georgia and the South Sandwich Islands",
1234 |     dialCode: "+500",
1235 |     isoCode: "GS",
1236 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gs.svg",
1237 |   },
1238 |   {
1239 |     name: "South Sudan",
1240 |     dialCode: "+211",
1241 |     isoCode: "SS",
1242 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ss.svg",
1243 |   },
1244 |   {
1245 |     name: "Spain",
1246 |     dialCode: "+34",
1247 |     isoCode: "ES",
1248 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/es.svg",
1249 |   },
1250 |   {
1251 |     name: "Sri Lanka",
1252 |     dialCode: "+94",
1253 |     isoCode: "LK",
1254 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/lk.svg",
1255 |   },
1256 |   {
1257 |     name: "Sudan",
1258 |     dialCode: "+249",
1259 |     isoCode: "SD",
1260 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sd.svg",
1261 |   },
1262 |   {
1263 |     name: "Suriname",
1264 |     dialCode: "+597",
1265 |     isoCode: "SR",
1266 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sr.svg",
1267 |   },
1268 |   {
1269 |     name: "Svalbard and Jan Mayen",
1270 |     dialCode: "+47",
1271 |     isoCode: "SJ",
1272 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sj.svg",
1273 |   },
1274 |   {
1275 |     name: "Sweden",
1276 |     dialCode: "+46",
1277 |     isoCode: "SE",
1278 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/se.svg",
1279 |   },
1280 |   {
1281 |     name: "Switzerland",
1282 |     dialCode: "+41",
1283 |     isoCode: "CH",
1284 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ch.svg",
1285 |   },
1286 |   {
1287 |     name: "Syrian Arab Republic",
1288 |     dialCode: "+963",
1289 |     isoCode: "SY",
1290 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/sy.svg",
1291 |   },
1292 |   {
1293 |     name: "Taiwan",
1294 |     dialCode: "+886",
1295 |     isoCode: "TW",
1296 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tw.svg",
1297 |   },
1298 |   {
1299 |     name: "Tajikistan",
1300 |     dialCode: "+992",
1301 |     isoCode: "TJ",
1302 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tj.svg",
1303 |   },
1304 |   {
1305 |     name: "Tanzania, United Republic of Tanzania",
1306 |     dialCode: "+255",
1307 |     isoCode: "TZ",
1308 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tz.svg",
1309 |   },
1310 |   {
1311 |     name: "Thailand",
1312 |     dialCode: "+66",
1313 |     isoCode: "TH",
1314 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/th.svg",
1315 |   },
1316 |   {
1317 |     name: "Timor-Leste",
1318 |     dialCode: "+670",
1319 |     isoCode: "TL",
1320 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tl.svg",
1321 |   },
1322 |   {
1323 |     name: "Togo",
1324 |     dialCode: "+228",
1325 |     isoCode: "TG",
1326 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tg.svg",
1327 |   },
1328 |   {
1329 |     name: "Tokelau",
1330 |     dialCode: "+690",
1331 |     isoCode: "TK",
1332 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tk.svg",
1333 |   },
1334 |   {
1335 |     name: "Tonga",
1336 |     dialCode: "+676",
1337 |     isoCode: "TO",
1338 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/to.svg",
1339 |   },
1340 |   {
1341 |     name: "Trinidad and Tobago",
1342 |     dialCode: "+1868",
1343 |     isoCode: "TT",
1344 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tt.svg",
1345 |   },
1346 |   {
1347 |     name: "Tunisia",
1348 |     dialCode: "+216",
1349 |     isoCode: "TN",
1350 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tn.svg",
1351 |   },
1352 |   {
1353 |     name: "Turkey",
1354 |     dialCode: "+90",
1355 |     isoCode: "TR",
1356 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tr.svg",
1357 |   },
1358 |   {
1359 |     name: "Turkmenistan",
1360 |     dialCode: "+993",
1361 |     isoCode: "TM",
1362 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tm.svg",
1363 |   },
1364 |   {
1365 |     name: "Turks and Caicos Islands",
1366 |     dialCode: "+1649",
1367 |     isoCode: "TC",
1368 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tc.svg",
1369 |   },
1370 |   {
1371 |     name: "Tuvalu",
1372 |     dialCode: "+688",
1373 |     isoCode: "TV",
1374 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/tv.svg",
1375 |   },
1376 |   {
1377 |     name: "Uganda",
1378 |     dialCode: "+256",
1379 |     isoCode: "UG",
1380 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ug.svg",
1381 |   },
1382 |   {
1383 |     name: "Ukraine",
1384 |     dialCode: "+380",
1385 |     isoCode: "UA",
1386 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ua.svg",
1387 |   },
1388 |   {
1389 |     name: "United Arab Emirates",
1390 |     dialCode: "+971",
1391 |     isoCode: "AE",
1392 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ae.svg",
1393 |   },
1394 |   {
1395 |     name: "United Kingdom",
1396 |     dialCode: "+44",
1397 |     isoCode: "GB",
1398 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/gb.svg",
1399 |   },
1400 |   {
1401 |     name: "United States",
1402 |     dialCode: "+1",
1403 |     isoCode: "US",
1404 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/us.svg",
1405 |   },
1406 |   {
1407 |     name: "United States Minor Outlying Islands",
1408 |     dialCode: "+246",
1409 |     isoCode: "UMI",
1410 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/umi.svg",
1411 |   },
1412 |   {
1413 |     name: "Uruguay",
1414 |     dialCode: "+598",
1415 |     isoCode: "UY",
1416 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/uy.svg",
1417 |   },
1418 |   {
1419 |     name: "Uzbekistan",
1420 |     dialCode: "+998",
1421 |     isoCode: "UZ",
1422 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/uz.svg",
1423 |   },
1424 |   {
1425 |     name: "Vanuatu",
1426 |     dialCode: "+678",
1427 |     isoCode: "VU",
1428 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/vu.svg",
1429 |   },
1430 |   {
1431 |     name: "Venezuela, Bolivarian Republic of Venezuela",
1432 |     dialCode: "+58",
1433 |     isoCode: "VE",
1434 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ve.svg",
1435 |   },
1436 |   {
1437 |     name: "Vietnam",
1438 |     dialCode: "+84",
1439 |     isoCode: "VN",
1440 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/vn.svg",
1441 |   },
1442 |   {
1443 |     name: "Virgin Islands, British",
1444 |     dialCode: "+1284",
1445 |     isoCode: "VG",
1446 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/vg.svg",
1447 |   },
1448 |   {
1449 |     name: "Virgin Islands, U.S.",
1450 |     dialCode: "+1340",
1451 |     isoCode: "VI",
1452 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/vi.svg",
1453 |   },
1454 |   {
1455 |     name: "Wallis and Futuna",
1456 |     dialCode: "+681",
1457 |     isoCode: "WF",
1458 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/wf.svg",
1459 |   },
1460 |   {
1461 |     name: "Yemen",
1462 |     dialCode: "+967",
1463 |     isoCode: "YE",
1464 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/ye.svg",
1465 |   },
1466 |   {
1467 |     name: "Zambia",
1468 |     dialCode: "+260",
1469 |     isoCode: "ZM",
1470 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/zm.svg",
1471 |   },
1472 |   {
1473 |     name: "Zimbabwe",
1474 |     dialCode: "+263",
1475 |     isoCode: "ZW",
1476 |     flag: "https://cdn.kcak11.com/CountryFlags/countries/zw.svg",
1477 |   },
1478 | ];
1479 | 
1480 | const sorter = (a, b) => {
1481 |   return a.name.localeCompare(b.name);
1482 | };
1483 | countries.sort(sorter);
1484 | countries.forEach((country) => {
1485 |   country.label = `${country.name} (${country.dialCode})`;
1486 | });
1487 | export default countries;
1488 | 


--------------------------------------------------------------------------------