Skip to content
This repository has been archived by the owner on May 15, 2024. It is now read-only.

Commit

Permalink
chore(component): remove unused code in LoginForm
Browse files Browse the repository at this point in the history 
  ## what
  - remove unused code in `LoginForm`

  ## how

  ## why
  - the code is no longer needed

  ## where
  - ./src/components/LoginForm/index.tsx

  ## usage
  • Loading branch information
@Clumsy-Coder
Clumsy-Coder committed Nov 10, 2023
1 parent 1ea8f34 commit 6579312
Showing 1 changed file with 5 additions and 151 deletions.
156 changes: 5 additions & 151 deletions src/components/LoginForm/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { ChangeEvent, FormEvent, KeyboardEvent, useState } from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import { useState } from 'react';
import Grid from '@mui/material/Grid';
import LoadingButton from '@mui/lab/LoadingButton';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import crypto from 'crypto';
import { Address4 } from 'ip-address';
import { useRouter } from 'next/router';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

import { SessionState, usePostAuthSessionMutation } from '@redux/AuthSession';

Expand Down Expand Up @@ -39,11 +37,6 @@ const schema = z.object({
* Render Login component
*/
const LoginForm: React.FC = () => {
// const [isIpValid, setIpValid] = useState(true);
// const [isPortValid, setPortValid] = useState(true);
// const [ipAddress, setIpAddress] = useState('');
// const [port, setPort] = useState('80');
// const [password, setPassword] = useState('');
const [authMessage, setAuthMessage] = useState<SessionState['message']>('');
const [postAuthSession, { isLoading }] = usePostAuthSessionMutation();
const router = useRouter();
Expand All @@ -67,100 +60,9 @@ const LoginForm: React.FC = () => {
isValid, // true if all validations has passed
} = formState;

/**
* Check if IPv4 address is valid.
* If it's valid, set isIpValid to true.
* If it's NOT valid, set isIpValid to false
*
* Run when there's a change in IP address textfiled
*/
// const validateIp = () => {
// if (Address4.isValid(ipAddress)) {
// setIpValid(true);
// } else {
// setIpValid(false);
// }
// };

/**
* Check port number is valid
* If it's valid, set isPortValid to true
* If it's NOT valid, set isPortValid to false
*
* Run when there's a change in port number textfield
*/
// const validatePort = () => {
// if (port === '') {
// setPortValid(false);
// } else if (Number.isInteger(+port) && +port > 0) {
// setPortValid(true);
// } else {
// setPortValid(false);
// }
// };

/**
* Set 'ipAddress', 'port', 'password' when their respective textfields change.
*
* Call 'validateIp' when setting ipAddress
* Call 'validatePort' when setting port
*/
// const onChange = (event: ChangeEvent<HTMLInputElement>) => {
// const { name, value } = event.target;
//
// if (name === 'ipAddress') {
// setIpAddress(value);
// validateIp();
// } else if (name === 'password') {
// // store password as a hash. NEVER in plain text
// const hash = value.length > 0 ? crypto.createHash('sha256').update(value).digest('hex') : '';
// setPassword(hash);
// } else if (name === 'port') {
// setPort(value);
// validatePort();
// }
// };

/**
* Check which key is pressed when typing in port number textfield.
* Allow numbers, block anything else
*/
// const portOnKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
// const { which } = event;
//
// // check the ascii value
// // Decimal 0 = 48 ascii
// // Decimal 9 = 57 ascii
// // obtained from
// // https://thewebdev.info/2022/06/15/how-to-prevent-typing-non-numeric-characters-in-input-type-number-with-javascript/
// //
// // check if character is a non-numeric
// if (which < 48 || which > 57) {
// // stop character from appending
// event.preventDefault();
// }
// };

// const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
// event.preventDefault();
// setAuthMessage('');
//
// try {
// await postAuthSession({ ipAddress, password, port }).unwrap();
// // replaced `router.push('/').catch(console.error);` because it would not navigate to another page.
// // not sure why this is happening.
// router.reload()
// } catch (err: unknown) {
// setAuthMessage((err as { data: { message: string } }).data.message);
// }
// };

const onSubmit = async (data: FormValues) => {
const { ipAddress, port, password } = data;
console.log(data);

const hashedPassword = crypto.createHash('sha256').update(password).digest('hex');
console.log('hashedPassword', hashedPassword);

try {
await postAuthSession({ ipAddress, password: hashedPassword, port: `${port}` }).unwrap();
Expand All @@ -173,8 +75,6 @@ const LoginForm: React.FC = () => {
}
};

console.log(`isDirty: ${isDirty}`, `isValid: ${isValid}`);

return (
// eslint-disable-next-line @typescript-eslint/no-misused-promises
<form method='POST' onSubmit={handleSubmit(onSubmit)} noValidate>
Expand All @@ -183,21 +83,6 @@ const LoginForm: React.FC = () => {
<Grid container direction='row' spacing={2}>
<Grid item xs={12} md={6}>
<TextField
// required
// autoFocus
// type='text'
// id='pihole-server-ip'
// name='ipAddress'
// placeholder='192.168.1.22'
// label='Pi-Hole IPv4 address'
// error={!isIpValid}
// {...(!isIpValid ? { helperText: 'Invalid IPv4 Address' } : {})}
// onBlur={validateIp}
// onChange={onChange}
// autoComplete='off'
// fullWidth
// inputProps={{ inputMode: 'numeric' }}

autoFocus
label='Pi-Hole IPv4 address'
type='text'
Expand All @@ -209,32 +94,9 @@ const LoginForm: React.FC = () => {
</Grid>
<Grid item xs={12} md={6}>
<TextField
// required
// type='text'
// id='pihole-server-port'
// name='port'
// placeholder='80'
// label='Pi-Hole port number'
// onChange={onChange}
// autoComplete='off'
// fullWidth
// inputProps={{ inputMode: 'numeric', pattern: '\\d*' }}
// error={!isPortValid}
// {...(!isPortValid ? { helperText: 'Must be a number' } : {})}
// value={port}
// onBlur={validatePort}
// onKeyPress={portOnKeyPress}

label='Pi-Hole port number'
type='text'
{...register('port', {
required: 'Port number is required',
// validate: {
// isRequired: (fieldValue) => {
// return fieldValue.length === 0;
// },
// },
})}
{...register('port', { required: 'Port number is required' })}
error={!!errors.port}
helperText={errors.port?.message}
fullWidth
Expand All @@ -244,14 +106,6 @@ const LoginForm: React.FC = () => {
</Grid>
<Grid item>
<TextField
// required
// type='password'
// id='pihole-password'
// name='password'
// label='Password'
// onChange={onChange}
// fullWidth

label='Password'
type='password'
{...register('password', { required: 'Password is required' })}
Expand Down

0 comments on commit 6579312

Please sign in to comment.