diff --git a/assets/particle.png b/assets/particle.png new file mode 100644 index 00000000..b744f882 Binary files /dev/null and b/assets/particle.png differ diff --git a/changelog.md b/changelog.md index 585073c8..ee6af4ad 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,10 @@ +### Version 0.0.17 + +- New sign in page design +- Cypress testing +- Authentication is more informative +- Release flow changes + ### Version 0.0.16 - Cloud Extension store working! diff --git a/license b/license index 1d659fc9..308f5cf7 100644 --- a/license +++ b/license @@ -285,9 +285,6 @@ making the Licensed Material available under these terms and conditions. Licensor, Varga Zsolt. -As this license if is protecting the work done by the Licensor, it is not subject the following contents: -Authentication page's photography is licensed by Maria Camila Castaño from Pexels. <3 -~/hero-gate.jpg - -The logo.png, and other derivatives which display the Artgen logo are commercialy licensed to Varga Zsolt. +Notable extensions: +- The logo.png, and other derivatives which display the Artgen logo are commercialy licensed to Varga Zsolt. diff --git a/package.json b/package.json index a2d6fcd9..aa887c5d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@artgen/core", - "version": "0.0.16", + "version": "0.0.17", "description": "Versatily headless CMS", "main": "build/main.js", "homepage": "https://artgen.io", @@ -128,6 +128,7 @@ "@types/react-router-dom": "^5.3.1", "@types/react-transition-group": "^4.4.2", "@types/sequelize": "^4.28.10", + "@types/three": "^0.134.0", "@types/uuid": "^8.3.1", "@types/validator": "^13.6.5", "antd": "^4.16.13", @@ -158,6 +159,7 @@ "start-server-and-test": "^1.14.0", "tailwindcss": "^2.2.7", "tailwindcss-scrollbar": "^0.1.0", + "three": "^0.135.0", "ts-jest": "^27.0.4", "ts-node": "^10.3.0", "ts-node-dev": "^1.1.8", @@ -165,4 +167,4 @@ "vite": "^2.6.10", "vite-react-jsx": "^1.1.2" } -} +} \ No newline at end of file diff --git a/src/modules/admin/assets/img/hero-gate.jpg b/src/modules/admin/assets/img/hero-gate.jpg deleted file mode 100644 index 5fda9c5f..00000000 Binary files a/src/modules/admin/assets/img/hero-gate.jpg and /dev/null differ diff --git a/src/modules/authentication/component/cover.component.css b/src/modules/authentication/component/cover.component.css index f2ee7bc2..4650b77f 100644 --- a/src/modules/authentication/component/cover.component.css +++ b/src/modules/authentication/component/cover.component.css @@ -1,10 +1,5 @@ -.auth-layout .hero-bg { - background-color: #1a212a; - background-image: url('../../admin/assets/img/hero-gate.jpg'); -} - .auth-layout .cover { - @apply absolute bg-black opacity-70 inset-0 z-0; + @apply absolute inset-0 z-0; } .auth-layout .misc-text { @@ -12,7 +7,7 @@ } .auth-layout .mobile-panel { - @apply fixed lg:hidden z-10 inset-0 bg-no-repeat bg-cover bg-scroll items-center; + @apply fixed lg:hidden z-10 inset-0 items-center; } .auth-layout .subtext { diff --git a/src/modules/authentication/component/cover.component.tsx b/src/modules/authentication/component/cover.component.tsx index d02d24f6..93d3d55e 100644 --- a/src/modules/authentication/component/cover.component.tsx +++ b/src/modules/authentication/component/cover.component.tsx @@ -1,12 +1,14 @@ import './cover.component.css'; +import GalaxyComponent from './galaxy.component'; import SignInComponent from './sign-in.component'; export default function AuthLayoutComponent() { return (
+
-
+

Welcome back!

