Client - display if registration is disabled

fittrackee_client/src/components/Common/AlertMessage.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="alert-message">
+    <div v-html="t(message)" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  export default defineComponent({
+    name: 'AlertMessage',
+    props: {
+      message: String,
+    },
+    setup() {
+      const { t } = useI18n()
+      return {
+        t,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  @import '~@/scss/base';
+  .alert-message {
+    background: var(--alert-background-color);
+    color: var(--alert-color);
+
+    border-radius: 4px;
+
+    margin: $default-margin;
+    padding: $default-padding;
+  }
+</style>

fittrackee_client/src/components/User/LoginOrRegisterForm.vue

@@ -1,18 +1,25 @@
 <template>
   <div id="login-or-register-form">
     <div id="user-form">
-      <div class="form-box">
+      <div
+        class="form-box"
+        :class="{
+          disabled: registration_disabled,
+        }"
+      >
         <form @submit.prevent="onSubmit(action)">
           <div class="form-items">
             <input
               v-if="action === 'register'"
               id="username"
+              :disabled="registration_disabled"
               required
               v-model="formData.username"
               :placeholder="t('user.USERNAME')"
             />
             <input
               id="email"
+              :disabled="registration_disabled"
               required
               type="email"
               v-model="formData.email"
@@ -20,6 +27,7 @@
             />
             <input
               id="password"
+              :disabled="registration_disabled"
               required
               type="password"
               v-model="formData.password"
@@ -28,15 +36,22 @@
             <input
               v-if="action === 'register'"
               id="confirm-password"
+              :disabled="registration_disabled"
               type="password"
               required
               v-model="formData.password_conf"
               :placeholder="t('user.PASSWORD-CONFIRM')"
             />
           </div>
-          <button type="submit">{{ t(buttonText) }}</button>
+          <button type="submit" :disabled="registration_disabled">
+            {{ t(buttonText) }}
+          </button>
         </form>
         <ErrorMessage :message="errorMessages" v-if="errorMessages" />
+        <AlertMessage
+          message="user.REGISTER_DISABLED"
+          v-if="registration_disabled"
+        />
       </div>
     </div>
   </div>
@@ -49,12 +64,16 @@
 
   import { IFormData } from '@/interfaces'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { IAppConfig } from '@/store/modules/root/interfaces'
   import { useStore } from '@/use/useStore'
+  import AlertMessage from '@/components/Common/AlertMessage.vue'
   import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+  import router from '@/router'
 
   export default defineComponent({
     name: 'LoginOrRegisterForm',
     components: {
+      AlertMessage,
       ErrorMessage,
     },
     props: {
@@ -80,6 +99,14 @@
       const errorMessages: ComputedRef<string | string[] | null> = computed(
         () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
       )
+      const appConfig: ComputedRef<IAppConfig> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
+      )
+      const registration_disabled: ComputedRef<boolean> = computed(
+        () =>
+          props.action === 'register' &&
+          !appConfig.value.is_registration_enabled
+      )
 
       function onSubmit(actionType: string) {
         return store.dispatch(USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
@@ -102,10 +129,13 @@
       )
       return {
         t,
+        appConfig,
         buttonText,
         errorMessages,
         formData,
         onSubmit,
+        registration_disabled,
+        router,
       }
     },
   })

fittrackee_client/src/locales/en/user.json

@@ -6,5 +6,6 @@
   "PASSWORD": "Password",
   "PASSWORD-CONFIRM": "Confirm Password",
   "REGISTER": "Register",
+  "REGISTER_DISABLED": "Sorry, registration is disabled.",
   "USERNAME": "Username"
 }

fittrackee_client/src/locales/fr/user.json

@@ -7,5 +7,6 @@
   "PASSWORD": "Mot de passe",
   "PASSWORD-CONFIRM": "Confirmation du mot de passe",
   "REGISTER": "S'inscrire",
+  "REGISTER_DISABLED": "Désolé, les inscriptions sont désactivées.",
   "USERNAME": "Nom d'utilisateur"
 }

fittrackee_client/src/scss/base.scss

@@ -26,6 +26,11 @@ a {
 input {
   border-radius: 0;
   border: solid 1px var(--input-border-color);
+
+  &:disabled {
+    border-color: var(--disabled-color);
+  }
+
 }
 
 label {
@@ -45,10 +50,16 @@ button {
     color: #FFFFFF;
   }
 
-  &:active {
+  &:enabled:active {
     box-shadow: 2px 0 2px var(--app-shadow-color);
     transform: translateY(2px);
   }
+
+  &:disabled {
+    background: var(--disabled-background-color);
+    border-color: var(--disabled-color);
+    color: var(--disabled-color);
+  }
 }
 
 .container {

fittrackee_client/src/scss/colors.scss

@@ -16,7 +16,13 @@
   --footer-border-color: #ebeef3;
   --footer-color: #8b8c8c;
 
+  --alert-background-color: #c8cdd3;
+  --alert-color: #3f3f3f;
+
   --error-background-color: #ffd2d2;
   --error-color: #db1924;
 
+  --disabled-background-color: #e0e0e0;
+  --disabled-color: #a3a3a3;
+
 }