<commit_before><template>
    <div id="dumonda-me-login">
        <div id="login-container">
            <h2>{{$t("pages:login.titleLogin")}}</h2>
            <div id="login-content-container">
                <v-form @submit.prevent="login" v-model="valid" ref="form">
                    <p class="login-error" v-if="formError && !loading">{{$t('pages:login.invalidLoginData')}}</p>
                    <v-text-field type="text" v-model="formUsername" name="username"
                                  :label="$t('common:email')"
                                  :rules="[ruleFieldRequired($t('validation:fieldRequired')),
                                           ruleIsEmail($t('validation:isEmail')),
                                           ruleToManyChars($t('validation:toManyChars'), 255)]"
                                  class="input-group--focused">
                    </v-text-field>
                    <v-text-field type="password" v-model="formPassword" name="password"
                                  :label="$t('common:password')"
                                  :rules="[ruleFieldRequired($t('validation:fieldRequired')),
                                           ruleToManyChars($t('validation:toManyChars'), 55)]">
                    </v-text-field>
                    <v-btn color="primary" type="submit" id="login-button"
                           :loading="loading"
                           :disabled="loading || !valid">
                        {{$t("pages:login.loginButton")}}
                    </v-btn>
                </v-form>
                <nuxt-link class="password-reset" to="/login/passwordResetRequest">{{$t('pages:login.passwordReset')}}
                </nuxt-link>
            </div>
        </div>
    </div>
</template>

<script>
    import validationRules from '~/mixins/validationRules.js';

    export default {
        props: ['email', 'fromRoute'],
        data() {
            return {
                valid: false,
                formError: null,
                loading: false,
                formUsername: this.email,
                formPassword: ''
            }
        },
        mixins: [validationRules],
        methods: {
            async login() {
                this.loading = true;
                try {
                    await this.$store.dispatch('auth/login', {
                        username: this.formUsername,
                        password: <PASSWORD>
                    });
                    this.$store.dispatch('notification/startCheckNotificationChanged');
                    this.$store.commit('feedFilter/SET_MAIN_FILTER', 'activity');
                    if (!this.fromRoute || this.fromRoute.name === null ||
                        this.fromRoute.name === 'login-passwordReset') {
                        this.$router.replace({name: 'index'});
                    } else {
                        this.$router.go(-1);
                    }
                } catch (e) {
                    this.loading = false;
                    this.formError = e.message;
                }
            }
        }
    }
</script>

<style lang="scss">
    #dumonda-me-login {
        #login-container {
            width: 300px;
            margin: 24px auto 0 auto;

            @media screen and (min-width: $sm) {
                background-color: white;
                border-radius: 6px;
                border: 1px solid #e0e0e0;
                width: 320px;<commit_msg>Added autocomplete attribute.<commit_after><template>
    <div id="dumonda-me-login">
        <div id="login-container">
            <h2>{{$t("pages:login.titleLogin")}}</h2>
            <div id="login-content-container">
                <v-form @submit.prevent="login" v-model="valid" ref="form">
                    <p class="login-error" v-if="formError && !loading">{{$t('pages:login.invalidLoginData')}}</p>
                    <v-text-field type="text" v-model="formUsername" name="username" autocomplete="username"
                                  :label="$t('common:email')"
                                  :rules="[ruleFieldRequired($t('validation:fieldRequired')),
                                           ruleIsEmail($t('validation:isEmail')),
                                           ruleToManyChars($t('validation:toManyChars'), 255)]"
                                  class="input-group--focused">
                    </v-text-field>
                    <v-text-field type="password" v-model="formPassword" name="password" autocomplete="current-password"
                                  :label="$t('common:password')"
                                  :rules="[ruleFieldRequired($t('validation:fieldRequired')),
                                           ruleToManyChars($t('validation:toManyChars'), 55)]">
                    </v-text-field>
                    <v-btn color="primary" type="submit" id="login-button"
                           :loading="loading"
                           :disabled="loading || !valid">
                        {{$t("pages:login.loginButton")}}
                    </v-btn>
                </v-form>
                <nuxt-link class="password-reset" to="/login/passwordResetRequest">{{$t('pages:login.passwordReset')}}
                </nuxt-link>
            </div>
        </div>
    </div>
</template>

<script>
    import validationRules from '~/mixins/validationRules.js';

    export default {
        props: ['email', 'fromRoute'],
        data() {
            return {
                valid: false,
                formError: null,
                loading: false,
                formUsername: this.email,
                formPassword: ''
            }
        },
        mixins: [validationRules],
        methods: {
            async login() {
                this.loading = true;
                try {
                    await this.$store.dispatch('auth/login', {
                        username: this.formUsername,
                        password: <PASSWORD>
                    });
                    this.$store.dispatch('notification/startCheckNotificationChanged');
                    this.$store.commit('feedFilter/SET_MAIN_FILTER', 'activity');
                    if (!this.fromRoute || this.fromRoute.name === null ||
                        this.fromRoute.name === 'login-passwordReset' || this.fromRoute.name === 'commitment' ||
                        this.fromRoute.name === 'event') {
                        this.$router.replace({name: 'index'});
                    } else {
                        this.$router.go(-1);
                    }
                } catch (e) {
                    this.loading = false;
                    this.formError = e.message;
                }
            }
        }
    }
</script>

<style lang="scss">
    #dumonda-me-login {
        #login-container {
            width: 300px;
            margin: 24px auto 0 auto;

            @media screen and (min-width: $sm) {
                background-color: white;
                border-radius: 6px;
                border: 1px solid #e0e0e0;
                width: 320px;
{'fraction_non_alphanumeric': 0.13589779587252562, 'fraction_numerical': 0.006177172539660256, 'mean_word_length': 1.2537171781081937, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 22, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5378393', 'n_tokens_mistral': 1849, 'n_tokens_neox': 1703, 'n_words': 277}