Use server component

kitloong · Dec 31, 2023 · 7f36287 · 7f36287
1 parent 8215d11
commit 7f36287
Show file tree

Hide file tree

Showing 23 changed files with 788 additions and 648 deletions.
diff --git a/src/app/(authentication)/login/login.tsx b/src/app/(authentication)/login/login.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import {
-  Alert,
-  Button, Col, Form, InputGroup, Row,
+  Alert, Button, Col, Form, FormControl, InputGroup, Row,
 } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-regular-svg-icons'
@@ -12,6 +11,7 @@ import { SyntheticEvent, useState } from 'react'
 import { deleteCookie, getCookie } from 'cookies-next'
 import axios from 'axios'
 import Link from 'next/link'
+import InputGroupText from 'react-bootstrap/InputGroupText'
 
 export default function Login() {
   const router = useRouter()
@@ -50,16 +50,23 @@ export default function Login() {
 
   return (
     <>
-      <Alert variant="danger" show={error !== ''} onClose={() => setError('')} dismissible>{error}</Alert>
+      <Alert
+        variant="danger"
+        show={error !== ''}
+        onClose={() => setError('')}
+        dismissible
+      >
+        {error}
+      </Alert>
       <Form onSubmit={login}>
         <InputGroup className="mb-3">
-          <InputGroup.Text>
+          <InputGroupText>
             <FontAwesomeIcon
               icon={faUser}
               fixedWidth
             />
-          </InputGroup.Text>
-          <Form.Control
+          </InputGroupText>
+          <FormControl
             name="username"
             required
             disabled={submitting}
@@ -70,13 +77,13 @@ export default function Login() {
         </InputGroup>
 
         <InputGroup className="mb-3">
-          <InputGroup.Text>
+          <InputGroupText>
             <FontAwesomeIcon
               icon={faLock}
               fixedWidth
             />
-          </InputGroup.Text>
-          <Form.Control
+          </InputGroupText>
+          <FormControl
             type="password"
             name="password"
             required

diff --git a/src/app/(authentication)/register/page.tsx b/src/app/(authentication)/register/page.tsx
@@ -1,18 +1,18 @@
-'use client'
-
-import { Card, Col, Row } from 'react-bootstrap'
+import {
+  Card, CardBody, Col, Row,
+} from 'react-bootstrap'
 import Register from '@/app/(authentication)/register/register'
 
 export default function Page() {
   return (
     <Row className="justify-content-center">
       <Col md={6}>
         <Card className="mb-4 rounded-0">
-          <Card.Body className="p-4">
+          <CardBody className="p-4">
             <h1>Register</h1>
             <p className="text-black-50">Create your account</p>
             <Register />
-          </Card.Body>
+          </CardBody>
         </Card>
       </Col>
     </Row>

diff --git a/src/app/(authentication)/register/register.tsx b/src/app/(authentication)/register/register.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import {
-  Alert, Button, Form, InputGroup,
+  Alert, Button, Form, FormControl, InputGroup,
 } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope, faUser } from '@fortawesome/free-regular-svg-icons'
@@ -10,6 +10,7 @@ import { useRouter } from 'next/navigation'
 import { SyntheticEvent, useState } from 'react'
 import { deleteCookie, getCookie } from 'cookies-next'
 import axios from 'axios'
+import InputGroupText from 'react-bootstrap/InputGroupText'
 
 export default function Register() {
   const router = useRouter()
@@ -51,8 +52,8 @@ export default function Register() {
       <Alert variant="danger" show={error !== ''} onClose={() => setError('')} dismissible>{error}</Alert>
       <Form onSubmit={register}>
         <InputGroup className="mb-3">
-          <InputGroup.Text><FontAwesomeIcon icon={faUser} fixedWidth /></InputGroup.Text>
-          <Form.Control
+          <InputGroupText><FontAwesomeIcon icon={faUser} fixedWidth /></InputGroupText>
+          <FormControl
             name="username"
             required
             disabled={submitting}
@@ -62,10 +63,10 @@ export default function Register() {
         </InputGroup>
 
         <InputGroup className="mb-3">
-          <InputGroup.Text>
+          <InputGroupText>
             <FontAwesomeIcon icon={faEnvelope} fixedWidth />
-          </InputGroup.Text>
-          <Form.Control
+          </InputGroupText>
+          <FormControl
             type="email"
             name="email"
             required
@@ -76,8 +77,8 @@ export default function Register() {
         </InputGroup>
 
         <InputGroup className="mb-3">
-          <InputGroup.Text><FontAwesomeIcon icon={faLock} fixedWidth /></InputGroup.Text>
-          <Form.Control
+          <InputGroupText><FontAwesomeIcon icon={faLock} fixedWidth /></InputGroupText>
+          <FormControl
             type="password"
             name="password"
             required
@@ -88,8 +89,8 @@ export default function Register() {
         </InputGroup>
 
         <InputGroup className="mb-3">
-          <InputGroup.Text><FontAwesomeIcon icon={faLock} fixedWidth /></InputGroup.Text>
-          <Form.Control
+          <InputGroupText><FontAwesomeIcon icon={faLock} fixedWidth /></InputGroupText>
+          <FormControl
             type="password"
             name="password_repeat"
             required