Merge pull request #285 from kloudlite/ui/webinar

UI/webinar: Webinar page using dyte implementation

src/apps/auth/components/footer.tsx

@@ -1,14 +1,13 @@
-import { BrandLogo } from '~/components/branding/brand-logo';
 import {
   GithubLogoFill,
   LinkedinLogoFill,
   TwitterNewLogoFill,
 } from '@jengaicons/react';
-import { Button } from '~/components/atoms/button';
 import { Link } from '@remix-run/react';
-import Wrapper from './wrapper';
+import { Button } from '~/components/atoms/button';
+import { BrandLogo } from '~/components/branding/brand-logo';
 import { mainUrl } from '../consts';
-import ThemeSwitcher from './theme-switcher';
+import Wrapper from './wrapper';
 
 const linkedinUrl = 'https://linkedin.com/company/kloudlite-io';
 const gitUrl = 'https://github.com/kloudlite/kloudlite';

src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx

@@ -2,7 +2,6 @@ import { useLoaderData, useNavigate, useSearchParams } from '@remix-run/react';
 import { useAuthApi } from '~/auth/server/gql/api-provider';
 import { BrandLogo } from '~/components/branding/brand-logo';
 import { toast } from '~/components/molecule/toast';
-import { base64Encrypt } from '~/console/server/utils/common';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import getQueries from '~/root/lib/server/helpers/get-queries';
 import { IRemixCtx } from '~/root/lib/types/common';
@@ -77,7 +76,7 @@ const CallBack = () => {
               const {
                 data: { email, name },
               } = await api.whoAmI({});
-              const encodedData = base64Encrypt(`email=${email}&name=${name}`);
+              const encodedData = btoa(`email=${email}&name=${name}`);
               window.location.href = `${callback}?${encodedData}`;
               return;
             }

src/apps/auth/routes/_providers+/login.tsx

@@ -12,7 +12,6 @@ import { PasswordInput, TextInput } from '~/components/atoms/input';
 import { ArrowLeft, ArrowRight } from '~/components/icons';
 import { toast } from '~/components/molecule/toast';
 import { cn } from '~/components/utils';
-import { base64Encrypt } from '~/console/server/utils/common';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
@@ -54,8 +53,8 @@ const LoginWithEmail = () => {
           const {
             data: { email, name },
           } = await api.whoAmI({});
-          const encodedData = base64Encrypt(`email=${email}&name=${name}`);
-          window.location.href = `${callback}?${encodedData}`;
+          const encodedData = btoa(`email=${email}&name=${name}`);
+          window.location.href = `${callback}?userData=${encodedData}`;
           return;
         }
         reloadPage();

src/apps/webinar/.dockerignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

src/apps/webinar/.eslintrc.yml

@@ -0,0 +1,129 @@
+root: true
+
+extends:
+  - airbnb
+  - airbnb/hooks
+  - plugin:prettier/recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:import/typescript
+  - next/core-web-vitals
+  - plugin:mdx/recommended
+
+plugins:
+  - import
+  - react 
+  - prefer-arrow-functions
+  - prettier
+  - "@typescript-eslint"
+
+parser: "@typescript-eslint/parser"
+
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 12
+  sourceType: module
+
+env:
+  es6: true
+  node: true
+  browser: true
+  jest: true
+  es2021: true
+
+settings:
+  mdx/code-blocks: true
+  import/resolver:
+    node:  
+      extensions: [.js, .jsx, .ts, .tsx, .json]
+      moduleDirectory:
+        - node_modules
+        - app
+    typescript:
+      project: ./tsconfig.json
+
+# settings:
+#   import/resolver:
+#     node: true
+#     jsconfig:
+#       config: ./jsconfig.json
+
+globals:
+  Logger: false
+
+rules:
+  # pritter rules
+
+  # ts rules
+  react/no-unescaped-entities: 0
+  react/jsx-no-useless-fragment: 0
+  react/jsx-filename-extension: 0
+  react/require-default-props : 0
+  "@typescript-eslint/no-unused-vars":
+    - error
+    - ignoreRestSiblings: true
+      varsIgnorePattern: '^_'
+      argsIgnorePattern: '^_'
+
+  "@typescript-eslint/no-explicit-any": 0
+  "@typescript-eslint/ban-ts-comment": 0
+  no-shadow: 0
+  "@next/next/no-img-element": 0
+
+
+  # js rules
+  react/react-in-jsx-scope: 0
+  # prefer-arrow-functions/prefer-arrow-functions:
+  #   [
+  #     "warn",
+  #     {
+  #       classPropertiesAllowed: false,
+  #       disallowPrototype: true,
+  #       returnStyle: "unchanged",
+  #       singleReturnOnly: true,
+  #     },
+  #   ]
+
+  import/extensions: 0
+  import/prefer-default-export: off
+
+  react/jsx-uses-react: 0
+  react/jsx-uses-vars: 1
+  react/jsx-props-no-spreading: 0
+  react/function-component-definition: 0
+  prettier/prettier: 
+    - warn
+    - singleQuote: true
+  camelcase:
+    - error 
+    - ignoreDestructuring: true
+      properties: never
+
+  no-underscore-dangle: 0
+
+  react-hooks/exhaustive-deps: 0
+  jsx-a11y/no-static-element-interactions: 0
+  jsx-a11y/click-events-have-key-events: 0
+  allow-named-functions: 0
+  max-classes-per-file: 0
+  react/prop-types: 0
+  react/display-name: 0
+  jsx-a11y/anchor-is-valid: 0
+  import/order: 1
+  react/button-has-type: 0
+  no-console: 0
+  no-param-reassign: 
+    - error
+    - props: false
+  import/no-unresolved:
+    - error
+    - ignore:
+      - \.svg
+
+  import/no-extraneous-dependencies: 0
+
+  no-unused-vars: 
+    - error
+    - ignoreRestSiblings: true
+      varsIgnorePattern: '^_'
+      argsIgnorePattern: '^_'

src/apps/webinar/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

src/apps/webinar/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:20.8.1-alpine as base
+RUN npm i -g pnpm
+WORKDIR /webinar
+COPY package.json ./package.json
+RUN pnpm i
+COPY . .
+RUN pnpm build
+
+ENTRYPOINT npm run start

src/apps/webinar/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

src/apps/webinar/Taskfile.yaml

@@ -0,0 +1,36 @@
+version: '3'
+
+tasks:
+  default:
+    cmds:
+      - task: build
+      - task: start
+
+  dev:
+    cmds:
+      - npm run dev
+
+  build:
+    cmds:
+      - npm run build
+
+  container:build:
+    preconditions:
+      - sh: '[[ -n "{{.tag}}" ]]'
+        msg: "var tag must have a value"
+    vars:
+      Image: ghcr.io/kloudlite/webinar:{{.tag}}
+    cmds:
+      - docker build -t {{.Image}} .
+
+  container:push:
+    preconditions:
+      - sh: '[[ -n "{{.tag}}" ]]'
+        msg: "var tag must have a value"
+    vars:
+      Image: ghcr.io/kloudlite/webinar:{{.tag}}
+    cmds:
+      - docker buildx build -t {{.Image}} --platform linux/amd64 --push .
+      # - docker buildx build . -t {{.Image}} --platform linux/amd64,linux/arm64 --output=type=image,compression=zstd,force-compression=true,compression-level=12,push=true
+      # - docker build -t {{.Image}} .
+      # - docker push {{.Image}}

src/apps/webinar/next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    env: {
+        customKey: process.env.keyName, // pulls from .env file
+    },
+};
+
+export default nextConfig;