@@ -14,7 +16,18 @@ export default function AuthLayoutComponent() { Opportunities don't happen. You create them.

-
Having trouble? Click here for help.
+
+ Having trouble? Click  + + here + +  for help. +
diff --git a/src/modules/authentication/component/galaxy.component.tsx b/src/modules/authentication/component/galaxy.component.tsx new file mode 100644 index 00000000..5a397f00 --- /dev/null +++ b/src/modules/authentication/component/galaxy.component.tsx @@ -0,0 +1,234 @@ +import { useEffect, useRef } from 'react'; +import { + AdditiveBlending, + BufferAttribute, + BufferGeometry, + Color, + PerspectiveCamera, + Points, + PointsMaterial, + Scene, + TextureLoader, + Vector2, + WebGLRenderer, +} from 'three'; +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; +import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; +import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; +import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'; + +export default function GalaxyComponent() { + const mountRef = useRef(null); + + useEffect(() => { + const textureLoader = new TextureLoader(); + const scene = new Scene(); + const renderer = new WebGLRenderer(); + + mountRef.current.appendChild(renderer.domElement); + + const config = { + count: 70000, + size: 0.014, + radius: 5.5, + branches: 6, + spin: -2, + randomness: 8.5, + randomnessPower: 4.9, + stars: 18000, + starColor: '#37393f', + insideColor: '#2df0b2', + outsideColor: '#4b21a8', + }; + + const shape = textureLoader.load('/assets/particle.png'); + + let bgStarsGeometry = null; + let bgStarsMaterial = null; + let bgStars = null; + + if (bgStars !== null) { + bgStarsGeometry.dispose(); + bgStarsMaterial.dispose(); + scene.remove(bgStars); + } + + bgStarsGeometry = new BufferGeometry(); + const bgStarsPositions = new Float32Array(config.stars * 3); + + for (let j = 0; j < config.stars; j++) { + bgStarsPositions[j * 3 + 0] = (Math.random() - 0.5) * 20; + bgStarsPositions[j * 3 + 1] = (Math.random() - 0.5) * 20; + bgStarsPositions[j * 3 + 2] = (Math.random() - 0.5) * 20; + } + + bgStarsGeometry.setAttribute( + 'position', + new BufferAttribute(bgStarsPositions, 3), + ); + + bgStarsMaterial = new PointsMaterial({ + size: config.size, + depthWrite: false, + sizeAttenuation: true, + blending: AdditiveBlending, + color: config.starColor, + transparent: true, + alphaMap: shape, + }); + + bgStars = new Points(bgStarsGeometry, bgStarsMaterial); + + scene.add(bgStars); + + // Generate the galaxy shape + let geometry = null; + let material = null; + let points = null; + + if (points !== null) { + geometry.dispose(); + material.dispose(); + scene.remove(points); + } + + geometry = new BufferGeometry(); + + const positions = new Float32Array(config.count * 3); + const colors = new Float32Array(config.count * 3); + + const colorInside = new Color(config.insideColor); + const colorOutside = new Color(config.outsideColor); + + for (let i = 0; i < config.count; i++) { + //Position + const x = Math.random() * config.radius; + const branchAngle = + ((i % config.branches) / config.branches) * 2 * Math.PI; + const spinAngle = x * config.spin; + + const randomX = + Math.pow(Math.random(), config.randomnessPower) * + (Math.random() < 0.5 ? 1 : -1); + const randomY = + Math.pow(Math.random(), config.randomnessPower) * + (Math.random() < 0.5 ? 1 : -1); + const randomZ = + Math.pow(Math.random(), config.randomnessPower) * + (Math.random() < 0.5 ? 1 : -1); + + positions[i * 3] = Math.sin(branchAngle + spinAngle) * x + randomX; + positions[i * 3 + 1] = randomY; + positions[i * 3 + 2] = Math.cos(branchAngle + spinAngle) * x + randomZ; + + // Color + const mixedColor = colorInside.clone(); + mixedColor.lerp(colorOutside, x / config.radius); + + colors[i * 3 + 0] = mixedColor.r; + colors[i * 3 + 1] = mixedColor.g; + colors[i * 3 + 2] = mixedColor.b; + } + + geometry.setAttribute('position', new BufferAttribute(positions, 3)); + geometry.setAttribute('color', new BufferAttribute(colors, 3)); + + material = new PointsMaterial({ + color: 'white', + size: config.size, + depthWrite: false, + sizeAttenuation: true, + blending: AdditiveBlending, + vertexColors: true, + transparent: true, + alphaMap: shape, + }); + + points = new Points(geometry, material); + scene.add(points); + + const sizes = { + width: window.innerWidth, + height: window.innerHeight, + }; + + const camera = new PerspectiveCamera(70, sizes.width / sizes.height, 1, 50); + camera.position.x = 5; + camera.position.y = 2.5; + camera.position.z = 3; + camera.lookAt(0, 5, 0); + scene.add(camera); + + const controls = new OrbitControls(camera, renderer.domElement); + controls.enableDamping = true; + + renderer.setSize(sizes.width, sizes.height); + renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); + + const renderScene = new RenderPass(scene, camera); + + const bloomPass = new UnrealBloomPass( + new Vector2(window.innerWidth, window.innerHeight), + 1.5, + 0.4, + 0.85, + ); + bloomPass.threshold = 0.05; + bloomPass.strength = 1.0; + bloomPass.radius = -0.25; + + const composer = new EffectComposer(renderer); + composer.addPass(renderScene); + composer.addPass(bloomPass); + + const resizeHandler = () => { + // Update sizes + sizes.width = window.innerWidth; + sizes.height = window.innerHeight; + + // Update camera + camera.aspect = sizes.width / sizes.height; + camera.updateProjectionMatrix(); + + // Update renderer + renderer.setSize(sizes.width, sizes.height); + composer.setSize(sizes.width, sizes.height); + renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); + }; + + resizeHandler(); + + camera.rotation.x = 5; + camera.rotation.y = 0.7; + + const animate = () => { + //Update the camera + points.rotation.y += 0.0003; + bgStars.rotation.y += 0.0008; + + // Render + composer.render(); + // Call tick again on the next frame + requestAnimationFrame(animate); + }; + + window.addEventListener('resize', resizeHandler); + + animate(); + + return () => { + window.removeEventListener('resize', resizeHandler); + + if (mountRef.current) { + mountRef.current.removeChild(renderer.domElement); + } + }; + }, []); + + return ( +
+ ); +} diff --git a/src/modules/authentication/component/sign-in.component.tsx b/src/modules/authentication/component/sign-in.component.tsx index 415419cd..42fc4d1b 100644 --- a/src/modules/authentication/component/sign-in.component.tsx +++ b/src/modules/authentication/component/sign-in.component.tsx @@ -6,14 +6,21 @@ import { MehOutlined, UnlockOutlined, } from '@ant-design/icons'; -import { Alert, Button, Divider, Form, Input, notification } from 'antd'; +import { + Alert, + Button, + Divider, + Form, + Input, + notification, + Tooltip, +} from 'antd'; import axios from 'axios'; import React from 'react'; -import { Link } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; import { jwtAtom } from '../../admin/admin.atoms'; -type FormValues = { +type Credentials = { email: string; password: string; }; @@ -21,7 +28,7 @@ type FormValues = { export default function SignInComponent() { const setJwt = useSetRecoilState(jwtAtom); - const doSignIn = (values: FormValues) => { + const doSignIn = (values: Credentials) => { axios .post<{ accessToken: string }>('/api/authentication/jwt/sign-in', values) .then(response => { @@ -47,7 +54,7 @@ export default function SignInComponent() {

-

+

Artgen Core

@@ -58,14 +65,13 @@ export default function SignInComponent() {
Use demo@artgen.io with the password demo } - closable showIcon >

or use your email account

@@ -73,11 +79,12 @@ export default function SignInComponent() { name="sign-in" size="large" autoComplete="on" - onFinish={doSignIn.bind(doSignIn)} + onFinish={doSignIn} layout="vertical" + requiredMark={false} > @@ -115,8 +124,11 @@ export default function SignInComponent() {
- Don't have an account? Sign Up{' '} - now! + Don't have an account?  + + Sign Up + +  now!
diff --git a/version b/version index e484aaf2..927734f1 100644 --- a/version +++ b/version @@ -1 +1 @@ -0.0.16 \ No newline at end of file +0.0.17 \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 2f8fc43c..ddb149fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1653,6 +1653,11 @@ resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1" integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ== +"@types/three@^0.134.0": + version "0.134.0" + resolved "https://registry.yarnpkg.com/@types/three/-/three-0.134.0.tgz#22ae9892f4490faaf35f0ccea127df18407b8ab3" + integrity sha512-4YB+99Rgqq27EjiYTItEoZtdjLnTh8W9LxowgpC9eWsjaQJIL4Kn/ZcUKAnW3gB/jS4hqGN8iqmid+RcUZDzpA== + "@types/uuid@^8.3.1": version "8.3.3" resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.3.tgz#c6a60686d953dbd1b1d45e66f4ecdbd5d471b4d0" @@ -7895,6 +7900,11 @@ text-hex@1.0.x: resolved "https://registry.yarnpkg.com/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5" integrity sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg== +three@^0.135.0: + version "0.135.0" + resolved "https://registry.yarnpkg.com/three/-/three-0.135.0.tgz#cff4ec8edd3c51ce9bc7e88d13e8eafed4d0ddfc" + integrity sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ== + throat@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"