feat: updates & formatting

freifunkMUC · Aug 22, 2024 · 1343e32 · 1343e32
1 parent 39f1352
commit 1343e32
Show file tree

Hide file tree

Showing 15 changed files with 2,077 additions and 3,130 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -5,18 +5,18 @@ version: 2
 updates:
   - package-ecosystem: github-actions
     directory: /
-    schedule: {interval: monthly}
+    schedule: { interval: monthly }
     reviewers: [freifunkMUC/salt-stack]
     assignees: [freifunkMUC/salt-stack]
 
   - package-ecosystem: docker
     directory: /
-    schedule: {interval: monthly}
+    schedule: { interval: monthly }
     reviewers: [freifunkMUC/salt-stack]
     assignees: [freifunkMUC/salt-stack]
 
   - package-ecosystem: npm
     directory: /
-    schedule: {interval: monthly}
+    schedule: { interval: monthly }
     reviewers: [freifunkMUC/salt-stack]
     assignees: [freifunkMUC/salt-stack]
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -5,7 +5,7 @@ on:
       - master
       - main
     tags:
-      - 'v*.*.*'
+      - "v*.*.*"
 
 env:
   REGISTRY: ghcr.io

diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,5 @@
 # Install dependencies only when needed
-FROM node:20-alpine AS deps
+FROM node:22-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -15,7 +15,7 @@ RUN \
 
 
 # Rebuild the source code only when needed
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, setup the environment variables using: 
+First, setup the environment variables using:
 
 ```bash
 cp .env.local.example .env.local

diff --git a/components/form.js b/components/form.js
@@ -1,139 +1,155 @@
-import { useState } from 'react'
+import { useState } from "react";
 
 import { useForm } from "react-hook-form";
-import * as Yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
 
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
 
-import {
-	PayPalScriptProvider
-} from "@paypal/react-paypal-js";
+import { PayPalScriptProvider } from "@paypal/react-paypal-js";
 
-import PaypalButton from './paypalButton';
+import PaypalButton from "./paypalButton";
 
 export default function Form() {
   const validationSchema = Yup.object().shape({
     username: Yup.string()
-      .required('Username is required')
-      .min(4, 'Username must be at least 4 characters')
-      .max(20, 'Username must not exceed 20 characters')
-      .matches(/[a-zA-Z0-9_]/, 'Username must contain only letters, numbers and underscores'),
-    email: Yup.string()
-      .required('Email is required')
-      .email('Email is invalid'),
+      .required("Username is required")
+      .min(4, "Username must be at least 4 characters")
+      .max(20, "Username must not exceed 20 characters")
+      .matches(
+        /[a-zA-Z0-9_]/,
+        "Username must contain only letters, numbers and underscores",
+      ),
+    email: Yup.string().required("Email is required").email("Email is invalid"),
     password: Yup.string()
-      .required('Password is required')
-      .min(8, 'Password must be at least 8 characters'),
+      .required("Password is required")
+      .min(8, "Password must be at least 8 characters"),
     confirmPassword: Yup.string()
-      .required('Confirm Password is required')
-      .oneOf([Yup.ref('password'), null], 'Confirm Password does not match'),
-    acceptTerms: Yup.bool().oneOf([true], 'Accept Terms is required')
+      .required("Confirm Password is required")
+      .oneOf([Yup.ref("password"), null], "Confirm Password does not match"),
+    acceptTerms: Yup.bool().oneOf([true], "Accept Terms is required"),
   });
 
   const {
     register,
     trigger: triggerValidation,
     getValues: getFormValues,
-    formState: { errors }
+    formState: { errors },
   } = useForm({
-    resolver: yupResolver(validationSchema)
+    resolver: yupResolver(validationSchema),
   });
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
 
-  const registerUser = async data => {
+  const registerUser = async (data) => {
     setError(null);
     setSuccess(null);
-    const r = await fetch('/api/register', {method: 'POST', body: JSON.stringify(data)});
+    const r = await fetch("/api/register", {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
     const d = await r.json();
 
     if (r.status === 200) {
-      setSuccess('User wurde erfolgreich angelegt!')
+      setSuccess("User wurde erfolgreich angelegt!");
     } else {
-      setError(d.error)
+      setError(d.error);
     }
   };
 
   return (
     <div className="register-form">
       {!success ? (
-      <form>
-        {error && <div className="alert alert-danger" role="alert">{error}</div>}
-        <div className="form-group">
-          <label>Username</label>
-          <input
-            name="username"
-            type="text"
-            {...register('username')}
-            className={`form-control ${errors.username ? 'is-invalid' : ''}`}
-          />
-          <div className="invalid-feedback">{errors.username?.message}</div>
-        </div>
+        <form>
+          {error && (
+            <div className="alert alert-danger" role="alert">
+              {error}
+            </div>
+          )}
+          <div className="form-group">
+            <label>Username</label>
+            <input
+              name="username"
+              type="text"
+              {...register("username")}
+              className={`form-control ${errors.username ? "is-invalid" : ""}`}
+            />
+            <div className="invalid-feedback">{errors.username?.message}</div>
+          </div>
 
-        <div className="form-group">
-          <label>Email</label>
-          <input
-            name="email"
-            type="email"
-            {...register('email')}
-            className={`form-control ${errors.email ? 'is-invalid' : ''}`}
-          />
-          <div className="invalid-feedback">{errors.email?.message}</div>
-        </div>
+          <div className="form-group">
+            <label>Email</label>
+            <input
+              name="email"
+              type="email"
+              {...register("email")}
+              className={`form-control ${errors.email ? "is-invalid" : ""}`}
+            />
+            <div className="invalid-feedback">{errors.email?.message}</div>
+          </div>
 
-        <div className="form-group">
-          <label>Password</label>
-          <input
-            name="password"
-            type="password"
-            {...register('password')}
-            className={`form-control ${errors.password ? 'is-invalid' : ''}`}
-          />
-          <div className="invalid-feedback">{errors.password?.message}</div>
-        </div>
-        <div className="form-group">
-          <label>Confirm Password</label>
-          <input
-            name="confirmPassword"
-            type="password"
-            {...register('confirmPassword')}
-            className={`form-control ${
-              errors.confirmPassword ? 'is-invalid' : ''
-            }`}
-          />
-          <div className="invalid-feedback">
-            {errors.confirmPassword?.message}
+          <div className="form-group">
+            <label>Password</label>
+            <input
+              name="password"
+              type="password"
+              {...register("password")}
+              className={`form-control ${errors.password ? "is-invalid" : ""}`}
+            />
+            <div className="invalid-feedback">{errors.password?.message}</div>
+          </div>
+          <div className="form-group">
+            <label>Confirm Password</label>
+            <input
+              name="confirmPassword"
+              type="password"
+              {...register("confirmPassword")}
+              className={`form-control ${
+                errors.confirmPassword ? "is-invalid" : ""
+              }`}
+            />
+            <div className="invalid-feedback">
+              {errors.confirmPassword?.message}
+            </div>
           </div>
-        </div>
 
-        <div className="form-group form-check">
-          <input
-            name="acceptTerms"
-            type="checkbox"
-            {...register('acceptTerms')}
-            className={`form-check-input ${
-              errors.acceptTerms ? 'is-invalid' : ''
-            }`}
-          />
-          <label htmlFor="acceptTerms" className="form-check-label">
-            I have read and agree to the Terms
-          </label>
-          <div className="invalid-feedback">{errors.acceptTerms?.message}</div>
+          <div className="form-group form-check">
+            <input
+              name="acceptTerms"
+              type="checkbox"
+              {...register("acceptTerms")}
+              className={`form-check-input ${
+                errors.acceptTerms ? "is-invalid" : ""
+              }`}
+            />
+            <label htmlFor="acceptTerms" className="form-check-label">
+              I have read and agree to the Terms
+            </label>
+            <div className="invalid-feedback">
+              {errors.acceptTerms?.message}
+            </div>
+          </div>
+          <PayPalScriptProvider
+            options={{
+              "client-id": process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID,
+              components: "buttons",
+              intent: "subscription",
+              vault: true,
+              currency: "EUR",
+            }}
+          >
+            <PaypalButton
+              getFormValues={getFormValues}
+              triggerValidation={triggerValidation}
+              registerUser={registerUser}
+            />
+          </PayPalScriptProvider>
+        </form>
+      ) : (
+        <div className="alert alert-success" role="alert">
+          {success}
         </div>
-        <PayPalScriptProvider
-    options={{
-        "client-id": process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID,
-        components: "buttons",
-        intent: "subscription",
-        vault: true,
-        currency: "EUR"
-    }}
->
-          <PaypalButton getFormValues={getFormValues} triggerValidation={triggerValidation} registerUser={registerUser} />
-        </PayPalScriptProvider>
-      </form>
-      ) : <div className="alert alert-success" role="alert">{success}</div>}
+      )}
     </div>
   );
-};
+}