Merge branch 'main' into feature/small-fixes

.eslintrc.cjs

@@ -11,5 +11,5 @@ module.exports = {
   ],
   parserOptions: {
     ecmaVersion: 'latest'
-  }
+  },
 }

package.json

@@ -26,6 +26,7 @@
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
     "yup": "^1.2.0"
+    "vue-i18n": "^9.2.2",
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

src/components/CardComponent.vue

@@ -1,10 +1,9 @@
 <template>
   <Panel :header="header.toUpperCase()" class="card">
-    <div class="wrapper">
-      <slot/>
+    <slot />
+    <template v-if="action" #footer>
       <Button severity="secondary" id="bottom-left-button" @click="handleClick">{{ action.toUpperCase() }}</Button>
-    </div>
-
+    </template>
   </Panel>
 </template>
 
@@ -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;
 }
-
 </style>

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"
+  }
+}

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;

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"
+  }
+}

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')

src/utils/formatterUtils.ts

@@ -0,0 +1,18 @@
+export function formatDateTime(date: Date): string {
+
+    const daysOfWeek: Array<string> = [
+        "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})`;
+}

src/views/LoginView.vue

@@ -2,18 +2,20 @@
 <div>
   <main>
     <img id="login-image" src="../assets/img/bier.png" alt="logo">
-    <h1>SudoSOS Login</h1>
-    <Button id="login-gewis-button" @click="loginViaGEWIS" severity="success"><img id="gewis-branding" src="../assets/img/gewis-branding.svg" alt="GEWIS">Login via GEWIS</Button>
+    <h1>{{ $t('login.SudoSOS Login' )}}</h1>
+    <Button id="login-gewis-button" @click="loginViaGEWIS" severity="success"><img id="gewis-branding" src="../assets/img/gewis-branding.svg" alt="GEWIS">{{
+        $t('login.Login via GEWIS')
+      }}</Button>
     <hr>
     <form id="login-form" @submit="ldapLogin">
-<!--      TODO: Form validation with vee-validate -->
-      <label for="username">Username</label>
-      <InputText id="username" type="text" v-bind="username" placeholder="Enter username"/>
-      <label for="password">Password</label>
-      <InputText id="password" type="password" v-bind="password" placeholder="Enter password" />
-      <Button type="submit" id="login-button" severity="danger">Login</Button>
+      <!--      TODO: Form validation with vee-validate -->
+      <label for="username">{{$t('login.Username')}}</label>
+      <InputText id="username" type="text" v-bind="username" :placeholder="$t('login.Enter username')"/>
+      <label for="password">{{$t('login.Password')}}</label>
+      <InputText id="password" type="password" v-bind="password" :placeholder="$t('login.Enter password')" />
+      <Button type="submit" id="login-button" severity="danger">{{$t('login.Login')}}</Button>
+      <a href="https://wieditleesttrekteenbak.nl/">{{$t('login.Password reset')}}</a>
     </form>
-    <a href="https://wieditleesttrekteenbak.nl/">Reset password (External accounts only)</a>
   </main>
   <CopyrightBanner />
 </div>