From 5afaccd676703fb074de12403f9d5ab4c09ba0fc Mon Sep 17 00:00:00 2001 From: Bartjan Henkemans Date: Fri, 21 Jul 2023 20:59:36 +0200 Subject: [PATCH 1/5] Action is now optional in CardComponent.vue --- src/components/CardComponent.vue | 31 +++++++++++-------------------- 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/src/components/CardComponent.vue b/src/components/CardComponent.vue index d4e15e0e..6a2d3b7b 100644 --- a/src/components/CardComponent.vue +++ b/src/components/CardComponent.vue @@ -1,10 +1,9 @@ @@ -23,7 +22,7 @@ const props = defineProps({ }, action: { type: String, - required: true, + required: false, }, func: { type: Function, @@ -49,20 +48,15 @@ const handleClick = () => { } #bottom-left-button { width: 100%; - position: absolute; - left: 0; - bottom: 0; color: #d40000!important; background-color: #f2f2f2; - border-top: none; - padding: 1rem 1.25rem!important; + padding: 1rem 1.25rem; font-family: Lato,Arial,sans-serif!important; font-weight: 400; - border-color: #dee2e6; + border: none #dee2e6; } :deep(.p-panel-header) { - border-bottom: none!important; color: #d40000!important; font-family: Lato,Arial,sans-serif!important; font-weight: 400; @@ -73,17 +67,14 @@ const handleClick = () => { :deep(.p-panel-content) { background-color: #f8f8f8!important; - padding-left: 2rem!important; - padding-right: 2rem!important; - padding-bottom: 0!important; + padding: 1rem 2rem!important; } -.card { - color: #d40000!important; +:deep(.p-panel-footer) { + padding: 0!important; } -.wrapper { - margin-bottom: 4.75rem; +.card { + color: #d40000!important; } - From 57ac23a8ae8017014ea9adb7db026c56dbe6abd9 Mon Sep 17 00:00:00 2001 From: CodeNamedRobin Date: Sat, 22 Jul 2023 15:20:13 +0200 Subject: [PATCH 2/5] Started work on localization - Installed Vue-I18n - Set-up the localization - Replaced first hardcoded strings --- package.json | 1 + src/locales/en.json | 24 ++++++++++++++++++++++++ src/locales/index.ts | 9 +++++++++ src/locales/nl.json | 24 ++++++++++++++++++++++++ src/main.ts | 10 ++++++++++ src/views/LoginView.vue | 2 +- 6 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 src/locales/en.json create mode 100644 src/locales/index.ts create mode 100644 src/locales/nl.json diff --git a/package.json b/package.json index a8545589..fdbced42 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "stripe": "^12.14.0", "uuid": "^9.0.0", "vue": "^3.3.4", + "vue-i18n": "^9.2.2", "vue-router": "^4.2.2" }, "devDependencies": { diff --git a/src/locales/en.json b/src/locales/en.json new file mode 100644 index 00000000..7e427203 --- /dev/null +++ b/src/locales/en.json @@ -0,0 +1,24 @@ +{ + "login": { + "SudoSOS Login": "SudoSOS Login", + "Login via GEWIS": "Login via GEWIS", + "Login": "Login", + "Username": "Username", + "Enter username": "Enter username", + "Password": "Password", + "Enter password": "Enter password", + "Password reset": "Reset password (External accounts only)", + "Back to login": "Go back to login", + "Email": "Email", + "Enter email": "Enter email", + "Reset": "Reset password", + "Email sent": "If there exists an account on this email address, an email has been sent to {email} with instructions on how to reset your password.", + "Set new password": "Set new password", + "New password": "New password", + "Confirm password": "Confirm new password", + "Enter password again": "Enter password again", + "Reset the password for": "Reset the password for {email}", + "Passwords not equal": "Passwords are not equal", + "Password not strong": "Password needs to be longer than 8 characters and needs a lower- and uppercase letter, number and a special character" + } +} diff --git a/src/locales/index.ts b/src/locales/index.ts new file mode 100644 index 00000000..98146425 --- /dev/null +++ b/src/locales/index.ts @@ -0,0 +1,9 @@ +import English from '@/locales/en.json'; +import Dutch from '@/locales/nl.json'; + +const languages = { + en: English, + nl: Dutch, +}; + +export default languages; diff --git a/src/locales/nl.json b/src/locales/nl.json new file mode 100644 index 00000000..7e427203 --- /dev/null +++ b/src/locales/nl.json @@ -0,0 +1,24 @@ +{ + "login": { + "SudoSOS Login": "SudoSOS Login", + "Login via GEWIS": "Login via GEWIS", + "Login": "Login", + "Username": "Username", + "Enter username": "Enter username", + "Password": "Password", + "Enter password": "Enter password", + "Password reset": "Reset password (External accounts only)", + "Back to login": "Go back to login", + "Email": "Email", + "Enter email": "Enter email", + "Reset": "Reset password", + "Email sent": "If there exists an account on this email address, an email has been sent to {email} with instructions on how to reset your password.", + "Set new password": "Set new password", + "New password": "New password", + "Confirm password": "Confirm new password", + "Enter password again": "Enter password again", + "Reset the password for": "Reset the password for {email}", + "Passwords not equal": "Passwords are not equal", + "Password not strong": "Password needs to be longer than 8 characters and needs a lower- and uppercase letter, number and a special character" + } +} diff --git a/src/main.ts b/src/main.ts index ace115b7..357e06a6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,6 +2,7 @@ import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' +import { createI18n } from 'vue-i18n'; import App from './App.vue' import router from './router' @@ -15,12 +16,20 @@ import DataTable from "primevue/datatable"; import InputNumber from "primevue/inputnumber"; import Dialog from "primevue/dialog"; import 'primeicons/primeicons.css'; +import languages from "@/locales"; const app = createApp(App) +const messages = Object.assign(languages); +const i18n = createI18n({ + locale: 'en', + fallbackLocale: 'en', + messages, +}); app.use(createPinia()) app.use(router) app.use(PrimeVue) +app.use(i18n); app.component('Button', Button); app.component('InputText', InputText); @@ -29,4 +38,5 @@ app.component('Panel', Panel); app.component('DataTable', DataTable); app.component('InputNumber', InputNumber); app.component('Dialog', Dialog); + app.mount('#app') diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index 43a5eaa1..1d7c6b31 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -2,7 +2,7 @@
logo -

SudoSOS Login

+

{{ $t('login.SudoSOS Login' )}}

From 92b092514bf7804121f02594dd6e884aa083687d Mon Sep 17 00:00:00 2001 From: CodeNamedRobin Date: Sat, 22 Jul 2023 15:34:28 +0200 Subject: [PATCH 3/5] Localization for LoginView - Also deleted some unused code - Tried to implement warnings for hardcoded strings --- .eslintrc.cjs | 3 ++ src/components/HelloWorld.vue | 41 ----------------- src/components/TheWelcome.vue | 86 ----------------------------------- src/views/AboutView.vue | 15 ------ src/views/LoginView.vue | 16 ++++--- 5 files changed, 12 insertions(+), 149 deletions(-) delete mode 100644 src/components/HelloWorld.vue delete mode 100644 src/components/TheWelcome.vue delete mode 100644 src/views/AboutView.vue diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 6f40582d..3e208e6a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -11,5 +11,8 @@ module.exports = { ], parserOptions: { ecmaVersion: 'latest' + }, + rules: { + 'vue/no-literal-string': 'warn', } } diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 38d821ef..00000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index a70765c2..00000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index 1d7c6b31..282b9cac 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -3,14 +3,16 @@
logo

{{ $t('login.SudoSOS Login' )}}

- +
- - - - - - Reset password (External accounts only) + + + + + + {{$t('login.Password reset')}}
From cc1e9600bc0c2cfd7c13ea3d89f2eca42f59a360 Mon Sep 17 00:00:00 2001 From: CodeNamedRobin Date: Sun, 23 Jul 2023 12:42:13 +0200 Subject: [PATCH 4/5] Dismissed undefined rule in lintr --- .eslintrc.cjs | 3 --- 1 file changed, 3 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3e208e6a..3aa42f8a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -12,7 +12,4 @@ module.exports = { parserOptions: { ecmaVersion: 'latest' }, - rules: { - 'vue/no-literal-string': 'warn', - } } From cffc00058325ce11593de77c566dffe6a7e070a6 Mon Sep 17 00:00:00 2001 From: CodeNamedRobin Date: Mon, 24 Jul 2023 15:10:00 +0200 Subject: [PATCH 5/5] Created date formatter utility - yay --- src/utils/formatterUtils.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/utils/formatterUtils.ts diff --git a/src/utils/formatterUtils.ts b/src/utils/formatterUtils.ts new file mode 100644 index 00000000..52658075 --- /dev/null +++ b/src/utils/formatterUtils.ts @@ -0,0 +1,18 @@ +export function formatDateTime(date: Date): string { + + const daysOfWeek: Array = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday" + ] + + const day = date.getDate().toString(); + const monthIndex = date.getMonth().toString(); + const year = date.getFullYear().toString(); + const dayOfWeek = daysOfWeek[date.getDay()]; + return `${day}-${monthIndex}-${year} (${dayOfWeek})`; +}