Skip to content

Commit 3034b8a

Browse files
fiftinfiftin
committed
feat(auth): change login form layout
1 parent 3775845 commit 3034b8a

File tree

1 file changed

+113
-101
lines changed

1 file changed

+113
-101
lines changed

‎web/src/views/Auth.vue

+113-101
Original file line numberDiff line numberDiff line change
@@ -73,115 +73,121 @@
7373
justify-center
7474
class="pa-0"
7575
>
76-
<v-form
77-
ref="signInForm"
78-
lazy-validation
79-
v-model="signInFormValid"
80-
style="width: 300px;"
81-
>
82-
83-
<v-img
84-
width="80"
85-
height="80"
86-
transition="0"
87-
src="favicon.png"
88-
style="margin: auto;"
89-
class="mb-4"
90-
/>
91-
92-
<h3 class="text-center mb-8">{{ $t('semaphore') }}</h3>
93-
94-
<h3 v-if="verification" class="text-center mb-3 mt-0">Two-step verification</h3>
95-
96-
<v-alert
97-
:value="signInError != null"
98-
color="error"
99-
style="margin-bottom: 20px;"
100-
>{{ signInError }}
101-
</v-alert>
102-
103-
<div v-if="verification">
104-
105-
<div class="text-center mb-2">
106-
Open the two-step verification app on your mobile device to get your verification code.
107-
</div>
108-
<v-otp-input
109-
v-model="verificationCode"
110-
length="6"
111-
@finish="verify()"
112-
></v-otp-input>
113-
114-
<v-divider class="my-6" />
115-
116-
<div class="text-center">
117-
<a @click="signOut()">{{ $t('Return to login') }}</a>
118-
</div>
119-
</div>
120-
121-
<div v-else>
122-
<v-text-field
123-
v-model="username"
124-
v-bind:label='$t("username")'
125-
:rules="[v => !!v || $t('username_required')]"
126-
required
127-
:disabled="signInProcess"
128-
v-if="loginWithPassword"
129-
></v-text-field>
130-
131-
<v-text-field
132-
v-model="password"
133-
:label="$t('password')"
134-
:rules="[v => !!v || $t('password_required')]"
135-
type="password"
136-
required
137-
:disabled="signInProcess"
138-
@keyup.enter.native="signIn"
139-
style="margin-bottom: 20px;"
140-
v-if="loginWithPassword"
141-
></v-text-field>
142-
143-
<v-btn
144-
color="primary"
145-
@click="signIn"
146-
:disabled="signInProcess"
147-
block
148-
v-if="loginWithPassword"
149-
>
150-
{{ $t('signIn') }}
151-
</v-btn>
152-
153-
<v-btn
154-
v-for="provider in oidcProviders"
155-
:color="provider.color || 'secondary'"
156-
dark
157-
class="mt-2"
158-
@click="oidcSignIn(provider.id)"
159-
block
160-
:key="provider.id"
76+
<v-card class="px-5 py-3" style="margin-bottom: 10%;">
77+
<v-card-text>
78+
<v-form
79+
ref="signInForm"
80+
lazy-validation
81+
v-model="signInFormValid"
82+
style="width: 300px;"
16183
>
162-
<v-icon
163-
left
164-
dark
165-
v-if="provider.icon"
166-
>
167-
mdi-{{ provider.icon }}
168-
</v-icon>
169-
170-
{{ provider.name }}
171-
</v-btn>
172-
173-
<div class="text-center mt-6" v-if="loginWithPassword">
174-
<a @click="loginHelpDialog = true">{{ $t('dontHaveAccountOrCantSignIn') }}</a>
175-
</div>
17684

177-
</div>
85+
<v-img
86+
width="80"
87+
height="80"
88+
transition="0"
89+
src="favicon.png"
90+
style="margin: auto;"
91+
class="mb-4"
92+
/>
93+
94+
<h2 class="text-center pt-6 pb-4">
95+
{{ verification ? 'Two-step verification' : 'Log in to your account' }}
96+
</h2>
97+
98+
<v-alert
99+
:value="signInError != null"
100+
color="error"
101+
style="margin-bottom: 20px;"
102+
>{{ signInError }}
103+
</v-alert>
104+
105+
<div v-if="verification">
106+
107+
<div class="text-center mb-2">
108+
Open the two-step verification app on your mobile device to
109+
get your verification code.
110+
</div>
111+
<v-otp-input
112+
v-model="verificationCode"
113+
length="6"
114+
@finish="verify()"
115+
></v-otp-input>
116+
117+
<v-divider class="my-6" />
118+
119+
<div class="text-center">
120+
<a @click="signOut()">{{ $t('Return to login') }}</a>
121+
</div>
122+
</div>
123+
124+
<div v-else>
125+
<v-text-field
126+
v-model="username"
127+
v-bind:label='$t("username")'
128+
:rules="[v => !!v || $t('username_required')]"
129+
required
130+
:disabled="signInProcess"
131+
v-if="loginWithPassword"
132+
></v-text-field>
133+
134+
<v-text-field
135+
v-model="password"
136+
:label="$t('password')"
137+
:rules="[v => !!v || $t('password_required')]"
138+
type="password"
139+
required
140+
:disabled="signInProcess"
141+
@keyup.enter.native="signIn"
142+
style="margin-bottom: 20px;"
143+
v-if="loginWithPassword"
144+
></v-text-field>
145+
146+
<v-btn
147+
color="primary"
148+
@click="signIn"
149+
:disabled="signInProcess"
150+
block
151+
v-if="loginWithPassword"
152+
>
153+
{{ $t('signIn') }}
154+
</v-btn>
155+
156+
<v-btn
157+
v-for="provider in oidcProviders"
158+
:color="provider.color || 'secondary'"
159+
dark
160+
class="mt-2"
161+
@click="oidcSignIn(provider.id)"
162+
block
163+
:key="provider.id"
164+
>
165+
<v-icon
166+
left
167+
dark
168+
v-if="provider.icon"
169+
>
170+
mdi-{{ provider.icon }}
171+
</v-icon>
172+
173+
{{ provider.name }}
174+
</v-btn>
175+
176+
<div class="text-center mt-6" v-if="loginWithPassword">
177+
<a @click="loginHelpDialog = true">{{ $t('dontHaveAccountOrCantSignIn') }}</a>
178+
</div>
179+
180+
</div>
178181
</v-form>
182+
</v-card-text>
183+
</v-card>
179184
</v-container>
180185
</div>
181186
</template>
182187
<style lang="scss">
183188
.auth {
184189
height: 100vh;
190+
background: #80808024;
185191
}
186192
</style>
187193
<script>
@@ -342,7 +348,13 @@ export default {
342348
},
343349
344350
async oidcSignIn(provider) {
345-
document.location = `${document.baseURI}api/auth/oidc/${provider}/login`;
351+
let query = '';
352+
353+
if (this.$route.query.new_project === 'premium') {
354+
query = '?redirect=/project/premium';
355+
}
356+
357+
document.location = `${document.baseURI}api/auth/oidc/${provider}/login${query}`;
346358
},
347359
},
348360
};

0 commit comments

Comments
 (0)