Skip to content

Commit d99d4da

Browse files
author
Ajit Kumar
committed
fix(login page ui)
1 parent 62972f5 commit d99d4da

10 files changed

Lines changed: 219 additions & 55 deletions

File tree

‎client/components/docs/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
overflow: auto;
4646
padding-bottom: 30%;
4747
box-sizing: border-box;
48+
scrollbar-width: none; // hide scrollbar in Firefox
4849

4950
// hide scrollbar
5051
&::-webkit-scrollbar {

‎client/components/input/index.js‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,27 @@ import Reactive from 'html-tag-js/reactive';
2727

2828
/**
2929
*
30-
* @param {Object} param0
31-
* @param {number} param0.maxlength
32-
* @param {Ref} param0.ref
33-
* @param {boolean} param0.autofill
34-
* @param {Function} param0.onkeydown
35-
* @param {Function} param0.oninput
36-
* @param {boolean} param0.checked
37-
* @param {boolean} param0.required
38-
* @param {Function} param0.onchange
39-
* @param {string|number} param0.value
40-
* @param {string} param0.placeholder
41-
* @param {string} param0.label
42-
* @param {string} param0.name
43-
* @param {string} param0.id
44-
* @param {InputTypes} param0.type
30+
* @param {Object} props
31+
* @param {Ref} props.ref
32+
* @param {number} props.maxlength
33+
* @param {string} props.autocomplete
34+
* @param {boolean} props.autofill
35+
* @param {Function} props.onkeydown
36+
* @param {Function} props.oninput
37+
* @param {boolean} props.checked
38+
* @param {boolean} props.required
39+
* @param {Function} props.onchange
40+
* @param {string|number} props.value
41+
* @param {string} props.placeholder
42+
* @param {string} props.label
43+
* @param {string} props.name
44+
* @param {string} props.id
45+
* @param {InputTypes} props.type
4546
*/
4647
export default function Input({
4748
maxlength,
4849
ref,
50+
autocomplete = 'on',
4951
autofill = true,
5052
onkeydown,
5153
oninput,
@@ -97,6 +99,8 @@ export default function Input({
9799
inputField.disabled = true;
98100
}
99101

102+
inputField.autocomplete = autocomplete;
103+
100104
if (type === 'file') {
101105
inputField.addEventListener('change', () => {
102106
const [file] = inputField.files;

client/pages/home/background.js renamed to client/lib/background.js

Lines changed: 49 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,57 @@
1-
export default function background(canvas) {
2-
class Particle {
3-
constructor(radius, x, y, dx, dy, color) {
4-
this.radius = radius;
5-
this.x = x;
6-
this.y = y;
7-
this.dx = dx;
8-
this.dy = dy;
9-
this.color = color;
10-
}
11-
12-
draw(ctx) {
13-
ctx.beginPath();
14-
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
15-
ctx.fillStyle = this.color;
16-
ctx.fill();
17-
}
1+
class Particle {
2+
/** * @param {HTMLCanvasElement} canvas
3+
* @param {HTMLCanvasElement} canvas
4+
* @param {number} radius
5+
* @param {number} x
6+
* @param {number} y
7+
* @param {number} dx
8+
* @param {number} dy
9+
* @param {string} color
10+
*/
11+
constructor(canvas, radius, x, y, dx, dy, color) {
12+
this.radius = radius;
13+
this.x = x;
14+
this.y = y;
15+
this.dx = dx;
16+
this.dy = dy;
17+
this.color = color;
18+
this.canvas = canvas;
19+
}
1820

19-
update() {
20-
if (this.x < this.radius || this.x > canvas.width - this.radius) {
21-
this.dx *= -1;
22-
}
21+
draw(ctx) {
22+
ctx.beginPath();
23+
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
24+
ctx.fillStyle = this.color;
25+
ctx.fill();
26+
}
2327

24-
if (this.y < this.radius || this.y > canvas.height - this.radius) {
25-
this.dy *= -1;
26-
}
28+
update() {
29+
if (this.x < this.radius || this.x > this.canvas.width - this.radius) {
30+
this.dx *= -1;
31+
}
2732

28-
this.x += this.dx;
29-
this.y += this.dy;
33+
if (this.y < this.radius || this.y > this.canvas.height - this.radius) {
34+
this.dy *= -1;
3035
}
36+
37+
this.x += this.dx;
38+
this.y += this.dy;
3139
}
40+
}
3241

42+
/**
43+
* Initializes the background animation with particles and connections.
44+
* @param {HTMLCanvasElement} canvas
45+
*/
46+
export default function background(canvas) {
3347
canvas.width = window.innerWidth * 2;
3448
canvas.height = window.innerHeight * 2;
3549

3650
const ctx = canvas.getContext('2d');
3751

3852
let particles = null;
3953
let reqId = null;
54+
let wasConnected = false;
4055

4156
init();
4257

@@ -59,7 +74,7 @@ export default function background(canvas) {
5974
const dx = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 1.5;
6075
const dy = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 1.5;
6176

62-
particles.push(new Particle(r, x, y, dx, dy, '#606060'));
77+
particles.push(new Particle(canvas, r, x, y, dx, dy, '#606060'));
6378
}
6479

6580
if (reqId != null) cancelAnimationFrame(reqId);
@@ -68,6 +83,13 @@ export default function background(canvas) {
6883
}
6984

7085
function animate() {
86+
if (wasConnected && !canvas.isConnected) {
87+
particles = null;
88+
cancelAnimationFrame(reqId);
89+
return;
90+
}
91+
92+
wasConnected = canvas.isConnected;
7193
ctx.clearRect(0, 0, canvas.width, canvas.height);
7294

7395
for (const p of particles) {

‎client/main.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ html {
2424
height: 100%;
2525
width: 100%;
2626
overflow: auto;
27+
scrollbar-width: none; // Firefox scrollbar width
2728

2829
// no scrollbar
2930
&::-webkit-scrollbar {
@@ -38,6 +39,16 @@ html {
3839
}
3940
}
4041

42+
#background {
43+
pointer-events: none;
44+
width: 100%;
45+
height: 100%;
46+
position: fixed;
47+
top: 0;
48+
left: 0;
49+
z-index: -1;
50+
}
51+
4152
body.loading {
4253
#main-header {
4354
&::after {

‎client/pages/home/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import './style.scss';
33
import { render } from 'github-buttons';
44
import Reactive from 'html-tag-js/reactive';
55
import Ref from 'html-tag-js/ref';
6+
import background from 'lib/background';
67
import { hideLoading, showLoading } from 'lib/helpers';
78
import phoneImageJpg from 'res/phone.jpg';
89
import phoneImageWebp from 'res/phone.webp';
910
import tabletImageJpg from 'res/tablet.jpg';
1011
import tabletImageWebp from 'res/tablet.webp';
11-
import background from './background';
1212

1313
export default async function home() {
1414
const canvas = Ref();

‎client/pages/home/style.scss‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
justify-content: center;
77
flex-direction: column;
88
text-align: center;
9+
height: 100%;
10+
scrollbar-width: none; // hide scrollbar in Firefox
911

1012
// hide scrollbar
1113
&::-webkit-scrollbar {
@@ -19,16 +21,6 @@
1921
z-index: 1;
2022
}
2123

22-
#background {
23-
pointer-events: none;
24-
width: 100%;
25-
height: 100%;
26-
position: fixed;
27-
top: 0;
28-
left: 0;
29-
z-index: 0;
30-
}
31-
3224
.download-buttons {
3325
gap: 10px;
3426
display: none;

‎client/pages/loginUser/index.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,21 @@ import AjaxForm from 'components/ajaxForm';
33
import Input from 'components/input';
44
import Reactive from 'html-tag-js/reactive';
55
import Ref from 'html-tag-js/ref';
6+
import background from 'lib/background';
67
import { loadingEnd, loadingStart } from 'lib/helpers';
8+
import userImage from 'res/user.svg';
79

810
export default function LoginUser({ redirect }) {
911
const errorText = Reactive('');
1012
const successText = Reactive('');
1113
const button = Ref();
14+
const canvas = Ref();
15+
16+
canvas.onref = () => background(canvas.el);
1217

1318
return (
1419
<section id='user-login'>
20+
<canvas ref={canvas} id='background' />
1521
<AjaxForm
1622
loading={onloadstart}
1723
loadingEnd={(form) => loadingEnd(form, 'Login')}
@@ -20,9 +26,13 @@ export default function LoginUser({ redirect }) {
2026
action='/api/login'
2127
method='post'
2228
>
23-
<h1>Login</h1>
29+
<picture className='login-profile'>
30+
<source srcset={userImage} type='image/svg' />
31+
<img src={userImage} alt='Wombat' />
32+
</picture>
33+
<h1 style={{ textAlign: 'center' }}>Login</h1>
2434
<Input type='email' name='email' label='Email' placeholder='e.g. john@gmail.com' />
25-
<Input type='password' name='password' label='Password' placeholder='Password' />
35+
<Input type='password' name='password' label='Password' placeholder='Password' autocomplete='current-password' />
2636

2737
<span className='success'>{successText}</span>
2838
<span className='error'>{errorText}</span>

‎client/pages/loginUser/style.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,54 @@
11
#user-login {
2+
position: relative;
23
display: flex;
34
flex-direction: column;
45
align-items: center;
56
justify-content: center;
7+
height: 100%;
8+
width: 100%;
9+
max-width: unset;
10+
background-color: transparent;
11+
z-index: 1;
12+
13+
form {
14+
width: 90%;
15+
}
16+
17+
&::before {
18+
position: absolute;
19+
top: 0;
20+
left: 0;
21+
width: 100%;
22+
height: 100%;
23+
content: '';
24+
opacity: 0.5;
25+
background-color: var(--primary-color);
26+
background-image: url(../../res/logo.svg);
27+
background-repeat: no-repeat;
28+
background-position: center;
29+
background-size: 400px;
30+
filter: blur(50px);
31+
z-index: -1;
32+
}
33+
34+
.login-profile {
35+
height: 150px;
36+
width: 150px;
37+
margin: auto;
38+
border-radius: 50%;
39+
box-shadow: 0 14px 16px rgba(0, 0, 0, 0.2);
40+
display: flex;
41+
align-items: flex-end;
42+
justify-content: center;
43+
margin-bottom: 20px;
44+
background-color: var(--secondary-color);
45+
z-index: 0;
46+
47+
img {
48+
width: 100%;
49+
border-radius: 0 0 50% 50%;
50+
object-fit: contain;
51+
z-index: 1;
52+
}
53+
}
654
}

‎client/pages/user/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
max-width: 100%;
116116
flex-wrap: nowrap;
117117
overflow: auto;
118+
scrollbar-width: none;
118119

119120
&:empty {
120121
display: none;

0 commit comments

Comments
 (0)