Init Commit

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+      "@next/next/no-img-element": "off"
+  }
+}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierignore

@@ -0,0 +1,10 @@
+# Ignore artifacts:
+build
+coverage
+dist
+out
+public
+styles
+node_modules
+.next
+.vscode

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+    "useTabs": false,
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 250,
+    "bracketSameLine": false
+}

CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+## 10.1.0
+
+-   Update to PrimeReact 10.2.1
+
+## 10.0.0
+
+-   Upgrade to Next 13.4.8
+-   Migrate to Next App Roter
+-   Migrate to PrimeReactContext
+-   Update to PrimeReact 9.6.2
+-   Update other dependencies
+
+## 9.1.2
+
+-   Refactored project files
+
+## 9.1.1
+
+-   Fixed hydration warnings
+
+## 9.1.0
+
+-   Add typescript support
+
+## 9.0.0
+
+-   Upgrade PrimeReact to v9
+-   Upgrade to PrimeReact 9.2.2
+-   Upgrade to PrimeFlex 3.3.0
+-   Upgrade to Next 13.2.3
+-   Update other dependencies
+
+## 8.1.0
+
+-   Migrate CRA to NextJS

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-2022 PrimeTek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,24 @@
-# quemistry_client_web
-Client web application on react next js
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

app/(full-page)/auth/access/page.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { Button } from 'primereact/button';
+
+const AccessDeniedPage = () => {
+    const router = useRouter();
+
+    return (
+        <div className="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+            <div className="flex flex-column align-items-center justify-content-center">
+                <img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0" />
+                <div
+                    style={{
+                        borderRadius: '56px',
+                        padding: '0.3rem',
+                        background: 'linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)'
+                    }}
+                >
+                    <div className="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style={{ borderRadius: '53px' }}>
+                        <div className="flex justify-content-center align-items-center bg-pink-500 border-circle" style={{ height: '3.2rem', width: '3.2rem' }}>
+                            <i className="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
+                        </div>
+                        <h1 className="text-900 font-bold text-5xl mb-2">Access Denied</h1>
+                        <div className="text-600 mb-5">You do not have the necessary permisions.</div>
+                        <img src="/demo/images/access/asset-access.svg" alt="Error" className="mb-5" width="80%" />
+                        <Button icon="pi pi-arrow-left" label="Go to Dashboard" text onClick={() => router.push('/')} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AccessDeniedPage;

app/(full-page)/auth/error/page.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { Button } from 'primereact/button';
+
+const ErrorPage = () => {
+    const router = useRouter();
+
+    return (
+        <div className="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+            <div className="flex flex-column align-items-center justify-content-center">
+                <img src="/demo/images/error/logo-error.svg" alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0" />
+                <div
+                    style={{
+                        borderRadius: '56px',
+                        padding: '0.3rem',
+                        background: 'linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)'
+                    }}
+                >
+                    <div className="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style={{ borderRadius: '53px' }}>
+                        <div className="flex justify-content-center align-items-center bg-pink-500 border-circle" style={{ height: '3.2rem', width: '3.2rem' }}>
+                            <i className="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
+                        </div>
+                        <h1 className="text-900 font-bold text-5xl mb-2">Error Occured</h1>
+                        <div className="text-600 mb-5">Something went wrong.</div>
+                        <img src="/demo/images/error/asset-error.svg" alt="Error" className="mb-5" width="80%" />
+                        <Button icon="pi pi-arrow-left" label="Go to Dashboard" text onClick={() => router.push('/')} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ErrorPage;

app/(full-page)/auth/login/page.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+import { useRouter } from 'next/navigation';
+import React, { useContext, useState } from 'react';
+import { Checkbox } from 'primereact/checkbox';
+import { Button } from 'primereact/button';
+import { Password } from 'primereact/password';
+import { LayoutContext } from '../../../../layout/context/layoutcontext';
+import { InputText } from 'primereact/inputtext';
+import { classNames } from 'primereact/utils';
+
+const LoginPage = () => {
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState(false);
+    const { layoutConfig } = useContext(LayoutContext);
+
+    const router = useRouter();
+    const containerClassName = classNames('surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden', { 'p-input-filled': layoutConfig.inputStyle === 'filled' });
+
+    return (
+        <div className={containerClassName}>
+            <div className="flex flex-column align-items-center justify-content-center">
+                <img src={`/layout/images/logo-${layoutConfig.colorScheme === 'light' ? 'dark' : 'white'}.svg`} alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0" />
+                <div
+                    style={{
+                        borderRadius: '56px',
+                        padding: '0.3rem',
+                        background: 'linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)'
+                    }}
+                >
+                    <div className="w-full surface-card py-8 px-5 sm:px-8" style={{ borderRadius: '53px' }}>
+                        <div className="text-center mb-5">
+                            <img src="/demo/images/login/avatar.png" alt="Image" height="50" className="mb-3" />
+                            <div className="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
+                            <span className="text-600 font-medium">Sign in to continue</span>
+                        </div>
+
+                        <div>
+                            <label htmlFor="email1" className="block text-900 text-xl font-medium mb-2">
+                                Email
+                            </label>
+                            <InputText id="email1" type="text" placeholder="Email address" className="w-full md:w-30rem mb-5" style={{ padding: '1rem' }} />
+
+                            <label htmlFor="password1" className="block text-900 font-medium text-xl mb-2">
+                                Password
+                            </label>
+                            <Password inputId="password1" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" toggleMask className="w-full mb-5" inputClassName="w-full p-3 md:w-30rem"></Password>
+
+                            <div className="flex align-items-center justify-content-between mb-5 gap-5">
+                                <div className="flex align-items-center">
+                                    <Checkbox inputId="rememberme1" checked={checked} onChange={(e) => setChecked(e.checked ?? false)} className="mr-2"></Checkbox>
+                                    <label htmlFor="rememberme1">Remember me</label>
+                                </div>
+                                <a className="font-medium no-underline ml-2 text-right cursor-pointer" style={{ color: 'var(--primary-color)' }}>
+                                    Forgot password?
+                                </a>
+                            </div>
+                            <Button label="Sign In" className="w-full p-3 text-xl" onClick={() => router.push('/')}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LoginPage;